Wordcamp 2013 Louisville - Child Themes

CHILD TH

EMES

SLIDESHARE.NET/JASONDAVIS8@CAPSTONCREATION

CAPSTONECREATIONS.COM

WHAT IS A WORDPRESS THEME? Fundamentally, the WordPress Theme system is a way to "skin" your

website/blog.

Consists of: style sheet(s) template file(s) images code files (functions)

SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION


WHAT IS A CHILD THEME?Official Definition: A WordPress child theme is a theme that inherits the functionality of another

theme, called the parent theme.

A Child theme allows you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.



WHY USE CHILD THEMES?Modification/Customizations: If you modify an existing theme and it is updated, your changes will be lost.

With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.

Time: It can speed up development.

Beginners: It’s a great way to get started if you are just learning WordPress theme

development.



WHEN TO USE CHILD THEMES:As soon as you want to modify the site's look, presentation, or functionality

Examples of such cases: change color scheme change "read more" match blog to non-WP site change footer contents*



HOW TO USE A CHILD THEME? Create a directory under /wp-content/themes/ Name = /themename-child/ will do (no spaces) Upload a properly-formatted stylesheet. Activate the child theme. Log in to your site’s dashboard, and go to

Administration Panels > Appearance > Themes. You will see your child theme listed there. Click Activate.

Now Enjoy your day.



http://codex.wordpress.org/Administration_Panels

http://codex.wordpress.org/Administration_Panels#Appearance

http://codex.wordpress.org/Administration_Panels#Theme_Options

CHILD THEME COMPONENTSRequired: Style Sheet: style.css

Optional: Template files functions.php other files (images, JavaScript, php includes) screenshot.png



CHILD THEME STYLE SHEET (STYLE.CSS) FORMATRequired Commented Information Block (at top) Required elements:

Theme Name Template (parent theme name)

Optional elements: Theme URI, Description, Author URI, Author, Version

@import directives (optional)



SAMPLE CHILD STYLE SHEET



CHILD THEME FUNCTIONS FILEfunctions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

TIP FOR THEME DEVELOPERS. you can make the user functions of your theme pluggable —that is,

replaceable by a child theme— by declaring them conditionally. E.g.:



INCLUDING FILESIn the parent functions.php(if the parent is child theme ready)

require_once( get_stylesheet_directory() . '/my_included_file.php' );

When you need to include files that reside within your child theme's directory structure, you will use get_stylesheet_directory(). get_stylesheet_directory() points to your child theme's directory (not the

parent theme's directory).

You would do this in a theme that has a child theme already, otherwise it’s a potential edit lost on next update of parent.

Just wait……… more on this in a second.



http://codex.wordpress.org/Function_Reference/get_stylesheet_directory

RE-USE COMMON ELEMENTSget_template_part Load a template part into a template (other than header, sidebar, footer). Makes it

easy for a theme to reuse sections of code and an easy way for child themes to replace sections of their parent theme.

A PHP include or require on steriods.

Example: <?php get_template_part( 'loop', 'index' ); ?>

will do a PHP require() for the first file that exists among these, in this priority:wp-content/themes/twentytenchild/loop-index.phpwp-content/themes/twentyten/loop-index.phpwp-content/themes/twentytenchild/loop.phpwp-content/themes/twentyten/loop.php



http://codex.wordpress.org/Child_Themes

CREATE THE CUSTOM FILE Add the get_template_part function to your parent theme page template. Create a new page template in your child theme. Name it and paste your code.

RESOURCES (search for child themes) WPtuts.com WordPress Codex WPBeginner.com WPEngineer.com WPSnippets.com



FRAMEWORKSThe term "Theme Framework" currently has two meanings:

A "drop-in" code library that is used to facilitate development of a Theme

A stand-alone base/starter Theme that is intended either to be forked into another Theme, or else to be used as a Parent Theme template



BASE/STARTER THEMES A "base/starter" Theme framework is a stand-alone Theme designed to be a flexible

foundation for quicker WordPress development, usually serving as a robust Parent Theme for Child Themes.

Some Theme frameworks can also make theme development more accessible, removing the need for programming or design knowledge by Creating Options Pages.

Examples: Klasik Thematic Thesis Genesis

These are base/starter themes – but also Themes!



FRAMEWORKS A "drop-in" code library framework is not a stand-alone Theme. Such

frameworks cannot be installed nor used as a stand-alone Theme. Rather, these libraries are included with the Theme, and "bootstrapped" to the

Theme by being included in the Theme's functions.php file.

Examples: Options Framework Redux Framework



FRAMEWORKS Essentially once a framework is installed and you have your template files

ready and in your child theme, you can reuse the framework and crank out themes faster. Just activate a different child theme.

Many design and layout options can be controlled without the need to know programming (PHP).

You’ll find amazing design flexibility. Unlike a single theme, where you’re stuck with the colors and layout the designer hard-coded into it, a theme framework is versatile and adaptable to many different potential site looks and layouts.

User communities have created collections of styles and functions that can often be plugged into your site with little or no programming knowledge.

It’s easy to optimize your site for SEO.



MORE TOOLS



Technology

Wordcamp 2013 Louisville - Child Themes