Twenty Eleven social Icons in Navigation | Digital RaindropsDigital Raindrops

Over on the WordPress forum a question came up about adding social media icons to the navigation bar in a twenty eleven child theme, answers were given changing code in the header.php file.

The question came from a novice who was not sure about changing code, so thinking about this and how we can use WordPress to do most of what we wanted we came up with a simple solution, it only requires grabbing icons, resizing them a few lines of code in style.css and using the built in custom menu structure.

The Social Icons

We always recommend that you use legal images, never grab images from other websites or Google, so get over to My Site My Way and download some royalty free icons, they have a fair range of different styles that are legal to use in our websites and themes.

We need to resize the icons, there are many different packages we could use, all we have done is to navigate to the download, extract the icon to a folder opened it in an imaging package, this can be Photoshop, Elements, DrawPlus, Paint, Gimp or any package that will allow us to resize the image, we are resizing our image to 42px * 42px.

In our child theme we create a new folder called /images/ if we have not already done this, and we save our icon image using the “Save As” option, we save this into the child themes images folder with the name of the social media, like here twitter.png

Child Theme Download

You may download the file here or visit the All Downloads page for other files.

style.css

Now we need to give each of our icons a style class of it’s own, we are adding the classes in the navigation area which has an id of #access, we want to float these to the right, make the text color transparent, remove the hover effect and use our images as backgrounds.

In our child themes style.css we add a style block for each of our social media icons, here is our twitter block, we copy and rename the elements for any other icons we want to show in our menu.

/* Twitter Icon */
#access .nav-twitter {
width: 50px;
text-align: center;
float: right;
}
.nav-twitter,
#access .nav-twitter:hover >a,
#access .nav-twitter a:focus
{
background: url('images/twitter.png');
background-repeat: no-repeat;
padding: 0;
}
.nav-twitter a
{
color: transparent !important;
padding: 0;
}

That is all the code we need to add, we are now going to use the built in options of the WordPress menu to do the rest.

The Menu

We are now going to create a new item for our menu, we do this in Admin > Appearance > Menus, if you have not created a custom menu yet then you will need to do so, the images below are for a custom theme and will be different to a standard Twenty Eleven theme, but the workflow is the same.

From the Screen Options tab make sure we have selected the ‘Custom Links’ and ‘CSS Classes’ checkboxs.

Next we create a Custom URL menu item with a link to our social media websites, and add this to our menu, as we are floating these to the ‘right’, then these should remain at the the end of our menu.

Our last step is to add the class we created in the style.css to our menu item, we just add nav-twitter to the CSS Classes box and ‘Save Menu’

We have used another of our screen options to show the ‘Link Target’ as we do not want our visitors leaving our site, we will open the link in a new window.

Here we have three of the icons in our menu, notice how we use mailto: to send an email.

Warning: See comments below E-Mail “Navigation Label” must not have a hyphon, so use “Email” and not as per the image ~~E-Mail~~, as this breaks in Internet Explorer, as the icons are only 50px wide keep the captions short 5 or 6 characters!

That is it fairly easy solution using as much of the standard system as we could, have fun!

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

54 thoughts on “Twenty Eleven social Icons in Navigation”

I tried this, it worked fine for one link but when I tried to add a 2nd link I ran into alignment problems. Do you have to use a absolute position instead of relitive ?

August 2011
M	T	W	T	F	S	S
« Jul				Sep »
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31