Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #18651


    I cannot find the following section from Dude’s Post in exactly in that form in functions.php of Propulsion. When I add the recommended code from that post ( the icon shows up without mouse over and a little additional piece on the right side. Screenshot:

    3) In header.php replace:

    echo ‘ <li class=”rss”>RSS‘;


    echo ‘ <li class=”pinterest”>Pinterest‘;

    Is that the right one?:

    echo ‘<ul class=”social_bookmarks”>';


    if($dribbble = avia_get_option(‘dribbble’)) echo “<li class=’dribbble’>“.__(‘Follow us on dribbble’, ‘avia_framework’).”“;

    if($twitter = avia_get_option(‘twitter’)) echo “<li class=’twitter’>“.__(‘Follow us on Twitter’, ‘avia_framework’).”“;

    if($facebook = avia_get_option(‘facebook’)) echo “<li class=’facebook’>“.__(‘Join our Facebook Group’, ‘avia_framework’).”“;

    echo ‘ <li class=”pinterest”>Pinterest‘;




    Hi Frank,

    That topic is for the Sentence theme so it may need a little bit of adjustment. From your screenshot, it looks like the Pinterest icon may need to be adjusted so that the hover part of the image is a bit further over. The hover state moves the background 47 pixels over so it should enough room for that to create an actual hover effect.




    Hi Devin,

    thank you. It wasn’t my idea. Comes from Dude (look at that post: I have no idea about those codes. But it seems to be difficult or not welcome to add some more icons instead of the already prepared one, right?




    Along with your theme there should have been other files. Do you still have them? One of those files had 8 psd files (photoshop format) and one of those psd files are the social icons. I am not good with graphics,. always wind up with some ugly stuff.





    Hi Nick,

    thank you. Yes, I know those .psd files. I used the file “icon-discons-Master.psd” to generate 2 additional files. Size 24×24 format .png. Placed them into the folder /wp-content/themes/propulsion/images/layout and add the additional code snippet “echo ‘ <li class=”pinterest”>Pinterest';” in functions.php as written above.

    The result is a button without mouse over which is too close to the others seems to have a bit of a iteration on the right side. You can see it here:

    I guess that this has something to do with the respective code, hasn’t it?




    and the second question is, whats the right code is to get the icons also into the footer (footer.php).



    Hi Frank,

    For your second question, I believe that by default Propulsion’s social icon is already in the footer, on the right side of Copyright. Anyway, adding this code will make social icons appear:

    <ul class="social_bookmarks">
    //contact icon
    $contact_page_id = avia_get_option('email_page');
    if (function_exists('icl_object_id')) $contact_page_id = icl_object_id($contact_page_id, 'page', true); //wpml prepared
    if($contact_page_id) echo "<li class='mail'><a href='".get_permalink($contact_page_id)."'>".__('Send us Mail', 'avia_framework')."</a></li>";

    if($dribbble = avia_get_option('dribbble')) echo "<li class='dribbble'><a href='".$dribbble."'>".__('Follow us on dribbble', 'avia_framework')."</a></li>";
    if($twitter = avia_get_option('twitter')) echo "<li class='twitter'><a href='".$twitter."'>".__('Follow us on Twitter', 'avia_framework')."</a></li>";
    if($facebook = avia_get_option('facebook')) echo "<li class='facebook'><a href='".$facebook."'>".__('Join our Facebook Group', 'avia_framework')."</a></li>";


    <li class='rss'><a href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>"><?php _e('Subscribe to our RSS Feed', 'avia_framework')?></a></li>

    <!-- end social_bookmarks-->




    Hi Ismael,

    yes, they are. For facebook, twitter, dribbble and rss feed which comes all from Propulsion theme options.

    But not for Google+ and Pinterest, which are not yet available in Propulsion theme options?



    Hi Frank,

    We’ll need to see the page and icons live to give any kind of adjustment at this point. Just need a frame of reference to see what you have now and what else needs to be modified.

    For the footer icons, you just need to add the same list items with your google+ and pinterest code to the list there. Again, some minor adjustment may need to be done.




    I’m posting this here as a helper for anyone looking to add or adjust their social media icon in the Propulsion theme. This will setup the controls in the backend, allowing you to turn them on or off in the theme’s control panel.

    In the file register-admin-options.php find the code that matches and add the following directly under (i have used Pinterest for this example):

    $avia_elements[] = array(

    “name” => “Pinterest”,

    “desc” => “Enter your Pinterest link. If you leave this blank the Pinterest link in the head / footer of your site wont be displayed.”,

    “id” => “Pinterest”,

    “slug” => “avia”,

    “std” => “”,

    “type” => “text”);

    In the file footer.php find the code that matches and add the following directly under:

    if($Pinterest = avia_get_option(‘Pinterest’)) { $social ++; echo “<li class=’Pinterest’>“; }

    In the file layout.css find the code that matches and add the following directly under:

    .social_bookmarks .Pinterest a{background: transparent url(../images/layout/icon-pinterest.png) 0 0 no-repeat;}

    Hope this helps!

    Best, A.



    Thanks for the tutorial :)



Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Additional Social Media Icons’ is closed to new replies.