How to Use Images in WordPress Child Theme Designs

By Lisa Sabin-Wilson

Many WordPress themes use images to add nice touches to the design. Typically, these images are added to a directory named images inside the theme. Just as a parent theme may refer to images in its style.css file, your child themes have their own images directory.

The default Twenty Fourteen theme doesn’t really use images at all, so for this example, you will see another WordPress theme called Twenty Eleven (which comes packaged in every WordPress installation). You follow the same steps for creating a child theme for the Twenty Eleven theme.

Using a child theme image in a child theme stylesheet

Including a child theme image in a child theme stylesheet is common. To do so, you simply add the new image to the child theme’s images directory and refer to it in the child theme’s style.css file. To get a feel for the mechanics of this process, follow these steps:

  1. Create an images directory inside the child theme’s directory: /wp-content/themes/twentyeleven-child/images.

  2. Add an image to use into the directory.

    For this example, add an image called body-bg.png.

  3. Add the necessary styling to the child theme’s style.css file, as follows:

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

With a quick refresh of the site, you see that the site now has a new background. You can see how the background has changed from plain white to a nice black-to-gray vertical gradient background image, with the background color changed to match the gray color in the image (indicated by the #bfbfbf code).

image0.jpg

Using a 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 Eleven design, a line of text appears stating “Proudly powered by WordPress.” In this example, you want to add the logo image in front of the credit text in the footer. Because the logo image already exists inside the parent theme, you can simply add a customization to the child theme’s style.css file to make this change, as follows:

/*
Theme Name: Twenty Eleven Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyeleven
*/
@import url('../twentyeleven/style.css');
footer #site-generator a {
background: url('../twentyeleven/images/wordpress.png') no-repeat
padding: 2px 25px;
}

Save the file and refresh your website.

image1.jpg

Using a child theme image in a parent theme stylesheet

Looking at the previous examples, you might wonder whether replacing an image used in the parent’s stylesheet with one found in the child theme’s directory is possible. That would require a change to the parent theme’s stylesheet, and the idea behind a child theme is to avoid changes to the parent, so no, 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.

You can take this one step further. For example, the WordPress logo in the footer is way too small. A larger logo would be better. Use the Medium PNG: 100 x 100 (grey-m.png) WordPress button that appears on the WordPress.org Logos and Graphics page.

After you upload the desired logo to your child theme’s images directory (by going to /wp-content/themes/twentyeleven-child/images) as grey-m.png, the following style.css file replaces the WordPress logo on the parent theme’s footer with the new WordPress button:

/*
Theme Name: TwentyEleven Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyeleven
*/
@import url('../twentyeleven/style.css');
footer #site-generator a {
background: url(images/wp-logo.png) center left no-repeat;
padding: 2px 110px;
}

Now your child theme shows your WordPress pride loud and clear with the new, larger logo from the official WordPress.org website.

image2.jpg

You cannot 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.