Add social media icons to header

If you find this tweak helpful:


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. 

20% Discount!!!
Divi WordPress Theme

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.


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">
$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 -->


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

Add this code:

position: relative;
top: -30px;
left: 780px;

#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.

Post a Reply

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