WordPress child themes

WordPress child themes

In this post I’ll write about WordPress child themes. First I’ll explain what child themes are and why they are very useful. Then I’ll explain how they are made, with a few concrete examples for some popular WordPress themes.

Contents:

  1. What is a WordPress child theme?
  2. How to create a WordPress child theme
  3. Examples of WordPress child themes
    3.1. Storefront child theme
    3.2. Astra child theme
    3.3. GeneratePress child theme
  4. Appearance changes using child theme style.css
  5. Appearance and function changes using child theme functions.php
  6. Why all this?
  7. Conclusion


1. What is a WordPress child theme?

First I’ll explain what a WordPress theme is:

Theme is a set of CSS and PHP code (and files) that determine what your website will look like: where the widgets will be positioned, what kind of fonts will be used, what the background colour will be etc. Most themes are customizable – some more, some less.

However, sometimes it is needed to get some design, or even functionality, that the theme author hadn’t thought of. This is where child themes step in, enabling introduction of the desired changes, without the use of any (additional) plugins, or making a new theme – so that the changes remain even after the theme updates (new versions).

For example: the “Powered by bacon & electricity” copyright at the bottom of this page is implemented using a child theme and a simple line of PHP/HTML.

Child theme “works” by changing certain elements of the main theme. A concrete example to help understand this:

// begin copyright changes - this is a comment

add_filter( 'generate_copyright','tu_custom_copyright' );
function tu_custom_copyright() {
    ?>
    <span class="copyright">© 2018 - <?php echo date("Y"); ?> I/O Gremlin</span> • Powered by bacon & electricity </div>
    <?php
}

// end copyright changes

So the original copyright created by the theme’s author is replaced with a custom made one. In this case this was done using a newly created function: “tu_custom_copyright”. We’ll be dealing with customizations in more details a bit later, but first to explain how to create a child theme.


2. How to create a WordPress child theme

Making a child of an existing theme is relatively simple. First make a directory for the child theme within the WordPress theme directory, which is:
wp-content/themes

For start, the child theme directory can be created on the local computer, then, along with files included, uploaded to the wp-content/themes directory. Directory name is usually created as “theme_name-child“, but you could name it whatever you like. No empty spaces and special characters in the directory name (slashes “-” and underscores “_” are allowed).

Next, create a text file (using any text editor) named “style.css” – no other name. That file should contain certain fields, created as a commend, that is otherwise disregarded by “computers”, but in a style.css file of a theme, WordPress will not ignore the contents of this particular comment added at the very beginning:

/*
 Theme Name:   GeneratePress child
 Theme URI:    https://io.bikegremlin.com/wp-content/generatepress-child/
 Description:  GeneratePress child theme
 Author:       BikeGremlin
 Author URI:   https://bike.bikegremlin.com/about-the-author/
 Template:     generatepress
 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, woo commerce ready
 Text Domain:  generatepress-child
*/

Template:” is the name of the directory in which the “mother” theme is installed, it must exist and be correctly written.

Other fields are whatever you like and won’t affect the child theme’s functionality.

Fields after (below) “Template:” can be omitted, but don’t forget to “close” the comment using “*/”.

It remains to create functions.php text file. Functions that add functionality, or that change the working of the existing theme functions (later on that) will be added here. It can generally be left blank for the start, though some themes “insist” on adding certain functions right from the start.

After this, when opening your themes menu, you will see your newly added child theme shown. Activate it. 🙂

Created (and uploaded) child theme will be shown in the WordPress themes menu
Created (and uploaded) child theme will be shown in the WordPress themes menu
Picture 1


3. Examples of WordPress child themes

Before explaining the way appearance and functionality is altered using child themes, I’ll first give a few examples of “blank” (prepared for additions and changes) child themes for a few popular WordPress themes. Showing the contents of the style.css and functions.php files of the child themes.

For a concrete child theme, it is good to visit the theme author’s website and check whether there are some particular requirements for the functions.php contents.


3.1. Storefront child theme

Storefront is a theme by the WordPress authors (Automattic). Primarily aimed at web-shops using WordPress and WooCommerce. How to make a child theme for it?

style.css:

/* 
Theme Name: Storefront Child 
Version: 1.0 
Description: Child theme for Storefront. 
Author: Woo
Author URI: http://woocommerce.com 
Template: storefront 
*/

functions.php:

<?php

// Storefront Child theme - add your code after this (new line), before the "?>"

?>


3.2. Astra child theme

Astra is a very fast and well written WordPress theme. With good integration with Elementor and WooCommerce.

style.css:

/**
Theme Name: Astra-child
Author: BikeGremlin
Author URI: https://io.bikegremlin.com
Description: Astra child theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

functions.php:

<?php
/**
 * Astra-child Theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Astra-child
 * @since 1.0.0
 */

/**
 * Define Constants
 */
define( 'CHILD_THEME_ASTRA_CHILD_VERSION', '1.0.0' );

/**
 * Enqueue styles
 */
function child_enqueue_styles() {

	wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );

