Child themes are a staple of every WordPress developer.<\/p>\n\n\n\n
There are times when the functionality provided by the theme developer doesn't meet your needs and you want to add something else.<\/p>\n\n\n\n
I'll often say in my tutorials to \"edit the functions.php<\/em> file\". Whenever I say that, I'm assuming you're editing a child theme.<\/p>\n\n\n\n You should never<\/strong> edit the theme files. When you update a theme to a new version, all your added code will be deleted.<\/p>\n\n\n\n To add custom programming to your theme, always<\/strong> use a child theme.<\/p>\n\n\n\n A WordPress child theme builds upon or overwrites the functionality of the parent theme.<\/p>\n\n\n\n It brings in everything from the parent theme, other than any changes you made to the Customizer.<\/p>\n\n\n\n At its most simple, it's just a stylesheet and a few lines of code in a PHP file.<\/p>\n\n\n\n You need to have the parent theme installed, but only the child theme will be active.<\/p>\n\n\n\n Any subsequent updates to the parent theme will apply to the child theme, unless you've already overwritten them.<\/p>\n\n\n\n On the front end, the parent theme CSS is loaded first, followed by the child theme CSS. That way you can overwrite styles without usually needing to add !important<\/em>.<\/p>\n\n\n\n How to create a child theme for any WordPress theme<\/strong>:<\/p>\n\n\n\n Let's build a bare bones child theme for GeneratePress, because it's awesome, I use it all the time and there's a free version available here<\/a>.<\/p>\n\n\n\n If you'd like to download the bare bones child themes I use, please right-click any of the links below and save them to your computer. They're around 20kb each.<\/p>\n\n\n\n Feel free to amend them or use them however you want, just please don't sell these child themes. Of course it's fine to use any of them on a site that you sell.<\/p>\n\n\n\n There's nothing fancy about them - they're just a good starter for you to quickly switch to a child theme if you're using any of the parent themes.<\/p>\n\n\n\n And now on with building your own child themes.<\/p>\n\n\n\n On your computer, we'll create a folder called intelliwolf-generatepress-child<\/em>.<\/p>\n\n\n\n In there, create two text files called style.css<\/em> and functions.php<\/em>.<\/p>\n\n\n\n I recommend using Atom<\/a> for this, whether you're on Mac or PC. It's free, open source and just does a marvellous job.<\/p>\n\n\n\n Add this code to style.css<\/em> and save:<\/p>\n\n\n\n Add this code to functions.php<\/em> and save:<\/p>\n\n\n\n Zip the folder up so you have a file called intelliwolf-generatepress-child.zip<\/em>.<\/p>\n\n\n\n If you have GeneratePress installed, you can go ahead with activating the child theme. If not, just go get the free version of GeneratePress here<\/a> so you can see the child theme in action.<\/p>\n\n\n\n In your WordPress test installation, go to Appearance -> Themes<\/em>. Click \"Add New\", then upload intelliwolf-generatepress-child.zip<\/em>.<\/p>\n\n\n\n Activate it and there's your new child theme.<\/p>\n\n\n\n Read on for an explanation of how you can customize these files to fit your parent theme.<\/p>\n\n\n\n Let's look at the style.css<\/em> file first.<\/p>\n\n\n\n Notice that the text in style.css<\/em> is wrapped in \/* and *\/?<\/p>\n\n\n\n Those are starting and ending of multi-line comments.<\/p>\n\n\n\n Anything you put between these will not be executed by the browser.<\/p>\n\n\n\n Put any CSS you want to add to the child theme after *\/.<\/p>\n\n\n\n I like to keep this area for the CSS that I want to use on multiple sites with the child theme. This is great for templating your work.<\/p>\n\n\n\n I keep customisations for the individual site in Additional CSS<\/em> in the WordPress Customizer. But use whichever you prefer.<\/p>\n\n\n\n The two lines in the example I gave are the only two required for child themes. I'll go through some of the optional ones below.<\/p>\n\n\n\n Change rest of the line after \"Theme Name\" to the name you want for your child theme. Don't wrap it in quotes.<\/p>\n\n\n\n The only other thing we need to do is connect \"Template\" to your parent theme.<\/p>\n\n\n\n If you're using a theme other<\/strong> than GeneratePress, change this line in style.css<\/em>:<\/p>\n\n\n\n Change \"generatepress\" to the folder name of your parent theme.<\/p>\n\n\n\n Another way to find the parent theme connector is, in your WordPress admin area, navigate to Appearance -> Editor<\/em>. Switch the theme to your parent theme and look in style.css<\/em> for the line \"Text Domain:\". The text that comes after that is what you need to enter after \"Template\" in your child theme style.css<\/em>.<\/p>\n\n\n\n There are a number of options you can add to style.css<\/em>.<\/p>\n\n\n\n The lines I usually add to a child theme are:<\/p>\n\n\n\n They should be fairly self-explanatory. Change the values accordingly.<\/p>\n\n\n\n You need to have <?php<\/em> at the start of the file so the server knows to treat the text as PHP.<\/p>\n\n\n\n The child_enqueue_styles()<\/em> function tells WordPress where the parent stylesheet is located. The add_action<\/em> tells WordPress to bring them in when it loads the stylesheets.<\/p>\n\n\n\n Unless you know what you're doing, you don't need to edit these lines.<\/p>\n\n\n\n Any PHP you want in functions.php<\/em> should be at the bottom of the file. Just replace this line with your code:<\/p>\n\n\n\n I have two other snippets in my standard child theme for GeneratePress.<\/p>\n\n\n\nWhat is a WordPress child theme?<\/h2>\n\n\n\n
Download Child Themes<\/h2>\n\n\n\n
Create the folder and files<\/h2>\n\n\n\n
\/*\nTheme Name: Intelliwolf GeneratePress Child\nTemplate: generatepress\n*\/<\/code><\/pre>\n\n\n\n<?php\n\nadd_action('wp_enqueue_scripts', 'child_enqueue_styles', 15);\nfunction child_enqueue_styles() {\n wp_enqueue_style('parent_style',\n get_template_directory_uri() . '\/style.css');\n}\n\n\/\/ Add custom code here.<\/code><\/pre>\n\n\n\nStyle.css Explanation<\/h2>\n\n\n\n
Customize style.css for your child theme<\/h3>\n\n\n\n
Template: generatepress<\/code><\/pre>\n\n\n\nOptional child theme functionality<\/h3>\n\n\n\n
Author: Intelliwolf\nAuthor URI: https:\/\/intelliwolf.com\nDescription: Child Theme for GeneratePress\nVersion: 1.0.0<\/code><\/pre>\n\n\n\nFunctions.php explanation<\/h2>\n\n\n\n
\/\/ Add custom code here.<\/code><\/pre>\n\n\n\nWhat else goes into my standard Child Theme?<\/h2>\n\n\n\n