Login

Nexthemes is much better when you have an account.

Get yourself one.

Don't have an account? Register

Register

Nexthemes is much better when you have an account.

Get yourself one.

Have an account? Login

How to create and use Child Theme

child theme
  • 382 Views
  • 0 comments
  • December 15, 2017
  • Nex Themes
  • WordPress

How to create and use Child Theme

Your website’s look is defined by the WordPress theme you are using, it gives you a lot of functionality like widgets, shortcodes, custom posts and much more.

post

After login to WordPress admin dashboard, you can view the themes you have in Appearance / Themes. In the screenshot above you can see that for this WordPress installation two themes have been installed: BlossomClub and Buildex.

If you want to change or add some functionality to your website, if you want to change how your website looks, then you need to change things in your theme. A quality WordPress theme gets updated from time to time: adding in new stuff, making it compatible with the latest WordPress version and more. So when you would edit your theme files directly, those edits would get overridden when you update your theme. How can we prevent this? Just use a child theme. The things you want to change in your theme are placed within that child theme. This child theme will not be overridden by updates of your main theme, thus your own stuff does not get cleared out.

Create Child Theme Folder

Navigate to your WordPress/wp-content/themes, all the folders here are the themes you have, child themes have a “-child” at the end of the theme name.
So if you have a specific theme that you want to create a child theme, you create a new folder in the themes folder, rename it the same as the theme you want to use + “-child” at the end and don’t use spaces.

Create Child Theme Files

In the Child theme folder create a style.css, this is where you put the custom CSS you want because with this CSS you override the CSS of the parent theme. Last thing for the child theme to be set you have to open ‘style.css’ file in a text editor and add the following lines on the top of that file:

/*
Theme Name: BlossomClub Child
Theme URI: demo.nexthemes.co/blossomclub/
Description: BlossomClub Child Theme
Author: NexThemes
Author URI: https://nexthemes.co
Template: blossomclub
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: blossom-club-child
*/

You can change all the information in style.css but the only thing that needs to remain intact is the template field, it needs to remain as the theme name for the parent theme. After all the changes, save the file and check in the Appearance / Themes to see if your child themes appear, if you see it, then you have done all correctly.

themes child
Activate your child theme

You can see that our new child theme appears within the installed themes list. Now just click on our new theme, activate it and you’re done. You now can put your own custom CSS within the style.css file of your child theme.

Adding PHP code

If you have some PHP code that needs to be added, create a functions.php file and add the code inside. That’s all you need to have the child theme fully functional with your own CSS and custom PHP.

Leave a comment

Become a Member

Get access to all our themes

Get access to all our products for just $89 / year. Plus you'll get new themes every month and our professional support!