How to customize a WordPress child theme

Once you’ve created your WordPress child theme, you can begin to customize its design and configuration to your liking, safe in the knowledge that subsequent theme upgrades will not overwrite those settings.

You can do so from your cPanel File Manager: log in to your HostPapa Dashboard, click on cPanel and then your domain link. From the Files section click on the File Manager icon.

Customize your theme using CSS

The simplest way to customize the design of your child theme is through the Cascading Style Sheet (CSS). Each child theme has a file called style.css, which stores the rules that govern the look of your site.

In this example, we’ve created a child theme based on the popular Twenty Seventeen WordPress theme. In the WordPress theme folder (app/themes), the child theme files are stored in a dedicated sub-folder, called twentyseventeen-child.

Child theme files

Open the folder and then edit the style.css file. You can use cPanel File Manager (via the Edit button) or download the file using an FTP client, then open it in a text editor, like Notepad or Text Edit.

Style sheet file

Enter the CSS rules required to customize the site design to your preference, then save the file. If you used an FTP client to download the file before editing, don’t forget to upload the amended CSS style sheet to your server.

Style sheet

If you’re new to CSS, then most web browsers allow you to inspect your site’s CSS when browsing. Visit your site’s front page and, in Google Chrome, right click and select Inspect (CTRL+SHIFT+I).

Code inspector

In Microsoft Edge and Mozilla Firefox, right click and select Inspect Element. Firefox also allows inspection using Tools -> Web Developer -> Inspector.

The CSS inspector provides a live view of your site and its code, allowing to make changes to CSS rules and see the results on screen. When you’re happy with a rule, simply copy and paste it into your theme’s CSS style sheet.

Pasting code

When the stylesheet has been saved, reload your site’s front-end in the web browser to see the results.

Override parent theme files and settings

Another great feature of child themes is that overriding parent theme settings is quite simple. WordPress checks your child theme to see if the folder includes a file that corresponds to a file with the same name in the parent theme folder. If so, the child theme file is used. If not, WordPress falls back to the parent theme equivalent.

So, to make changes to parent theme files, such as header.php or content.php, simply copy the parent theme file to the corresponding location in your child theme. Open the file in a text editor and make the changes you wish.

Build dedicated template files for child themes

While WordPress prioritizes child theme files over their corresponding equivalents in the parent theme folder, you can also create standalone files – for example, template files that govern the structure of your header, footer, page layout and sidebar – in the child theme. These files only exist in the child theme folder, but will be integrated into the presentation of your site.

Again, you should start with basic layout files from your parent theme – for example, page.php, header.php and copy them to your child theme folder. Edit the files so that they call additional, custom files of your choice when loaded (for example, one called header-custom.php).

Create the new custom files in a text editor, and include your layout customizations. Style the customizations with CSS rules, then save the files to your child theme.

Find out more about custom template files at the WordPress Codex.

Add custom functions to your child theme

When creating the child theme, alongside the dedicated style sheet file (style.css), we also included a bespoke functions.php file, which is used to add features to the theme.

Functions.php file

If you take a look at the parent theme’s functions.php file, you’ll probably find it’s packed full of PHP code that defines the theme’s features. When using a child theme, WordPress first loads the parent theme’s functions.php file and any features included in the corresponding child theme file are loaded in addition to the parent functions.

functions.php code

This means that you’re free to edit the child theme’s functions.php file to include additional features, widgets and other additions. Find out more about WordPress functions over at the Codex.

If you notice any problems or if you need any help, please open a support ticket from your HostPapa Dashboard. More details on how to open a support ticket can be found here.

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache