Share

Sign In

Lose something?

Enter Username or Email to reset.

Sign Up

Social Media Ninjitsu | How To Create A WordPress Child Theme?
post-template-default single single-post postid-914 single-format-standard logo_left full-width full-width cp_hero_hidden how-to-create-a-wordpress-child-theme cp_fixed none cpcustomizer_off megamenu no-header cp_breadcrumbs_visible all_other_types_logo_dark landingpage_logo_dark unknown wpb-js-composer js-comp-ver-5.0 vc_responsive

  • Share on Facebook
     
  • Share on Twitter
     
  • Share on Google +
     
  • Share on Pinterest
     
  • Share on Linkedin
     
  • Share on Tumblr
     
  • Share on Vk
     
  • Share on Reddit
     
  • Share by Mail
     
wordpress development

How to create a WordPress Child Theme?


Creating a child theme allows you to make changes to your site without changing anything in the original theme’s code. Even if you’re only making a few minor tweaks, it pays to spend a few minutes creating a child theme. It is the safest way to experiment with changing a theme and ensuring any changes you make will be seamless, while ensuring that the regular update process remains uncorrupted. A final great benefit is that the whatever changes you make to your theme won’t be overridden when the parent theme undergoes an update.

Step One:

The themes directory is always found right under wp-content/themes.

Create a new folder in your themes directory, located at wp-content/themes. So, I ‘m going to name the folder after myself: kevinnaruse.

The folder location goes like this: wp-content/themes/kevinnaruse

You can name it whatever you like but remember there should not be any space in the folder name. 

The exact parent theme I’m using here is also located in the folder wp-content/themes/

Its exact location is wp-content/themes/twentysixteen.

The style.css file is located (highlighted near the bottom of the parent theme folder.

Step Two:

Let’s go back to the child-theme folder(kevinnaruse) and create a file called style.css and fill in the information as shown below.

/*
Theme Name: Kevin Naruse
Theme URI: http://kevinnaruse.com
Description: A Twenty Sixteen child theme
Author: Kevin Naruse
Author URI: http://kevinnaruse.com
Template: twentysixteen
Version: 1.0
*/
/* =Theme customization starts here
------------------------------------------------------- */

Add this and save the file. Your child theme folder should look like this.

Create a child theme folder step one

Create a child theme folder step one

Points to remember:

  • Template name is the name of the parent theme. In this case the child theme is kevinnaruse and the parent theme is twentysixteen (here in this case the Template names becomes twentysixteen ).
  • Template name should match the folder name of the parent theme.
  • Also make sure there is no blank space after the name.
  • Other details can be added or changed as you like.

Step Three:

Create a file called functions.php as you created ‘style.css’ in Step Two. And fill in the information as shown below. You will need to modify the the theme information in the code below (boldfaced)

<?php /* * Child theme functions file * */ 
function my_child_enqueue_styles() { 
 $parent_style = 'twentysixteen'; 
 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); 
 wp_enqueue_style( 'kevinnaruse', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
 );
} 
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
?>

Let’s break this down further;

$parent_style = 'twentysixteen';

The stuff inside the single quotes is the theme folder name literally. $parent_style = ‘ ‘; should be set to equal the exact name of the folder containing YOUR parent theme. If the name of your parent theme were twentyfifteen, you would fill it in as $parent_style = ‘twentyfifteen ‘.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'kevinnaruse', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
 );

Now take a look at the second line.

If the style.css file in the parent theme is not located in the standard location (right under the theme folder) but further down the file structure), you must specify the exact file path to follow in order to find the stylesheet associated with your parent theme. Take this example here.

get_template_directory_uri() . 'library/css/style.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . 'library/css/style.css' );

The added item is underlined. The command get_template_directory_uri() simply refers to the directory of the folder specified by the name stored in $parent_style = ‘twentytsixteen’. Once you’re in the parent folder, it further requires selecting the library folder, then the css sub-folder beneath. The full file path in this case:

wp-content/themes/twentysixteen/library/css/styles.css

get_template_directory_uri() returns “wp-content/themes/twentysixteen/”

The remainder of the file path ( /library/css/styles.css ) is being spelled out at the end to specify where inside the parent theme template is the style.css located:

Once you save the functions.php to your theme folder it is ready. In creating a child theme, style.css and functions.php files are mandatory while template files, and other files are optional and can be created if required.

Lastly, to activate the child theme, in the dashboard go to

Appearance->Themes.

Look for the child theme you created and activate it. That’s it. Also, make sure the parent theme is also present in the installed themes for the child theme to work. If you now visit your site, it should look all same just like when the parent theme was activated. However, you may need to reset some of the settings in the Customizer.

Recommended sources:

https://blog.visualcomposer.io/how-to-create-wordpress-child-theme/

https://themegrill.com/blog/tutorial-creating-wordpress-child-theme/

https://www.elegantthemes.com/blog/tips-tricks/understanding-the-wordpress-file-and-directory-structure

 

  • Share on Facebook
     
  • Share on Twitter
     
  • Share on Google +
     
  • Share on Pinterest
     
  • Share on Linkedin
     
  • Share on Tumblr
     
  • Share on Vk
     
  • Share on Reddit
     
  • Share by Mail
     

Post A Comment

shares