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.

custom-css

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

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.

Comments

  1. says

    Perfect! Thanks!
    It works fine!
    what would be the code to style the “active” or “current state” – when I use the terms “active” oder “current” instead of “hover” nothing happens. It is a one page site, by the way.
    Thanks ahead!

  2. Carlos says

    Hello.
    This tutorial help me a lot, but i have a question.
    I did a custom menu and i put it in my sidebar, this tutorial help me style a particular link in the WordPress menu(that is, one by one).
    Is there a way i can edit the css of this menu that i did for my sidebar as a whole instead of one by one

  3. says

    Hi there!
    I need to change one menu widget, so don’t drop down submenus on hover, but onclick.
    It’s possible to do this from css classes?
    Thanks in advance!

  4. says

    Hi Vivek, Great tip broo but i am getting error while executing this snippet. my blog is running on genesis with child theme where these codes are not working can you help me out?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge