WordPress Child Theme

There are multitudes of WordPress theme in the wild. Sometimes we saw something we like. Most of them came with customization settings that can change how WordPress present things. Sometimes what we want can’t be customized easily through the settings. Child theme can be a way for us to customize the theme to our needs.

A child theme is an extension of the parent theme. There are two most basic files we need to make a child styles.css and functions.php. The parent theme still need to exist along the child theme. The additional styles can be put in the child theme’s style.css and the new functionalities in the functions.php.

The basic style.css for a child theme may look like this

 /*
Theme Name: Theme blabla Child
Description: Child Theme for Theme blabla
Author: Indra Lukmana
Author: http://www.indralukmana.com
Template: blabla
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blablachild
*/

.article {
    margin-bottom: 30px !important;
} 

The style header comment section need to refer the parent theme in Template item. Then the custom styles can be added after the comment header. However, for this to work we also need to refer the parent style in the functions.php.

The basic content for functions.php are as follows

<?php

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

add_action( 'wp_enqueue_scripts', 'blabla_child_enqueue_styles' );

The functions.php can also have additional functions which can customize how the theme behave. For example the following filter function. It will add read more link on a post which have explicit excerpt defined. In normal behavior the post won’t have read more link.

function add_excerpt_read_more( $excerpt ){
    global $post;

    if ( has_excerpt( $post->ID)) {        
        $more = sprintf(
            '<a class="read-more" href="%1$s">%2$s »</a>',
            get_permalink( get_the_ID() ),
            __( 'Read More', 'blablachild')
        );
        return $excerpt . $more;
    }

    return $excerpt;

}
add_filter( 'the_excerpt', 'add_excerpt_read_more');

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.