{"id":1298,"date":"2021-10-21T07:59:30","date_gmt":"2021-10-21T07:59:30","guid":{"rendered":"http:\/\/httpsd-themespandatheme.com\/demos\/documentation\/?p=1298"},"modified":"2021-12-22T12:59:44","modified_gmt":"2021-12-22T12:59:44","slug":"child-theme","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/2021\/10\/21\/child-theme\/","title":{"rendered":"Child Theme"},"content":{"rendered":"\n<h4 class=\"mt-6 mb-3 wp-block-heading\">What is a child theme?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A child theme is a theme that can edit codes and styles from parent theme directly. Changes in the child theme will remain after a theme update while the changes in its parent theme are removed. It is a good idea to use a child theme if you are facing problems that cannot be solved with the options or styles that the theme provides. You can change codes using template file modifications or hooks. Visit <a rel=\"noreferrer noopener\" href=\"https:\/\/codex.wordpress.org\/Child_Themes\" target=\"_blank\">Child Theme<\/a> for more details.<\/p>\n\n\n\n<h4 class=\"mt-7 mb-3 wp-block-heading\">How to create a PandaStore child theme?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">PandaStore provides an easy way to create a child theme. You need to input a child theme title and click <code class=\"code-grey\">Create<\/code> button. Then you could see <code class=\"code-grey\">PandaStore Child Theme<\/code> is added and activated in <code class=\"code-grey\">Appearance &gt; Themes<\/code> page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large mt-3\"><img decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/10\/child_theme-1024x487.jpg\" alt=\"\" class=\"wp-image-3138\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/10\/child_theme-1024x487.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/10\/child_theme-768x366.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Create a child theme in setup wizard<br><\/figcaption><\/figure>\n\n\n\n<h4 class=\"mt-7 mb-3 wp-block-heading\">How to modify codes using a child theme?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">There are several ways to modify core codes.<\/p>\n\n\n\n<h5 class=\"mt-5 mb-3 wp-block-heading\">1. Copy template files from parent theme<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">You could copy theme template files <code class=\"code-grey\">( located in panda\/templates directory )<\/code> or WooCommerce plugin\u2019s template files <code class=\"code-grey\">( located in woocommerce directory )<\/code> to child theme\u2019s directory and modify them. You could copy only limited files for modification. If you copy and modify the other files except template files, changes will not affect your site.<\/p>\n\n\n\n<p class=\"alert alert-info alert-light d-block mt-3 mb-10 wp-block-paragraph\"><strong>IMPORTANT NOTE:<\/strong><br>Sometimes PandaStore theme and WooCommerce plugin will make major changes to these files. You should keep an eye on updates and if they are updated, copy and modify them again.<\/p>\n\n\n\n<h5 class=\"mt-7 mb-3 wp-block-heading\">2. Override function<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">You could change pre-defined functions by redefining them in the child theme. You could probably see some functions wrapped with <code class=\"code-grey\">function_exists<\/code>. And you can do modifications for these functions. Child theme functions are loaded before others, so you could create the same function in the child theme and make changes to the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The code Below is the example of overriding functions. Let\u2019s assume that you are going to modify <code class=\"code-grey\">alpha_get_col_class<\/code> function. The original code ( this is from parent theme ) is the same as follows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* This is original code *\/\nif ( ! function_exists( 'alpha_get_col_class' ) ) :\n\n\t\/**\n\t * Get column class from columns count array\n\t *\n\t * @since 1.0\n\t *\n\t * @param int&#91;] $col_cnt Array of columns count per each breakpoint.\n\t *\n\t * @return string columns class\n\t *\/\n\tfunction alpha_get_col_class( $col_cnt = array() ) {\n\n\t\t$class = ' row';\n\t\tforeach ( $col_cnt as $w =&gt; $c ) {\n\t\t\tif ( $c &gt; 0 ) {\n\t\t\t\t$class .= ' cols-' . ( 'min' != $w ? $w . '-' : '' ) . $c;\n\t\t\t}\n\t\t}\n\n\t\treturn apply_filters( 'alpha_get_col_class', $class );\n\t}\nendif;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now you can copy this function into the child theme and make changes to the content.<\/p>\n\n\n\n<pre class=\"wp-block-code mb-10\"><code>\/* This is modification code *\/\nfunction alpha_get_col_class( $col_cnt = array() ) {\n\n        \/\/ your code here\n        ...\n        ...\n        ...\n}\n<\/code><\/pre>\n\n\n\n<h5 class=\"mt-7 mb-3 wp-block-heading\">3. Using hooks<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">PandaStore and other plugins provide many hooks ( including actions and filters ) for developers to modify core codes. You could add your codes to the existing actions and filters.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Example of using hooks *\/\nadd_action( 'alpha_wc_after_notice', 'alpha_wc_notice_close', 10, 2 );\nfunction alpha_wc_notice_close() {\n\techo '&lt;button type=\"button\" class=\"btn btn-link btn-close\"&gt;&lt;i class=\"close-icon\"&gt;&lt;\/i&gt;&lt;\/button&gt;';\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>What is a child theme? A child theme is a theme that can edit codes and styles from parent theme directly. Changes in the child theme will remain after a theme update while the changes in its parent theme are removed. It is a good idea to use a child theme if you are facing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1298","post","type-post","status-publish","format-standard","hentry","category-setup-wizard"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/posts\/1298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/comments?post=1298"}],"version-history":[{"count":1,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/posts\/1298\/revisions"}],"predecessor-version":[{"id":3139,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/posts\/1298\/revisions\/3139"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/media?parent=1298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/categories?post=1298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/tags?post=1298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}