WordPress Child Theme: The Ultimate Guide

WordPress Theme Customization comes loaded with a plethora of possibilities. Having tried a large number of techniques for styling my WordPress website’s theme, I’ve been totally impressed with the way things go. Child theme is one such stunning way oftweaking an existing WordPress theme for a fresh look and feel.

In today’s post, I’ll be sharing some vital basics of WordPress Child Themes. I’m sure the pointers covered here would alter your thinking about WordPress theme development. So, let’s move on with knowing everything about these child themes.

What exactly is a WordPress Child Theme?

WordPress child theme is basically a theme which inherits the styling and functionality of a different theme, called the parent theme. If you intend to preserve your theme modifications, then working with a child theme is what you can do without getting confused. Plus, using a child theme is also an excellent means of speeding up the overall WordPress theme development time.

Understanding the file structure for a WordPress child theme

Child themes are located in /wp-content/themes/ just like any other WordPress theme. Plus, they can be activated via the WordPress admin panel, as done in case of a traditional WordPress theme. Every child theme has a style.css file and a functions.php file, excluding a theme file. Additionally, it also includes image folders, include folders and script folders.

Creating and activating WordPress Child Theme

As the very first step, you need to create a child theme directory which will then be placed in wp-content/themes. It is not necessary to append the name of your child theme directory with -child. Next, you need to create the child theme’s stylesheet, called style.css. This stylesheet must begin with the following:

/*

Theme Name: Twenty Fifteen Child

Theme URI: http://example.com/twenty-fifteen-child/

Description: Twenty Fifteen Child Theme

Author: Takashi Irie

Author URI: http://example.com

Template: twentyfifteen

Version: 1.0(svn)

Text Domain: twenty-fifteen-child

*/

In the above text, you’ll be expected to replace the word ‘example’ with details that are relevant to your WordPress theme. Also, the template line represents the directory name of the parent theme. In this post, I’ve kept the parent theme as Twenty Fifteen, so the template name is twentyfifteen.

Finally, you need to enqueue the parent and child theme stylesheets using wp_enqueue_script() in your child theme’s functions.php file. The function associated with this step is shown below:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

The above code function works only if the parent theme uses a single main style.css to hold all the css. However, if your parent theme has multiple .css files(for eg: style.css, ie.css, main.css etc.), then you need to maintain all parent theme dependencies.

With that your child theme is ready for activation. Simply login to your site’s admin area and go to Administration Panel-> Appearance-> Themes where you can see the child theme listed. Now, simply activate the child theme.

The method for importing parent theme styles

You just need to add the below mentioned single line of code to your ChildTheme style.css in order to import the parent theme styles:

/*

Theme Name: Fission

Description: A Child Theme of Fusion

Template: fusion

*/

@import url(../fusion/style.css);

With the use of above code, you’ve simply created a safe area for making changes to your parent theme, without the need for touching any of the original theme files.

Internationalization of WordPress Child Themes

Much like the wide variety of extensions available for WordPress websites/blogs, even the WordPress child themes can be easily translated into different languages using the gettext functions. Just follow the below steps for doing the same:

Step 1– Add a new languages directory with a format as: my-theme/languages/

Step 2– Add language files to this languages directory. Each language filename must have the format like: he_IL.mo and he_IL.po.

Step 3– Load the textdomain

You can define the text domain in load_child_theme_textdomain() in the child theme’s functions.php file during the after_setup_theme action. This text domain will be used for translating all the strings available within the child theme. Plus, you can use GetText functions for adding i18n support for these strings.

Here’s the code snippet associated with textdomain:

 

The gettext function is shown below:

 

Therefore, all strings which use “my-child-heme” textdomain can be translated into different languages. These translated files will be stored in “/languages/” directory.

That’s it!

Summing Up

Hopefully I’ve succeeded in offering you a basic understanding of a WordPress child theme. Perhaps one of the smartest ways of modifying WordPress themes, these child themes make WP theme customization an absolutely stunning experience.

The post WordPress Child Theme: The Ultimate Guide appeared first on SoftwareFindr.

Written by - Visit Website