Adding custom icons to your WordPress theme

If you are using a WP framework it is quite simple to modify the background images and icons set up with the theme. Some of the more powerful themes even allow you to upload new images from right inside the admin area.  However, if you’re using something a little simpler, most of the time you have to go in and manually add images to your theme the old fashioned way. If your theme falls under the latter, we’ve got the quick and dirty guide you need to add custom icons or images to your WordPress theme.

You Will Need:

• Basic HTML Knowledge
• An FTP Client
• No Fear of PHP Code

In order to add images to your theme you will need to first create a folder within your current wp-themes folder called images. Unless it already has one, in which case it would be found in your wp-folder/WP-Content/WP-Themes/YourTheme/images.

Using your favorite FTP Client ( I like leech FTP ) upload any images that you want to use in your theme. If you just want to replace the images that come stock with your WordPress theme you can probably get away with simply renaming your new images to overwrite the ones in your current theme images folder. If you’re adding images to place they didn’t exist before, read on.

Grabbing the directory with WordPress template tags

You can use a WP template tag to refer to the current theme’s directory without having to type out the entire URL. This is the most compatable way as it uses a dynamic reference to the directory, and will work on any installation.

<?php bloginfo('template_url');?>

This will simply get you into the directory of whatever theme is currently active. Now lets look at two ways to implement and image from this folder.

First we’ll look at getting a background image from this directory, then a static image that could be served as a logo or an icon elsewhere in the theme.

In your stylesheet:

body{
background-image: url(<?php bloginfo('template_url');?>/images/my-image.gif);
}

The code above simply looks for a specific image inside the images folder within your theme. The second code will do the same, but will populate a normal HTML image code.

<img src="<?php bloginfo('template_url');?>/images/my-image.gif" alt="my icon"/>

You should know feel relatively safe adding your own images to any WordPress theme.

Written by Ryan Edmunds from CrunchPlay.com
Posted on May 20th, 2009 and filed under WordPress Coding & Design
Do not forget to subscribe to our RSS feed for updates

4