Learn How to build a WordPress Child Theme: 17 awesome examples

If you use WordPress and customize your theme, you should hear about WordPress Child Theme. I try to explain what is a child theme, how to build it and give 17 good examples.

Why we should use WordPress Child Theme?

WordPress, WordPress Themes, and WordPress plugins have an upgrade system. If you upgrade your WordPress, themes or plugins, new files are overwritten on exist (old) files. If you are a developer or designer and changed your WordPress Themes files, WordPress update system couldn’t recognize these changes and overwrite all of them. You lost your layout, style etc. Child theme solves that problem.

If you create a WordPress child theme and make your changes on that child theme, WordPress update system doesn’t overwrite child theme, only overwrite the parent theme. So you don’t lose your custom CSS, layout, etc.

How to create a WordPress child theme?

It is very simple. You need to create two files in a folder. I personally name the child theme folder as parentname-child . For example, my parent theme is twentynineteen so I name the child theme folder as twentynineteen-child .

/twentynineteen-child/
    -> style.css
    -> functions.php

style.css File

WordPress gets the theme information from style.css file’s comment.

/*
Theme Name: Twenty Nineteen Child
Theme URL: https://www.onurozgurozkan.com/
Description: Twenty Seventeen Child Theme
Author: Onur Özgür ÖZKAN
Author URL: https://www.onurozgurozkan.com
Template: twentynineteen
Version: 1.0.0
Text Domain: twentynineteen-child
*/ 

WordPress press gets theme name, URL, description, author, author URL, and more information. If you are a WordPress developer or designer, it is a good idea to check WordPress’ Main Stylesheet page.

functions.php File

The functions.php file is where you add unique features to your WordPress theme. A child theme can have its own functions.php file. Adding a function to the child functions file is a risk-free way to modify a parent theme. That way, when the parent theme is updated, you don’t have to worry about your newly added function disappearing.

<?php

add_action( 'wp_enqueue_scripts', 'ooo_enqueue_parent_styles' );

function ooo_enqueue_parent_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

You can get more information on WordPress Theme Functions page.

Initial WordPress Child Theme Project Files

You can download the initial WordPress Child Theme Project files. We name it to version 1.0.0.

How to install and activate a WordPress Child Theme?

It is the same with parent themes. You should upload your child theme to the WordPress theme folder. WordPress child theme should be placed under wp-content/themes/ . You can upload with FTP programme or just from the WordPress Appearance > Themes menu.

Theme Folder for WordPress Child Theme
Theme Folder for WordPress Child Theme

Child Theme Examples: change the style and add functionality

I try to give some example about how to change theme style using with WordPress child theme.

Change colours on the colour palette.

WordPress has a default colour palette on Gutenberg editor. If you have your own colour palette, you can add these colours to Gutenberg editor. You need to add add_theme_support function to functions.php file.

// Adds support for editor color palette.
add_theme_support( 'editor-color-palette', array(
    array(
        'name'  => __( 'Primary', 'ooo' ),
        'slug'  => 'primary',
        'color' => '#025196',
    ),
    array(
        'name'  => __( 'Secondary', 'ooo' ),
        'slug'  => 'secondary',
        'color' => '#FCBA4C',
    ),
    array(
        'name'  => __( 'Sucsess', 'ooo' ),
        'slug'  => 'success',
        'color' => '#447D08',
       ),
    array(
        'name'  => __( 'Danger', 'ooo' ),
        'slug'  => 'danger',
        'color' => '#B9242B',
    ),
    array(
        'name'  => __( 'Warning', 'ooo' ),
        'slug'  => 'warning',
        'color' => '#F08700',
        ),
    array(
        'name'  => __( 'Background Light', 'ooo' ),
        'slug'  => 'background-light',
        'color' => '#F6F7F7',
    ),
    array(
        'name'  => __( 'White', 'ooo' ),
        'slug'  => 'white',
        'color' => '#FEFEFE',
        ),   
    array(
        'name'  => __( 'Grey', 'ooo' ),
        'slug'  => 'grey',
        'color' => '#B8C2CC',
    ),
    array(
        'name'  => __( 'Grey Light', 'ooo' ),
        'slug'  => 'grey-light',
        'color' => '#DAE1E7',
        )
) );

Update jQuery version from 1.12.4 to 3.4.1

jQuery 1.12.4 is included on WordPress but jQuery 1.12.4 has a security vulnerability. That’s why I update jQuery version from 1.12.4 to 3.4.1 You can do this upgrade with a simple function. You can add update_jquery_version function to functions.php file.

/**
 * Update JQuery Version
 * 
 * jQuery 1.12.4 has securiry vulnerabilities. 
 * 
 */
function update_jquery_version() {
    global $wp_scripts;
    $wp_scripts->registered['jquery-core']->src = 'https://code.jquery.com/jquery-3.4.1.min.js';
    $wp_scripts->registered['jquery']->deps = ['jquery-core'];
}

add_action('wp_enqueue_scripts', 'update_jquery_version');

Add RankMath Seo Plugin Breadcrumb

I use RankMath SEO Plugin and I really like it. Breadcrumb is an essential feature of online SEO. RankMath has a breadcrumb solution. Rank Math says that you should add <?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?> code to your website.

I want to add breadcrumb under the header menu. So I create a site-branding.php file under /wp-content/themes/twentynineteen-child/template-parts/header/ folder.

Wordpress Childtheme Folder
site-branding.php

I add <?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?> code to line 21 because I don’t want to show breadcrumb on the homepage.

<?php if ( is_front_page() && is_home() ) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
    <?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
<?php endif; ?>

WordPress looks first your the child theme, if the file doesn’t exist on the child theme then look at the parent theme.

Leave a comment

Your email address will not be published. Required fields are marked *