WordPress.org

Forums

Add ID selector for each menu item in the WP Menus panel (10 posts)

  1. Fandabydozy
    Member
    Posted 2 years ago #

    Is it possible to add an id tag for each menu item from within the WordPress 'Menus' panel. So it would be possible to go to "Appearance" -->"Menus" --> and then in the screen options panel have an extra checkbox for 'ID' to assign a unique id selector to each main menu item so it can be individually targeted via id=“myUniqueID”.

    I’ve included a visual of what I would like to achieve as far as the admin side goes, http://buildtest.co.uk/id-box.jpg.

    Thanks

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Why would you need that when WordPress already outputs unique classes on each menu item?

  3. Fandabydozy
    Member
    Posted 2 years ago #

    Because I'm trying to get a JQuery plugin, http://www.outyear.co.uk/smint/, to work and it requires both class and ID selectors on the menu links.

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    WordPress already does this by default. Check the generated source code of a custom menu.

  5. Fandabydozy
    Member
    Posted 2 years ago #

    Sorry I can't see that. I need to get the ID selector onto the <a> tag like this,

    <ul>
    <li><a href="#">Home</a> </li>
    <li><a href="#">What it does</a></li>
    <li><a href="#">How to use</a></li>
    <li><a href="#">Demo</a></li>
    </ul>

    WP, as is, will allow both id=" " and class=" " selectors onto the
    <ul> and <li> tags but only class=" " and rel=" " onto the final nav <a> links.

    [Moderator Note: Please post code & markup between backticks or use the code button. Post painfully re-constructed. Your posted code may now have been permanently damaged by the forum's parser.]

  6. Fandabydozy
    Member
    Posted 2 years ago #

    Sorry, like this,

    <ul>
    <li><a href="#" id="sTop" class="subNavBtn active">Home</a> </li>
    <li><a href="#" id="s1" class="subNavBtn">What it does</a></li>
    <li><a href="#" id="s2" class="subNavBtn">How to use</a></li>
    <li><a href="#" id="s3" class="subNavBtn">Demo</a></li>
    <li><a href="#" id="s4" class="subNavBtn">Download</a></li>
    <li><a href="#" id="s5" class="subNavBtn end">About Me</a></li>
    </ul>
  7. esmi
    Forum Moderator
    Posted 2 years ago #

    You could create your own custom walker function for this.

  8. Fandabydozy
    Member
    Posted 2 years ago #

    Hmmm, I could if I could. I'm not sure my skills go that far.

  9. bcworkz
    Member
    Posted 2 years ago #

    Walker functions are indeed an elegant, powerful solution, though admittedly an advanced coding concept. From the looks of things you can apply a more basic concept of using strpos() and substr_replace() to sequentially insert a unique ID attribute in each subsequent anchor tag.

    This can be done by hooking into the 'wp_nav_menu' filter and running a loop that keeps track of how far into the HTML string it is and what the next unique ID will be.

  10. m.sunspirit
    Member
    Posted 1 year ago #

    I found this thread because I was looking for a simple way to get google analytics to track visitor's movement through my site. . . GA requires unique ID's on each link for Enhanced Link Attribution:
    https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#enhancedlink

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.