WordPress.org

Ready to get started?Download WordPress

Forums

Add Social Media Icons to Twenty Eleven Nav Bar (15 posts)

  1. kiwimeg
    Member
    Posted 2 years ago #

    I would like to add social media icons & links to the right hand end of the nav bar in the Twenty Eleven them but am not sure how to go about doing it.

    Would appreciate any assistance.

    Thanks
    Meg

  2. peredur
    Member
    Posted 2 years ago #

    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

  3. kiwimeg
    Member
    Posted 2 years ago #

    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

  4. peredur
    Member
    Posted 2 years ago #

    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

  5. kiwimeg
    Member
    Posted 2 years ago #

    You have a point ... am probably trying to be a little too clever for my own good at this stage ... :)

  6. peredur
    Member
    Posted 2 years ago #

    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

  7. sjcwebdesign
    Member
    Posted 2 years ago #

    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: http://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

  8. Digital Raindrops
    Member
    Posted 2 years ago #

    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

  9. kiwimeg
    Member
    Posted 2 years ago #

    Thanks for the tips @sjcwebdesign ... I will have a play and see what happens :)

  10. kiwimeg
    Member
    Posted 2 years ago #

    @David (DigitalRaindrops) - thank you so much for the simple solution and the fabulous tutorial! Much appreciated :)

  11. blankslate
    Member
    Posted 1 year ago #

    http://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('http://pennybidforkids.com/wp-content/uploads/2012/08/facebook.png');
    background-repeat: no-repeat;
    padding: 0;
    }
    .nav-facebook a
    {
    color: transparent !important;
    padding: 0;
    }

    Thanks

  12. peredur
    Member
    Posted 1 year ago #

    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

  13. blankslate
    Member
    Posted 1 year ago #

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

    Thanks

  14. blankslate
    Member
    Posted 1 year ago #

    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

  15. peredur
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic