Making a WordPress Child Theme
Making a WordPress Child theme is fairly simple, we will go through them step by step.
Why do I need a child theme?
There are several reasons why you would like a child theme. First, making changes to a theme is not recommended by WordPress. Second, if you change the parent theme directly when you update the theme all of your changes are lost. Third is security, many updates are bug fixes, but some are because of security.
How do I make a child theme?
You can use a plugin to generate the needed files or you can do it yourself. Seeing that this is a learning site I will take you through it step by step. I am going to use TwentyThirteen just as an example, you can use the theme of your choice. Just remember when it says twentythirteen you would substitute your parent theme name for it.
Make a Directory
Make a directory / folder and name it – thirteenchild (or the name of your parent theme and child). Put this file in www ->Your Directory Name -> wp-content -> themes (you should see the parent theme there). See my former article on setting up your development environment.
Make the functions.php file
Now we are going to make two files: functions.php and style.css – you can do this in your favorite code editor or if you are on Linux you can simply go to the command prompt – go to the directory and “touch” the two files to make them.
Now that we have them we need to edit them to make them more useful. Let’s take the functions.php and make a couple of functions to let it see the parent:
/*This file is part of thirteenchild, twentythirteen child theme.All functions of this file will be loaded before of parent theme functions.
Learn more at https://codex.wordpress.org/Child_Themes.Note: this function loads the parent stylesheet before, then child theme stylesheet*/
if ( ! function_exists( ‘suffice_child_enqueue_child_styles’ ) ) {
function thirteenchild_enqueue_child_styles() {
// loading parent style
wp_register_style(
‘parente2-style’,
get_template_directory_uri() . ‘/style.css’
);wp_enqueue_style( ‘parente2-style’ );
// loading child style
wp_register_style(
‘childe2-style’,
get_stylesheet_directory_uri() . ‘/style.css’
);
wp_enqueue_style( ‘childe2-style’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘thirteenchild_enqueue_child_styles’ );
/*Write your own functions here */
Save that.
Mark up the style sheet
First open up the style.css and write this in:
Theme Name: thirteenchild
Description: child theme 2013
Author: PixelatedDwarf
Author URL: http://localhost/projects/wordpress
Template: twentythirteen
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thirteenchildchild_theme
*/
/* Write your own personal stylesheet here */
Now, just save the style sheet in the root directory.
Screenshot.png
- Now we are going to make an image to go along with our theme – time to get out your favorite image manipulation program. Mine is GIMP, you can use your favorite.
- Next we are going to make an image that is 880 x 660 pixels. You can go larger if you want but this seems to be the standard size. You can take a screenshot of your completed site after you complete it – right now I am just going to make one.
- Next, Save the png as screenshot.png
- Once you have your child theme looking the way you want it you can take a screen shot of it and make that your screenshot.png or you can leave your screen shot alone.
Now, upload it to your production server you need to .zip up the directory you have it in. This will help keeping it together while WordPress does the rest.
Go to your dashboard on your production server (where your website is hosted) – click on “Appearance” -> “Themes”
Click the “Add New” button
Click the “Upload Theme” button
Search your local computer for the zip file you created and click the “Install Now” button.
The final step is to “Activate” your new child theme
That is all there is to it. It is much more fun doing it by scratch than getting yet another plugin that you are only going to use once.
These are the basic files that you need for the theme. You can add others like the header.php and the footer.php to give yourself a custom header and footer, but these are extra files.
Here are all of the files zipped up for you so you can see them, and learn from the example.