How to create a WordPress child theme?

Would you like to create a WordPress child theme? Here comes the basics on how to create a child theme and also a short explanation about why a WordPress child theme can be useful for you and your blog.

Why create a WordPress child theme?

A child theme can be very useful when you need to modify the existing theme in one way or another. If you have done like I have, you have edited the original theme and found out that when you update the theme to a newer version your modifications where removed. That is when you need a WordPress child theme. A child theme belongs to a parent theme which is the theme you are actually using. But you can add instructions in your child theme which will be remembered, even when the parent theme is updated. Thus you can update your main theme without worries, knowing that your changes will remain even after the update.

Not long ago I wrote an article about How to change the WordPress excerpt size. In the article I mention a code that needs to be added to the functions.php in the theme you are using. But as I wrote earlier this will automatically be removed upon updating your theme and therefore a better solution is to add the given code into a child theme.

WordPress child theme basics

A WordPress child first of all consist of two files: functions.php and style.css. If you want to add a screenshot which will be seen as you select the child theme in WordPress you can add a file named screenshot.png in the size if 300×225. If you only use these files you will be able to add functions to the WordPress theme and make changes in the CSS.

Let’s create a child theme together

Let us imagine that your WordPress blog runs with the Twenty Eleven theme. We will start the process of creating a child theme making a brand new document which we will name: style.css. Copy the following text into the document and modify the texts with the right info.

Style.css
/*
Theme Name: write the name of your theme
Theme URI: write the name of your theme url
Description: describe your theme
Author: your name
Author url: the url of your homepage
Version: for example 1.0
Tags: give your theme some tags (not important)
Template: twentyeleven
*/
@import url(‘../twentyeleven/style.css’);

/*

It is very important to keep the @import url correct, meaning that it is pointing to the directory where the parent theme can be found. Once this is done you have laid the foundation and from here you just add the changes you feel like. Beneath you can see the example of our final style.css for the child theme. It is not very advanced, but it adds information that will remove the “-” in front of all captions in images in the Twenty Eleven theme and it center’s the text in the caption.

/*
Theme Name: BusinessAndFaith test theme
Theme URI: https://www.siggiblog.com/
Description: BusinessAndFaith child theme
Author: Siggi
Author url: https://www.siggiblog.com/about/author/
Version: 1.0
Tags: custum excerpt size
Template: twentyeleven
*/
@import url(‘../twentyeleven/style.css’);

/* =Global
———————————————– */

.wp-caption .wp-caption-text:before {
content: ”;
}

.wp-caption {
text-align: center;
padding: 5px;
}

Functions.php
As we finish with style.css we can continue on with the next file, functions.php. What you want to add to your functions.php is different from blog to blog, but let us just use an example that we have written about in our blog earlier. The standard WordPress excerpt size is 55 words. If you would like to change this to 70 words you can add the following script to your functions.php file:

<?php

function custom_excerpt_length( $length ) {

return 70;

}

add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );

?>

If you want to add something else or replace this, feel free, but these are the basics of your functions.php file. As you now have created your own child theme consisting of style.css, functions.php and maybe even screenshot.png you are ready to upload and publish.

What about the rest?

You can make changes to files such as header.php, footer.php and other files in your child theme, but in that case you need to copy the entire original file into your a document with the same name in your child theme. You can then make the changes in the file within your child theme and this will replace the file with the same name in the parent theme. This works fine, but be aware of the fact that if larger updates are done to your WordPress theme this can cause problems as you update. Normally it shouldn’t, but it can create problems!

It is useful to know that as you enable your child theme you will need to add your header to the WordPress installation again. Not a big thing, but it needs to be done.

These were just some basics on how to create a WordPress child theme. I hope the instructions will help you and wish you good luck! We will publish more how-to articles in this blog in the future, but if you are inpatient you can find many more similar how-to articles at howtobloginfo.net.