[WordPress] Using Child Themes

Why Do We Need to Use a Child Theme in WordPress?

Earlier when WordPress is mainly for the purpose of blogging, a theme decides the style of a website, or how the website looks like. Nowadays WordPress are getting more complicated to serve many purposes: business websites, portfolios, listing directories, and so on. The website structures are not as simple as before.

For example, with Superlist theme, you can have a listing directory website with useful features such as maps, filtering information, claiming a property, etc. Or, with Newspaper theme, you will have stunning websites that are optimized for speed and provide plenty of ad spaces to display advertisements.

That is to say, nowadays a theme is also an engine to run a website of a specific purpose. Theme makers update their themes frequently not only to fit in with the WordPress updates, but also to release new features, fix old bugs, and so on.

When you update a theme from the WordPress dashboard, all of the old theme code will be replaced with the new one. That means, if you edit a line of code in the theme, after next update, it will not be there anymore.

That’s where a child theme come into play. A child theme purpose is simple: to keep all your customization not to be overwritten by updates of the parent theme. It is also very simple to install a child theme, please refer to this post for a step-by-step tutorial.

How to Customize WordPress with a Child Theme

After creating a child theme, we will have at least two files in that child theme folder:

• styles.css: to overwrite CSS in the parent theme
• functions.php: to write custom functions

To make further changes, we will need to copy some files from the parent theme to this child theme folder and start modifying here.

WordPress Theme Anatomy

Before making any modifications, we would need to know where the files are located. Inside a theme folder, you will find (or should create):

• header.php: The header of a page, usually have meta tags, title, etc.
• footer.php: The footer of a page, usually have footer widgets, or a credit line “Powered by WordPress | Theme name” for a free theme version
• single.php: The template for a single post
• home.php: The template for blog page
• archive.php: The template for categories / tags archive pages
• front-page.php: Not included by default, but you can create this as the template for homepage
• sidebar.php: Contains sidebar info + sidebar widgets

So if you want to modify a page, you need to:

• Find the correct template
• Make changes
• Upload to the child theme folder so that it overwrites content in the parent theme.

Example 1. Display modified date from a WordPress post instead of published date

Displaying the modified date is a good way to inform the visitors that the blog is not out of date. And also, it is good for SEO CTR because users tend to visit the post that is not too old. Theoretically, the date is a meta information that will be found in single.php page templates. Some themes even make it into a function.

The basic principal: You would need to find the right place and change the get_the_date() (or the_date()) function with get_the_modified_date() (or the_modified_date())

Because each theme is different, it’s hard to say where it is. But, starting from single.php or content-single.php, you will find the clue.

For example, if it is like this, that mean the meta has been embedded inside a function, you should find this function somewhere:

A piece of content from content-single.php

Here you can find some of the examples:

1. Newspaper theme

• wp-content/plugins/td-composer/legacy/common/wp_booster/td_module_single_base.php
• wp-content/plugins/td-composer/legacy/common/wp_booster/td_module.php

2. Accelerate theme

The meta information in Accelerate theme is written into a function, so let’s just overwrite it by adding the same function in our functions.php in the child theme.

This piece of code is from Accelerate 1.4.3.

You can copy and paste the function (accelerate_entry_meta()) into your child theme’s functions.php, changing this line:

printf( '<span class='posted-on'><a href='%1$s' title='%2$s' rel='bookmark'/><i class='fa fa-calendar-o'><i> %3$s</a></span>', esc_url( get_permalink() ), esc_attr( get_the_time() ), $time_string);

Into this:

printf( '<span class='posted-on'><a href='%1$s' title='%2$s' rel='bookmark'/><i class='fa fa-calendar-o'><i> Updated on: %3$s </a></span>', esc_url( get_permalink() ), esc_attr( get_the_modified_time() ), $time_string);

And replace this:

$time_string = sprintf( $time_string, esc_attr( get_the_date( 'c' ) ), esc_html( get_the_date() ), esc_attr( get_the_modified_date( 'c' ) ), esc_html( get_the_modified_date() ));

With this:

