Now you have a highly stylized menu in the html your designer gave you. Customized classes all the way, one for the enclosing div, the ul, the li and even one for the anchor tag. And you have to convert the whole thing to the awesome WordPress theme that you are building.

How do you do it?

Here is a step-by-step process to get it done. Most probably your designer is using Bootstrap to design, so for this example we will work with Bootstrap navigation classes, but it will work for any custom classes you might have.

Here is the navigation html I want to get to –

For the div and ul classes:

This is the easier part. You just need to put appropriate attributes in the wp_nav_menu function. Here is the one I am using:

To add classes to the li and anchor tags:

This is a little trickier. You need to add the following two functions in the functions.php and add them to the appropriate filters.

And there you go…

 

 

 

Nandini is a Web Developer and a blogger who loves tinkering with new technologies, frameworks and devices. When not in front of her computer she likes to travel, read and spend time gardening.

WordPress Theme Building : Styling Menu
Tagged on:     

Leave a Reply

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