In the previous article of the series, we talked about how to create a new child theme to work with the Fineliner theme. After completing all the steps, you should now have your child theme activated and ready-to-use.
It is time to start customizing the theme. The three areas we are going to cover in this article and the upcoming are, customizing template files, customizing functions, and customizing CSS code. Let’s start with the first one.
What are Template Files?
Template files are PHP files that contain a mixture of HTML and PHP code for displaying theme layout and design. When viewing a web page, WordPress automatically looks for the right theme’s template files to use.
For example, if you open a normal page on the front end, the common template files that will be used are
header.php, page.php and
footer.php. But if you open a blog single post (like the one you are currently reading), the
header.php, single.php and
footer.php will be used. In both cases, it is possible that the
sidebar.php might also be used if a theme is designed to have a sidebar on those pages.
For the full information about template files, we would suggest continuing reading here: https://developer.wordpress.org/themes/basics/template-files/
Now back to our case, we use Fineliner as a parent theme. You can find all the template files in its theme folder. The path to the theme folder on your server should look like this:
And at this point, you should also have the path to the child theme (the one you created in the first article of the series) like this:
How to Customize Template Files?
You can just copy the template file(s) you want to customize from the parent theme and put them in the child theme. Then you can edit the code from there. Simple as that. If there are two template files with the same name in both parent and child themes, the one in the child theme will be used instead (the one you customized).
For example, if you want to add some custom HTML and text in the header section of the Fineliner theme, you can just copy the
header.php file from the parent theme and put it in the created child theme. You then open the
header.php file of the child theme and add your custom code into it.
Tip: To edit the code right in the WordPress admin area, we recommend WPide plugin for the job.
The copied template files you put in the child theme will be used instead. In other words, it means that the customized version of the template files overrides the default ones of the parent theme.
The template file customization is usually used when there is custom code needed to be added or existing code needed to be changed in the theme layout and design based on your requirements.
In the next article, we are going to talk about how do you customize the functions of the parent themes.
- Create and Use a WordPress Child Theme with UXBARN Themes
- Customize Theme Template Files via a Child Theme
- Customize Theme Functions via a Child Theme
- Customize Theme CSS via a Child Theme