{"id":8555,"date":"2020-06-20T16:00:20","date_gmt":"2020-06-20T14:00:20","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8555"},"modified":"2020-11-13T12:45:57","modified_gmt":"2020-11-13T11:45:57","slug":"wordpress-create-child-theme","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-create-child-theme\/","title":{"rendered":"How to Create a WordPress Child Theme"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Child themes are extremely useful if you want to make changes to your chosen theme. They are the best way to modify specific theme features and appearance. Whether you are using a free or premium theme, you should always create a child theme for any further customization or modification you want to add.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we&#8217;ll show you how to create a child theme, how it works, and how to use it to customize your WordPress site. We will also cover the concept of parent themes and how they relate to child themes. To help you navigate, we divided the article into several sections:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-a-plugin\">Creating a child theme using a plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#manually\">Creating a child theme manually<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#customize-your-child-theme\">How to customize your child theme in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-not-to-use-a-child-theme\">When NOT to use a child theme?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">What Is a WordPress Child Theme and Why Should You Create One?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Any customization of a WordPress theme carries with it certain risks. For example, if you <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-wordpress-theme\/\">install a WordPress theme<\/a> and then change something in the code, <strong>the next update to the theme will override all those changes<\/strong>. This means that not only will your site revert to what it was before you\u2019ve customized it, but all your work on making those changes will be in vain. This, of course, does not apply to the content you add\u2014text or images you place on your site will not be affected by any updates.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, <strong>using child themes to edit, update, or customize existing WordPress themes is strongly recommended<\/strong> for anyone working on developing a WordPress website as they provide a safe way to maintain custom design and code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>A child theme represents a set of design rules, as well as functions<\/strong> for adding functionalities or modifying an existing theme\u2019s layout. So, a child theme allows you to change small aspects of your website&#8217;s appearance while <strong>preserving the looks and functionality of your parent theme<\/strong>. To help you understand how child themes work, we\u2019re going to first explain the relationship between parent and child themes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>A parent theme is a complete WordPress theme<\/strong> that includes all the WordPress files and resources required to make it work. All themes, except child themes, can be regarded as parent themes. On the other hand, <strong>a child theme in WordPress is one that works in conjunction with a parent theme and it inherits all its functionality and style from the parent theme<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since the child theme inherits the characteristics of the parent theme, you can <strong>customize its code and layout without affecting the original functionalities<\/strong>. This way any changes you make will be saved with the child theme and you won&#8217;t be at risk of losing them when the parent theme gets updated.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another reason to use a child theme is that it allows you to <strong>keep track of what you\u2019ve customized<\/strong> since the child theme\u2019s files are separate from the parent theme\u2019s files. And, it can provide you with <strong>added protection in case of unforeseen editing errors<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is why many premium theme developers, us at Qode included, create blank child themes that you can download along with parent themes.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-a-plugin\"><\/a>How to Create a Child Theme Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]You can use WordPress to create a child theme manually or you can install a plugin that will do it for you. <strong>There are several plugins created for this purpose<\/strong> and some of them are free. We will show you how to create a child theme using the <a href=\"https:\/\/wordpress.org\/plugins\/child-theme-configurator\/\" target=\"_blank\" rel=\"noopener\">Child Theme Configurator plugin<\/a>. You can use it, or a plugin of your choice, to create a child theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After installing and activating the Child Theme Configurator plugin, you will be able to find it <strong>under Tools &gt; Child Themes option<\/strong> in the admin panel. Next, select the parent theme you want to use and <strong>click on the Analyze button<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Analyze-button.jpg\" class=\"attachment-full size-full\" alt=\"Analyze button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Analyze-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Analyze-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/7-Analyze-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The analysis will return information about the suitability of your chosen theme<\/strong> being used to make a child theme. Moreover, you will get information about additional settings options.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Information-about-the-suitability-of-your-chosen-theme.jpg\" class=\"attachment-full size-full\" alt=\"Information about the suitability of your chosen theme\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Information-about-the-suitability-of-your-chosen-theme.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Information-about-the-suitability-of-your-chosen-theme-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/8-Information-about-the-suitability-of-your-chosen-theme-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You only need to follow the plugin\u2019s setup steps through to the end and then <strong>click the Create New Child Theme button<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Create-New-Child-Theme-button.jpg\" class=\"attachment-full size-full\" alt=\"Create New Child Theme button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Create-New-Child-Theme-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Create-New-Child-Theme-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/9-Create-New-Child-Theme-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]It might take a few moments for your child theme to be configured, so just <strong>wait until the plugin finishes<\/strong>. Then you can <strong>use the preview child theme option to check<\/strong> how your child theme-based site will look <strong>before activating it<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"manually\"><\/a>Creating a WordPress Child Theme Manually<\/h2>\n<p>[\/vc_column_text][vc_column_text]The first thing you need to do when you start making your child theme manually is <strong>create a new folder where you\u2019ll keep its files<\/strong>. Name this folder however you like; it\u2019s common to just add a <em>-child<\/em> as a suffix to the parent theme\u2019s name. We will apply this method in our example and name the child theme\u2019s folder <em>boldlab-child<\/em>. When you\u2019re done, you should save your folder to the server in the <em>\/wp-content\/themes\/<\/em> directory of your WordPress site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, you can access the server <strong>using your hosting account and the File Manager option<\/strong> or <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">connect to it using FTP<\/a>. In the following steps, we\u2019ll be using FTP and the <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla<\/a> client software to connect to the server.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-How-to-create-a-child-theme.png\" class=\"attachment-full size-full\" alt=\"How to create a child theme\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-How-to-create-a-child-theme.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-How-to-create-a-child-theme-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-How-to-create-a-child-theme-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you upload your folder you can proceed to add two essential files to it. Those are <strong>the stylesheet and function files and the child theme won\u2019t work without them<\/strong>. Of course, you can add more files, but these two mustn\u2019t be omitted.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Stylesheet<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>If you have a testing environment (localhost, for example) or a staging site, we recommend that you first place your child theme\u2019s folder there<\/strong>. And then add the files which you\u2019ll be modifying with your custom code. That way, you can make sure that everything is working properly before transferring the child theme to the live server.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The first file you need to make for your child theme is a stylesheet.<\/strong> Name it style.css (pay attention to the extension, <strong>it needs to be .css<\/strong>) and open it in your preferred text editor. Then enter the following text:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/*\r\nTheme Name: Your Child Theme Name\r\nTheme URI: https:\/\/example.com\/your-child-theme\r\nDescription: Child theme for your Parent Theme\r\nAuthor: Your Name\r\nTextdomain: yourchildtheme\r\nAuthor URI: https:\/\/yourwebsite.com\/\r\nTemplate: childtheme\r\nVersion: 1.0\r\nLicense: GNU General Public License v2 or later\r\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html \r\n*\/<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]<strong>This text does not constitute code<\/strong> and it won\u2019t run any kind of function on your site or provide any functionalities. It\u2019s written using CSS\u2019s block comment syntax and <strong>its sole role is to provide WordPress with information about the theme<\/strong>. This text is added for every theme as it helps WordPress recognize them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To clarify what each line of text represents, we\u2019re going to go through them individually and explain in more detail.[\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Theme Name<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">your unique theme name<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Theme URI<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">location where you can find the theme\u2019s code or documentation<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Description<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">short descriptive text that allows theme users to understand what the theme does<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Author<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">your name<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Textdomain<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">this is used for internationalization; textdomain is used as a second parameter in any internationalization function and it serves to make the theme translatable<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Author URI<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">theme author\u2019s website<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Template<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">the name of the folder where the parent theme is located; make sure to enter the folder name (and not the theme name) since this is necessary for your child theme to function as a child theme<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">Version<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">number that shows the child theme\u2019s version<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">License<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">license which must be <a href=\"https:\/\/www.gnu.org\/licenses\/gpl-3.0.en.html\" target=\"_blank\" rel=\"noopener\">GNU<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n                        <span class=\"qodef-ul-title\">\n                <span class=\"qodef-ul-title-text\">License URI<\/span>\n            <\/span><span class=\"qodef-ul-mark\">: <\/span><span class=\"qodef-ul-title-content\">link to the license information<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]Out of all of these lines, <strong>only the Theme Name and Template are mandatory<\/strong>. The most important information for a child theme to have is the Template line; without it, the child theme won\u2019t function as a child theme. And this line is only used with child themes. Generally, <strong>everything except the Theme Name and Template lines can be left out or left blank<\/strong> if you prefer.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve entered the following text into our child theme\u2019s style.css file:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Template-line.png\" class=\"attachment-full size-full\" alt=\"Template line\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Template-line.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Template-line-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Template-line-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, we omitted the lines with tags and license. Since we are creating a child theme for an already installed parent theme, <strong>we have these properties in the parent<\/strong>. You can <strong>add them<\/strong> if you need to, especially <strong>if you are creating a custom child theme<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that we\u2019ve seen what each line represents, you can <strong>go through them and add your own child theme information<\/strong>. When you\u2019re done, save the changes you made to the file.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Functions File<\/h3>\n<p>[\/vc_column_text][vc_column_text]The next step in using WordPress to create a child theme is <strong>inserting a functions file<\/strong>. This is necessary to let you keep the parent theme\u2019s stylization even as you add a new one. <strong>Without it, your child theme won&#8217;t have styles at all<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You need to <strong>create a functions.php file<\/strong> in your child theme\u2019s folder and then, using a text editor, enter this code:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\nfunction my_theme_enqueue_styles() {\r\n$parent_style = 'parent-style'; \r\nwp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\r\nwp_enqueue_style( 'child-style',\r\nget_stylesheet_directory_uri() . '\/style.css',\r\narray( $parent_style ),\r\nwp_get_theme()-&gt;get('Version')\r\n);\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]The code uses the<em> wp_enqueue_style ()<\/em> function to enqueue the stylesheet from the parent theme, and the <em>get_template_directory_uri ()<\/em> function to indicate where that file is stored.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If your style.css file contains CSS code, it\u2019s necessary to call it using a function. Setting &#8216;parent-style&#8217; as the dependency will allow the stylesheet of the child theme to be loaded after it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you can edit this code freely and <strong>add the appropriate prefix for your function<\/strong>. In our case, we\u2019re making a child theme using the Boldlab theme as the parent, and you can see what our code looks like in the screenshot below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-the-appropriate-prefix-for-your-function.jpg\" class=\"attachment-full size-full\" alt=\"Add the appropriate prefix for your function\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-the-appropriate-prefix-for-your-function.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-the-appropriate-prefix-for-your-function-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Add-the-appropriate-prefix-for-your-function-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve customized the code to fit your needs, save all changes made to the file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, since we prepared both the style and functions file, we can take a look at our child theme. You can do so by <strong>logging into your WordPress dashboard<\/strong> and going to <strong>Appearance &gt; Themes<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As you can see from the screenshot below, <strong>our child theme is here<\/strong> and it\u2019s listed as a child of the Boldlab theme.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Our-child-theme.png\" class=\"attachment-full size-full\" alt=\"Our child theme\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Our-child-theme.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Our-child-theme-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-Our-child-theme-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To make it look nicer, we\u2019re going to add an image to it. You can <strong>use the screenshot.png file<\/strong> from the parent theme if you want to keep the same image for your child theme or you can add a custom image. However, <strong>you must name the image screenshot.png<\/strong> if you want it to show. We\u2019re going to use our parent theme\u2019s image by copying it into the child theme\u2019s folder.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Name-the-image-screenshot.png\" class=\"attachment-full size-full\" alt=\"Name the image screenshot\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Name-the-image-screenshot.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Name-the-image-screenshot-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/5-Name-the-image-screenshot-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now the child theme is ready and you can <strong>activate it via the WordPress admin panel<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Activate-child-theme.jpg\" class=\"attachment-full size-full\" alt=\"Activate child theme\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Activate-child-theme.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Activate-child-theme-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/6-Activate-child-theme-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From there on, you can use it to <strong>develop your site further<\/strong>.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;81px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"customize-your-child-theme\"><\/a>How to Customize Your Child Theme in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you want to use a child theme, you need to have basic knowledge of <a href=\"https:\/\/www.w3schools.com\/html\/html_intro.asp\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a> and <a href=\"https:\/\/www.w3schools.com\/css\/css_intro.asp\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a> to be able to make necessary changes. Also, if you want to add any new functionalities to your child theme then you will need some knowledge of <a href=\"https:\/\/www.php.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">PHP<\/a> as well.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, <strong>we recommend that you test any changes<\/strong> beforehand using a <a href=\"https:\/\/qodeinteractive.com\/magazine\/install-wordpress-on-wamp\/\">local test environment<\/a> and only then apply them to the live server. You can transfer your site to a local environment at any time. This will let you <strong>run tests or make changes that won\u2019t be visible to users on the live site<\/strong>. When you\u2019ve finished making and testing changes, you can migrate the site from the local environment back to the live server.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the next section, we&#8217;ll show you how to stylize, add template files, and insert features to a child theme.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">How to Stylize a Child Theme<\/h3>\n<p>[\/vc_column_text][vc_column_text]To stylize your child theme, you need to add CSS code to the style.css file. <strong>The code you add determines how the appearance<\/strong> of a particular element or page on your website <strong>will be affected<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can get a lot of help with stylization <strong>using built-in inspect tools<\/strong> found in all modern browsers. They are intended to help users inspect elements on a website. However, you can use them to <strong>view the HTML structure and CSS styling of any element on a page<\/strong>. For example, if you want to check the title style of a page, just right-click on it, and select <em>Inspect<\/em> (for Chrome). Different browsers have different names (e.g. Firefox uses <em>Inspect Element<\/em>) for this tool, so <strong>look for the option with inspect in its name<strong>.<\/strong><\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Check-the-title-style-of-a-page.jpg\" class=\"attachment-full size-full\" alt=\"Check the title style of a page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Check-the-title-style-of-a-page.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Check-the-title-style-of-a-page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/10-Check-the-title-style-of-a-page-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Inspect tool will show the page elements and code in a section of the display. In Chrome, it will be on the right and <strong>you\u2019ll be able to see the selector used for styling as well as the CSS properties used for stylization<\/strong>. So, if you want to change anything in your child theme\u2019s style, then the easiest method is to <strong>copy the selector you like and adjust it<\/strong> to get custom styling for your child theme&#8217;s style.css file.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization.jpg\" class=\"attachment-full size-full\" alt=\"CSS properties used for stylization\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>We\u2019ll show you how to do this by changing the color of the title in the image above<\/strong>. We\u2019ll copy the class used for stylizing titles and simply paste and adjust this code in the style.css file of the child theme to get new title styling.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Changing-the-color-of-the-title.png\" class=\"attachment-full size-full\" alt=\"Changing the color of the title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Changing-the-color-of-the-title.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Changing-the-color-of-the-title-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/12-Changing-the-color-of-the-title-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you recall, we mentioned earlier that <strong>WordPress will first call the parent theme\u2019s stylesheet and then the child theme\u2019s stylesheet<\/strong>. This means that if you have the same element styled differently in both stylesheets then the child\u2019s stylesheet will override the parent\u2019s. <strong>That applies only when you use the same selectors<\/strong>. Using the same title example as earlier\u2014our child\u2019s font color will be green. We used the same selector, so even though the parent\u2019s style has a black font, <strong>by setting the child\u2019s color to green we overrode the original settings<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Copy-the-selector-you-like-and-adjust-it.jpg\" class=\"attachment-full size-full\" alt=\"Copy the selector you like and adjust it\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Copy-the-selector-you-like-and-adjust-it.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Copy-the-selector-you-like-and-adjust-it-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/13-Copy-the-selector-you-like-and-adjust-it-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can apply the same principle to any element on the page, <strong>just remember to clear the cache after saving the change<\/strong> so you can see it in the browser.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">How to Add Template Files to a Child Theme<\/h3>\n<p>[\/vc_column_text][vc_column_text]Much like you can add CSS code to a child theme and override styles from a parent theme, you can use the same principle for template files. You can <strong>utilize them to create your own layout and change the structure of elements on your website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Your new <strong>template file must have the same name and path as the one in the parent theme<\/strong>. Therefore, we recommend that you always <strong>copy the template file from the parent theme<\/strong> to the child theme first and only then modify it as you like.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The main template files are located in the theme directory. Among those, <strong>the <em>single.php<\/em><\/strong> is a template file that <strong>allows individual blog posts to be displayed and <em>page.php<\/em> is<\/strong> the template <strong>for displaying pages<\/strong> on your site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Every part of your website is managed by a different template file<\/strong>. They are located in the theme folder and are<strong> usually named after the part of the website that they manage<\/strong>. For example, the <em>footer.php<\/em> usually manages a website\u2019s footer, the <em>header.php<\/em> file manages the header and navigation menus, and so on. <strong>Some areas<\/strong> of the website, such as content, <strong>are managed by multiple files<\/strong> and those are called content templates.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, when customizing your child theme, you should start by selecting the theme file you want to change and copying it to the child theme\u2019s folder. The path to that file in the child theme must be the same as the one in the parent theme. So <strong>it&#8217;s extremely important that you pay attention to where exactly the files you copy for modification are originally located<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, if you want to modify the <em>page.php<\/em> template file, copy it to the child theme\u2019s folder, and then open it in a text editor to make your changes. So, you need to make sure to put the file in the top-level directory. However, if you&#8217;re copying a file from a subdirectory in your parent theme, then you need to create the same subdirectory in your child theme and place the file there.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Modify-the-page.php-template-file.png\" class=\"attachment-full size-full\" alt=\"Modify the page.php template file\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Modify-the-page.php-template-file.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Modify-the-page.php-template-file-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/14-Modify-the-page.php-template-file-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let&#8217;s say you want to include a logo image and some accompanying text at the end of each page; you can <strong>add them using HTML<\/strong> and you can choose <strong>a new class that will help you stylize these elements<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Choose-a-new-class.png\" class=\"attachment-full size-full\" alt=\"Choose a new class\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Choose-a-new-class.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Choose-a-new-class-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/15-Choose-a-new-class-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then <strong>using the class you can style the elements you added<\/strong> in the style.css file. In the example below, we aligned our text to be in the middle of the page:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Using-the-class-attribute.png\" class=\"attachment-full size-full\" alt=\"Using the class attribute\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Using-the-class-attribute.png 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Using-the-class-attribute-300x160.png 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/16-Using-the-class-attribute-620x331.png 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is what our page looks like after the changes have been saved:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization-1.jpg\" class=\"attachment-full size-full\" alt=\"CSS properties used for stylization\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization-1.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/CSS-properties-used-for-stylization-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]*Some premium themes, including those we make at Qode, are built with a <strong>custom framework<\/strong>. On the one hand, <strong>this makes them very user-friendly<\/strong> as the framework provides options that allow users of any level to change the look of each section of the website individually via the admin panel alone. You can use these options to choose multiple types for header layout, control how footer content will be displayed, manage content layout on pages, choose layouts for custom post types, and so on. On the other hand, this means that <strong>these themes include more template files, specific custom functions, individual coding quirks, and more<\/strong>. Therefore, if you want to change premium themes by making a child theme, you need to have <strong>advanced knowledge of WordPress and experience in programming<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">How to Add Template Files to a Child Theme<\/h3>\n<p>[\/vc_column_text][vc_column_text]You can <strong>use a child theme to add new functionalities or to override any existing functionality<\/strong> from the parent theme. All you need to do if you want to add a new function (that doesn\u2019t interact with an existing function in your parent theme) is <strong>insert one into the <em>functions.php<\/em> file of your child theme<\/strong>. Just <strong>assign it the appropriate action and it will be ready to execute<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019re going to show you an example of how you can add a new function to your child theme. We\u2019ll write the name of a custom function without including any code inside it just to <strong>show you how you can add functions<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( ! function_exists( \u2018new_function_from_child_theme\u2019) ) {\r\nnew_function_from_child_theme() {\r\n\/\/ contents of function here\r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]<strong>Any function<\/strong> you plan to add to a WordPress child theme <strong>should first be identified with a conditional check<\/strong>. This serves to verify <strong>whether there is another running function with the same name<\/strong>. If one exists, then your custom function won\u2019t run. Generally, WordPress will first run functions from the child theme and after them the functions from the parent theme. So,<strong> if the conditional check encounters a function with the same name in the parent theme, then simply won\u2019t run the one in the child theme<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to, you can <strong>override a function from the parent theme and stop executing it<\/strong>. We\u2019ll show you how to do that in the section below. Let&#8217;s say you have a function in the <em>functions.php<\/em> file of your parent theme called <em>parent_theme_function<\/em> and you want to stop running it in the child theme. The function would look something like this in the parent theme:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function parent_theme_function() {\r\n\/\/contents of function here\r\n}\r\nadd_action( \u2018init\u2019, \u2018parent_theme_function\u2019 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]<strong>To prevent it from running in the child theme<\/strong>, you need to add the following code in the functions.php file of the child theme:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function remove_parent_theme_function() {\r\nremove_action( \u2018init\u2019, \u2018parent_theme_function\u2019);\r\n}\r\nadd_action( \u2018wp_head\u2019, \u2018remove_parent_theme_function\u2019 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;18px&#8221;][vc_column_text]The second function requires the addition of a <em>wp_head<\/em> hook that will run at the start of each page. You can then add a new function to the child theme to replace the one you removed.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Troubleshooting<\/h3>\n<p>[\/vc_column_text][vc_column_text]The most common error you will encounter is probably a syntax error. It usually occurs because of an <strong>error in the code that you\u2019ve entered<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In that case, you should start by checking a couple of <strong>the most common causes<\/strong> first. One of them is a <strong>function in the <em>functions.php<\/em> file<\/strong> of the child theme that draws on styling from the parent theme that hasn\u2019t been called back properly. Another probable cause <strong>is incorrectly entered text for the Theme Name and Template lines<\/strong> in the style.css file. So if you experience problems with the child theme you\u2019ve created, you should always check these things first.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And, <strong>if you\u2019ve used modified template files<\/strong>, check again that the paths to the copied files in the child theme are accurate and that the callback to those files is correct.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you used a plugin<\/strong> to create or configure your child theme, then you should <strong>consult the plugin documentation<\/strong> for any problems configuring the child theme <strong>or contact the plugin developer(s)<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-not-to-use-a-child-theme\"><\/a>When NOT to Use a Child Theme?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Child themes are extremely useful, but that doesn\u2019t mean that <strong>they are always the ideal solution<\/strong>. Here are some situations where you should think twice about using a child theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you just want to make some basic stylistic changes with CSS<\/strong>, like changing text color, <strong>you don\u2019t need to use a child theme<\/strong>, there are several easier <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-add-custom-css\/\">options for adding custom CSS<\/a>. Most premium themes allow you to add custom CSS code using the theme\u2019s settings and options. You can also style your theme within the WordPress dashboard\u2014add custom CSS code by going to <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong>. Alternatively, you can install a suitable plugin for adding custom CSS.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Any changes that you can make using the options of your chosen theme or the WordPress admin panel should be made that way<\/strong>. Those include changing colors, layouts, adding and removing images, etc. All of these are easier to make with predefined options so there\u2019s no need to use WordPress to create a child theme just for that.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When it comes to <strong>altering the structure or functionality<\/strong> of the parent theme, you should <strong>first carefully check all the features the theme already has<\/strong>. If you find you need to copy almost all files from the parent theme to modify them for your child theme then <strong>it may be better to create a new custom theme<\/strong> from scratch or to simply <strong>find a new theme<\/strong> that suits you better.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Child themes are a very useful addition to WordPress. They allow you to customize any theme without directly changing its code. You can use them to add new functionalities to a theme or change its looks by customizing, modifying, and creating new template files.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You only need to have a little knowledge of CSS, HTML, and possibly PHP to create your child theme in WordPress. And in return, you get a great way to explore options and play around with changes without worrying about spoiling your theme or breaking your site.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Discover how to create a WordPress child theme by following our step-by-step tutorial. Use this knowledge for comprehensive customization of your site.<\/p>\n","protected":false},"author":10600,"featured_media":8714,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,4,13],"class_list":["post-8555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/10600"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8555"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8555\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8714"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}