WordPress.org

Ready to get started?Download WordPress

Forums

Adding social icons to my navigation (3 posts)

  1. laptopmemo
    Member
    Posted 4 years ago #

    Hey guys! I have a question: Can I get the social media buttons that you see on my sidebar into my navigation? It would be a good way to save space, and the blog would look even better. Of course I would have to shrink the icons, but what matters is that I would like to get them into the navigation.

    Stef

  2. ClaytonJames
    Member
    Posted 4 years ago #

    You can try this. Make a backup of your theme files first. I say, make a backup first.

    Open header .php and find this:

    <ul class="fix">
    			<li class="page_item "><a class="home" href="<?php echo get_settings('home'); ?>/" title="Home"><img class="homeimage" src="<?php bloginfo('stylesheet_directory'); ?>/images/home-icon-trans.png"/></a></li>
    			<?php
    				$frontpage_id = get_option('page_on_front');
    				wp_list_pages('sort_column=menu_order&exclude='.$frontpage_id.'&depth=1&title_li=');?>
    		</ul>

    Change it to this:

    <ul class="fix">
    			<li class="page_item "><a class="home" href="<?php echo get_settings('home'); ?>/" title="Home"><img class="homeimage" src="<?php bloginfo('stylesheet_directory'); ?>/images/home-icon-trans.png"/></a></li>
    			<?php
    				$frontpage_id = get_option('page_on_front');
    				wp_list_pages('sort_column=menu_order&exclude='.$frontpage_id.'&depth=1&title_li=');?><li><a href="http://feeds.feedburner.com/laptopmemo"><img height="18" alt="LaptopMemo.com RSS Feed" src="http://farm3.static.flickr.com/2658/3928169685_282abd1932_o.png"/> </a></li><li><a href="http://twitter.com/laptopmemo"><img height="18" border="0" width="18" title="" src="http://farm3.static.flickr.com/2504/3928951758_7cf3350420_o.png"/> </a></li><li><a href="http://facebook.com/stefan.etienne"><img height="18" border="0" width="18" src="http://farm4.static.flickr.com/3532/3928169659_324c7a768f_o.png"/> </a></li><li><a href="http://es.technorati.com/blogs/laptopmemo.com"><img height="18" border="0" width="18" title="" src="http://mysocialbuttons.com/socialicons/technorati.png"/></a></li>
    		</ul>

    Exactly. Did I mention making a backup? This placed all of your icons, in size 18x18, directly to the right of existing pages in the header nav. It worked perfectly on my test site. Your mileage may vary. Good luck!

    AND MAKE A BACKUP FIRST! :P

  3. laptopmemo
    Member
    Posted 4 years ago #

    Thanks! I'll try it!

Topic Closed

This topic has been closed to new replies.

About this Topic