{"id":14571,"date":"2012-09-25T23:01:49","date_gmt":"2012-09-25T15:01:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14571"},"modified":"2025-04-04T01:12:32","modified_gmt":"2025-04-03T17:12:32","slug":"wordpress-child-themes-dev","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/wordpress-child-themes-dev\/","title":{"rendered":"A Guide To: WordPress Child Themes Development"},"content":{"rendered":"

There are a number of reasons that WordPress developers are starting to use child themes. They give you the opportunity to customize a unique layout on top of another existing theme. This is perfect for beginners who want to play around with building their own themes.<\/p>\n

Additionally many premium designs will release new updates over time. If you are making changes to core theme files they will be overwritten when performing an update, but child themes are separate and neatly tucked away. This means you can build off existing premium themes and save loads of time in the process.<\/p>\n

In this guide I want to introduce the basic concepts of building a WordPress child theme and why it\u2019s such a good idea.<\/p>\n

Recommended Reading:<\/strong> Beginner\u2019s Guide to WordPress Plugin Development<\/a><\/p>\n

Getting Started<\/h2>\n

Child themes are not as difficult as they may appear. The benefits of working off a parent theme means you don\u2019t need to write all the HTML\/CSS from scratch. A child theme will automatically use any template files you include, such as sidebar.php<\/code> or footer.php<\/code>. But if they are missing, then your child theme will pull the same files from its parent.<\/p>\n

This functionality offers an enormous amount of freedom to customize already existing templates. It\u2019s also great for touching up areas around your website for special events, such as adding design patterns for Christmas or New Years.<\/p>\n

Your Required Files<\/h3>\n

You only need a single .css stylesheet to set up a child theme in WordPress. You also need to create a new directory in the \/wp-content\/themes<\/code> folder which will house your child theme. Pay attention that you aren\u2019t<\/strong> creating this folder inside the parent theme, but right alongside with it in the same themes directory.<\/p>\n

Developers will often include a functions.php and screenshot.png in the same folder as your new CSS file. The screenshot is displayed in your WordPress admin panel and the functions theme file can be used for tons of backend changes.<\/p>\n

But for now we should focus on the main stylesheet. This is commonly named style.css<\/strong> and includes a comment header with key meta information. This is important because your theme will only display as a child if you include the parent\u2019s directory name. Below is an example header comment:<\/p>\n

\r\n\/*\r\nTheme Name:   Twenty Eleven Child\r\nTheme URI:   http: \/\/example.com\/\r\nDescription:  Child theme for the Twenty Eleven design\r\nAuthor:     Jake Rocheleau\r\nAuthor URI:   http: \/\/www.hongkiat.com\/blog\/\r\nTemplate:    twentyeleven\r\nVersion:    0.1\r\n*\/\r\n<\/pre>\n
The value for template<\/strong> should be the directory name for the accompanied parent theme. Other than that all the other tags should be familiar to standard WordPress theming.<\/p>\n
\"Newest<\/figure>\n
Although all the parent PHP templates will be used, the original parent\u2019s style.css will not<\/strong> be imported automatically. If you want to work off the original styles you\u2019ll have to include it at the top of your child\u2019s style.css document. Below is an example including the WP Twenty Eleven theme.<\/p>\n
\r\n@import url(\"..\/twentyeleven\/style.css\");\r\n<\/pre>\n
Setting Up New Styles<\/h2>\n
Applying CSS rules to your theme is just as easy as editing the original. If you know which elements you need to target then use the same selectors in your own child theme.<\/p>\n
We could demo with some really easy changes to links and paragraphs. I\u2019ve used code from the original Twenty Eleven theme for targeting the different elements. At times it is necessary to use a more specific selector to override the older design.<\/p>\n
\r\nbody {\r\n\tpadding: 0 1.4em;\r\n}\r\n#page {\r\n\tmargin: 1.667em auto;\r\n\tmax-width: 900px;\r\n}\r\n\r\na {\r\n\tcolor: #5281df;\r\n\ttext-decoration: none;\r\n\tfont-family: Calibri, Tahoma, Arial, sans-serif;\r\n}\r\na:focus,\r\na:active,\r\na:hover {\r\n\ttext-decoration: underline;\r\n}\r\n<\/pre>\n
In these changes I\u2019ve reduced the overall body size and also removed some padding from the edges. All of these selectors can be found listed in the original .css document. It\u2019s notable that I\u2019m also changing some properties for all anchor links which include a different font stack and color choice.<\/p>\n
The !important Things<\/h3>\n
CSS has a special declaration to mark priority above other styles. The syntax is displayed as !important<\/code> beginning with the exclamation mark and terminating at the end of your CSS property. This is necessary if you have cascading styles from a parent theme which are overriding your own custom rules.<\/p>\n
\r\na {\r\n\tcolor: #5281df !important;\r\n\ttext-decoration: none;\r\n\tfont-family: Calibri, Tahoma, Arial, sans-serif;\r\n}\r\n<\/pre>\n
Above I have copied my original changes and edited the anchor text color with an important clause. This will take precedence over all other styles of the same selector depth. More defined elements (such as #access li:hover > a<\/code>) will usually hold their own styles unless the color<\/code> was still inherited from our original selector. In this case our parent theme does not setup a font-family property on anchor links, so as such we don\u2019t run into any inheritance issues.<\/p>\n
\"CSS<\/figure>\n
If you are having trouble making your changes stick, try popping one of these important marks at the end of your property statement. This isn\u2019t a perfect fix for every inheritance problem, but it does come in handy a lot more frequently than you\u2019d think.<\/p>\n
Cloning functions.php<\/h2>\n
Unlike the main stylesheet, your child theme will import its parent\u2019s functions automatically. This means you don\u2019t need to copy over any of the PHP code to still have it active in your new theme. Yet if you\u2019d like to re-define some of the functions you can build another functions.php and write in your new code with any changes.<\/p>\n
As an example I have built a function which parses a few JavaScript files when the template initiates. This will remove any older versions of jQuery and SWFObject scripts, while simultaneously adding the most recent versions to the wp_head<\/code> area.<\/p>\n
\r\n\/\/ queue js files for load\r\nfunction mytheme_js() \r\n{\r\n if (is_admin()) return;\r\n\r\n wp_deregister_script('jquery');\r\n wp_register_script('jquery', 'http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js');\r\n wp_enqueue_script('jquery');\r\n\r\n wp_deregister_script('swfobject');\r\n wp_register_script('swfobject', 'http:\/\/ajax.googleapis.com\/ajax\/libs\/swfobject\/2.2\/swfobject.js');\r\n wp_enqueue_script('swfobject');\r\n}\r\nadd_action('init', mytheme_js);\r\n<\/pre>\n
I should point out that if you are importing code from the parent functions.php then you\u2019ll have to use a different function name. Otherwise PHP will give out a fatal error and you will have to FTP into the server to fix the mistake.<\/p>\n
Working with Theme Files<\/h2>\n
The most broad category of theming is building custom layouts and page types. By default your child theme will inherit all of its parent\u2019s theme files. But you have the option of creating new child theme files and WP will register these as the \u2018primary\u2019 template.<\/p>\n
For example archive.php<\/strong> and index.php<\/strong> are used to display the post archives and homepage screen, respectively. If there are changes you\u2019d like to make which require edits to the HTML then you\u2019d be safer cloning the parent files and editing them in the child\u2019s theme directory.<\/p>\n
Custom Page Templates<\/h3>\n
While we\u2019re talking about template files I also want to introduce a piece of WordPress functionality which many are not familiar with. You can build page and post templates which will be selectable from the Admin panel when creating new content. Even if the parent theme doesn\u2019t have the new custom template file WordPress will still use the child in place of a page.php<\/strong> or single.php<\/strong>.<\/p>\n
First create a new file named page-offer.php. This will be a \u201cspecial offer\u201d promotional page which is themed differently than all the others. In here you can copy over your original page code or even build the theme entirely from scratch. The only code we need to let WordPress know about this new template is a comment setup in PHP.<\/p>\n
\r\n<?php \r\n\/** \r\n * Template Name: Offer\r\n *\/ \r\n\r\n?>\r\n<\/pre>\n
Another alternative to this method is building custom pages named after the unique ID number. So instead of loading the default archive.php<\/strong> for author pages you could create a file such as author-ID.php<\/strong> where ID is the user\u2019s unique WordPress ID number. Although this system is more taxing since you\u2019d need to create a new template file for each of the authors on your site.<\/p>\n
It becomes more useful if you can combine these two techniques with other template files. Notably categories and tags work well using their own theme files. Also if you link to attachments in your content then you\u2019ll want to consider the different possible template layouts for each mime type. I included the template hierarchy below for a simple JPEG image attachment:<\/p>\n