Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress Child Themes


Published on

Short presentation on some child theme basics for WordPress.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

WordPress Child Themes

  1. 1. WordPress Child Themes by Alison Foxall, Designer & Partner @ Gobble Logic @alisonmf @gobblelogic
  2. 2. By DefinitionChild 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
  3. 3. 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.
  4. 4. 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.
  5. 5. 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
  6. 6. Style.css Carry 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: Child theme for the Twenty Eleven themeAuthor: Your name hereAuthor URI: twentyelevenVersion: 0.1.0*/
  7. 7. 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()
  8. 8. Demo Time!
  9. 9. Thank You!