Images in WordPress Child Theme Designs

Many themes use images to add nice touches to a WordPress 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.

How to use 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/twentythirteen-child/images.

  2. Add an image to the directory.

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

/*
Theme Name: TwentyThirteen Child
Description: my fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentythirteen
*/
@import url('../twentythirteen/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 white-and-tan striped image.

image0.jpg

How to use 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’d 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 navigation menu area of the Twenty Thirteen design, a magnifying glass icon appears on the right side that designates the search area — users click it to display the search form. This is a parent theme image.

image1.jpg

In this example, you add the magnifying glass icon in front of the post title. Because the icon 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: TwentyThirteen Child
Description: my fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentythirteen
*/
@import url('../twentythirteen/style.css');
.entry-title {
background: url('../twentythirteen/images/search-icon.png') left center no-repeat;
padding-left: 30px;
}

Save the file and refresh your website to show the magnifying glass before the entry title.

image2.jpg

How to use a child theme image in a parent theme stylesheet

In the earlier examples, you may wonder whether replacing an image used in the parent’s stylesheet with one found in the child theme’s directory is possible. Doing so 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 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.

Above, you place the magnifying glass icon to the left of the entry title. Take that a step further; the magnifying glass icon next to the entry title is small. You can do better with a larger icon. For this example, use a different magnifying glass icon that you can download. Right-click the image in your browser to save it to your local computer.

After you add the desired image to your child theme’s images directory as magnifying-glass.jpg, the following style.css file replaces the magnifying glass icon from the parent theme with the new one you just downloaded:

/*
Theme Name: TwentyThirteen Child
Description: my fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentythirteen
*/
@import url('../twentythirteen/style.css');
.entry-title {
background: url(images/magnifying-glass.jpg) left center no-repeat;
padding-left: 50px;
}

Notice how some rules beyond just the background are modified to override parent theme styling that doesn’t work well with the new icon, like the addition of the padding-left: 50px — that is put in place to provide correct spacing for the magnifying glass. Now your child theme shows the new magnifying glass to the left of the entry title. The new look is quite nice if you ask me.

image3.jpg

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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.