Add Social Media Icons to Twenty Eleven Nav Bar

How happy are you messing about with the HTML/PHP, because it seems to me that the only way to do it is to mess with header.php? Unless somebody else can come up with a better way, of course.

If you’re going to do it, the first thing to do is to create a child theme that does nothing (i.e. is minimal and looks just like the existing theme – twenty eleven in your case), although you may have to redo some of your configurations, like header images for example. When you have that and have activated it to make sure it’s OK and have configured it to your liking, copy the twenty eleven header.php file into your theme folder. You haven’t altered it yet, so your pages should still appear exactly as they do under twenty eleven.

Now take a look at this code:

<nav id="access" role="navigation">
<h3 class="assistive-text">
<?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<div class="skip-link"><a class="assistive-text" href="#content"
title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>">
<?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a>
</div>
<div class="skip-link"><a class="assistive-text" href="#secondary"
title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->

I’ve cut out some comments to try to keep within code pasting guidelines.

It’s the call to wp_nav_menu() that’s doing the business.

What I’d do is to find out exactly what HTML is being output here and then I’d copy that output to a test page on my local machine (along with the stylesheet) so that I could play with it in a sandbox.

I’d then sort out locally what HTML/CSS was needed to get what you want, before copying the changes into my child theme’s header.php/style.css files at the appropriate positions and testing the result. I guess you would want something following on immediately from the output from wp_nav_menu(), but you will probably have to style it carefully to ensure it appears in the place you want it.

Note: of course you don’t **have** to use a child theme, but I’d strongly recommend that you do.

HTH

PAE

Thanks for this.

Unfortunately I have no idea how to go about doing what you suggest … Yep, I am totally learning as I go!

Have created a child theme. Do I need to add any instruction in the new header.php file I created to make sure that it is used?

I am really lost adding the html/css to get the icons I want where I want them. If anyone can offer some basic instruction to get me started I will be able to tweak things from there to get the results I want.

Meg

Well, the problem is that you’re trying to do something that requires a certain level of skill: unless there’s someone else in the forum who can suggest an easier way of doing it. I can’t think of anything.

If you really don’t have the skills (yet—I’m sure you’ll get there) I suggest you do one of the following:

• Re-think your design, at least temporarily, so that it doesn’t need this
• Try to find a theme that gives you what you want
• Pay someone to do the job for you

Sorry if this sounds a bit pessimistic, but I can’t think of a shortcut to the skills you need to do what you want. I’m fairly comfortable with these things and I’m pretty sure I could make this work, but it’d take me a bit of time. It’s not straightforward (except perhaps to a real WP/PHP/HTML/CSS guru, which I definitely am not).

Cheers

PAE

You have a point … am probably trying to be a little too clever for my own good at this stage … ??

No, I don’t think you’re trying to be too clever.

One of the things you always have to sort out when starting to work with a new system is just what it can and can’t do easily. There’s no way you can know that at the start without giving it a go and asking some questions. Which is what you’re doing.

As you get more experienced, you’ll be able to do more things: and you’ll also get a feel for what’s going to be simple and what’s going to take a bit of effort.

Good luck

PAE

I was able to put icons inside the div id = access of the 2011 theme. I simply added another div that contains the social media icons. Then in style.css you style the way you want it to look. I used the ideas on this page:

Here is the link to my client’s site using this approach: https://securitydriver.com/

This does limit the amount of pages for navigation but on this particular site the client didn’t want very many.

If you need assistance on how to set this up I’d be happy to help.

Larry

Unfortunately I have no idea how to go about doing what you suggest … Yep, I am totally learning as I go!

Have created a child theme. Do I need to add any instruction in the new header.php file I created to make sure that it is used?

I am really lost adding the html/css to get the icons I want where I want them. If anyone can offer some basic instruction to get me started I will be able to tweak things from there to get the results I want.

Meg

Hi Meg,
There is a simple way of doing what you want, I created a quick tutorial after reading this topic, as it may help others, and shows some of the built in features in WordPress, like the CSS Classes in the Custom Menus.

This tutorial is for a child theme, and only requires an images folder with the icons and small additions to style.css, there is even a link to a free icon website.

HTH

David

Thanks for the tips @sjcwebdesign … I will have a play and see what happens ??

@david (DigitalRaindrops) – thank you so much for the simple solution and the fabulous tutorial! Much appreciated ??

https://digitalraindrops.net/2011/08/twenty-eleven-social-icons-in-navigation/
Okay So I followed the detailed instructions in the link above and after placing my code in Style.CSS I am getting nothing….
/* Facebook Icon */
#access .nav-facebook {
width: 50px;
text-align: center;
float: right;
}
.nav-facebook,
#access .nav-facebook:hover >a,
#access .nav-facebook a:focus
{
background: url(‘https://pennybidforkids.com/wp-content/uploads/2012/08/facebook.png’);
background-repeat: no-repeat;
padding: 0;
}
.nav-facebook a
{
color: transparent !important;
padding: 0;
}

Thanks

Please post a link to your site so we can take a look.

I hope you mean style.css and not Style.CSS.

Please read the forum rules about posting code.

Cheers

PAE

Ok I placed my code in Appearance> editor> style.css and scrolled all the way to the bottom and inserted it there. Site: https://pennybidforkids.com/

Thanks

Have another question,

I looked in the support forum and did not find this question or answer. I was looking to separate my widgets with a rounded framed box that could have color. Similar to the sidebar1 on site:

And if I am right I would be placing the code under style.css ????
Thanks

Looking through the HTML, I don’t see any elements to which your styles would apply. For instance, there is no element with a class of nav-facebook.

All your changes should be done in a child theme, especially when making modifications to a default theme. You’re playing with fire altering twentyeleven directly. Updates to WordPress could overwrite your changes. Also some support situations require that you have an unaltered version of the default themes available.

Cheers

PAE