$time_string = sprintf( $time_string, esc_attr( get_the_modified_date( 'c' ) ), esc_html( get_the_modified_date() ), esc_attr( get_the_date( 'c' ) ), esc_html( get_the_date() ));

And you can see the change on front end, from Published date into Updated on:

3. UnderStrap theme

The meta information in Understrap theme is written into a function, so let’s just overwrite it by adding the same function in our functions.php in the child theme.

/**
 * Override parent theme's blog footer info
 */
function understrap_posted_on()
{
    $time_string = '%2$s';
    $time_string = sprintf($time_string,
        esc_attr(get_the_modified_date('c')),
        esc_html(get_the_modified_date())
    );
    $modified_date = sprintf(
        esc_html_x('%s ', 'post date', 'understrap'),
        '' . $time_string . ''
    );
    $byline = sprintf(
        esc_html_x('From %s, ', 'post author', 'understrap'),
        '' . esc_html(get_the_author()) . ''
    );
    $by_photo = get_avatar(get_the_author_meta('ID'), 36);
    $user_avatar_url = get_field('user_custom_avatar', 'user_' . get_the_author_meta('ID'));
    if ($user_avatar_url) {
        $by_photo = '<img src="' . $user_avatar_url . '"alt="' . get_the_author_meta('display_name') . '" class="blog-author-photo size-36">';
    }
    echo $by_photo . '<span class="posted-on">' . '</span><span class="byline"> ' . $byline . '</span> updated on: ' . $modified_date;
}

Example 2: Remove the “Powered by WordPress | Theme Name” credit line

Normally the credit line is in the footer.php. When you open the file it is easily to spot this line, maybe in hard-coded text or in a function.

For example, the Accelerate theme holds this line in an action called accelerate_footer_copyright“. You would need to go to footer.php, find and remove this line:

do_action( 'accelerate_footer_copyright' );

Other themes may have this ability with the Customize tool so in some cases you do not need to remove it from the code line.

However, in some cases it is not necessary to remove this line. If the theme is good and you are using it for free, you may want to allow the theme makers to advertise themselves on your website.

Example 3: Add a new page template

A new page template can be added by creating a PHP file name, for example:

• page-{id}.php: a custom page template for the page with id = {id}
• page-{about}.php: a custom page template for the web page with slug = about

A page template start with:

<?php 
/**
 * Template Name: An Example Template
 * Template Post Type: page
 */

Then you can save the file as example-template.php. Some themes have a folder page-templates/ (for example Understrap and Accelerate), you can make a template with PHP, HTML, CSS and upload it to the page-templates/example-template.php.

So when adding a new page, you will see the template to be available in the dropdown in Page Attributes.

Find your custom page template in WordPress

This is a great reference: a more detailed guide on how to make a custom page template.

Example 4: Remove custom scripts and styles from plugin/theme

Sometimes we would want to remove the styles and scripts from a plugin, so that we can design from scratch to blend it with the styles of our current website.

WordPress has a wp_dequeue_style() and wp_dequeue_script() functions to remove unwanted stylesheet, or scripts. All you need to do is to find the appropriate handle.

Normally the handle is the id without “-css”. Or, if a plugin has documentation, you can have a look to see what handle they use to enqueue the style, and then dequeue it.

Remove LuckyWP Table of Contents styles

LuckyWP Table of Contents is a plugin that creates table of contents. This provides a better user experience that visitors can immediately jump to the section they want to see. Also, it has some benefits on SEO.

Using Table of Contents to help readers find what they need fast

Although this plugin also provides a field in the settings for custom CSS, we can save one http request if we remove totally the CSS stylesheet from this plugin from front end, and then include the styles in our child theme’s styles.css.

From the page source of a blog post, you can easily spot the CSS file from the plugin

In this example of LuckyWP Table of Contents, the handle is lwptoc-main. Just place this in your child theme’s functions.php:

wp_dequeue_style('lwptoc-main');

Then come back to View Page Source and you can see that the stylesheet request was removed.

Remove TablePress styles

The case of TablePress is quite simple. The plugin has a hook to remove its default stylesheet.

add_filter( 'tablepress_use_default_css', '__return_false' );