By default, WordPress adds an active class to single pages on the menu item, i.e. if the user is on the ‘About’ page right now, they should see the ‘About’ page highlighted on the navigation bar. This is good User Experience (UX) practice as it gives the user good visual feedback to help them better understand and not be confused about where they are, which will in turn enable them to navigate through the site better.
However, if you have created a custom post-type, WordPress will not add the active class to the menu item for you automatically when you visit that particular post-type’s single post.
For example, if we create a new post-type called ‘News’, and we have the ‘News’ listing page on our main menu, it should be highlighted to feedback to users that they are in a part of the site under ‘News’ when they visit a particular post from the post-type of ‘News’.
In this article, we will look into how to easily do the above — to enable WordPress to add an active class for a custom post-type on a navigation menu when viewing a single post.
To achieve this, you simply need to insert the following piece of code below into your functions.php:
This piece of code adds the class ‘custom-menu-item’ to your post-type’s menu item whenever you visit single posts that belong to this post-type. If your template has good UX, you should see that there is visual feedback whenever you visit the single posts pages. This is because the ‘custom-menu-item’ is the default active class for menu items in WordPress.
If you don’t see any changes, try clearing your cache plugins, logging out, clearing your browser cache, or checking your site on an incognito window. If you still do not see any change, then it is likely that your theme hasn’t done the css coding to ensure that the class ‘custom-menu-item’ has a visual feedback. If that’s the case, then you’ll need to head to your stylesheet to do so.
The custom coding for css visual highlight of active class will depend from theme to theme (they may have an underline, be bolded, a coloured background or a different color etc). Hence, we will not be able to demonstrate it in this post. If you need help with this, feel free to drop us a line. We’ll be able to help very quickly and at a very low rate for something like this.
Unsure of where to insert this? Don’t want to break anything? Our team of WordPress developers in Singapore can accomplish this job for you safely and efficiently. We are highly experienced in WordPress and web development and are equipped in solving any issues you might be facing.
