wp_list_pages different id's for css styling?

  • Hi, I’m using wp_list_pages() and have a specific icon for each li. In css I have to use page-item-xx to style it. It would be much better to have id’s or classes like ‘about’ and ‘contact’ rather than ‘page-item-14’ and ‘page-item-12’.

    Here is the code I have.

    <ul>
<li id="home"><a href="#">home</a></li>
<?php wp_list_pages('&title_li=&include=14,12');?>
</ul>

    I tried the plugin classy-wp-list-pages which would be the solution except that it doesn’t work. It appears to be broken. I’ve tried the newest version and the previous version but it only adds a class to the first page link.

    Is there not a way to put this dynamically in the parameters of wp_list_pages() method?

    I tried this:

    <ul>
<li id="home"><a href="#">home</a></li>
<?php wp_list_pages('link_before=<span id='.get_the_title().'>&link_after=</span>&title_li=&include=14,12');?>
</ul>

    and it looks like I’m getting somewhere but the output is applied to a span inside the anchor this way and it strangely outputs

    <span id="My" post="" third="">About</span>

    So does anyone know of a way to put the class or id into the li based on the title of the page so it would have an id of ‘about’ or ‘contact’? Or another way to apply a different icon for each li?

    Thanks

Viewing 1 replies (of 1 total)
  • Thread Starter iansane

    (@iansane)

    I found another solution. I went to admin->appearance->menus and then in the top-right corner ‘screen options’ under ‘Show advanced menu properties’ I checked the ‘CSS class’ checkbox.

    Now in the menus section of the dashboard I created a custom menu and each menu item has a place to add a class so I gave a class to each one (home, about, contact).

    Then looking through the codex figured out how to register a menu in functions.php

    function register_my_menus() {
  register_nav_menus(
    array('header-menu' => __( 'Header Menu' ) )
  );
}
add_action( 'init', 'register_my_menus' );

    and then added that menu in the header using wp_nav_menu() in place of wp_list_pages().

    <?php wp_nav_menu();?>

    Now in css I just styled for ‘#menu-mymenu li.about’ because ‘mymenu’ is what I called the custom menu, and it’s easy as pie to give specific styling to each menu item now.

    This resolves my issue but it would still be nice to know if there are parameters for adding class or id to the wp_list_pages method or should I just forget it and always use wp_nav_menu like I did?

Viewing 1 replies (of 1 total)
  • The topic ‘wp_list_pages different id's for css styling?’ is closed to new replies.