• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wordcamp 2013 Louisville - Child Themes

Wordcamp 2013 Louisville - Child Themes



Creating Child Themes and Reusing code is one of the strengths of modern coding techniques. ...

Creating Child Themes and Reusing code is one of the strengths of modern coding techniques.

It simplifies your theme files and speeds up the development process by not having to constantly rewrite code.

WordPress has a few standard includes built in, such as get_header(), get_footer(), and get_sidebar(). However, since WordPress 3.0 you can easily create your own custom includes using the get_template_part() function.

Frameworks are also lightly discussed as a part of Theme development and how they are used with Child Themes.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • From the website: The easiest and the fastest way to create custom and high quality code for your WordPress project using the latest WordPress coding standards and API's. 

Wordcamp 2013 Louisville - Child Themes Wordcamp 2013 Louisville - Child Themes Presentation Transcript

  • 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 CAPSTONECREATIONS.COM
  • 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. SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • 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. SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • 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* SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • 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. SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • CHILD THEME COMPONENTS Required:  Style Sheet: style.css Optional:  Template files  functions.php  other files (images, JavaScript, php includes)  screenshot.png SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • CHILD THEME STYLE SHEET (STYLE.CSS) FORMAT Required 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) SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • CHILD THEME FUNCTIONS FILE functions.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.: SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • INCLUDING FILES In 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. SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • RE-USE COMMON ELEMENTS get_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.php wp-content/themes/twentyten/loop-index.php wp-content/themes/twentytenchild/loop.php wp-content/themes/twentyten/loop.php SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • 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 SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • FRAMEWORKS The 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 SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • 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! SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • 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 SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM
  • 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. SLIDESHARE.NET/JASONDAVIS8 @CAPSTONCREATION CAPSTONECREATIONS.COM