Add Social Buttons To Your Nav Menu In Thesis

This tutorial is one of a series created for users who have Kolakube skins installed on the Thesis framework.

I doubt you’ll find any plugins which make it easy to add your Facebook, Twitter, Google+ and RSS icons inside your navigation menu.

That’s the reason i’ve written this post as its becoming very popular to get them out of the sidebar and put them directly in the line of your readers sight.

This tutorial is based on using code i grabbed from the Thesis users guide however i did need to modify the code for use with a Kolakube skin.

Note: This method may not work in some Firefox browsers

Create Your Custom Menu Links

First step is to create 4 new navigation links be going to Appearance > Menus and selecting the menu you want to put your social icons in.

The easiest way to adds links is to use the custom links box. Simply add the url of your social account as well as a short name to describe each link.

Click the Add to Menu button and create your next social link.

Here’s what it should look like before you complete the task. I simply used one letter T, G, F, R for each social link as its shorter.

Once you’ve finished f0llowing all the steps in this tutorial, your menu will display the social buttons which you’ll upload to your server in the next steps.

Finding Menu i.d’s

Next step is to find each i.d which has been created automatically when you add a new menu link.

Its like finding your page/post i.d’s.

In the menu screen, simply expand each custom tab you created for each social link and hover your mouse over the remove link. This will display the i.d for each link at the bottom of your screen.

The menu item number in this example is 33063

Upload CSS Sprite Of Your Social Buttons

Next step is to upload your social icons.

This tutorial is based on using css image sprites which include all the buttons in one image.

Upload your image sprite to your Thesis custom/images folder.

/wp-content/themes/thesis_184/custom/images

Here’s the ones i used on this site.

You’ll need to enter the url of your image filename (highlighted in red) in the code block below before you paste it into your custom css file.

Make Your Own Single Image Sprite

Another option is to use your own social buttons and convert them to a sprite using a free tool.

Simply drag & drop your images onto the canvas which converts them to one image sprite. You’ll also get the css code which you can use to edit the code below.

Edit CSS Code

Here’s the css code block which you need to add to your custom css editor.

You’ll need to change the menu i.d’s to your own.

If this code isn’t displaying correctly, download the css file with the correct code for Kolakube skin users.

This is one snippet out of hundreds you’ll get access to when you own the Thesis theme framework.

I’d like to add a twitter button (like the one below in my subscribe box) showing the follower count in my nav menu but i hear from the one of great theme developers that its not possible.

Really weird thing happened when i added these buttons, they didn’t display until hours after i added the code which probably has something to do with the CDN because i did clear the browser cache.

Did you ever try adding social buttons in your header or menu?

Did you use a plugin or code?