Hey guys, welcome. In this article, I will show you How to Create a WordPress Child Theme from a parent theme. So, if you make any changes it won’t affect the parent theme.
For example, let’s say that you have an awesome theme downloaded from Themeforest, or WordPress repository. But there are some changes that you want to make based on your requirements. If you do make any changes all of the styles and functions will be reset, or deleted when a new update for that theme comes. This is where child themes come in handy.
With the help of a child theme, you can easily customize the theme as you like, by adding new designs and new functionality to your WordPress theme. For a practical example, we will create a child theme of twentytwentyone wordpress theme. Then you can extend it with a Custom Post Type.
If you don’t know how to create custom post types you can refer to this article: How to make custom post type without plugins.
Okay so, that’s cleared let’s get started to create a child theme for our official WordPress theme.
Step 1: Safety First
The first thing I would recommend is to create a backup of your site and get it on a localhost. You can use XAMPP to run a local server and install your site on a local server.
Once you have done that, the next thing is to deactivate all cache and CDN plugins. If you are using the HTTPS redirect plugin, disable, and de-activate that too.
Step 2: Create Child Theme Directory
Now, in your windows explorer, navigate to the c:/ drive, the XAMPP folder, and then go to the htdocs folder. This is where your project will be located. Once you have the project, open your project and go to the wp-content folder. From there open the themes folder.
Here you will see a list of themes, locate your theme and right beside your theme create a new folder, with your theme name, and add an hyphen and write child beside it.
For example: If your theme is twentytwentyone, then your new folder name should be twentytwentyone-child.
Step 3: Creating the Style.css file
The most important part of a WordPress theme is the style.css file. This is where your child theme will be accessed and activated. Now that you are inside the twentytwentyone-child folder, inside that create a file called style.css.
Open the style.css file and type in the following code:
/* Theme Name: Twenty Twenty One Child Theme URI: https://primeinspire.com/online/wordpress-course Description: Child theme for the Twenty Twenty One theme Author: Md Fatah Author URI: https://primeinspire.com Template: twentytwentyone Version: 1.0 */
You can change all the stuff you want from this, for example you can all your own Theme URI, Description, Author, Author URI, and version numbers.
Step 4: Create the functions.php file
The next step is to create a functions.php file. Here once you create the file, the next thing to do is add in some functions. Like pulling the parent theme styles, designs and template files. This is usually done so that you can modify it in your child theme and the parent theme won’t be affected.
Okay, in the functions.php file add the following code:
// Enqueue parent and child stylesheets
function my_theme_enqueue_styles() {
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')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
What this will do is first it will pull the parent style.css and import it in your child theme, and then enqueques your child theme’s style.css and keep them together. In this way you can change any style you want or add any new styles as you like.
If you want you can also add an image to your child theme. In the child theme folder add an image called screenshot.png. That’s it.
Make sure that your WordPress Theme screenshot size is 1200×900
Step 5: Activating your theme
It’s time to activate your theme. Now go to your WordPress dashboard and activate the theme that you created. Your site should not change at all. That’s because we just created a child theme and nothing more.
You can start adding your custom codes here. Like creating a custom post type in WordPress without plugins.
Master Building Custom WordPress Themes from Scratch with Bootstrap 5 with Our WordPress Theme Development Course Course!
8.5 Hrs of course contents, 12 Modules, and 81+ lessons. Learn from industry experts. Perfect for Beginners.
Source link
