Embed Size (px)
DESCRIPTION
Short presentation on some child theme basics for WordPress.
Citation preview
@alisonmfwww.alisonfoxall.com
@gobblelogicwww.gobblelogic.com
WordPress Child Themesby Alison Foxall, Designer & Partner @ Gobble Logic
By Definition
Child Theme
A theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.
Translation: A theme for a theme
Key BenefitsProtect your changes (from upgrading a parent theme)
i.e. You change the Twenty Eleven Theme around to better suit your needs, but Oh! Look! WordPress wants to upgrade some things. You get on a click-happy upgrade frenzy, and accidentally upgrade your Twenty Eleven Theme to the newest version, and overwriting everything you have worked for. You can avoid this heart-sinking catastrophe by creating a Child Theme for Twenty Eleven instead.
Additional Functionality (cooler features)
i.e. Someone (or you) could make a theme that just does more for you in terms of functionality, with the same look and feel of Twenty Eleven. Creating this Child Theme would enable you to keep these features without them getting overwritten.
Remember!
Child Themes Should...
Realistically a child theme should be nothing more than a stylesheet and some additional functions. Nothing crazy. Too much, and you should be making a parent theme, otherwise problems can occur with upgradability.
Creating a Child Theme
Directory Hierarchy
Child Themes reside in the same folder as the ‘themes’ folder. It does NOT reside in the parent theme folder. e.g.
themes
twentyeleven
twentyeleven-mychild
twentyten
Style.css
This is needed in the folder to actually create a theme
Style.cssCarry on as normal except...
As with any WordPress theme, the information header must be at the top of the file, the only difference being that in a child theme the Template: line is required, so that WordPress knows which theme is the parent of the child theme. It should be the directory name of the folder, case sensitive.
/*Theme Name: Twenty Eleven ChildTheme URI: http://example.com/Description: Child theme for the Twenty Eleven theme Author: Your name hereAuthor URI: http://example.com/about/Template: twentyelevenVersion: 0.1.0*/
NotedOverrides
Your new style.css will OVERRIDE the parent style.css. With this in mind, @import your parent stylesheet and then start making your changes. You do not need to use the !important declaration.
Other Paths
Lesson Learned: Don’t use bloginfo(stylesheet_directory) in your parent themes when linking to files.
Instead, use something like this to obtain a uri path for javascript libraries, css, and other paths in your template files:echo get_template_directory_uri()
Demo Time!
