Question

I would like to have the currently displayed Page or Recent post highlighted with CSS.

Something like this:

PAGES:

…Home

…About <–current page

…Contact

RECENT POSTS:

…post1 <– current post the user is seeing.

…post2

…post 3

I used to accomplish that assigning an unique id to the body tag to make each page unique for CSS, and change the color of the navigation link.

In word press, for instance, all the recent posts are using the same body so I can’t figure out how to do it.

Any suggestions?

Answer 1

If you’re using wp_list_pages(), you can use the classes current_page_item, current_page_ancestor and current_page_parent to target the active nodes.

Otherwise a bit of manual labour is at stake – you could echo the current slug on the body tag, either as a class or ID, or print an ‘active’ class on the navigation item if it’s the current page;

function active_class($page)
{
    if (is_page($page))
        echo ' class="active"';
}

And put into play;

<ul>
    <li<?php active_class('about'); ?>><a href="/about/">About</a></li>
    <li<?php active_class('contact'); ?>><a href="/contact/">Contact</a></li>
</ul>