UPDATE NOTE: JANUARY, 2015
The information below is long out of date, however, I have a new post which tells you how to customize your WordPress theme using the current version of WordPress. You can find it here: How to Make Changes to or Modify Your WordPress Theme
You may also want to look at these related posts:
- How to Set Up a WordPress Development Sandbox for Your Website
- WordPress Themes Sources You Can Trust
- Finding Which WordPress CSS Needs Changing With Chrome, Safari or Other Browser Tools
In response to a request for help in the comments for my Beginner’s Guide to WordPress post, I created this quick reply on how to change the default photo or image in your WordPress theme. Unfortunately, I discovered I couldn’t use all of my formatting in the comments section, so here’s the brief version. I’ll add some screen captures later.
There are a few ways to change your WordPress theme images, depending upon your preferences.
To change a WordPress theme header photograph, you have to know first if the photograph is part of a CSS tag background or if it is an image tag in the HTML.
First, look at the HTML code either by viewing the page source from your browser or by opening the header.php template in your theme (/yourwordpresspath/wp-content/theme/yourtheme [substituting your wordpress server path for /yourwordpresspaath/ and the name of the theme you are using for /yourtheme/].
Now look for a div tag labeled something like “header” or “header_img” and is followed by some HTML that looks something like this:
<img src="/images/header_1.jpg" width="970" height="140" alt=" header image 1" title=" header image 1" />
The specific attributes will probably be different (unless you are using the Cutline 3-Column-Split-11 theme by Chris Pearson), but basically you are looking for an actual tag that displays the header photo.
How To Change Your WordPress Theme Photo or Image If It Is An <img/>Tag
If you find that tag, you can create another image the same width and height and upload it to the same directory as the current image. Note: If you hate mucking with the HTML, you should give it the same name as the current header photo and upload it to the same directory. If you are a cautious bloke (which I am), first re-name the current header image to something like “original-header_1.jpg” before uploading your new “header_1.jpg” (again, assuming this is the name of the header photo in your theme template.)
If you don’t find the tag in your theme header.php template, it means that your image is referenced in a CSS background.
How to Change Your WordPress Theme Header Photo or Image If It’s Part of a CSS Tag
Look at your HTML code and note what ID tags are in your header code For example,
<h1><a href="<?php echo get_option('home'); ? rel="nofollow">/"><?php bloginfo('name'); ?></a></h1>
<div id="header" >
<h1 ><a href="<?php bloginfo('url'); ? rel="nofollow" >" ><?php bloginfo('name'); ? ></a ></h1 >
<p > >strong > <?php bloginfo('description'); ? > </strong > <br/> </p >
You almost always are looking for something with the ID “header” or “masthead”.
Open your theme’s style.css file (if your theme files are writeable, you can do this in WordPress Appearances | Editor; otherwise, open it in your web favorite web editor. I’m partial to BBedit or CSSEdit).
Find the CSS tag that matches your HTML code. For example, in the first example above, it is “id=”headerimg” so I find #headerimg:
Now, notice that the line: background:url(‘images/mainbannerimage.gif’);. This is the line that specifies that the background for this division is the mainbannerimage.gif found at the URL the-path-to-your-wp-content-themes-theme-name/images. Unless a full URL path is specified, the CSS will start with the directory in which it resides. So you now know where the image you want to replace is stored: your-Wordpress-path/wp-content/themes/your-theme/images.
Download the image and make your new image the same width and height. Again, if you hate mucking with the CSS, you should give it the same name as the current header photo and upload it to the same directory. Keep a copy of the original image on your system in case something goes wrong with your new image.
If creating and modifying images and photos for the web is a bit out of your area of expertise, you should be able to find someone who can do it for you either by asking a friend, bartering services, or hiring someone. You can always put it up on one of the freelance sites like freelanceswitch.com or elance.com or 99designs.com.
I hope that helps and make sense for you. If you find the information useful, please spread the word. I’ll be adding more WordPress site administration tips in February.