Title: Custom Circles order Last modified: August 21, 2016 --- # Custom Circles order * Resolved [Xeniya](https://wordpress.org/support/users/chlamydia/) * (@chlamydia) * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/) * Hello everyone, * I’ve made the custom circles on my home page but they do not appear as my Menu. It’s important for me to have a strict order of the pages. * I am wondering how to change the order of the custom circles? I tried to create a special menu for them but it didn’t work out. Also, I tried to give order per page but it doesn’t work out as well. * Website: [http://www.girlsxchlamydia.nl/](http://www.girlsxchlamydia.nl/) * Thanks! * Xeniya Viewing 15 replies - 1 through 15 (of 27 total) 1 [2](https://wordpress.org/support/topic/custom-circles-order/page/2/?output_format=md) [→](https://wordpress.org/support/topic/custom-circles-order/page/2/?output_format=md) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489501) * > I’ve made the custom circles on my home page but they do not appear as my Menu. * What do you mean by “custom circles” and “menu”, for clarification? * Thread Starter [Xeniya](https://wordpress.org/support/users/chlamydia/) * (@chlamydia) * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489527) * I followed your [Guide: Create custom circles on the Home page](http://wordpress.org/support/topic/guide-create-custom-circles-on-home-page?replies=2)] and created custom circles on the Home page which direct to other pages when you click on them. * However, I’ve still the menu navigation.bar on the right top corner so the visitor can easily go to another page. * The custom circles (pages) on the Home page appear in different order than navigation menu. I would like to change that and put them in the order that I need. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489528) * I see, I’ll look at implementing this too. * If you need a quick fix for now you could re-order your navigation menu in the dashboard under Appearance > Menus. If you don’t have a custom menu there you can create one with the order you want. _[http://codex.wordpress.org/Appearance\_Menus\_Screen](http://codex.wordpress.org/Appearance_Menus_Screen)_ * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489531) * I made a mistake in **Stage 6 – Coding** and have amended it on the guide. * If you want to amend that for yourself you can follow this: 1. Copy “index.php” from the Spun Theme 2. Paste it into your Child Theme directory 3. Edit that “index.php” file now within your Child Theme directory 4. Replace all of its code with the code from this PasteBin page: [http://pastebin.com/kZZsZ3SA](http://pastebin.com/kZZsZ3SA) 5. Save that file 6. Create a new file called “content-custom-circles.php” in your Child Theme directory 7. Edit your “content-custom-circles.php” file and put into it all of the code from this PasteBin page: [http://pastebin.com/PDmBtvgC](http://pastebin.com/PDmBtvgC) 8. Save that file 9. Remove your “content-home.php” file that’s within your Child theme directory * Although that won’t directly relate to your re-ordering question, it’ll help me provide a solution as we’ll have the same code. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489532) * To re-order the Custom Circles you’ll need to do 3 more stages: - Stage 1 – Creating a new Custom Field - Stage 2 – Adding files and folders - Stage 3 – Coding * **Stage 1 – Creating a new Custom Field** 1. Go to the “Custom Content Types” section of the dashboard: [http://snag.gy/yAOan.jpg](http://snag.gy/yAOan.jpg) 2. Go to the “Custom Fields” part: [http://snag.gy/Q9dXy.jpg](http://snag.gy/Q9dXy.jpg) 3. Click on the “Create Custom Fields” button: [http://snag.gy/PO7Qi.jpg](http://snag.gy/PO7Qi.jpg) 4. Scroll down and select the “Text” field: [http://snag.gy/CBzlj.jpg](http://snag.gy/CBzlj.jpg) 5. In “**Label**” enter “Order” 6. In “**Name**” enter “order” 7. In the “Validation Rule” dropdown list under “**Validation** select “Number” 8. Tick the “custom_circles” checkbox underneath the “**Associations**” section 9. Save: [http://snag.gy/URiBy.jpg](http://snag.gy/URiBy.jpg) * Now edit your Custom Circle: [http://snag.gy/sR59E.jpg](http://snag.gy/sR59E.jpg) And there you’ll see your “Order” field, in which you can enter the order you want the circle to appear: [http://snag.gy/3lVMK.jpg](http://snag.gy/3lVMK.jpg) * **Stage 2 – Adding files and folders** Add the following to your Child Theme directory: - A “functions.php” file - A “js” **folder** - In that “js” folder create a file called “reorder-custom-circles.js” * **Stage 3 – Coding** Then enter into those files: 1. In your Child Theme “functions.php” file add all of the code from this PasteBin page: [http://pastebin.com/FMTwcBk4](http://pastebin.com/FMTwcBk4) 2. In your Child Theme “reorder-custom-circles.js” file add the code from this PasteBin page: [http://pastebin.com/5uwjAPy8](http://pastebin.com/5uwjAPy8) 3. In your Child Theme “content-custom-circles.php” file replace all of the code with the code from this PasteBin page: [http://pastebin.com/c8jrMkCa](http://pastebin.com/c8jrMkCa) * Thread Starter [Xeniya](https://wordpress.org/support/users/chlamydia/) * (@chlamydia) * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489545) * Hello Andrew, * Thanks for the help but now I have my recent posts on the Home page as well. I don’t want them to appear there 🙂 How to remove them from there? The page for my recent posts is News subpage under Action page. * If I create the Home page and change Settings – Reading – Front page displas from latest post to static then Custom circles move to News page and Home page is empty. * Also, I gave the order to custom circles but they appeared in the reverse way. So number 5 is 1st right now. I can solve it out by myself but just want to mention it 😉 * Last thing, the text (titles) don’t appear in the circles anymore. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489547) * > Also, I gave the order to custom circles but they appeared in the reverse way. > So number 5 is 1st right now. I can solve it out by myself but just want to > mention it 😉 * Make sure your “content-custom-circles.php” file has all and only the code of this PasteBin page: [http://pastebin.com/c8jrMkCa](http://pastebin.com/c8jrMkCa) * Thread Starter [Xeniya](https://wordpress.org/support/users/chlamydia/) * (@chlamydia) * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489548) * > Make sure your “content-custom-circles.php” file has all and only the code > of this PasteBin page: [http://pastebin.com/c8jrMkCa](http://pastebin.com/c8jrMkCa) * It has only the code from that PasteBin page but still the News page which should 5th is the 1st right now. * What about other questions? Is it possible to solve them out? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489549) * Can you create new threads to discuss your other issues? * Thread Starter [Xeniya](https://wordpress.org/support/users/chlamydia/) * (@chlamydia) * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489550) * Sure * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489553) * I think this is because I told you to remove the “content-home.php” file from your Child Theme. * I’m guessing you originally had followed this guide: [http://wordpress.org/support/topic/put-test-inside-images-on-home-page?replies=3](http://wordpress.org/support/topic/put-test-inside-images-on-home-page?replies=3)– had you? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489554) * > had you? * Assuming “Yes”: You need to recreate that “content-home.php” file in your Child Theme directory and put all of this code into it: [http://pastebin.com/5PzrWLC2#](http://pastebin.com/5PzrWLC2#) * Thread Starter [Xeniya](https://wordpress.org/support/users/chlamydia/) * (@chlamydia) * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489555) * Did it. Didn’t help. Still the same problem * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489557) * Can you replace all of the code in your **content-custom-circles.php** file with the code in this PasteBin page: [http://pastebin.com/zUeDEfGx](http://pastebin.com/zUeDEfGx) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/#post-4489558) * Then: 1. In your “js” folder of your Child Theme create a new file called “text-in-circles. js”. 2. Into that “text-in-circles.js” file add the code from this PasteBin page: [http://pastebin.com/knH83C5e](http://pastebin.com/knH83C5e) 3. In your Child Theme functions.php file just after this line: 4. ``` add_action( 'wp_enqueue_scripts', 'enqueueReorderCustomCircles' ); ``` 5. Add the following code: 6. ``` function textInCircles() { wp_enqueue_script( 'text-in-circles', get_stylesheet_directory_uri() . '/js/text-in-circles.js', '', '1.0', true ); } add_action( 'wp_enqueue_scripts', 'textInCircles' ); ``` Viewing 15 replies - 1 through 15 (of 27 total) 1 [2](https://wordpress.org/support/topic/custom-circles-order/page/2/?output_format=md) [→](https://wordpress.org/support/topic/custom-circles-order/page/2/?output_format=md) The topic ‘Custom Circles order’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/spun/2.0.2/screenshot.png) * Spun * [Support Threads](https://wordpress.org/support/theme/spun/) * [Active Topics](https://wordpress.org/support/theme/spun/active/) * [Unresolved Topics](https://wordpress.org/support/theme/spun/unresolved/) * [Reviews](https://wordpress.org/support/theme/spun/reviews/) ## Tags * [custom circles](https://wordpress.org/support/topic-tag/custom-circles/) * [order](https://wordpress.org/support/topic-tag/order/) * 27 replies * 2 participants * Last reply from: [Xeniya](https://wordpress.org/support/users/chlamydia/) * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/custom-circles-order/page/2/#post-4489572) * Status: resolved