Adding new Social icons to the Mystique theme

Adding child themes to WordPress, my favourite blogging system.I use my blog to record and share my knowledge, but also to present to possible employers my skills. I use it like a marketing tool for my persona. For this, I need to make available not only the RSS and Twitter account, but also resume profiles like Xing, LinkedIn and Facebook.

Since I am using WordPress and I know a little bit of PHP and MySQL I wanted to customize my current theme.But some time ago I’ve read that they don’t encourage you to customize directly the chosen theme, but instead create your own child theme, with the desired customizations. This way, when the theme will be updated, you won’t loose neither time nor brains trying to redo all the modifications.

Creating a child theme, directly from the developers of WordPress

Making a child theme is very simple. Create a directory, put a properly formatted style.css file in it, and you have a child theme! With a little understanding of HTML and CSS, you can make that very basic child theme modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.

For some time ago, I started using child themes. At first, it seemed a useless time investment, but since then the theme was updated 3 or 4 times, so imagine each time creating a list of modifications to the original, implement them again and again in the new version!

Let’s see some code!

The modification that I will present now is how to add new icons for job websites, up on the bar. The steps are:

1. Using your preffered image editing tool (I preffer using Paint .Net, very smart and effective PNG producer) I modified the nav-icons.png file :

From :The initial set of Social icons To: The final set of Social icons

The extra icons are taken from a royality free icon pack. They are 64 by 64 pixels. You can modify their sizes, but you’ll also have to update the javascript code that moves the images up and down.

Note: To make your life easier and keep the modifications to a minimum, keep the Twitter icon first and the RSS last, otherwise you’ll have to override the entire $nav_extra underneath.

2.  Add the icons in your child theme, by concatenating the script that shows new buttons with the one which is already present, containing the Twitter and RSS. If you want to change the order of the icons, you can change the lines order. If you want to make the RSS icon first, instead of adding strings to $nav_extra, you’ll have to recreate also the RSS and Twitter strings and insert them in the string variable. Don’t forget to add the action to WordPress queue, such that your function to be called:

function mystique_navbuttons_pics($nav_extra)
  $nav_extra .= '<a href="" class="nav-extra facebook" target="_blank" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
  $nav_extra .= '<a href="" class="nav-extra linkedin" target="_blank" title="Contact me on LinkedIn!"><span>Contact me on LinkedIn!</span></a>';
  $nav_extra .= '<a href="" class="nav-extra xing" target="_blank" title="Contact me on Xing!"><span>Contact me on LinkedIn!</span></a>';
  $nav_extra = str_replace("title", "target='_blank' title", $nav_extra) ;
  return $nav_extra;
add_action('mystique_navigation_extra', mystique_navbuttons_pics');

3. Add the CSS required by the icons. This requires each icon to know where to start cutting from main PNG file its own appearance. We will create and inject the CSS in the corresponding file.

function mystique_navbuttons_css(){
 $i = THEME_URL.'/images'; ?>
/* Extra navigation icons */
#header a.xing{background: url(<?php echo $i; ?>/nav-icons.png) no-repeat scroll -192px top transparent}
#header a.linkedin{background: url(<?php echo $i; ?>/nav-icons.png) no-repeat scroll -64px top transparent}
#header a.facebook{background: url(<?php echo $i; ?>/nav-icons.png) no-repeat scroll -128px top transparent}


That’s all guys, now you have a child theme wit your customizations and never afraid that you’ll have to spend time again when the theme will be updated!