If you read dozens of articles about a WordPress child theme and you’re feeling more confused than you were to begin with, then this article is for you. It’s 2024, the right time to settle this once and for all.
In this article you won’t find any copy-pasted and misinterpreted content, but you’ll most certainly have all your WordPress child theme ducks in a row.
For our practical and visual examples, we’ll be using the OceanWP free WordPress multi-purpose theme. Not only because OceanWP is one of the most amazing themes you’ll ever cross paths with, but also because this content is presented to you by the team behind OceanWP. Hi, there!
Let’s get this party started.
What is a WordPress child theme?
Though the name itself makes it sound like something out of the ordinary, it’s really not.
A WordPress child theme, in its most basic state, contains solely the files that define a theme per WordPress Theme Structure Guidelines:
- style.css: even though it doesn’t contain any styling, the ‘header’ text is the info you see (and can modify) in WordPress backend. Such as the theme name, author, theme URL, etc.
- functions.php: contains one and only most important function, which serves to tell the child theme – ‘hey, get all functionality from that theme over there’. The ‘theme over there’ aka the theme where all the juice is coming from is actually called the WordPress parent theme.
- screenshot.png: the image of the theme, displayed in the WordPress backend. Image size should be 1200px by 900px.
- ReadMe file: optional; contains the shortest version of all the information you’ll read in this article.
It’s worth mentioning that, ever since the arrival of WordPress Block themes, themes such as OceanWP are considered Classic. This doesn’t mean that Classic themes are any less powerful (quite the contrary), but the innards of a child theme will differ depending on whether the parent theme is a Block or a Classic one.
Consider this info as a brief introduction into answering one of the most frequently asked questions: what is the difference between a theme and child theme?
What is the difference between a theme and child theme?
To put things into a simple perspective, the main difference between a theme and child theme is their inner content.
A WordPress theme contains all the hard work, effort and sweat. Yes, we’re referring to the codes that power all the brilliant functionality and features of a theme. For example, the ability to choose a different header style or display blog posts in a specific way.
On the other hand, a WordPress child theme, in its basic form, contains one simple code. This code serves to soak up all the juice and energy from its parent theme at all times.
With this in mind, it’s rather simple to understand that the difference between a theme and child theme lies within their functionality:
- WordPress theme: functions standalone, doesn’t depend on any other themes installed.
- WordPress child theme: dependent; can’t function without its parent theme. When a child theme is in use, it receives all the information from the main aka the parent theme. That being said, the parent theme must be installed and present on your website at all times.
This makes you wonder about the purpose of a child theme, right?
We’re about to clarify that one for you as well.
What is a WordPress child theme for?
The purpose of a WordPress child theme resides deeply in the roots of one of the most common WordPress mistakes committed by beginners and inexperienced designers equally: editing theme files directly, either by using the built-in WordPress Theme Editor, FTP, File Manager or similar tools.
Let’s say you want to change a piece of text that appears under your single posts, like ‘You May Also Like’ or ‘Related Articles’. As already mentioned, the most common and, at the same time, the most incorrect approach is to find this piece of code in the main theme files, thus alter the code directly.
At first, it appears to be the easiest, fastest and smartest thing to do. This theory gets debunked with the next available theme update.
Why?
Because WordPress updates (themes, plugins) function in a specific way: all ‘old’ files get removed and then replaced with ‘new’ ones.
If you ever re-copied the same files (images, text docs) with the same name, from one folder to another, you understand how it works and why your PC always prompts if you want to replace the existing file with the new one.
This update process is unique for all themes and plugins, it’s how WordPress works.
Basically, all the work you did gets removed and you’re back to square one.
Bummer.
Avoiding theme updates to prevent this from happening will just add more WordPress mistakes to your list. Luckily for you, it’s the one mistake (or two) you’ll definitely refrain from after reading this article.
Clearly, one of the purposes of a WordPress child theme is the ability to add custom codes.
However, with a child theme you can do so much more. Though we won’t be able to cover all opportunities, we’ll help you understand the most common child theme usage practices.
Override parent theme or plugin codes with a child theme
Extendable WordPress themes and plugins enable users to alter default theme and plugin codes via child themes.
Without getting too technical, this is usually achieved with the use of code filters.
Following our previous example involving the change of the ‘You Might Also Like’ text, if you’re using the OceanWP theme, you can check the official documentation on how to alter the default Related Posts title.
As another example, if you want to rename WooCommerce single product tabs, you could use the official WooCommerce code example to rename and modify product tabs.
Though you can find a lot of custom codes on the internet, or even write some for yourself using AI tools (learn more about the future of AI in web development), whether or not you can actually override default theme and plugin codes to achieve different outcomes, depends on the theme and the plugin source code itself.
Therefore, when it comes to overriding default functionality, it’s always best to refer to the official developer documentation for OceanWP (or your theme of choice). Likewise, we recommend you consult your theme or plugin support whether something specific can be achieved and how.
Custom codes that serve to override default theme and plugin functionality are added into the functions.php file of a child theme.
Add new (custom) codes to a child theme
Besides modifying existing functionality, with a WordPress child theme you can also add codes to achieve brand new functionality.
For the sake of simplicity, let’s say you want to create a WordPress shortcode that will enable you to always display the current date or year.
Instead of editing your website content each year (or, Lord of Codes and Cables forbid, each day), you would write a PHP function to help you display a dynamic (self-updating) date / year. So, all that’s left for you to do is to insert a shortcode inside the content where you want it to appear.
This approach saves you a lot of time and is, without doubt, future editing-proof.
Needless to say, when it comes to new functionality via child themes, you’re not limited to the use of shortcodes only. You can add any functionality you want.
The main method of adding new codes is to add them via the functions.php file of a child theme.
Override parent theme or plugin templates. Or both
When it comes to theme or plugin templates, it’s important to understand we’re not talking about content templates designed with pages builders, such as WPBakery Page Builder templates library.
Instead, we’re referring to PHP file templates. These file templates usually contain a mixture of PHP and HTML codes, which serve to render (display) various content on your website. For example, blog posts, products, etc.
Whether or not the WordPress theme you’re using contains such editable templates for you to play with, depends on the theme itself.
If you’re using OceanWP, all main template files our users are usually looking to override are located in the ‘partials’ and ‘woocommerce’ folders inside the main theme folder.
For example, let’s say you want to remove the time and date element from under posts in the Related Posts section. While you could definitely use CSS (not recommended in this case) or a PHP filter (see ‘Override Parent Theme or Plugin Codes‘ section for more info) to achieve that, perhaps, at some point, you would like to add more modifications.
Since OceanWP utilizes a related posts template, to edit this template via a child theme, you would need copy the template into the child theme following the exact same path (folder-1/folder-2/file). Only then, you would be able to properly make edits in the copied file directly.
In this way, all alterations you make will remain intact, even when you update the parent theme.
Bear in mind, you only need to copy specific files you want to make changes to. This means you should try to avoid another child theme mistake, which is to copy absolutely all parent theme files.
In a similar manner, some WordPress plugins, such as WooCommerce, also offer the ability to override specific templates.
Besides overriding existing theme or plugin templates, you can also create new templates within your child theme.
Create new templates inside the child theme
Once you master HTML, PHP, as well as WordPress template files and hierarchy, you can begin to create your very own templates.
Let’s say there’s a specific page template you put to use quite often on your website. Instead of using a WordPress Page Builder plugin, such as WPBakery or Visual Composer (which you can totally use, of course), you can create a custom page file template and simply select it from the Page Settings inside the WordPress editor whenever you want to use it.
Unlike the process of overriding existing theme or plugin codes or templates, creating new templates does require coding knowledge, so this approach is used mainly by professionals.
As might be expected, new templates are added inside the child theme folder, while the functionality to call the templates in order to put them into use is added into the functions.php file of a child theme.
Child theme white-labeling
White-labeling your child theme is actually one of the most fun things you can do. White-labeling is performed to present a theme like it were your own, for the sake of impressing clients or even friends and family.
When you’re white-labeling a child theme, it means that you can:
- Change the child theme folder name so it resembles your theme name. For example, instead of ‘oceanwp-child-theme-master’, you can use ‘indystack’.
- Change the screenshot.png file with a file of your own, so the thumbnail goes in line with your brand. Note, you must use the same image name.
- Change the content of the style.css file so the information displayed relates to you. In case of the OceanWP child theme, you can alter everything in the style.css header info, except for the line 7, which is the template part.
And just like that, with a few simple edits, you can tell (and show) everyone you’re using a custom theme you set up yourself.
Be advised, white-labeling a child theme can’t ‘fool’ experts. In that case, if you want the entire world to think a theme is entirely yours, you would need to code it from scratch.
After all explanations and examples so far, we’re positive you now have a full understanding (or you’re close to it) of what a WordPress child theme is and how you can use it on your website.
As a cherry on top, we’ll complete your knowledge by going over some of the frequently asked questions about child themes.
WordPress child theme FAQ
Should I use a child theme?
Whether or not you should use a child theme on a website, totally depends on you and website goals.
If you have the need to do any of the things mentioned in the ‘What is a WordPress child theme for?‘ section, then yes, you should definitely use a child theme.
Should I create a child theme in WordPress?
You can definitely create a WordPress child theme step by step on your own or use a child theme generator, such as the Child Theme Configurator plugin, to create a child theme for you.
However, most WordPress themes already include ready-to-use child themes, so that would be the best approach.
If you’re using OceanWP, you can add a child theme to your website with a single click.
When should I install my child theme?
If there’s a need to use a child theme, you can add it to your website at absolutely any point of development.
Hopefully, you’ll do it before making some of the usual WordPress mistakes we warned you about in this article 😉
Where do I put my child theme in WordPress?
WordPress child themes are installed just as regular themes, via Appearance > Themes > Add New.
The other solution would be to use FTP or File Manager, then upload the child theme content to the ‘wp-content/themes’ folder.
Should I activate parent or child theme in WordPress?
If you’re using a child theme and have made modifications via a child theme that you want to use on your website, you should activate the child theme.
Does a child theme slow down WordPress?
On its own, a child theme doesn’t slow down WordPress.
However, if you add faulty or bad codes into the child theme, that can result in speed and other issues, so this responsibility rests with you.
To learn more about WordPress optimization and speed, check out the WordPress Performance Optimization video from the event IndyStack hosted in 2023 or the Best WordPress Caching Practices tips.
Can I experience issues with a child theme?
A child theme on its own will not cause any issues on your website.
But, just like with potential WordPress speed issues, if you use faulty codes, or make bad changes to file templates, you can experience issues. Again, this responsibility rests with you.
How do I customize my child theme in WordPress?
There are various ways to customize a child theme in WordPress, but it all depends on your website goals.
Check out the ‘What is a WordPress child theme for?‘ section in this article for ideas on how you can use a child theme and in what ways you can customize it.
How do I update my child theme?
Unlike themes, a child theme will never receive an update.
When you update the parent theme (once an update is available, of course), the child theme automatically gets updated through it. Of course, with the exception of potentially modified or added codes, or file templates located in the child theme itself which remain intact.
In short, when you update the parent theme, all codes and alterations made through the child theme will not be deleted or removed.
Naturally, to make modifications to codes or file templates added to the child theme, you have to resolve to manual editing.
Conclusion
You may think of a WordPress child theme as something out of this world or even unholy at times because people tend to overcomplicate things. The truth is, a child theme is one of the simplest WordPress forms that exists and you can do extraordinary things with it.
Whether you actually need to install a child theme and use it, depends on the design, functionality and overall website goals.
Understanding how a child theme works and what are the Dos and Don’ts will not only help you grow as a WordPress designer and developer, but it will also help you differentiate between true and fake experts and professionals (in case you ever need to hire one).
Whenever in doubt, refer back to this article and browse through the examples shared.
We also recommend you bookmark this page and save it for later.
And, if it so happens, you’re ready to jump right into WordPress and try out the OceanWP theme, you can get the premium versions (OceanWP Pro Bundle or Ocean eCommerce Pro) inclusive with your Indystack hosting plan – for free.
