MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add social media icon bar to Rosemary's footer

Please note: This article is specifically for the Rosemary theme



By default, Rosemary doesn't include an area within its footer to display social media icons. In this walk-through, we'll go over the necessary steps to manually add a bar to Rosemary's footer area which will display your preferred social media icons. It will be placed above your copyright bar and below your Instagram slider (if applicable).

Please note that because they will be manually added to your footer area, if you need to change them in the future, you will need to do so within the "footer.php" file and not within Appearance > Customize > Social Media Settings like the other built-in icon features.






ADDING THE ICONS TO YOUR FOOTER

Let's get started!
Navigate to Appearance > Editor > and open up the "footer.php" file.

On Line 14, you will see the following bit of code:

<div id="footer">


ABOVE this line of code is a blank line. On blank Line 13, you can copy and paste the following code:

<div id="footer-social">
    <div class="container">
        <a href="YOUR-FACEBOOK-URL-HERE" target="_blank"><i class="fa fa-facebook"></i> <span>Facebook</span></a>
        <a href="YOUR-TWITTER-URL-HERE" target="_blank"><i class="fa fa-twitter"></i> <span>Twitter</span></a>
        <a href="YOUR-INSTAGRAM-URL-HERE" target="_blank"><i class="fa fa-instagram"></i> <span>Instagram</span></a>
        <a href="YOUR-PINTEREST-URL-HERE" target="_blank"><i class="fa fa-pinterest"></i> <span>Pinterest</span></a>
        <a href="YOUR-BLOGLOVIN-URL-HERE" target="_blank"><i class="fa fa-heart"></i> <span>Bloglovin</span></a>
        <a href="YOUR-GOOGLEPLUS-URL-HERE" target="_blank"><i class="fa fa-google-plus"></i> <span>Google Plus</span></a>
        <a href="YOUR-TUMBLR-URL-HERE" target="_blank"><i class="fa fa-tumblr"></i> <span>Tumblr</span></a>
        <a href="YOUR-YOUTUBE-URL-HERE" target="_blank"><i class="fa fa-youtube-play"></i> <span>Youtube</span></a>
        <a href="YOUR-RSS-URL-HERE" target="_blank"><i class="fa fa-rss"></i> <span>RSS</span></a>
    </div>
</div>


Your "footer.php" file should now look like this:

Screenshot:


In the code you just added, there are many lines of code that begin with "<a href=.....".
Each of these lines pertains to a specific social media network. We've included some you may not need.
To remove the social media networks you do not want to display in the footer area, simply delete that particular line of code.

When you are left with the social networks that you do indeed want to display, please remember to replace the dummy text YOUR-FACEBOOK-URL-HERE , etc. with the direct URL that links to your social network account instead.
NOTE: The " " quotation characters wrapping the URL are necessary to keep in the code.

When you're finished, be sure to save changes to the file.
If you ever need to make changes to the footer area's social icons, please note you will need to come back and do so within this file.



STYLING THE FOOTER'S SOCIAL MEDIA ICONS


Lastly, we'll navigate to Appearance > Customize > Custom CSS and add some styling for the icons.
You can copy and paste the following into the Custom CSS box.

#footer-social {
    background-color: #f1f1f1; 
    margin: 30px 0; 
    padding: 40px 0; 
    text-align: center;
}

#footer-social span {
    color: #c69f73; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    font-size: 12px;
}

#footer-social a {
    margin-right: 20px;
}

#footer-social a i {
    background-color: #c69f73;       
    margin-right: 5px; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    color: #fff; 
    border-radius: 50%;
}


I have preset some example colors in the above code for the footer's social media icons.
I have set the bar's background color to be a light gray (#f1f1f1), the circular area & social networks' text to be the default Rosemary gold accent color (#c69f73), and the actual icons to be white (#ffffff).


Want to change the different elements to your preferred colors?

Below is the same code as I've noted above however, in this version, I've written which colors will affect which elements. Feel free to replace the different 6-digit hexadecimal color codes with your own colors.
NOTE: Please do not paste the below code into your Custom CSS box. Only use the code above which doesn't have notations made in it.


#footer-social {
    background-color: #f1f1f1;     <---  THIS IS THE FOOTER SOCIAL BAR'S BACKGROUND COLOR 
    margin: 30px 0; 
    padding: 40px 0; 
    text-align: center;
}

#footer-social span {
    color: #c69f73;                <--- THIS IS THE COLOR OF THE SOCIAL NETWORK TEXT
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    font-size: 12px;
}

#footer-social a {
    margin-right: 20px;
}

#footer-social a i {
    background-color: #c69f73;     <--- THIS IS THE ICON'S CIRCLE'S BACKGROUND COLOR
    color: #ffffff;                   <--- THIS IS THE ICON'S COLOR
    margin-right: 5px; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    border-radius: 50%;
}


If you find yourself with any questions regarding this, please don't hesitate to open up a new support ticket and let us know! :-)