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.
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”
These options you can leave as the default
Click the Duplicate Child Theme button.
Preview your “Grand” Child theme
On your WordPress menu, click Appearance, then 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.
- Login to your Bluehost account
- Click Advanced
- Select the File Manager
- Navigate to your wordpress install theme folder This is the location of the default install folder, yours may be slightly different. "public_html/wp-content/themes/"
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.
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
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:
<?php the_post_thumbnail('savona-full-thumbnail'); ?>
Change ‘savona-full-thumbnail’ to ‘savona-custom-thumbnail’ as shown below:
<?php the_post_thumbnail('savona-custom-thumbnail'); ?>
Then save the file.
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.