WordPress single page, categories and archives menu current item

1 Views

I can’t get my head around how to do the following.

On my website I have a menu:

Read More

Home | About | Skills | Portfolio | Contact

To call the above menu I have the following in my header.php file: 

<nav>
             <?php wp_nav_menu( $args ); ?> 

        </nav>

At the moment when the page is active the link’s background color changes, here is the CSS and HTML generated: 

header ul li a
      {
border-radius: 4px;
    background-color: transparent;
    border: 1px solid transparent;
    color: #939393;
    margin: 0px;
    border-image: initial;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 18px;
    text-decoration: none;
      }

    header ul li.current-menu-item a,
    header ul li a:hover
      {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.042);
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin: 0;
    border-image: initial;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #939393;
      }

    header ul li.selected {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.042);
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: -3px;
    border-image: initial;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #939393;
     }

Heres the HTML generated: 

<nav>
   <div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost:8888/paulkenyon/home/">Home</a></li>
   <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost:8888/paulkenyon/about/">About</a></li>
   <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost:8888/paulkenyon/skills/">Skills</a></li>
   <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/paulkenyon/portfolio/">Portfolio</a></li>
   <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://localhost:8888/paulkenyon/contact/">Contact</a></li>
   <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-50 current_page_item menu-item-52"><a href="http://localhost:8888/paulkenyon/blog/">Blog</a></li>
   </ul></div> 

        </nav>

The above works fine, but what I am trying to achieve is when the user clicks on a blog post or archive or selects a category I want the ‘Blog’ link to remain highlighted with the different colored background-image.

At the moment nothing shows. Is there a function I can use that states all single, and archive pages to highlight the ‘blog’ anchor?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Don’t know if this post is still relavant but I solved a similar problem today in a fairly dynamic manner, without using JavaScript to target a specific ID.

    On your body HTML tag, makes sure you use the body_class function, like so:

    <body <?php body_class(); ?>>

    This tells WordPress to provide some useful CSS-classes that reflects what page you are currently on. For example, if you are currently on an archive page, the body tag will now have an archive CSS class. If you are on a category page, the body tag will have a category class and if you are on a single post page, the body tag will have a single-post class and so on (inspect the element to see what additional classes are provided by WordPress).

    Next, you want to give your target menu item a CSS-class on the “Menus” page in the WordPress admin interface (make sure that the “CSS Classes” option is ticked from the “Screen Options” pane). In case of your blog menu item you could probably give it something like menu-item-blog.

    Now you can specifically target your “Blog” menu item with CSS when you are on a single post page like so:

    body.single-post .menu-item-blog {
    /* Your highlight style goes here */
}

    Now, I know that this is not a perfect solution as you still have to set custom CSS-classes on individual menu items, but I like that it is possible to achieve from the admin interface and not the code.

    I hope this helps!

  2. Here is small php – jquery combination script.

    PHP function’s of wordpress check if the page is an archive, category or single post page.

    Then with help of Jquery we add class “current-menu-item” to li with id “menu-item-52” which is “Blog” li.

    Please add below script in header of the wordpress blog.

    <?php

if(is_archive() || is_category() || is_single())
{
    ?>
    <script type="text/javascript">
    $(document).ready(function(){

        $("li#menu-item-52").addClass("current-menu-item");

    });
    </script>
    <?  

}


?>