WordPress: Building Kage Child Theme – Creating Social Media Icons

I like Kage WordPress theme https://wordpress.org/themes/kage/ It is minimal, fast, and elegant.  Premium Kage theme has a lot more features than the free one, but sometimes you do not need all extra code when you use only one or two features like a slider or a social menu icons.  Let’s take a look at how to add new features to free Kage theme using a child theme.

Creating social media icons

First let’s create our child theme folder kage-child and initialize it with style.css

/*
Theme Name: Kage Child Theme
Theme URI: https://alexrusin.com/wordpress-building-kage-child-theme/
Description: A child theme for Kage 
Author:  Alex Rusin
Author URI:  https://alexrusin.com
Template: kage
Version: 0.1.0
*/
@import url("../kage/style.css");

Now we can look for social media icons, download them and put in img folder in our child theme folder I downloaded mine from https://www.iconfinder.com/social-media-icons in png format 48x48px.

The next step will be to create a menu options for the social media icons.  Luckily, Kage theme uses options framework plugin, which makes our job real easy. Copy options.php from Kage theme into your child theme folder.  To the end of the options.php  but right before return $options statement add the following code:

        $options[] = array(
		'name' => __('Social Media Icons', 'options_framework_theme'),
		'type' => 'heading');
	$options[] = array(
		'name' => __('Facebook Link', 'options_framework_theme'),
		'desc' => __('', 'options_framework_theme'),
		'id' => 'fb_link',
		'std' => '',
		'type' => 'text');
	$options[] = array(
		'name' => __('Twitter Link', 'options_framework_theme'),
		'desc' => __('', 'options_framework_theme'),
		'id' => 'twitter_link',
		'std' => '',
		'type' => 'text');

Now if you refresh Theme Options under Appearance you will have Social Icons Tab available.

Now lets place the icons in our theme. I decided to place the in the very top next to the phone number.  This part of code is in the header.php.  Copy and paste this file from Kage theme to our child-them. Right after closing form tag(</form>) of the search form place the following code:

Now let’s style our social icons.  In the style.css of the child theme put the following code:

/*social icons styles*/

.social-icons {
    float: left;
    white-space: nowrap;
    margin-left:30px;
}

.social-icon {
    display:inline;
}

@media only screen and (max-width: 768px) {
	.social-icons{
		float:none;
		margin-left:auto;

	}
}

And here you have it – social icons that the site administrator can customize from menu options. In the next post I will describe how to create a simple slider in place of the top image using Bootstrap. Kage child theme code is available at https://github.com/alexrusin/kage-child