Customize a Pre-configured Child Theme Without Losing Your Changes

Disclosure: Please note that this article may contain affiliate links. You can read the full disclosure here.

For this example I am going to use the Savona Lite Child theme, available for free on WordPress. This is a pre-configured child theme of the Savona theme, so if we apply the changes directly to this child theme, we will lose any changes or customizations when the themes update. So in this case we need a “Grand-child” Theme. However, note, that most Child Themes are rarely updated. So it is up to you if you want to just make the changes directly in your pre-configured child theme.

A Grand-Child WordPress Theme is an extension of an existing Child theme, your customizations will then be safe when the Theme and Child theme update.

To follow these steps, you will need to be able to login to your host, either by FTP or cPanel. These instructions show using cPanel on the Bluehost hosting.

As always, backup your site before making a major change

Setup the Grand-child theme

I will use the Free plugin “Child Theme Configurator” again, it is similar to the post here: How to Setup a Child Theme for WordPress, but the one difference this time, is we are going to duplicate an existing Child theme.

Once you have the plugin installed and activated. Go to Tools on your WordPress menu and select Child Themes

For Step 1, select to Duplicate an existing child theme, then click the Analyze button.
Screenshot of Duplicate Child Theme

Name your new Grand-Child theme savona-lite-child, this will be important for following steps later in the tutorial and optionally set “separate style sheet”
Screenshot of Name grandchild theme

These options you can leave as the default
Screenshot of Step 6 Options

Click the Duplicate Child Theme button.
Screenshot of Click duplicate child theme

Preview your “Grand” Child theme

On your WordPress menu, click Appearance, then Customize.

Screenshot of menu item Appearance customize

Click Change button, by the theme name, and select the “Grand” child theme created savona-lite-child

Confirm that the theme looks the same as the current savona-lite theme in the previewer, we have not modified it yet, so there should be no changes.

If everything looks good, then click Activate and Publish.

Making the Modifications

You will need to login to your host, and access your WordPress files.

**Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus

First, you will need to login to your cPanel or FTP site on your host. You may also be able to do this from the WordPress file editor, however, on our sites this is disabled by our security settings.

The instructions contain examples from the Bluehost cPanel.
  1. Login to your Bluehost account
  2. Click Advanced
  3. Select the File Manager
  4. Screenshot of finding the Bluehost cpanel File Manager
  5. Navigate to your wordpress install theme folder
  6. This is the location of the default install folder, yours may be slightly different. "public_html/wp-content/themes/" screenshot of public html Screenshot of the Wordpress Themes Folder

    Navigate to the new folder under themes savona-lite-child

    Then right-click on functions.php and click edit

    At the bottom of the functions.php file add this code, which will set the max-height of the images using this custom size to 570px, you can change this number to the max-height you want to use.

    /*
    ** Custom Image Sizes
    */
    add_image_size( 'savona-custom-thumbnail', 0, 570, true );

    Next, you’ll need to copy over a file from the “Grand” Parent theme Savona

    Go back to the Themes folder, and click on Savona, then click on Templates, then click on Single, then right-click on post-content.php and select copy.

    Screenshot of Copy file from parent theme

    Add the full path where you will copy the file too, if this is a default installation of WordPress, the full path would be something like: /public_html/wp-content/themes/savona-lite-child/templates/single/post-content.php

    Screenshot of Copy dialog

    Now, go to the file you’ve copied over to the Grand-Child theme, click on themes, then savona-lite-child, then templates, then single, then right-click on post-content.php and select to edit.

    Inside this file, look for the line near the top of the page that looks like this:

    <div class="post-media">
    <?php the_post_thumbnail('savona-full-thumbnail'); ?>
    </div>

    Change ‘savona-full-thumbnail’ to ‘savona-custom-thumbnail’ as shown below:

    <div class="post-media">
    <?php the_post_thumbnail('savona-custom-thumbnail'); ?>
    </div>

    Then save the file.

    screenshot of Save button

    If you are using a caching plugin or your host does caching of your site, you will need to clear your cache, then check your site that the Featured Images are now set smaller.

Avatar for Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

Leave a Comment