Add social media icons to header

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

Foxy comes with a twitter and facebook icon in the footer by default. You can link the icons to your social accounts using the epanel. This tweak will let you add the icons to the top of your pages in the header or you can put them in both the header and footer.

PHP

Locate the header.php file in /themes/foxy/

Save an exact copy of this file to /themes/foxy-child/

Locate the following code near line 41:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo"/></a>
<p id="slogan"><?php bloginfo( 'description' ); ?></p>

Add the following code after the last line of the code above:

<div id="et-social-icons-top">
<?php
$template_directory_uri = get_template_directory_uri();
if ( 'on' == et_get_option( 'foxy_show_google_icon', 'on' ) ) $social_icons['google'] = array( 'image' => $template_directory_uri . '/images/google.png', 'url' => et_get_option( 'foxy_google_url' ), 'alt' => __( 'Google Plus', 'foxy' ) );
if ( 'on' == et_get_option( 'foxy_show_facebook_icon','on' ) ) $social_icons['facebook'] = array( 'image' => $template_directory_uri . '/images/facebook.png', 'url' => et_get_option( 'foxy_facebook_url' ), 'alt' => __( 'Facebook', 'foxy' ) );
if ( 'on' == et_get_option( 'foxy_show_twitter_icon', 'on' ) ) $social_icons['twitter'] = array( 'image' => $template_directory_uri . '/images/twitter.png', 'url' => et_get_option( 'foxy_twitter_url' ), 'alt' => __( 'Twitter', 'foxy' ) );

$social_icons = apply_filters( 'et_social_icons', $social_icons );

if ( ! empty( $social_icons ) ) {
foreach ( $social_icons as $icon ) {
if ( $icon['url'] )
printf( '<a href="%s" target="_blank"><img src="%s" alt="%s" /></a>', esc_url( $icon['url'] ), esc_attr( $icon['image'] ), esc_attr( $icon['alt'] ) );
}
}
?>
</div> <!-- #social-icons-top -->

CSS

Locate your style.css file in /foxy-child/

Add this code:

#et-social-icons-top{
position: relative;
top: -30px;
left: 780px;
margin-bottom:-20px;
}

#et-social-icons-top a {
margin-right: 10px;
}

If you want to remove the default icons from the footer, add this:

#et-social-icons {
display: none;
}

You can play around with the positioning to get it to look how you want. One problem you might run into is that the icons are meant to have a dark background. If your header is the default white, they don't show up so well. The icons in the screenshot above have been modified to show up better with a lighter background. I am posting them below if you would like to use them. In the header.php file, you'll want to change the filename from '/images/facebook.png' to '/images/facebook2.png'. We are just adding the number 2 before the .png. Upload the images below to this folder: /themes/foxy/images/. Make sure you save them with the number 2 at the end in the name. You can also download some other social icons from Elegant Themes.

    1 Comment

  1. When you have an urgent assignment that needs to be delivered in a couple of days, you might want to order essay online, and opt for professional assistance.

    Arellano567

    December 27, 2020

Post a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This