How to Use Images in Child Theme Designs in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

Many WordPress themes use images to add nice touches to the design. Typically, you add these images to the images directory inside the theme. Just as a parent theme may refer to images in its style.css file, your child themes can have their own images directory. The following are examples of how these images can be used.

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, 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/twentyfifteen-child/images.

  2. Add an image to the directory.

    For this example, add the body-bg.png image.

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

    /*
    Theme Name: Twenty Fifteen Child
    Description: My magnificent child theme
    Author: Lisa Sabin-Wilson
    Version: 1.0
    Template: twentyfifteen
    */
    @import url(‘../twentyfifteen/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 has changed from plain white to solid black.

    The Twenty Fifteen Child theme after editing the background image.

    The Twenty Fifteen Child theme after editing the background image.

Using images in a child theme

Child theme images are acceptable for most purposes. You can add your own images to the child theme even if the image doesn’t exist in the parent theme folder — and you can accomplish that without changing the parent theme at all.

In the footer of the Twenty Fifteen theme, a WordPress logo was added to the left of the phrase “Proudly powered by WordPress.” The logo does not appear in the footer of the Twenty Fifteen theme by default; adding it via the CSS in the child theme makes it happen, though!

The WordPress logo in the Twenty Fifteen footer.

The WordPress logo in the Twenty Fifteen footer.