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.

Changing Background at Night

We have been looking at changing the body background on a theme based on hour, day, month, or season, in this example we will find out how to change the background in the evening.

We are using a Twenty Ten child theme to do this, so what do we need, we are using two horizontal repeat .png images 1087 wide * 1120 high, one for day and one for the night, if we whanted a different set of images, for any of the other methods we would change the quantities, names and code values to suit.

Continue reading

Child Categories Page

This is a short post, the code is in the child theme download, just two files a page and a loop, on the Artisteer forum someone was asking about having a list of child categories in the page body, one of the replies pointed to a couple of examples, and like most times they showed how to return the list but not how to display them.

Well we had a look and thought an example might work well alongside our post list page download so here it is, adding a list is not really a problem, but just a list is not suitable for everyone, so we have a page with a post and the categories with descriptions.

Continue reading

Twenty Ten Tweaked Theme?

I am a regular visitor to the WordPress forum and there are a lot of questions about editing the WordPress Twenty Ten theme, it looks like a lot of privateers or novice developers are editing the core theme files.

Should it be handshakes all around, and a pat on the back as that has solved the problem, or has it just caused a bigger problem for later?

Continue reading

Ten Good Reasons to use WordPress Child Themes and Template Parts

We are really getting into the WordPress 3 child themes and template parts, they can cut down the workflow and time to market for theme developers, learning to use WordPress child themes and template parts can give you the edge and make you more competitive.

If you are just starting out or been working with WordPress for years and not looked at WordPress child themes and template parts, here our our views on why you should take the time to look at how they can be used.  

Continue reading