Support » Theme: Spun » Custom Circles order

  • Resolved Xeniya

    (@chlamydia)


    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/

    Thanks!

    Xeniya

Viewing 15 replies - 1 through 15 (of 27 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@chlamydia)

    I followed your Guide: Create custom circles on the Home page] 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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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
    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
    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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
    2. Go to the “Custom Fields” part: http://snag.gy/Q9dXy.jpg
    3. Click on the “Create Custom Fields” button: http://snag.gy/PO7Qi.jpg
    4. Scroll down and select the “Text” field: 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

    Now edit your Custom Circle: 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

    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
    2. In your Child Theme “reorder-custom-circles.js” file add the code from this PasteBin page: 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
    Thread Starter Xeniya

    (@chlamydia)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    Thread Starter Xeniya

    (@chlamydia)

    Make sure your “content-custom-circles.php” file has all and only the code of this PasteBin page: 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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you create new threads to discuss your other issues?

    Thread Starter Xeniya

    (@chlamydia)

    Sure

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 – had you?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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#

    Thread Starter Xeniya

    (@chlamydia)

    Did it. Didn’t help. Still the same problem

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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
    3. In your Child Theme functions.php file just after this line:
      add_action( 'wp_enqueue_scripts', 'enqueueReorderCustomCircles' );

      Add the following code:

      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)
  • The topic ‘Custom Circles order’ is closed to new replies.