Last week I posted a two part article about creating a WordPress staging/development server using Wamp (Windows, Apache, MySQL, and PHP). I broke the topic into two posts:

• Installing WampServer on your computer
• Installing WordPress on your Wamp installation and setting up one or more virtual hosts

If you’ve set up a similar staging/development environment, here’s a tip on where to locate, and how to reference, static images not originally part of your selected WordPress theme.

Most WordPress themes have sub-directory specifically for the images that make up the theme. If, for example, you’ve added some additional images to customize your site (I added a custom banner image along with a few other images), then place those images in the same images directory as your theme. Even though they weren’t part of the original theme, they have become part of your customized version of that theme the minute you embedded them in the theme’s various php files.

Once your custom images are placed in the images sub-directory of your theme, reference them using the following php command to make your customized theme easier to move between the hosted version of your blog and the one on your staging/development server:

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

You might be tempted to reference the image with a complete URL. For example, to reference my RSS icon I could write the following complete URL:

http://www.techtraction.com/wp-content/themes/abstrakt3c/images/feed-icon-16x16.jpg

That works on the hosted version of my site and on my staging/development server (provided I have an active Internet connection). The problem, however, appears when I make these changes on my staging/development server and carelessly reference the image with the complete URL of my staging/development server.

http://local.techtraction.com/wp-content/themes/abstrakt3c/images/feed-icon-16x16.jpg

If you remember back in the first part of the Installing a WordPress Staging/Development Server post, I added the “local” prefix to each site I was staging. If I start getting carelessly and embedded that URL into the various files that make up my theme, things start to break when I push the changes up to the hosted version of my site. The better way to embedded such references is with this php command:

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

The stylesheet_directory command inserts the URL of the directory that contains the current theme stylesheet. You can append additional file and directory information to complete the reference.

NOTE: You can also use <?php bloginfo(’template_directory’); ?> in a similar manner but that command inserts the URL of the template directory. That command is useful if you plan to place a general purpose images sub-directory up at that level so all themes can easily access general purpose images. For more information, check out the WordPress documentation that reviews theme development.

When I use that command to reference my RSS feed icon, it appears as follows in my sidebar.php file:

<?php bloginfo('stylesheet_directory'); ?>/images/feed-icon-16x16.jpg"

The entire line, with the rest of the HTML, appears as follows:

<p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/feed-icon-16x16.jpg" alt="RSS Post Subscription"> <a href="feed:<?php bloginfo('rss2_url'); ?>">RSS posts</a></p>

Setting up a WordPress staging/development server is a great way to safely experiment with the inner workings of WordPress themes and one of the first step towards creating your own theme.

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: How-To & Tech Tips