Showing posts with label child theme. Show all posts
Showing posts with label child theme. Show all posts

Creating child themes in WordPress

As you delve into WordPress you will surely have the need to make modifications to the theme files.

It is true that many themes, especially paid ones, have many options to configure colors, design, etc.

However, if you find any modification that can only be done through the files of your theme or simply because you want to have all your modifications centralized in files, then you can make a child theme or child-theme.

What is a child theme in WordPress?

A child theme or child theme is an additional theme to the main one that inherits all the functionalities of the original or parent WordPress theme or template, in which you can make modifications to the template without losing them when you update the parent or original template.

A child theme ensures that if you update the parent theme your code modifications will be preserved, since you will have made them in the files of the child theme.

Furthermore, the Child Theme inherits all the files from the parent theme, however the child theme can overwrite these files and add additional code to the parent WordPress theme or template.

Creating a child theme through a plugin

There are several plugins that have the functionality of creating child themes, in this case we will do it using the Child Theme Configurator plugin.

From the WordPress backend in Plugins> Add new, search for the term "child theme", and locate the plugin.

After installing and activating it, a new menu option will appear under the Tools menu, as shown in the following image:

When you access it you will see a screen that shows the first three steps, by default it detects the active theme based on which the child theme will be created, in our example it is the Store Front theme, to continue with the process click Analyze.

Then additional steps will appear, unless you want to specify something special for the child theme, I recommend you leave all these values ??by default and simply go to the end and click on Create New Child Theme.

With this, you will have the child theme created, a message will appear that it has been created successfully.

Now to activate it go to Appearance> Themes, locate the child theme and activate it, as shown in the following image:

Finally, don't forget to uninstall the Child theme Configurator plugin, as it was only used for this specific task of creating a child theme.

Create a child theme manually

The other option is to create the child theme manually, for this you will need to create a folder and some files, you can use an FTP program or the File Manager of your WordPress hosting account.

In the WordPress file structure locate the path: wp-content / themes /

There you will create a new folder for the child theme, for the name of the folder I recommend that you include the name of the parent theme followed by the text "child".

In our example we will create a child theme for the storefront theme, therefore the name of the folder will be: storefront-child.

Access that folder and we will create two files, the style.css file and the functions.php file

Inside the style.css file add a code similar to the one shown below:

/ *
Theme Name: storefront child theme
Description: Child theme to make code customizations
Author: Jhon Marreros G.
Author URL: https://tusitio.com
Template: storefront
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-child
* /

Change the values ??according to your needs, the main ones are:

Theme Name: The name of the child theme, it is recommended to keep the name of the parent theme as part of the new name.
Description: Description of the new child theme
Author: Name of the author of the child theme
Author URL: Author's website
Template: This is the reference to the parent theme, you must put the name of the parent theme folder.
Version: version of the child theme
License: Name of the default license
License URI: Url for additional information on the license used.
Text Domain: identification for translations of the child theme
Then also edit the functions.php file and add the following code:


function enqueue_styles_child_theme () {

$ parent_style = 'parent-style';
$ child_style = 'child-style';

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),
wp_get_theme () -> get ('Version')
);
}
add_action ('wp_enqueue_scripts', 'enqueue_styles_child_theme');


Once this is done, if you go to Appearance> Themes, you will see that you already have a new child-theme that you can activate.


Conclusion

As you have seen, you have no pretexts for not using a child theme, it is very easy to create it, and all the code modifications you make will be centralized and logically you will not lose these modifications when updating the parent theme.

Creating child themes in WordPress

As you delve into WordPress you will surely have the need to make modifications to the theme files. It is true that many themes, especially...