// changes and additions go after this, before "?>"

?>


3.3. GeneratePress child theme

GeneratePress is one of my favourite themes. With excellent documentation and support. Fast, well written, with great Elementor integration.

style.css:

/*
 Theme Name:   GeneratePress child
 Theme URI:    https://io.bikegremlin.com/wp-content/generatepress-child/
 Description:  GeneratePress child tema
 Author:       BikeGremlin
 Author URI:   https://bike.bikegremlin.com/about-the-author/
 Template:     generatepress
 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, woo commerce ready
 Text Domain:  generatepress-child
*/

functions.php:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );

// add your functions and code after this, before the "?>"

?>


4. Appearance changes using child theme style.css

You can look for the code of your WordPress webiste by pressing F12 in most browsers while viewing the site and choosing “Elements” option.

A concrete example. When viewing picture galleries, I didn’t like social share icons to be visible. First thing to do was to find what style defines their position. It was done like shown in picture 2:

Finding the styling for share buttons
Finding the styling for share buttons
Picture 2

The picture is rather small, but you’ll have to take my word for it that next to number 4 in picture 2 it is written: “.heateor_sss_vertical_sharing”. So I edited it’s “vertical” position to “push it” further back so it doesn’t show when a Lightbox gallery image is shown, editing style.css of the child theme:

/* moving shared icons to the background  */

.heateor_sss_vertical_sharing {
	z-index:100000 !important;
}

/* end of moving shared icons to the background  */

Now, since “.heateor_sss_vertical_sharing” is defined in the child theme (as well), it takes precedence over that style definition in the main theme. This is how style and function alterations are done using a child theme: whatever you define in the child theme takes precedence.

The result of such changes can be seen on the website of a makeup studio in Novi Sad, for example.

Another example is the change of the background image and it’s styling. Style definition was “hunted down” using the method shown in picture 2, with a few more changes than in previous example:

/* changing background image and styling - don't forget to "close" the comment */

body {
background-image: url( 'https://io.bikegremlin.com/wp-content/uploads/2019/03/io_bikegremlin_background2.jpg' );
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

/* end of changing background image and styling */


5. Appearance and function changes using child theme functions.php

When changing functions.php file, it is possible to add a completely new function. For example, listing child pages of a higher hierarchy page, using a pre-defined shortcode:

// listing child pages - as well as other pages of the same "level" if the page is not top level

function relja_list_child_pages() { 
 
global $post; 
 
if ( is_page() && $post->post_parent )
 
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
    $childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
 
if ( $childpages ) {
 
    $string = '<ul>' . $childpages . '</ul>';
}
 
return $string;
 
}
 
add_shortcode('relja_child_pages', 'relja_list_child_pages');

// end of listing child pages

A function “relja_list_child_pages” was added. Now, shortcode “relja_child_pages” will list all the child pages. An example from this website would be clicking on “Services” from the main menu.

Likewise, existing theme functions can be re-defined. One of the ways to do it is using “hooks”. Picture explains it better, here is hooks cheat sheat for GeneratePress theme.

Here is how that is used to show contact telephone and email at the top of the page on a website:

// thin blue line on top

add_action( 'generate_before_header', 'blue_top_menu' );
function blue_top_menu(){
     ?>
        <div class="blue-top-menu"><a title="[email protected]" alt="[email protected]" href="mailto:[email protected]" class="link-blue-top-menu">[email protected] <a title="+38163666999" alt="+38163666999" href="tel:+38163666999" class="link-blue-top-menu">+38163666999</a></div>
            
    <?php  
}

// end of thin blue line on top

A new function called “blue_top_menu” was defined, with the hook “generate_before_header” used as a place for showing it.

How it looks like in practice can be seen on this website for sailing in Greece.


6. Why all this?

A perfectly logical question, although I left it for the end.

Basic desired look and functionality of a WordPress website can be achieved using an appropriately chosen theme. Still, it is not always possible to find a good quality theme that matches your needs 100%.

Of course, there are a lot of good quality plugins that enable a lot of needed changes and additions. Still, I think it is better to solve as much as possible without using plugins, especially for minor alterations that can relatively easily be implemented. Why?

  • Each plugin puts additional “weight” on the website, often coming with a lot more functions and code (that needs to be run on each page visit) than necessary.
  • Each plugin is a potential security risk.
  • Because of the previous two points: the fewer plugins, the better. Use only those that are really necessary. Make all the other “minor” changes using a child theme.

Desired changes can be made “directly” within the theme. But: in case of a theme update, all the changes will be lost. A child theme is a convenient way to make the desired alterations “permanent”.


7. Conclusion

When choosing a theme for your WordPress website, do it with care and caution. Obviously, a theme should provide (most of) the looks and the functionality you require. But also check how regularly it is updated, does the author provide good support and documentation (important for child theme editing), as well as how well written and “fast” it is. I wrote a series of posts on website optimization, explaining that aspect.

Create a child theme immediately and test how it works.

Share...

Leave a Comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.