Doing More With Child Themes

Click here to go back to our child theme setup index.

In our earlier post on child themes, we looked at how to create a basic one and modify the parent theme via the child theme’s CSS. Now we’re going to take our child theme up another level by using it to modify a template file in the parent theme. It’s a great way to make changes that just aren’t possible via CSS while still keeping the site upgrade friendly. Here’s how.

Step One: Locate The File To Change

Recently I had a customer ask how to change the staff listing on our Moonrise theme. They were looking to have the staff images open up a lightbox when clicked instead of opening up a new page. To do that we need to change a line of code in the staff-group-item.php file which is located inside the “layouts” folder.

It may take a bit of digging to find the correct spot in the theme to change, but with a bit of experimentation you can usually track it down. It’s helpful to have idea of how the WordPress Template Hierarchy works. It determines what file is used to generate the page based on what the visitor is looking at.

Step Two: Copy The File From the Parent To Child

Now that we know what file we’d like to use, we can copy the original file from the parent theme and paste it into the child theme. Since this file is inside a folder, we’ll first need to create the same folder in our child theme. So for this we’ll make one named “layout” and then place a copy of the staff-group-item.php file in it. We don’t need to copy all the files over; just the one that we need to change.

Unfortunately WordPress’ built in theme editor is not capable of doing this. The best option is to use an offline text editor like Notepad to make the changes and then upload them via FTP. If you’ll be making more than one change in your life to a WordPress file, this is the way you need to get used to working. To log into your sever via FTP, you’ll need to get credentials from your web host. You can typically find that in their control panel for your site.

But some of us will only need to do this once (or so we think). There is a useful plugin called WP Editor that you can use to upload new files to a WordPress theme as well as make changes. It’s limitation though is it can’t create a new folder. If you need to upload file that’s in the root or top directory of your theme, they this will work, otherwise you’ll need to use FTP.

Once you have the files moved over, we can edit.

Step Three: Make Your Edits

Now we can use either or desktop editor or the WordPress editor to make the necessary changes. For our example we need to change this line:

<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_post_thumbnail( 'staff-thumbnail', array('class' => 'person') ); ?></a>

to this:

<a href="<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); echo $image[0]; ?>" class="lightbox" rel="staff-group"><?php the_post_thumbnail( 'staff-thumbnail', array('class' => 'person') ); ?></a>

which will change the link to point to the image file instead of the individual staff member. Once you’ve made your changes, you’ll need to save them. Then your child theme will override the parent theme for that file.

A Few Notes

This particular strategy works when you’re overriding a template file. What I mean by that is you can override things like single.php, index.php, page.php, staff-page.php — anything that shows up in the WordPress template hierarchy.

You can also override anything that’s loaded in the parent theme using the get_template_part function. WordPress will check to see if the template part exists in the child theme first. If it does, WordPress will load it instead of the one from the parent.

What you can’t override this way is anything that’s in a WordPress function file. Those will be items that are loaded via the functions.php file in the parent theme. This will include widgets, theme options, any extra fields used by the theme, post types and things like that. We’ll cover those in another installment in the series.

Hopefully this will help you use child themes even more to both customize and upgrade proof your site.