So you’re running your website on WordPress and you want to edit some styles. What would be easier than just open up your theme’s style.css file and just hack away? Once you’re done, your website looks the way you want it to – and you’re all good, right?
Wrong. Because once you go and update your theme, the changes you have made to your theme’s original files will be lost. For good.
The solution: Your very own WordPress child theme.
Add additional CSS to WordPress
In case you just want to do some small changes to your CSS in WordPress, there is a very simple solution which ships with WordPress.
In your WordPress theme customizer, you find the option “Additional CSS”, which lets you do just that: add additional CSS:
But if you want to do more, like adding functionality, overriding your theme’s templates or do a lot of CSS changes, there really is no way around creating your very own child theme.
What is a child theme?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
WordPress Codex
So your child theme will have all the functionality and styling of the original theme (parent theme) without you doing anything. But you will be able to override every aspect of your parent theme from within your child theme.
Pros and Cons of a WordPress Child Theme
There are quite a few reasons why you should use a child theme for your WordPress website. And yeah, there are some cons, which I will list below. But first, let’s see the Pros of using a WordPress child theme.
Pros of using a WordPress child theme
- Have your changes saved permanently – no fear of losing your changes when updating your original theme.
- Easily override any functionality and style of the parent theme.
- You don’t have to create a complete theme from scratch, but instead you can use all the parent theme’s functionalities.
Cons of using a WordPress child theme
- There is a learning curve when you first get started, escpecially when you parent theme uses i.e. custom hooks or has a huge codebase that you need to find your way through.
- Additional CSS and JavaScript files that need to be loaded may affect the load times of your website.
Manually Creating a WordPress Child Theme
Creating a WordPress Child Theme is really very simple. All you will need is a text editor (like Sublime Text or Microsoft’s VSCode), an FTP program to upload the files to your webserver (like FileZilla) and the FTP login credentials for your hoster. The rest is just copy and paste from here on.
First of all, fire up your FTP program to connect to your webserver. Then navigate to your WordPress installation an go to the subdirectory
/wp-content/themes/
Create the child theme directory
In there, you create a new directory with the name of your new theme, in this example it’s called lubnan.
Create the child theme files
Within this new directory, create two new files:
- functions.php
- style.css
So after you did that, you will see something like this in your editor (in this case Visual Studio Code).
The code for the WordPress child theme
The child theme’s style.css file
Your child theme’s style.css file is not only the file which holds the styles, but it also contains all the information WordPress needs from your child theme. And it is the only file WordPress looks into when checking for your child theme information.
So at the start of your style.css file, put this comment:
/* Theme Name: Lubnan Theme Description: Hayda Lubnan - The theme Author: Christian Hänsel Author URI: https://www.haensel.pro Template: twentynineteen Version: 1.0 Text Domain: lubnan */
It’s pretty much self explanatory, so I will leave you with the two comments I have on this one:
“Template” refers to the directory name of the parent theme, i.e. “twentynineteen” in this case. And “Text Domain” is the directory name of your child theme.
The child theme’s function.php file
The function.php file will hold all, or at least some logic of your child theme. While it’s okay to put as much code in here as you wish, you might want to structure your code as the theme may grow in the future.
But for starters, we will just add very little code – just enough so the theme will work the way you want it to.
And that means that we will have to load up the parent theme’s style.css along with our new child theme. So in your functions.php file, paste the following code.
<?php
function lubnan_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'lubnan-theme-css', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'lubnan_theme_styles' );
This code will take care of the loading of the parent theme’s CSS file, so you will have all the neat looks that you want to have.
And now you can actually see the new theme in your WordPress backend under “Appearance”.
Oh, but what happened? There is no preview image? Well, we’re gonna fix that right now.
The WordPress child theme preview image
Every theme has a preview image, right? Yup, and yours should, too. WordPress does tell us that they want it to be 1200×900 pixels, and its name must be screenshot.png.
Create a nice looking image, and put it right into your main child theme directory. After that, your theme preview will look like much better.
And now we can go ahead and finally activate the new child theme!
There you go, you just created a child theme :) Congratulations. Now go ahead and have fun with it. And maybe I may someday follow up on this post and explain how exactly you can override functionalities and templates of your parent theme.
Until then – Have fun!