Shane Strong

WordPress Selected Nav Links

This is a post to share with the many people out there that probably have the same problem that I had today. So instead of you spending all your time trying to figure out this problem I am going to share with you my solution. Well to start off you need to know my problem I was creating a theme today and needed the nav links to be in a selected state when you were on that specific page. I had no clue how to do this in WordPress so I spent about 4 hours of my day looking up this problem. After that time I found the answer to my problem. The answer I am going to be showing is for the traditional header.php file that holds most everyone’s nav bar or your header links. All you have to do to have your page links to show in the nav and get them to be at a selected state as followed:

This part is for your Home Page so if you don’t want your home page than just don’t add this into your code.

<li id=”home” <?php if(is_home()) { ?> class=”selector” <?php } ?> ><a href=”<?php echo get_settings(‘home’); ?>”>Home<?php echo $langblog;?></a></li>

This is for the other pages that you have in WordPress.

<?php wp_list_pages(‘title_li=’);?>

Now all you have to do to get these links to be in a selected stage is add a little code to your css code which is as followed.

This is for home.

Your ID like #nav Then li.selector a {color: ###;}

This is for other pages.

Your ID like #nav Then li.current_page_item a {color: ###;}

Now some people like to have there categories do this same thing. Well all you have to do for that is change wp_list_pages to wp_list_categories so that it can list the categories. Then just change your css code from li.current_page_item to li.current-cat and you are finished.

If you have any questions about this just leave a comment of go to my Contact Page for my email.

Shane Strong
Chosen Development

Popularity: 3% [?]