Tag Archives: php

Editing a WordPress Theme – Image Replacement

by

Approach

LinkedInHoverSundance

In the Sundance theme by Automattic, a simple feature is glaringly omitted – a theme link to your LinkedIn profile above the right sidebar. The theme has links to Twitter, Google+, Facebook, and even Flickr, but LinkedIn is oddly missing. To build out this feature, I shopped together a LinkedIn image that matches the other images using the Paint.net simple (and free) image editor. Since I did not plan to use the built-in link to Facebook, my strategy was to replace the Facebook image on both the front end and back end with a new one for LinkedIn. After replacing the Facebook-ico.gif with my new LinkedIn image, I edited a PHP file in the theme so that a mouse hovering over the image would display “LinkedIn” instead of “Facebook”.

Building the New ImageImageEdit

But how did I get the colors correct and the dimensions matching? The images to Twitter and Google+ aren’t even rendered as images on the page! Simple – I fired up FileZilla, navigated to wp-content/themes/sundance/images and found the .gif files for Twitter, Facebook, and the other options the theme provides by default. I pulled the facebook-ico.gif down from the server to my local machine, and added it to Paint.net into its own layer. I then added a LinkedIn logo from Google Images that I would tweak to fit the theme. I matched the color from the Facebook logo, and using Paint.net’s magic wand tool, painted the matching color to the LinkedIn image. Then I deleted everything except the LinkedIn layer, resized the canvas to 28×28, and saved the LinkedIn image as “facebook-ico.gif”. The last step was to copy the finished product back into the same directory (wp-content/themes/sundance/images) using FileZilla. 

Editing the PHP

PHP Edit

From your WordPress dashboard, navigating to Appearance > Editor, will allow you to tweak several files that make your theme work. After some searching for the term “Facebook”, I found the PHP file called “sidebar.php”, and replaced the “Facebook” text with “LinkedIn” as shown in the screenshot. That’s all it took to change the mouse hover text!

Disclaimer: Some hosting companies block the WordPress Theme Editor that I used to prevent users from breaking elements on their site. As always, keep a backup and use at your own risk.