inFocus Social Media Icons

WebTreats have recently released a set of Social Media Icons for all 10 of the inFocus theme colours and provided instructions on how to include them in the sidebar.

Anyone who’s tried this has no doubt noticed that on switching the inFocus theme colour the social media icons in the sidebar may not match the new chosen theme colour. Well, no big deal really. But if you want the icons to match whichever inFocus theme colour you choose, try this.

First, go to the wp-content/themes/infocus/styles/ folder and create a new sub folder named, say sidebar, in each of the 10 folders containing the images for each colour variation. For example black/sidebar/, blue/sidebar/ etc. Download the icon set and then copy the icons for each colour variation to the appropriate sidebar sub folder.

The WebTreats instructions use a Text widget, containing the necessary HTML, placed in the sidebar. For this solution though we need to use PHP which will not execute in a Text widget. So first, you need to install the PHP Code Widget WordPress plugin.

Next, add the PHP Code widget to the sidebar and paste this code block into it replacing the href attribute with the appropriate URL.

<?php global $color_scheme; ?>

<!-- RSS Feed -->
<a href="YOUR URL HERE" title="RSS Feed" target="_blank">
	<img src="<?php bloginfo('template_directory'); ?>/styles/<?php echo str_replace('.css', '', $color_scheme); ?>/sidebar/rss-circle.png"/>
</a>

 

The important difference here is the src attribute for the img tag which uses the $color_scheme variable from the inFocus settings to determine which is the current colour scheme and grab the icon from the appropriate folder. Simply add more <a></a> tags for however many icons you wish to include.

You can use CSS to style the PHP Code widget if you wish. I used this to remove the rather large gap that appeared below the icons.

.widget_execphp {
	padding: 0;
}