Menu Highlighting: Customizing “current-page-item”
In this tutorial, we will guided you on menu highlight which is quite often used on website. This also explains bit about how to customized “current_page_item”.
3 steps to code “current_page_item”
“current_page_item” is a great function because, by using it, it make user easier to understand where he/she is at a glance. It is a automatically generated class when you use wp_list_pages. But in this tutorial, we will guide you how create custom current_page_item, step-by-step. For the example, we will user the code for menu on our website.
In our menu, we didn’t use any WordPress tags to automatically generate the menu. Instead, we create it in this way:
<html> <ul> <li <?php if ( is_home() ) { echo ‘ class=”current_page_item”’; } ?>> <a href=”<?php echo get_option(‘home’); ?>>Home</a> </li> <li <?php if ( is_page(‘blog’) || is_archive() || is_category() || is_single() ) { echo ‘ class=”current_page_item”’; } ?>> <a href=” http://lookupgrade.com/blog/”>Blog</a> </li> <li <?php if ( is_page(‘recruit’) ) { echo ‘ class=”current_page_item”’; } ?>> <a href=” http://lookupgrade.com/recruit/”>Recruit</a> </li> </ul></html> |
Step 1:
First, <li>element, the code I use is to check if the current page is the home page.
<html><li <?php if ( is_home() ) { echo ' class="current_page_item"'; } ?></html> |
step 2:
Then, on the second <li>, the code I use is to check if the page is Blog Page, Archive Page, Category Page and Single Page.
<html><li<?php if ( is_page('blog') || is_archive() || is_category() || is_single() ) { echo ' class="current_page_item"'; } ?></html> |
step 3:
Finally, on the third <li>, the code I use is to check if the page is the Recruit Page.
<html><li<?php if ( is_page('recruit') ) { echo ' class="current_page_item"'; } ?></html> |
And that’s all. I hope this tutorial will help you. Good Luck Coding!
