Mark parent category menu active on single custom post view in WordPress

Recently I developed a theme for one of my clients and I had to highlight the menu item of the parent category in the main menu when one of its associated single custom posts was viewed. For that, I had to add an action in my functions.php file for nav_menu_css_class. It returns the ‘active’ class, which WordPress adds to the parent category menu item in the main menu. You can see the code at Gist here or below.

<?php

add_action('nav_menu_css_class', 'add_current_nav_class', 10, 2 );

function add_current_nav_class($classes, $item) {
// Getting the current post details
global $post;

// Getting the post type of the current post
$current_post_type = get_post_type_object(get_post_type($post->ID));
$current_post_type_slug = $current_post_type->rewrite['slug'];

// Getting the URL of the menu item
$menu_slug = strtolower(trim($item->url));

// If the menu item URL contains the current post types slug add the current-menu-item class
if (strpos($menu_slug,$current_post_type_slug) !== false) {
$classes[] = 'active';
}

// Return the corrected set of classes to be added to the menu item
return $classes;
}
?>

Adding above code in you functions.php file will do the trick.

Click here to read more on WordPress.

Different color for each menu item in WordPress

In a recent project, I got a requirement that each menu item should be highlighted in a different color when visited. The menu items and their required active colors were:

  • Home – Green
  • Portfolio – Blue
  • Team – Yellow
  • Contact – Red

These colors were to be applied only when that page is being visited otherwise color of the menu item should be the default black color.

So, if a user is visiting the home page then the menu item should something like this

home_menu.png

And if the user is visiting the Portfolio page then the menu should be something like this

portoflio_menu.png

Considering that this was a WordPress theme project where we were using Understrap as a base theme which is based on Twitter Bootstrap. So, when user visits, for example, a home page WordPress will attach a .active CSS class to it. Taking advantage of that we added different classes for each menu item and then used the following rule to make menu item colors different:

.navbar-nav > .home.active > a {
    color: green!important;
}
.navbar-nav > .portfolio.active > a {
    color: blue!important;
}
.navbar-nav > .team.active > a {
    color: yellow!important;
}
.navbar-nav > .connect.active > a {
    color: red!important;
}

CSS Class Chaining Method

We utilized the class chaining method here. If you note that .home.active classes are chained together without space and which means it will select an element with both these classes.
That did the trick and all menu items were in a different color.

How To: Open a WordPress Menu Link In New Window or Tab?

I have come across multiple WordPress users who aren’t aware that WordPress has a bunch of functions hidden in the “Screen Options” section of multiple Administration Pages. Today I want to show you how to open links in custom menus in a new window or tab (i.e. add a target=”_blank” to link or menu items). Just follow the steps below to unearth the hidden WordPress feature.

Step 1:
Click on Appearance >> Menu in the WordPress dashboard.

Step 2:
Look for the Screen Options drop down menu in the top right corner of your browser window

Step 3:
Under Show advanced menu properties tick the Link Target checkbox.

Step 4:
Add a new link to your custom menu and click on drop down arrow to edit menu items. Voila! You can now decide if your menu item opens in same window or new window.

Click here to read more about WordPress.