Images in WordPress Child Theme Designs

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

Images used in WordPress designs typically are added to the images directory inside the theme. Child themes can have their own images directory, just as a parent theme may refer to images in its style.css file. The following are examples of how these images can be used in child theme designs.

Child theme image in a child theme stylesheet

The first step is to create a simple child theme that modifies the style of the parent theme. In this example, we will use a new child theme we will call TwentyTen Child, based on the parent theme TwentyTen. The new child theme has been updated with uppercase headings.

To include a child theme image in a child theme stylesheet, simply add the new image to the child theme’s images directory and refer to it in the child theme's style.css file.

Create an images directory inside the child theme's directory /wp-content/themes/twentyten-child/images.
Add an image to use into the directory.

For this example, the body-bg.png image was added, which is a simple blue-to-white gradient created in Photoshop.
Add the necessary styling to the child theme’s style.css file, as follows:

/*
Theme Name: TwentyTen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyten
*/
 
@import url('../twentyten/style.css');
body {
background: url('images/body-bg.png') repeat-x;
}

With a quick refresh of the site, it now has a new background. You can see how the background changed from plain white to a nice, blue-to-white, vertical, gradient background image.

Parent theme image in a child theme stylesheet

Child theme images are acceptable for most purposes. Sometimes, however, you’re better off using images supplied by the parent theme. You could just copy the parent theme image folder, with all its images, to the child theme, but that would prevent the child theme from matching the parent theme if the parent theme image ever changes, such as after an upgrade.

Fortunately, you can refer to an image in the parent theme with the @import rule the same way you can reference the parent theme's style.css file.

In the footer of the Twenty Ten design, a WordPress logo appears beside the phrase Proudly powered by WordPress. This is a parent theme image.

In this example, you will add the logo image in front of each widget title in the sidebar. Because the logo image already exists inside the parent, you can simply add a customization to the child theme's style.css file to make this change, as follows:

/*
Theme Name: TwentyTen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyten
*/
 
@import url('../twentyten/style.css');
 
.widget-title {
background: url('../twentyten/images/wordpress.png') no-repeat
left center;
padding-left: 20px;
line-height: 16px
}

Save the file and refresh your website to show your WordPress pride.

Child theme image in a parent theme stylesheet

Replacing an image used in the parent's stylesheet with one found in the child theme’s directory would require a change to the parent theme's stylesheet; the very idea behind a child theme is to avoid changes to the parent, so that isn't possible.

However, you can override the parent theme's rule to refer to the child theme's new image by simply creating an overriding rule in the child theme’s stylesheet that points to the new image.

For example, the WordPress logo in the footer is very small. To make it larger, use the blue PNG 24-bit alpha transparency WordPress button that appears on the WordPress.org Logos and Graphics page. Click the image to open it in your web browser and then right-click it to save it to your local computer.

After you add the desired logo to your child theme's images directory as smbutton-blue.png, the following style.css file replaces the WordPress logo on the parent theme's footer with the new WordPress button:

/*
Theme Name: TwentyTen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyten
*/
 
@import url('../twentyten/style.css');
 
#site-generator a {
background-image: url('images/smbutton-blue.png');
}
 
#site-info {
width: 650px;
}
#site-generator {
width: 270px;
}
#site-generator a {
background: url('images/smbutton-blue.png') right center no-repeat;
line-height: 59px;
padding: 0 63px 10px 0;
float: right;
}

Notice how some rules beyond just the background were modified to override parent theme styling that didn't work well with the new background. Now your child theme shows your WordPress pride loud and clear with the new, blue logo from the official WordPress.org website.

You can’t directly replace parent theme images. Rather, you must provide a new image in the child theme and override the parent’s styling to refer to this new image.