contact

BLOG

(English) Menu Highlighting

  • 2016/01/26/
  • コーディング
Dummy

On today’s tutorial menu highlighting we will discuss on how to put current_page_item.

current_page_item is a automatically generated class when you use wp_list_pages but in this tutorial I will teach you on how create custom current_page_item.
The example we will use is the menu our website.
menu

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]

On the first li the code I use is to check if the current page is the home page.
[html]
<?php if ( is_home() ) { echo ‘ class="current_page_item"’; } ?>
[/html]

this will be the result:
menu02

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]
<?php if ( is_page(‘blog’) || is_archive() || is_category() || is_single() ) { echo ‘ class="current_page_item"’; } ?>
[/html]

this will be the result:
menu04

On the third li the code I use is to check if the page is the Recruit Page.
[html]
<?php if ( is_page(‘recruit’) ) { echo ‘ class="current_page_item"’; } ?>
[/html]

this will be the result:
menu03

and that’s all thank you I hope this tutorial will help you.

FACEBOOK
TWITTER
RSS
TOP