{"id":1949341,"date":"2021-03-05T10:29:55","date_gmt":"2021-03-05T15:29:55","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1949341"},"modified":"2021-04-15T09:00:37","modified_gmt":"2021-04-15T13:00:37","slug":"how-to-create-a-child-theme-and-why","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/how-to-create-a-child-theme-and-why\/","title":{"rendered":"How To Create a Child Theme (and Why)"},"content":{"rendered":"\n<p>If you&#8217;ve ever requested help with customizing something in a WordPress website, you&#8217;ve likely heard someone say &#8220;make sure you create a child theme first&#8221;. This is really good advice, you absolutely should do that. But why? And more importantly, how? And what is a child theme anyway? Let&#8217;s go one by one starting with the what, or you can skip straight to the <a href=\"#why\" data-type=\"internal\" data-id=\"#why\">why<\/a> or to the <a href=\"#how\" data-type=\"internal\" data-id=\"#how\">how<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a child theme?<\/h2>\n\n\n\n<p>&#8220;A child theme allows you to change small aspects of your site\u2019s appearance yet still preserve your theme\u2019s look and functionality. [&#8230;] <\/p>\n\n\n\n<p>&#8230; a child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme.&#8221;<\/p>\n\n\n\n<p><em>Source: <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\">WordPress.org Theme Handbook<\/a><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why\">Why should you create a child theme?<\/h2>\n\n\n\n<p>WordPress theme developers are constantly working on their themes. They&#8217;re always adding new features, tweaking existing features, and adding security patches as things come up. Whenever they make a change, you have to update your theme. You&#8217;ve likely done this many times. You login to your website and you see a nice little message telling you that your theme has an update available.<\/p>\n\n\n\n<p>So what happens when you click &#8220;update&#8221;? Basically, all your theme files are deleted, and replaced with all brand new files. Even files that the developer didn&#8217;t change get replaced. If the developer only changed one file, the update still replaces ALL your files with the most up to date versions. This means that if you edited any of those files, those edits are deleted and you would need to go in and re-add them.<\/p>\n\n\n\n<p>This is where a child theme comes in.<\/p>\n\n\n\n<p>WordPress has this neat little feature built in where whenever it needs to load a theme file it checks to see if there&#8217;s a child theme, and if that child theme contains the file they need to load. If it doesn&#8217;t, then it just loads the default file in the original theme.<\/p>\n\n\n\n<p>For example, every page on your website has a header, which comes from a <em>header.php<\/em> file in your theme. So when a user loads a page on your website, WordPress says &#8220;ok let&#8217;s go find the <em>header.php<\/em> file&#8221;. First it checks to see if there&#8217;s a child theme, and if that child theme has a <em>header.php<\/em> file. If it does, it uses that file. If it doesn&#8217;t, it uses the one that came with the original theme.<\/p>\n\n\n\n<p>This means that you can create a child theme, and then create a <em>header.php<\/em> file in that child theme, and WordPress will automatically use that <em>header.php<\/em> file, instead of the original one.<\/p>\n\n\n\n<p><a name=\"buthow\"><\/a>So if you make some awesome edits to the <em>header.php<\/em> file in your child theme and your parent theme updates, you won&#8217;t lose the updates you made!<\/p>\n\n\n\n<p>Ok so that&#8217;s pretty neat but how do you actually go about creating a child theme?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how\">How to create a child theme<\/h2>\n\n\n\n<p>You could do it <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#how-to-create-a-child-theme\" target=\"_blank\">manually<\/a>, OR you could just use this free little plugin called <a href=\"https:\/\/wordpress.org\/plugins\/child-theme-configurator\/\" target=\"_blank\" rel=\"noreferrer noopener\">Child Theme Configurator<\/a>.<\/p>\n\n\n\n<p>After you&#8217;ve installed and activated this plugin, navigate to <strong>Tools \u2192 Child Themes<\/strong> to open the plugin settings. Click on <strong>CREATE a new Child Theme<\/strong>, then select your parent theme and click <strong>Analyze.<\/strong> <\/p>\n\n\n\n<p>After a few seconds it should hopefully give you the green light to create the child theme. You can leave all the settings the way they are, with the exception of number 8. I recommend checking the box that says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>This option replaces the Child Theme&#8217;s existing Menus, Widgets and other Customizer Settings with those from the Parent Theme. You should only need to use this option the first time you configure a Child Theme.<\/p><\/blockquote>\n\n\n\n<p>That way you shouldn&#8217;t have to recreate your menus, widgets etc. <\/p>\n\n\n\n<p>Go ahead and click the blue <strong>Create New Child Theme<\/strong> button.<\/p>\n\n\n\n<p>That&#8217;s it! Now all you have to do is go to <strong>Appearance \u2192 Themes<\/strong> and activate the child theme just like you would any other theme.<\/p>\n\n\n\n<p>This plugin will only create a <em>style.css<\/em> and a <em>functions.php<\/em>, because those are required for a theme to exist in WordPress, but you&#8217;re welcome to start creating your own files, such as a <em>header.php<\/em>, or a template file for your theme.<\/p>\n\n\n\n<p class=\"has-text-color has-background\" style=\"background-color:var(--global-palette8);color:#141827\">\ud83d\udc4b Tip: Whenever someone instructs you to put some code into your <em>functions.php<\/em> file, make sure you add it to the <em>functions.php<\/em> file of the <strong>child theme<\/strong>, not the one in the parent theme.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve ever requested help with customizing something in a WordPress website, you&#8217;ve likely heard someone say &#8220;make sure you create a child theme first&#8221;. This is really good advice, you absolutely should do that. But why? And more importantly, how? And what is a child theme anyway? Let&#8217;s go one by one starting with&#8230;<\/p>\n","protected":false},"author":31,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[24],"tags":[25],"stellar-product-taxonomy":[161],"class_list":["post-1949341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizing","tag-customizations","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":24,"label":"Customizations"}],"post_tag":[{"value":25,"label":"Customizations"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Guga Alves","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/gugatheeventscalendar-com\/"},"comment_info":0,"category_info":[{"term_id":24,"name":"Customizations","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":110,"filter":"raw","term_order":"0","cat_ID":24,"category_count":110,"category_description":"","cat_name":"Customizations","category_nicename":"customizing","category_parent":0}],"tag_info":[{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":177,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1949341"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949341\/revisions"}],"predecessor-version":[{"id":1955951,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949341\/revisions\/1955951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1949341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1949341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1949341"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1949341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}