Assuming your main theme has been written properly and well coded, it is easy to set up a child theme. This will allow you to make many types of small changes to your website look and function, without having to do lots of re-coding of files or being concerned that your hard work will be overwritten at the next update. A child theme is also a great way to customise a woocommerce site. You can add code snippets to the functions.php file which can alter lots of woocommerce behaviours without having to code complicated templates.
In this example of the process, we will make a child theme for the twentyseventeen theme.
It is best that you do this work on a local, or demo site, so nobody will see your work till you have completed it.
You Can click here to download the generichildtheme
What is in a child theme
A child theme can be set up with just two files, although it is better to have three as you will see at the end of the post.
Ready to start
We will be using as our example the twentyseventeen theme. We will also be using a local demo site setup within WAMP. So first, we need to open the website and log in as an admin. In themes, we set up so that twentyseventeen is our default theme and check it works ok in your browser.
We now start an incognito window and open the same website. By being incognito, this browser window will not be logged in, so we will see the site as a normal user. This is because additional files and configs are in use while logged in so this method keeps things cleaner.
What Style files are being used?
We can now use the view source option to look at the HTML code and you can scan down for the CSS files and find two key CSS files.
<link rel='stylesheet' id='twentyseventeen-fonts-css' href='http...
Which is for setting up the Google fonts, which we will ignore for the moment.
<link rel='stylesheet' id='twentyseventeen-style-css' href='http...
which is our main style sheet for the theme. Notice that the file path is in ‘…/themes/twentyseventeen/…’, so we know it is from a theme, and the theme is twentyseventeen.
Install our generic theme
Now we can download or install the ‘genericchildtheme’. Note that this theme comes disabled and will need setting up as we will show in the following process.
Connect to the parent theme
Once the child theme is installed need to load the style.css into our editor. You may find on the themes list it shows an error saying that is a broken theme. That is OK.
We need to change the template parameter to the name of the parent theme – in this case, twentyseventeen. This is actually the name of the folder the theme is in, which is usually the theme name. If you are not certain of your theme name then, you will see the name in themes list at the bottom of the screen. Remove any spaces between words. you could also pul the name from the file path you saw in the style.css of the theme. If you see an entry like ‘Twenty Seventeen/twentyseventeen1’ this means the twenty seventeen theme, but it is in a folder called twentyseventeen1 and therefore you need to use the folder name, twentyseventeen1 as your parent theme name. Well written themes should not have a problem being in a different folder, but not all themes are written correctly. 😉
Now we use our editor to change the name of the Template. We have highlighted it below in red. You can change the theme name, URI, description, Author and Author URI to anything you like, especially if you are going to use this theme and want to be recognised for your future work!
You can change the theme name, URI, description, Author and Author URI to anything you like, especially if you are going to use this theme and want to be recognised for your future work!
/*
Theme Name: My Geneic child theme
Theme URI: https://wpbusinessclub.com/generic-child-theme-setup
Description: Generic Child theme from WP Business Club
Author: John
Author URI: https://wpbusinessclub.com/
Template: parentthemenamehere
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: genericchild
*/
/*
notes:
Replace the template with the name of the theme that will be parent
*/
Activate the child theme
You should then be able to refresh the theme list and the theme will stop being broken. You can now select it and make it active. Switch over to the incognito window and refresh the page to see what has happened. The theme should now be broken! That’s ok, check the source and you will see the style file now refers to the folder where the child theme is. Great.
<link rel='stylesheet' id='twentyseventeen-style-css'
But we have not styled in our theme. In alsmot all cases we want the main theme styles to be used. We will then be able to add exceptions in the child theme style. That is what we will set up here.
Connect to the parent theme styles
Now you need to edit the funciton.php file. If you take the comment away ‘//’ from ‘add_action’ the function will work, but with a problem. If you check the source of the code created with your browsers, you will see that the style sheet for the parent theme is given twice, and the second time is after our child theme CSS and so could overwrite anything we add.
Name the parent theme ID
So, we need to edit your functions file to refer to the same id of the stylesheet, which is this case is ‘twentyseventeen-style’ – We ignore the ‘-css‘ suffix. WordPress adds that to them all automatically. WordPress does not allow the same ID to be used twice, so the second reference to the style file will be removed.
<?php
// you need to uncomment the next line to allow the function to run
add_action( 'wp_enqueue_scripts', 'my_childtheme_enqueue_styles' );
function my_childtheme_enqueue_styles() {
$parent_style = 'twentyseventeen-style'; // replace this with the name of your parent style id
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'mychild-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
Now save and refresh the source view and check the style files. You will see the parent style is mentioned just once and we have ‘forced’ our child theme to follow it and therefore to take precedence on anything we want to set up.
You can try this by changing something simple like the font size of <p> tags. Add this code to your style.css
p
{
font-size: 32px;
}
Note that the indentation is optional but improves the look. Use CTRL-Refresh to force a refresh if changes are not seen.
If you wish to change another element it is best to use the Inspector to show the exact element name. You can change the style in the inspector to see it works, then copy the code into your style.css and CTRL-Refresh. Try to give a specific and not generic reference, otherwise, the change could be applied elsewhere in the content.
Extras
Screenshot
The third file being used by this child theme is the screenshot.png which gives the picture of the child climbing up the tree. You can replace this with an image of your own, which should really be a screenshot of the working site, and it should be the same size – 1200px x 900px. The photo is by Goran Ivos from Unsplash
Google fonts styles, removing other style files
The second style file being called is to bring in the use of some google fonts. We can remove these or replace with our own. In either case, we will need to add some CSS to associate replacement fonts to be used by the theme.
To replace with our own Google Fonts.
We want to replace because adding fonts we no longer use will slow the theme down.
If you go to the Google fonts site and choose your google fonts you can then add the fonts to your existing functions.php enqueue action. If you use the same ID as the old google fonts entry, you will be able to replace it. However, make sure it is added in your code before the other style sheets, so it is then loaded first in the page. You can then add styles to make use of the fonts in your style.css
