{"id":249803,"date":"2016-11-03T16:25:42","date_gmt":"2016-11-03T16:25:42","guid":{"rendered":"http:\/\/optimizerwp.com\/?p=249803"},"modified":"2017-04-23T01:46:55","modified_gmt":"2017-04-23T01:46:55","slug":"wordpress-child-theme","status":"publish","type":"post","link":"https:\/\/optimizerwp.com\/wordpress-child-theme\/","title":{"rendered":"How to Create a WordPress Child Theme"},"content":{"rendered":"<p>Using <a href=\"http:\/\/optimizerwp.com\/what-is-wordpress\/\">WordPress<\/a> child theme to customize your WordPress theme is the safest route possible. Because your customization will be saved in a different folder and it won\u2019t get lost when you update the parent theme.<\/p>\n<h2>What is Child Theme?<\/h2>\n<p>Child theme is the mirror reflection of a\u00a0theme. Whatever changes you make to the reflection will not affect the original or parent theme. But if the parent theme makes any changes it will be visible in your child theme.<\/p>\n<h2>Why You Should Be Using Child Themes<\/h2>\n<p>Using WordPress child themes to modify the theme is one of the safest and recommended way. Your changes will not be deleted if your parent theme gets updated. Another benefit of using child theme is if your child theme modification creates issue you can always deactivate the child and revert back to parent theme.<\/p>\n<h2>How To set Up\u00a0a WordPress Child Theme<\/h2>\n<ol>\n<li>Creating a Child Theme Manually<\/li>\n<li>Creating a Child Theme Using Plugin<\/li>\n<\/ol>\n<h4>Requirements:<\/h4>\n<p>Make sure your parent theme is present in the Appearance -&gt; Themes page, otherwise it will not work.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-250230\" src=\"http:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/Post-Divider.png\" alt=\"post-divider\" width=\"124\" height=\"114\" \/><\/p>\n<h2 style=\"text-align: center;\">Creating a Child Theme Manually<\/h2>\n<p><strong>Step 1:<\/strong> Create a folder and name it anything you like. Ex: optimizer-child<br \/>\n<strong>Step 2:<\/strong> Create a file titled style.css<br \/>\n<strong>Step 3:<\/strong> Open the style.css and write below information<br \/>\n<script src=\"https:\/\/gist.github.com\/cryptexvinci\/6e35159f0fe5616c57d718e98fc84d61.js\"><\/script><br \/>\n<strong>Step 4:<\/strong> Create a file titled functions.php and paste below code to import the parent themes style.<br \/>\n<script src=\"https:\/\/gist.github.com\/cryptexvinci\/074ffaef38361c7aadf6a9c74ac71aa2.js\"><\/script><br \/>\n<strong>Step 5:<\/strong> Now Zip the folder and upload it via Appearance -&gt; Themes -&gt; Add New<br \/>\n<strong>Step 6:<\/strong> Activate the theme.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-250230\" src=\"http:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/Post-Divider.png\" alt=\"post-divider\" width=\"124\" height=\"114\" \/><\/p>\n<h2 style=\"text-align: center;\">Create a Child Theme Using Plugin<\/h2>\n<p>If you don\u2019t want to jump through these hoops you can use free wordpress plugins to do that for you. There are lot of free plugins that lets you create a child theme easily. Eg: One-Click Child Theme, Child Theme Configurator, Child Theme Creator by Orbisius etc.<br \/>\nIn this article we will see how to create a child theme using One-Click Child Theme plugin. Follow these step by step instructions to get it configured.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-250225 size-full\" title=\"One Click Child Theme Plugin\" src=\"http:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/One-Click-Child-Theme.jpg\" alt=\"One Click WordPress Child Theme Plugin\" width=\"1000\" height=\"538\" srcset=\"https:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/One-Click-Child-Theme.jpg 1000w,  https:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/One-Click-Child-Theme-300x161.jpg 300w,  https:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/One-Click-Child-Theme-768x413.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><strong>Step 1:<\/strong><em><strong>\u00a0<\/strong><\/em>Download <a href=\"https:\/\/wordpress.org\/plugins\/one-click-child-theme\/\" target=\"_blank\" rel=\"noopener\">One-Click Child Theme<\/a> plugin<br \/>\n<strong>Step 2:<\/strong><em><strong>\u00a0<\/strong><\/em>log into the admin area of your site (http:\/\/yoursite.com\/wp-login.php)<br \/>\n<strong>Step 3:<\/strong><em><strong>\u00a0<\/strong><\/em>Go to <em>Plugins -&gt; Add New<\/em><br \/>\n<strong>Step 4:<\/strong><em><strong>\u00a0<\/strong><\/em>Click on <em>Upload plugin<\/em> to upload the plugin, then click on <em>Activate plugin<\/em><br \/>\n<strong>Step 5:\u00a0<\/strong>Now go to <em>Appearance -&gt; Themes<\/em>, make sure the theme you wish to create child theme for is activated. (For example: if you wish to create a child theme of twenty sixteen make sure twenty sixteen is activated.)<br \/>\n<strong>Step 6:<\/strong><em><strong>\u00a0<\/strong><\/em>Click on the theme thumbnail, then click on Child Theme<br \/>\n<strong>Step 7:<\/strong><em><strong>\u00a0<\/strong><\/em>After click that, you will be taken to child theme configuration page. Write Theme name, Description and author field.<br \/>\n<strong>Step 8:<\/strong><em><strong>\u00a0<\/strong><\/em>Click on <em>Create Child<\/em><br \/>\n<strong>Step 9:<\/strong><em><strong>\u00a0<\/strong><\/em>Now your child theme is ready and activated.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-250230\" src=\"http:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/Post-Divider.png\" alt=\"post-divider\" width=\"124\" height=\"114\" \/><\/p>\n<h2 style=\"text-align: center;\">Editing Other Template Files<\/h2>\n<p>If you want to add any custom functions to your WordPress child theme, you have to write them in your child themes functions.php. You can even make any structural or layout changes of your parent theme using child theme.<br \/>\nLets go through this step by step<\/p>\n<p>For instance, you have created a child theme of Twenty Sixteen Theme. Now you want to change how single page are display in twenty Sixteen. The single page is located at twentysixteen\/template-parts\/content-single.php<br \/>\n<strong>Step 1 :<\/strong> Create a content-single.php in your child theme folder. But ensure it will overwrite the parent theme we have to follow the exact file name &amp; structure.<\/p>\n<p><strong>Step 2:<\/strong> Create a folder and place the file inside that folder. Make sure the path looks exactly like the parent theme.<br \/>\nParent Theme : twentysixteen\/template-parts\/content-single.php<br \/>\nChild Theme : twentysixteen-child\/template-parts\/content-single.php<\/p>\n<p><strong>Step 3:<\/strong> Now you can write your own code in the content-single.php and it will overwrite parent file<\/p>\n<p>Using this method you can edit and overwrite any template of parent theme. You just have to make sure file name and folder path are identical.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-250230\" src=\"http:\/\/optimizerwp.com\/wp-content\/uploads\/2016\/11\/Post-Divider.png\" alt=\"post-divider\" width=\"124\" height=\"114\" \/><\/p>\n<h2 style=\"text-align: center;\">Customizing WordPress Theme without creating Child Theme<\/h2>\n<p>If the changes you are making to the theme doesn\u2019t require editing the parent themes code, you can try this methods to make the modification.<\/p>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<h3>Modifying Your Theme\u2019s CSS<\/h3>\n<p>If the changes you are making are only affect the CSS\u00a0and you are not altering any html or php code of the theme, it\u2019s better to use just a custom CSS plugin. There are lots of plugin that lets you add CSS to your theme without going through the hassle of creating a WordPress child theme. Most of the <a href=\"http:\/\/optimizerwp.com\">premium WordPress theme<\/a> has Custom CSS option built-in. if your theme doesn\u2019t have any custom CSS option, you can try using this plugin.<\/p>\n<ol>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/simple-custom-css\/\" target=\"_blank\" rel=\"noopener\">Simple Custom CSS<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-add-custom-css\/\" target=\"_blank\" rel=\"noopener\">WP Add Custom CSS<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/theme-junkie-custom-css\/\" target=\"_blank\" rel=\"noopener\">TJ Custom CSS<\/a><\/li>\n<li><a href=\"https:\/\/jetpack.com\/support\/custom-css\/\" target=\"_blank\" rel=\"noopener\">Jetpack Custom CSS<\/a><\/li>\n<\/ol>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<h3>Adding Custom Function To Your Theme<\/h3>\n<p>Using a custom function would an effective choice if you are adding just a function or want to remove or add a hook. Below plugin will let you add custom php function to your theme.<\/p>\n<ol>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/my-custom-functions\/\" target=\"_blank\" rel=\"noopener\">My Custom Functions<\/a><\/li>\n<\/ol>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n<h3>Custom Javascript<\/h3>\n<p>Most of the premium WordPress theme now provide a custom JavaScript filed to add javascript on either footer or header. If your theme doesn\u2019t have this feature you can try this plugin to add custom jQuery.<\/p>\n<ol>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/header-and-footer-scripts\/\" target=\"_blank\" rel=\"noopener\">Header and\u00a0Footer Scripts<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/scripts-n-styles\/\" target=\"_blank\" rel=\"noopener\">Scripts n Styles<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/custom-javascript-editor\/\" target=\"_blank\" rel=\"noopener\">Custom JavaScript Editor<\/a><\/li>\n<\/ol>\n<p>Using WordPress child themes to modify the theme should be our first choice when it comes to customizing a theme. That way you can save yourself sudden modification reset mishaps.<\/p>\n<h4><\/h4>\n<p>&nbsp;<\/p>\n<h4>Additional Child Theme Resources:<\/h4>\n<ol>\n<li><a href=\"http:\/\/justintadlock.com\/archives\/2014\/11\/03\/loading-parent-styles-for-child-themes\" target=\"_blank\" rel=\"noopener\">Loading parent styles for child themes<\/a>\u00a0by <a href=\"https:\/\/twitter.com\/justintadlock\" target=\"_blank\" rel=\"noopener\">Justin Tadlock<\/a><\/li>\n<li><a href=\"http:\/\/mor10.com\/challenges-new-method-inheriting-parent-styles-wordpress-child-themes\/\" target=\"_blank\" rel=\"noopener\">Challenges with the new method for inheriting parent styles in WordPress child themes<\/a> by\u00a0<a href=\"https:\/\/twitter.com\/mor10\" target=\"_blank\" rel=\"noopener\">Morten Rand-Hendriksen<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/video-screencasts\/145-wordpress-child-themes-with-lara-schenck\/\" target=\"_blank\" rel=\"noopener\">WordPress Child Themes with Lara Schenck<\/a>\u00a0by\u00a0<a href=\"https:\/\/twitter.com\/laras126\" target=\"_blank\" rel=\"noopener\">Lara Schenck<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Using WordPress child theme to customize your WordPress theme is the safest route possible. Because your customization will be saved in a different folder and it won\u2019t get lost when you update the parent theme. What is Child Theme? Child theme is the mirror reflection of a\u00a0theme. Whatever changes you make to the reflection will [&hellip;]<\/p>","protected":false},"author":400,"featured_media":250234,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[85],"tags":[],"class_list":["post-249803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/posts\/249803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/users\/400"}],"replies":[{"embeddable":true,"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/comments?post=249803"}],"version-history":[{"count":0,"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/posts\/249803\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/media\/250234"}],"wp:attachment":[{"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/media?parent=249803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/categories?post=249803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/optimizerwp.com\/wp-json\/wp\/v2\/tags?post=249803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}