Twenty Eleven social Icons in Navigation

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.

twitter-nav-1

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

twitter-nav-2

Child Theme Download

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

Twenty Eleven Social Navigation

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.

twitter-nav-3

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.

twitter-nav-4

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.

twitter-nav-5

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.

WordPress Meet up Group in London

I have tried one or two meet up groups in London, the first one I found myself in Kings Cross in a smallish room above a bar, it was well attended and the people were very chatty and made me feel at home, all the talk was marketing based and I had a few discussions on different subjects, it was good to see some of the entrepreneurial flair and niche markets being looked at.

HiRes

I had a couple of chats about the Internet my website, the traffic numbers, and how could I make any money from it, but it came down to suggestions like writing an eBook, charging for downloads or pay per view posts where you start with a primer, and the visitor pays to read more.

This was not what I had in mind when I created Digital Raindrops, the original concept was for little digital blocks (droplets) of helpful code, a programming resource website that would be easy to manage and benefit the visitors.

The second was a small group of developers, these had a range of beginner to advanced, there were no real WordPress users, some small chat about different CMS systems and a few boasts of how much one could earn from website development, an exchange of business cards, many of these were Moo cards and they sit on a shelf above my computer, these meeting have left me feeling indifferent to meet up groups, they are in the evening and require leaving work sharp to get into town.

I am still a member of the Meet up website and received an email today about a new group just for WordPress and it is in London, United Kingdom, I joined the group and will be attending meetings, the groups owner rather summed it up quite nicely.

As a freelancer, I spend a lot of time isolated in my little development world. Although the internet is a fantastic tool for connecting with others, there’s no doubting the value of face to face contact.

I am hoping that others will join the group and share ideas, talk about projects, and it might be a good place for people interested in WordPress to come along, it would be nice to meet any Local visitors to this website, get some face to face feedback, network a little and have a beer.