Beginner Introduction to WordPress Child Themes

WordPress Child Themes :- There is a right, and easy way, and a wrong, and hard way, to create your own theme designs in WordPress.  The hard way is to create a new theme, either from scratch, or based on a pre-existing theme, and hacking the design code to form your new theme.

The right way is to learn how to create child themes.  Child themes ‘piggyback’ the original theme, and only adds the layout and functionality you want.  With the Child theme model, you keep the core structure, and updates to the original theme, while having the flexibility to change the design and layout to fit your needs.

To create a child theme, all you need to do is create a new “style.css” file that references the parent theme.  To set this up, you will need to get to the ‘wp-content’ folder on your local or hosting server.  For local server, depending on what program you installed (Setting up a local server article) the file path is:

Bitnami: Documents/Bitnami/apps/Wordpress/htdocs/wp-content

WAMP: C:/wamp/www/wp-content

Warning: you should always create and test your child theme on a local server before uploading and activating on a ‘live’ website.

In the wp-content folder, select the themes folder, and then create a new folder for your child theme.  Inside this new child theme folder, is where you will create you new ‘style.css’ file.  You can use a plain text editor, such as notepad, or notepad-plus-plus-plus to create the new blank style.css file, and then save in the folder.

Now we can setup our new style sheet.  For WordPress to recognize any style sheet, the beginning must have the following lines of code to identify the Child and parent themes:

/*
Theme Name: Child of ???
Theme URI: http://www.your website.com
Description: What ever you want to say about it.
Author: Your name
Template: Parent theme referenced

*/

Every Child theme you every develop must have these lines in them.  At this point you can save the style.css sheet in the Child theme folder.  You can then access your appearance link in your admin folder, and you should see the child theme available to preview and activate.  If you activate, you will see all the current styles go away.  This is a good thing – now we know the child theme style.css file is setup correctly and working.

Now you want to tell WordPress to reference the original style.css file.  Add this code to the top of your child theme style.css file:

@import url(‘../parent-theme-folder/style.css’);

/*

Theme Name: Child of ???

Theme URI: http://www.your website.com

Description: What ever you want to say about it.

Author: Your name

Template: Parent theme referenced

*/

After you add the ‘@import’ line, save the file, go back into your browser and reload the page.  The parent style should appear.  Now you are ready to modify the parent style sheet with changes to the child style sheet.

From here you can create new templates, add new styles and content, anything you want to change or modify, all within the parent them structure.  How can you do this?  Because even though WordPress is referencing the structure of the parent theme, it also knows that the child theme folder has the current files that will update, or override, the parent theme files.

Also Read :- How to Create and Manage External Files for A Child Theme

This makes it quicker and easier, as you learn how to develop WordPress themes, to create custom themes.  You can modify anything you want by simply creating the same file in the child theme folder, and then making the changes within that file.

Leave a Reply

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