If you’re building a website using WordPress, then you are using something that’s called a WordPress theme. A WordPress theme defines the way your website looks. It defines a lot of the functionality your theme may have. It could create specific widget areas. It can add shortcodes for you to use within your content and so much more. A WordPress theme is the cornerstone of your WordPress website.
You can view your installed themes and which one is currently active pretty easy. Just click on Appearance / Themes in your WordPress admin dashboard. In the screenshot above you can see that for this WordPress installation two themes have been installed: Twenty Seventeen and Twenty Twelve. Twenty Seventeen is currently the active theme.
If you want to change or add some functionality to your website, if you want to change how your website looks, then you need to change things in your theme. A quality WordPress theme gets updated from time to time: adding in new stuff, making it compatible to the latest WordPress version and more. So when you would edit your theme files directly, those edits would get overridden when you update your theme. How can we prevent this? Just use a child theme. The things you want to change about your theme are placed within that child theme. This child theme will not be overridden by updates of your main theme, thus your own stuff does not get cleared out .Implementing a WordPress child theme looks complicated, but really, it isn't!Click To Tweet
Child Theme Folder
You need to have access to the files on your web server, through FTP, SFTP or maybe some other way. Then navigate to the folder wp-content/themes. There you can find one or more subfolders. Each folder within the themes folder is an actual theme or a child theme.
In the example above, you can see there’s a folder for each theme that has been installed. Twenty Seventeen is currently our active theme that we want to extend upon with our own custom functionality and CSS. So we have to make a child theme for this Twenty Seventeen theme.
Let’s start by making a new folder for your child theme within the ‘themes’ parent folder. Call it ‘twentyseventeen-child’. The name of your new folder does not matter that much, as long as you don’t use spaces. It’s a good practice to add ‘-child’ to your chosen name, so you can see quickly which one of your themes is indeed a child theme.
Your custom stylesheet: style.css
Next, add a new file ‘style.css’ within your new child theme folder. This file is where we are going to put our own custom CSS. With this CSS, we’ll override the CSS of the main parent theme whenever we want.
There’s one more thing left to get our child theme up and running. Open up your new ‘style.css’ file in a text editor and add the following lines on the top of that file:
/* Theme Name: Twenty Seventeen Child Theme URI: http://example.com/twenty-seventeen-child/ Description: Twenty Seventeen Child Theme Author: John Doe Author URI: http://example.com Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-seventeen-child */
This is just a template to get you started. Change everything you want to make this your own. You could change your theme name for instance, add another description, author name and so on. The only thing that matters here is the name you set for the template field. This will be a child theme for ‘twentyseventeen’, so we need to add its name in the template field. Don’t forget to save your file and head on over to the WordPress admin dashboard. Once again, click on Appearance / Themes.
You can see that our new child theme appears within the installed themes list. Now just click on our new theme, activate it and you’re done. You now can put your own custom CSS within the style.css file of your child theme.
A place to put your PHP code snippets: functions.php
One more thing. There are times you would want to add custom PHP code to your child theme. Of course, that’s not possible within our stylesheet file, so we need to make one other file within our child theme folder: functions.php.
All those code snippets you find on the internet that are talking about placing custom PHP in your functions file, it’s simply this file they’re talking about.
That’s it. You have a fully functional WordPress child theme to add your own CSS and custom PHP code snippets.
Let me know your questions and remarks in the comments below.