The template I'm working on for a client has the following pages:

  • Home : a custom static page that displays the content of a certain WP page, and the latest sticky posts. This is the front-page.php file.
  • About us: a WP page
  • Services : a WP page
  • Events : a list of WP posts, in the Events category
  • Blog : a list of WP in the Blog category

I'd like to highlight the current section in the main menu in CSS, but the only idea I have is to make a big list of PHP conditionals depending on the current case. For example if we are seeing the Events category, then we must be in the Events section, and so on.

Is there a more straightforward way of accomplishing this?

  • 1
    Pier, can you post some code? For example the main menu code your are using?
    – gdaniel
    May 8, 2013 at 17:47
  • I'm using a typical ul li and links, but it really doesn't matter. The problem is the PHP logic to figure out what is the current page.
    – Pier
    May 8, 2013 at 17:55
  • 1
    I asked because if you are using wordpress to create the menu, then wordpress adds classes that you can use. However, if you created the menu yourself then you do need if statements to figure out what page you're in.
    – gdaniel
    May 8, 2013 at 17:57
  • Yes, I created the menu myself. Thanks, it seems my first idea is the only way to do it then.
    – Pier
    May 8, 2013 at 17:59
  • 2
    You can try using the wordpress menu option in the admin. It really depends how the backend is setup. Most pages would work fine, not sure about the Events page. Another way to do it, is to use jQuery to look at parts of the URL, Title of the page, or some other unique element to that page.. and apply the css accordingly. For instance if, if the page had an element with a unique ID, you could use jQuery to identify that page and automatically hide or show CSS classes.
    – gdaniel
    May 8, 2013 at 18:12

1 Answer 1


I definetly suggest you to use WordPress menu feature, is quite easier to implement and you will never need to wory if the user want to rename or add new items.

Just add this to your functions.php:

      'main_menu' => 'Main menu',

Then in header.php or wherever you have the menu add:

<?php wp_nav_menu( array( 'theme_location' => 'main_menu', 'menu_class' => 'the_main_menu' ) ); ?>

You can reuse your CSS classes also, please check the doc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.