{"id":630,"date":"2021-11-12T18:49:44","date_gmt":"2021-11-12T13:04:44","guid":{"rendered":"https:\/\/nil.pro.np\/?p=630"},"modified":"2022-03-22T07:01:00","modified_gmt":"2022-03-22T01:16:00","slug":"how-to-create-wordpress-child-theme","status":"publish","type":"post","link":"https:\/\/nil.pro.np\/?p=630","title":{"rendered":"How to Create a WordPress Child Theme? [Beginners Guide]"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A child theme is a <a href=\"https:\/\/nil.pro.np\/wordpress\/\" data-type=\"category\" data-id=\"10\">WordPress<\/a> theme that depends and is based on another <a href=\"https:\/\/nil.pro.np\/best-wordpress-theme\/\" data-type=\"post\" data-id=\"761\">WordPress theme<\/a> (called parent theme). It inherits the look, features, and functionality of the parent theme. And, you can modify certain functionality while preserving others and customize the appearance of the parent theme without touching any file or code in the parent theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantage of Child Themes:<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Helps to build custom theme based on another without having to create a complete theme from scratch.<\/li><li>Separates customization from parent theme files.<\/li><li>Allows parent themes to be updated without losing modifications.<\/li><li>Provides Easy way to create feature rich theme based on <a href=\"https:\/\/nil.pro.np\/genesis-wordpress-theme\/\" data-type=\"post\" data-id=\"497\">WordPress Theme Framework<\/a> like <ta href=\"https:\/\/nil.pro.np\/refer\/genesis-framework\/\" linkid=\"511\">Genesis<\/ta>.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can create a WordPress child theme manually by creating the files and folder or by using a plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create a WordPress Child Theme without Plugin? [with Code]<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Create a child theme folder<\/strong>; a new folder in theme directory (wp-content\/themes).<\/li><li><strong>Create a stylesheet<\/strong>: style.css inside this theme folder.<\/li><li><strong>Place header comment at the top of Child theme&#8217;s stylesheet (style.css)<\/strong> in below format.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\nTheme Name: Child Thme Name\nTheme URI: https:\/\/nil.pro.np\nDescription: child Themes Description.\nAuthor: Nil Koirala\nAuthor URI: https:\/\/nil.pro.np\nTemplate: parent-theme-folder-name\nVersion: 1.0.0\nTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\nText Domain: child-theme-Domain\n*\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Change all information to match your child&#8217;s theme. But, only <code>Theme Name<\/code> and <code>Template <\/code>information is required.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><code>Theme Name<\/code><\/strong> \u2013 It needs to be unique to your <a href=\"https:\/\/nil.pro.np\/wordpress\/themes\/\" data-type=\"category\" data-id=\"28\">theme<\/a>.<br><strong><code>Template<\/code><\/strong> \u2013 It is the name of the parent theme directory (folder).<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Create a functions.php in your child theme directory<\/strong>. This is where you will add additional functions, action, hook to add or modify parent theme functionality.<\/li><li><strong>Enqueue stylesheet<\/strong>.<br>To enqueue parent stylesheet in child theme, first check parent themes styles handle. First parameter in wp_enqueue_style is the styles handle of corresponding stylesheet.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If the parent theme loads its style using a function starting with <code>get_template<\/code> (such as <code>get_template_directory()<\/code> and <code>get_template_directory_uri()<\/code>), then, load only child theme&#8217;s stylesheet, using the parent\u2019s handle in the dependency parameter.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nadd_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );\nfunction child_theme_enqueue_styles() {\nwp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parenthandle' ), wp_get_theme()-&gt;get('Version'));\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If the parent theme loads its style using a function starting with <code>get_stylesheet<\/code> (such as <code>get_stylesheet_directory()<\/code> and <code>get_stylesheet_directory_uri()<\/code>), then, load both parent and child theme&#8217;s stylesheets. Note: use the same handle name as the parent does for the parent styles<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nadd_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );\nfunction child_theme_enqueue_styles() {\n    $parenthandle = 'parent-style'; \/\/same as parent style handle\n    $theme = wp_get_theme();\n    \/\/Loading parent theme stylesheet\n    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '\/style.css', \n    array(),  \/\/ same as the parent theme style dependency\n    $theme-&gt;parent()-&gt;get('Version')\n    );\n   \/\/Loading child theme stylesheet\n   wp_enqueue_style( 'child-style', get_stylesheet_uri(),\n   array( $parenthandle ),\n   $theme-&gt;get('Version') \/\/ this only works if style header has Version\n    );\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If the parent theme uses multiple stylesheets, repeat <code>wp_enqueue_style <\/code>function for each stylesheet.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Now, <strong>child theme is ready to use. Install and activate<\/strong>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Notes:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>The <code>functions.php<\/code> of a child theme does not override <code>functions.php<\/code> of the parent. Instead, it is loaded in addition to the parent\u2019s functions.php. (it is loaded right before the parent\u2019s function.php file.)<\/li><li>Other than the <code>functions.php<\/code> file, any file added to the child theme will overwrite the same file in the parent theme.<\/li><li>You can add child theme image by adding PNG image file in child theme directory with name <code>screenshot.png<\/code><\/li><li>10 <a href=\"https:\/\/nil.pro.np\/best-wordpress-theme\/\" data-type=\"URL\" data-id=\"https:\/\/nil.pro.np\/best-wordpress-theme\/\"><strong>Best WordPress Theme<\/strong><\/a> to use as a parent theme.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Plugins to create WordPress child theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The manual process of creating a WordPress child theme is simple and straight forward but if you don&#8217;t want to go through the manual process you can use one of the Child Theme Generator plugins. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To create a child theme using the plugin, install any Child Theme Generator plugin and activate it. Then, go through the plugin dashboard and provide child theme-related information. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will automatically create files and folders required for the child theme based on provided data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some popular child theme generator plugins: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/plugins\/child-theme-configurator\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/child-theme-configurator\/\" rel=\"noreferrer noopener\">Child Theme Configurator<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/child-theme-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\">Child Theme Generator<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/child-theme-wizard\/\" target=\"_blank\" rel=\"noreferrer noopener\">Child Theme Wizard<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why should you use wp_enqueue_style instead of @import to load CSS stylesheet in WordPress child Theme?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In past, we used to add parent stylesheet in child theme by adding <code>@import url(\"..\/parentthemefolder\/style.css\");<\/code> on style.css of the child theme. However, this method of Importing parent theme stylesheet using @import increases the amount of time it takes stylesheet to load. So, its recommended to enqueue the parent theme stylesheet using wp_enqueue_scripts action and wp_enqueue_style() in child theme\u2019s functions.php.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reference:<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Child Themes | Theme Developer HandBook<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">If you have any questions following this tutorial or any topics on <a href=\"https:\/\/nil.pro.np\/\">Nil Tutorial,<\/a> don\u2019t hesitate to ask in the comment section. You can also reach me on <a rel=\"noreferrer noopener\" href=\"http:\/\/twitter.com\/knilkantha\/\" target=\"_blank\"><strong>Twitter<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A child theme is a WordPress theme that depends and is based on another WordPress theme (called parent theme). It inherits the look, features, and functionality of the parent theme. And, you can modify certain functionality while preserving others and customize the appearance of the parent theme without touching any file or code in the&hellip;&nbsp;<a href=\"https:\/\/nil.pro.np\/?p=630\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to Create a WordPress Child Theme? [Beginners Guide]<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[4,10],"tags":[],"class_list":["post-630","post","type-post","status-publish","format-standard","hentry","category-how-to","category-wordpress"],"_links":{"self":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=630"}],"version-history":[{"count":11,"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":922,"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts\/630\/revisions\/922"}],"wp:attachment":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}