Have you ever thought about highlighting particular link in WordPress menu ?. For example,You can highlight “Hire Us” link in navigation to get readers attention,which helps to get high conversion.
Interestingly,WordPress offers a feature called custom CSS class,Through which we can easily style the individual links of navigation menu.
In this tutorial I am going to throw some lights on using this feature with couple of examples.
Custom CSS classes Feature
WordPress custom CSS class feature is very easy to understand.You need to assign a CSS class name for individual links and then add a CSS code with respective class name in your themes style.css.
Here is a step by step tutorial
Enable Custom CSS feature
As I said above its a hidden WordPress feature,So you need to enable it through Screen Options.
Login to Admin area and go to Dashboard >> Appearance >> Menu and click on Screen Option which is located in top right corner of the page.
In the expanded menu check the box besides CSS Classes.
Enable Custom CSS feature
Now if you expand the individual link in menu,You can find an additional field called “CSS Classes (optional)“. Enter your custom CSS class name in the provided field.For example,I used a class called sample.
Adding Custom CSS Class name
Add custom CSS to style.css
Now you need to add custom CSS code to your current theme’s style.css file.Here is a sample CSS
.sample {
background:#ddd;
padding:0px 10px 0px 10px;
border:1px solid #ccc;
}
.sample:hover {
background:#eee;
padding:0px 10px 0px 10px;
border:1px solid #ccc;
}
The first part in above code defines the background color and padding to right and left side of the link.In second part I changed the background color whenever user hovers on the link.You can check the live demo here.
Basic knowledge about CSS will come handy for further customization.Here is an another example in which I replaced the home link Home icon.
Here is a CSS
.homeicon {
background: url(http://www.wpstuffs.com/sandbox/wp-content/uploads/2013/05/home-icon.png) no-repeat left center;
text-indent: -9999px;
width: 44px;
}
Check out the demo here.
Conclusion
Custom CSS class is one of the unique feature of WordPress and with some basic knowledge of CSS you can experiment with different styles to fit your theme design.
