Using Images in WordPress – Best Practices

by

I’m not a novice to WordPress Theme Design & Development. I’ve actually been doing it for a few years now and in recent years, it has become more than a hobby and is slowing shaping into a career choice.

However, I have a somewhat simple yet puzzling question to ask here…

Forever, I’ve been uploading the images I use through my custom themes into their own “img” or “images” directory under the themes directory under wp-content. Of course, for posts I just used the Media Uploader built within WordPress itself.

But, now that I’m trying to be more professional and produce grade-A work consistently I recently thought about how I handle my images. You see, using my old method I also did NOT use WordPress template tags for the image paths. I was doing the old fashion HTML method with it’s relative path and if I encountered a problem, I just put the WHOLE path in there to save time. That is a huge no, no. I’m well aware but this wasn’t client work…

Anyway, to get to my point – what IS the best practice for using images in WordPress? I’m now beginning to think more inline with this process:

For theme development I now have a “inc” directory within my theme’s directory that then has a “imgs” and “js” directories, etc. When designing the theme, I’m now using WordPress template tags for my paths to work properly throughout the theme. For my posts, I’m still using the Media Uploader and the normal /upload directory.

Is my new method the best practice? Thank you!! Again, I’m just trying to clean up my workflow and methods so I’m more in-line with the Codex and other top tier WordPress projects out there.

Thanks!

3 s
3

I guess from the question you are asking, is there a way to code the image url that is better than typing in the whole url? This is what I do, to ensure that if the domain name ever changes…(which they do in my work because I always build the sites on a project domain and then move them over), you will want to do it this way:

<img src="https://wordpress.stackexchange.com/questions/62714/<?php echo get_bloginfo("template_url'); ?>/images/image-name.jpg alt="whatever" />

You can also use this (and yes I know it is not the technically correct way to call css) when using css in a template:

<style>
#div {
     background-image: url(<?php echo get_bloginfo('template_url'); ?>/images/image-name.jpg);
}
</style>

It works for inline css as well:

<h2 style="background-image: url(<?php echo get_bloginfo('template_url'); ?>/images/image-name.jpg);">Some Title</h2>

I think this is what you were asking…

Leave a Comment