WordPress Parent/Child Themes

by Lloyd Africa

Agenda

• Introduction to themes• Creating a child theme• Need more from your child theme?• Benefits of themes• Theme Frameworks• Example – Thematic• Lessons Learnt

Introduction What is a Theme?

ThemesThemes are made up of a collection of PHP templates, CSS, Images, and JavaScript files, bundled together in a single directory, located in the WordPress themes directory [wp-content/themes]. Any theme that is extended is known as a PARENT. All the themes born from this parent are know as CHILD themes.

Child ThemesA child theme is a reference to a parent theme and all that is needed is a single style sheet [style.css]. You can optionally add your own templates or functions to customize the markup that the theme produces but essentially, style.css, is all WordPress requires you to define

A Theme Framework is a solidly coded theme that serves as a base for other themes.

Creating a child theme" We'll be working with the thematic framework which is assumed, downloaded, unzipped, and sitting in [wp-content/themes/thematic] "

Step 1 - Create a new folder in [wp-content/themes/YOUR-CHILD-THEME]Step 2 - Create a new file called style.css and put it into your newly created folderStep 3 - Open/Edit your style.css (which should be blank) and add in

/*Theme Name: YOUR-CHILD-THEMEDescription: Child Theme based on ThematicAuthor: Lloyd AfricaTemplate: thematic /* this points to its parent and inherits ALL its functionality */Version: 1.0.This work is released under the GNU General Public License 2:http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.*/

@import url("../thematic/style.css");

That's it!

Need more than CSS?" If you need to change more than just the CSS and what to add in your own functions or display a unique favicon or do something funky then create a new functions.php and add this new file to [wp-content/themes/YOUR-CHILD-THEME] "

Step 1 - Open/Edit your functions.php (which should be blank) and add in

<?php

function childtheme_favicon() { ?>    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico"><?php } add_action('wp_head', 'childtheme_favicon');

/* your other funky code here */

?>

That's it!

Benefits of themesStandardization of themes will improve workflows and allow multiple developers and designers to add, edit, extend and design around a single known, community supported base theme (*framework).

If you have a 1000 client sites and WordPress 5.0 is released, you'd potentially have to hunt through the code of a 1000 sites and multiple template files looking for stuff to  check, test and maybe even fix. If those clients are using child themes to skin a carefully coded parent theme and maybe added some custom HTML or PHP, your only concern would be the parent theme. 

One Theme. 1000 Sites.

Theme FrameworksSandboxhttp://wordpress.org/extend/themes/sandbox

Carringtonhttp://carringtontheme.com/

WP-Frameworkhttp://wpframework.com/

Hybridhttp://themehybrid.com/themes/hybrid

Thematichttp://themeshaper.com/thematic/

ThematicThematic is a WordPress theme framework, designed by Ian Stewart.

It has 13 total widget areas and compatiblewith plugins such as Subscribe to Comments, WP-PageNavi, and Comment-license. It's free open source and users are able to remove credit information through the theme options page.

It has a growing community following,support forums, commercial support andcustomization and is leading the wave ofkiller parent/child theme frameworks.

Watch this space [                          ]

Lessons LearntThemes are the future of WordPress "skinning"

Moving forward it makes sense to work around an existing theme framework for WordPress and if you have the time and budget, to create your own theme framework. Its clear that the future of the current top 5 theme frameworks are well stable given their community support and increased following.

These "standards" make development and designing easier and even simpler and once familiar with a 3rd party or custom theme framework, should see production time reduced potentially by half.