How to Make A Child Theme For Your WordPress Template 2018

Hello guys, welcome back to another tutorial. So today, this tutorial is about making a child theme easily without using other 3rd part plugins or resources.  As a WordPress developer or a site owner, you need to have a child theme especially if you’re going to do some coding changes.  Without having a child theme, you can do changes. But the pitfall is, all changes will be overridden after the update of the theme. So, it’s not good ah! So, using a child theme is a very good practice as a developer. If you don’t need to worry about your changes, let’s get started.

So get started with creating a child theme, you first have to have an active theme on your site. If you’ve installed WordPress freshly, don’t worry, you already have a theme.  I’m using twenty-seventeen them for this tutorial. You can check your theme by going to Appearance -> Themes path. Maybe I’m using a different theme, but the same process will work for your theme. Pretty much any theme out there can use these exact same steps. After checking the theme name you’re using, you can follow these steps.

  • Login to your Cpanel.
  • Go to file manager and select your WordPress directory.
  • Go to your theme folder which is located in wp-content->themes.
  • Then, create a new folder called “twentyseventeen-child”. (replace twentyseventeen with your theme name. Just use the name of your parent theme folder.)
  • Then go inside that folder and make a new file called “style.css”.
  • Then paste the below code into that file.
/*
Theme Name: Your Theme Name - Child
Theme URI: http://example.com/twenty-seventeen-child/
Description: Twenty Seventeen Child Theme
Author: WordPress
Author URI: http://example.com //change this with original authors url
Template: twentyseventeen // This should be your theme name*
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
Text Domain: twenty-seventeen-child
*/
// Add your custom styles here, don't remove above.
  • Save that file and create another file named “function.php”.
  • Put the code below.
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Extra Point (Add a Preview Image)

Hola, You can activate your theme and it will work. But you can see there is no image preview for your child theme. because of you created that theme by yourself, just design an image with the theme name and upload it to the child theme folder. (Image size should be 880 × 660). Just use photoshop or an online tool.

To get more information about making a child theme, click here to head over to the WordPress Codex.

Final Words

Ok now your child theme is fully functional and you can activate it on your admin panel and make sure everything is working perfectly. However, styles can have a problem with the caches because modern browsers are keeping caches longer if they didn’t change. However, this code should work with that. By the way, just comment below, if something went wrong. I’m surely here to help you.

Leave a Reply

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