“Current page markers” are a great way for web designers to illustrate to the reader what page they are currently viewing. “Current page markers” use the same principle as breadcrumb trails but are generally less obtrusive. “Current page markers” are suitable for small to medium sized websites.

Using “current page markers” in Wordpress?

In this tutorial I will be using examples and screen grabs from the default 1.6 Wordpress theme. “Current page markers” are already available in Wordpress but they are disabled in the default Wordpress theme. To enable page markers simple style and add the following CSS class to your stylesheet (style.css):

.current_page_item {font-weight: bold; font-style: italic}

Using the above CSS class the page link text will change to bold italic when the user is browsing that particular page:

How to add a “current page marker” to your homepage in Wordpress!

So you now know how to add “current page markers” to Wordpress pages, but what about the hompage? In this quick tutorial I’m going to demonstrate how to implement a “current page marker” for your homepage into any Wordpress theme. Do not take the whole day off work as this tutorial should not take long.

1. First you need to delete the old wp_list_pages function which can be found in your themes sidebar (sidebar.php):

<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

2. We will now create a new wp_list_pages with a simple PHP if/elseif statement. So, if this is the homepage current_page_item will be added as a class to the <li> element, alternatively if this is not the homepage, page_item_home will be added as a class to the <li> element. Copy and paste the following code where the old wp_list_pages statement was located.

<h2>Pages</h2>
<ul>
<?php /* If this is the homepage */ if (is_home()) { ?>
<li class="current_page_item">
<a href="<?php echo get_option(’home’); ?>/" title="homepage">Home</a>
</li>
<?php } else { ?>
<li class="page_item_home">
<a href="<?php echo get_option(’home’); ?>/" title="homepage">home</a>
</li>
<?php } ?>
<?php
$pages = wp_list_pages(’title_li=&echo=0′);
echo $pages;
?>
</ul>

You may have noticed that I have removed the <li> elements within wp_list_pages and moved the <h2> elements outside the code – this is needed so the extra homepage link is included within the list.

3. And that’s it, you should now have a new homepage link and current page markers in your sidebar.

Having trouble getting it working?, found a better way? Feel free to leave feedback using the comment form below.