Add class to link in wp_list_pages

0 Views

I’m trying to create a hover-effect on a list-item within the wp_list_pages() function. I’m creating a theme for WordPress, but can’t seem to get the hover effect working. I’m pretty new at this, so bear with me.

My css looks like this:

Read More
a.nav:hover { color: yellow; }

So for my html-code I add the “nav”-class to my links, like this: 

<ul class="nav">
<li><a class="nav" href="#">HOME</a></li>
</ul>

This works, it changes the color of the link to yellow. So far so good.
But when I try to change this html-code to php-code the class isn’t there.

I use the wp_list_pages() function, like this: 

<ul class="nav">
<?PHP wp_list_pages('title_li=&depth=1&sort_column=menu_order&exclude='); ?>
</ul>

And the outcome then is: 

<ul class="nav">
<li class="page_item page-item-23"><a href="http://example.com/blog/page_id=23">HOME</a></li></ul>

So my question is, how to I add the nav class to this link? Is there an attribute within the function or something? Again, I’m really new to this

Post Views: 0

Related posts

Leave a Reply

4 comments

  1. from the wordpress docs for wp_list_pages() http://codex.wordpress.org/Function_Reference/wp_list_pages#Markup_and_styling_of_page_items :

    ll list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.

    with that, the easiest thing you can do is to just change your hover code to:

    li.page_item:hover { color: yellow; }

  2. Have a look at this.

    Quote: “Add the following line to your theme’s functions.php template file, and it will add a class attribute of “tag” to each link generated by wp_list_pages():

    add_filter('wp_list_pages', create_function('$t', 'return str_replace("<a ", "<a class="tag" ", $t);'));

  3. I think that the proper way change the default class of a wp_list_pages function is this:

    // add to functions.php

// add classes to wp_list_pages
function wp_list_pages_filter($output) {
  $output = str_replace('page_item', 'page_item new-class', $output);
  return $output;
}
add_filter('wp_list_pages', 'wp_list_pages_filter');

  4. What if I have a different looks on each pages then I have to call only a specific class. The example below is the best way that worked for me.

    page.index:

    <aside class="menu-side">
      <ul class="side-nav-list">
        <li>
            <!-- First child ( title of the page) -->
          <a  href="#"><?php the_title() ?></a>
        </li>
        <?php 
          if($theParent){
            $findChildOf = $theParent;
          }else{
            $findChildOf = get_the_ID();
          }
        
          wp_list_pages(array(
            'title_li' => NULL,
            'child_of' => $findChildOf,
          ))
        ?>
      </ul>
    </aside>

    CSS file:

    .side-nav-list li a:link,
.side-nav-list li a:visited {

         display: block;
         padding: 1.6rem 1.2rem;
         color: #2d234b;}