I got an email from Vishal, asking about how I added the twitter follow call-to-action in my menu. He asked if I could put together a tutorial, so here it is. This is actually a pretty easy thing to do, and there are only a couple of steps.

Add a CSS Class to a Menu Item

First, head into the menu settings, then edit the menu item that you’d like to make your call-to-action. In my case, I’m using a custom link item to send users to my Twitter profile.

In the menu item’s settings, there should be an option for adding a CSS class. If you do not see this setting, scroll to the very top of the page, click the “Screen Options” dropdown, then check the “CSS Classes” box. Next, add a class to the menu item (I’m using a class called “nav-button”). Finally, make sure to save the menu.

Style the Class

Now, you need to add some styling to the class. To get you started, here’s some CSS from my theme:

.nav-button a {
	border-radius: 300px;
	border: 2px solid #fff;
	color: #fff;
	padding: 5px 20px;
}

Using an Icon

To finish up, you can add an icon to the menu item by enqueueing an icon font, then adding the icon’s HTML to the menu item. For example, I have the Twitter icon in my menu call-to-action. Since I’m already using Font Awesome icons, I just added the icon tag to the menu item’s label, like so:

<i class="fa fa-twitter"></i> Follow

Once you’ve added your menu item class, and any icon you wish to use, simply style the class to your liking. That’s all there it to this one!