Add ID selector for each menu item in the WP Menus panel

  • 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, https://buildtest.co.uk/id-box.jpg.

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)

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

    Thread Starter fandabydozy

    (@fandabydozy)

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

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

    Thread Starter fandabydozy

    (@fandabydozy)

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

    Thread Starter fandabydozy

    (@fandabydozy)

    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>

    You could create your own custom walker function for this.

    Thread Starter fandabydozy

    (@fandabydozy)

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

    Moderator bcworkz

    (@bcworkz)

    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.

    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Add ID selector for each menu item in the WP Menus panel’ is closed to new replies.