Support » Fixing WordPress » How to create data attribute containing post id in main nav?

  • kyllle

    (@kyllle)


    Hi all,

    Was wondering how I would go about adding a data attribute on to each of my main nav list items containing the post ID? Is there a param I can use?

    At the moment I’m using the following code:

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

    Which outputs li’s to look like:

    <li class="page_item page-item-4"><a href="#">Lunch Menu</a></li>

    Basically I would like them to look something like:

    <li class="page_item page-item-4" data-id="4"><a href="#">Lunch Menu</a></li>

    So I can access the ID in order to access the data for that post

Viewing 7 replies - 1 through 7 (of 7 total)
  • Rajesh Soni

    (@rajeshsoni)

    Sure, it’s possible using the $items_wrap optional parameter as explained here: http://codex.wordpress.org/Function_Reference/wp_nav_menu

    $items_wrap
    (string) (optional) Evaluated as the format string argument of a sprintf() expression. The format string incorporates the other parameters by numbered token. %1$s is expanded to the value of the ‘menu_id’ parameter, %2$s is expanded to the value of the ‘menu_class’ parameter, and %3$s is expanded to the value of the list items. If a numbered token is omitted from the format string, the related parameter is omitted from the menu markup.
    Default: <ul id="%1$s" class="%2$s">%3$s</ul>

    Thread Starter kyllle

    (@kyllle)

    Hey,

    Thanks for the reply! I’m not entirely sure how I modify the $items_wrap param to include that data attribute. Trying out a couple of different snippets never altered the outputted markup. Can you advise?

    Using <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'items_wrap' => '<ul class="test">%3$s</ul>' ) ); ?> as test for example doesn’t output .test anywhere?

    Rajesh Soni

    (@rajeshsoni)

    What do you get with this…

    wp_nav_menu( array( 'items_wrap' => '%3$s' ) );

    Thread Starter kyllle

    (@kyllle)

    Absolutely nothing, markup stays the same as before. What would you expect to happen there?

    Kyle

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the bigger picture, can you not use the ID that’s already appended to one of the classes?

    Thread Starter kyllle

    (@kyllle)

    Hey,

    Do you mean get the id from the page-item-{ID} class? I could certainly grab this number using javascript but surely there’s a way to output just that number somewhere to directly grab ?

    Rajesh Soni

    (@rajeshsoni)

    Are you sure the menus are being generated by the code that you are trying to modify?

    What happens if you comment / remove this entire line ? Do you still see the menu or does it disappear?

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'items_wrap' => '<ul class="test">%3$s</ul>' ) ); ?>

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to create data attribute containing post id in main nav?’ is closed to new replies.