week 9 - introduction to child themes
DESCRIPTION
TRANSCRIPT
1. Class website ca274.beekeeperdev.com
2. Google Group – Use to ask questions and share findings
Week 8 Recap
Week 8 Recap
Mid-term
Intro to WordPress ChildThemes
Week 9
Week 9 – Introduction to Child Themes
HMTLCSSJavaScriptPHP
For every site, a theme.
My-WP-Theme 1
HMTLCSSJavaScriptPHP
My-WP-Theme 2
HMTLCSSJavaScriptPHP
My-WP-Theme 3
HMTLCSSJavaScriptPHP
My-WP-Theme 3
Week 9 – Introduction to Child Themes
HMTLCSSJavaScriptPHP
This is the OLD way
My-WP-Theme 1
HMTLCSSJavaScriptPHP
My-WP-Theme 2
HMTLCSSJavaScriptPHP
My-WP-Theme 3
HMTLCSSJavaScriptPHP
My-WP-Theme 3
Week 9 – Introduction to Child Themes
HMTLCSSJavaScriptPHPTheme options
Introducing child themes…
My-WP-Theme(parent-theme)
CSSTwo or three PHP files
My-wp-child-Theme
What is a WordPress Parent theme? Any theme created by anyone No specific coding requirements
Week 9 - Introduction to Child Themes
What is a WordPress Child theme?
“A WordPress child theme is 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.”
-The WordPress Codex
Week 9 - Introduction to Child Themes
Why use Child themes?• You don’t have reinvent the wheel
• Change only what you need
• Protects your modification from updates to parent theme (in theory)
• Unified architecture and development process
Week 9 - Introduction to Child Themes
How do child them work? Follow the same hierarchy as any WordPress
theme
Child theme can contain as many or as few files as you want
If template is not available in child theme directory, WP will look for it parent theme directory
Files in your child theme folder override files in the parent theme folder
Week 9 - Introduction to Child Themes
How do child them work? (Cont) Only requirement is a style.css
functions.php does not get overridden. (Adding a functions.php will add-to rather than override functions.php from your parent theme)
Week 9 - Introduction to Child Themes
Directory Structure
Week 9 - Introduction to Child Themes
Directory Structure
Week 9 - Introduction to Child Themes
Parent Theme Child Theme
Examples
Week 9 - Introduction to Child Themes
Examples
Week 9 - Introduction to Child Themes
Examples
Week 9 - Introduction to Child Themes
How to get started?...It’s easy. Choose in a parent theme
Create a new folder in /wp-content/themes/
Create CSS file in newly created folder.
Add @import call to parent CSS file
Week 9 - Introduction to Child Themes
There must be no other CSS rules above the @import rule. If you put other rules above it, it will be invalidated and thestylesheet of the parent will not be imported.
When Choosing a parent theme… Don’t just look at the design. Flexibility? Extra
functionality?
Premium vs. Framework vs. Codex
Is there a forum or structured system for support or bug reporting?
Well-written & commented code. Check to see if the X-HTML & CSS mark-up validates according to W3C standards.
Make sure that you fully understand how a Parent theme works
Week 9 - Introduction to Child Themes
Frameworks Supercharged parent theme
For developers
Usually highly widgetized
Uses action to allow child themes to execute code
User filters to allow child themes to modify output
Week 9 - Introduction to Child Themes
Some good parent themes / FrameworksListed on WP Codex http://codex.wordpress.org/Theme_FrameworksThematic Theme (free, developer friendly)http://themeshaper.com/thematic-for-wordpress/Hybrid Theme (free, paid support) http://themehybrid.com/Genesis Theme (premium, regular updates, developer friendly) http://www.studiopress.com/themesThesis Theme (premium, regular updates, highly customizable
Week 9 - Introduction to Child Themes
PRACTICE
Week 9 - Introduction to Child Themes
InstallWordPress(10 Minutes)
Week 6
CSS File
Week 9 - Introduction to Child Themes
* Template = folder name of the parent theme
Dashboard
Week 9 - Introduction to Child Themes
For bonus points, add a screenshot.png fileto your child theme folder. 300 x 225 pixels
Overriding style elements
Week 9 - Introduction to Child Themes
Parent Theme Child Theme
Overriding style elements
Week 9 - Introduction to Child Themes
Overriding functions
Week 9 - Introduction to Child Themes
Parent Theme
Child Theme
Resources Codex: Child Themeshttp://codex.wordpress.org/Child_Themes
How To Modify WordPress Themes The Smart Wayhttp://themeshaper.com/modify-wordpress-themes/
How to make a child theme for WordPress: A pictorial introduction for beginners
http://op111.net/53/
Week 9 - Introduction to Child Themes
Resources Codex: Child Themeshttp://codex.wordpress.org/Child_Themes
How To Modify WordPress Themes The Smart Wayhttp://themeshaper.com/modify-wordpress-themes/
How to make a child theme for WordPress: A pictorial introduction for beginners
http://op111.net/53/
Week 9 - Introduction to Child Themes
Homework Create a twentyeleven child theme
Add/change the background image of the body Change the background color of the sidebar Change the font weight, color Make post titles in all CAPS Hide category meta using CSS Anything else you want (optional)
Name of you child theme should be “firstname lastname child theme”
Email me the file(s) of child theme only. Make sure you receive confirmation from me.
Week 9 - Introduction to Child Themes
Sources http://www.slideshare.net/vegasgeek/intro-to-wordpress-child-
themes
http://www.slideshare.net/abanesta/child-theming-an-introduction-to-wordpress-theme-development-with-wordpress-child-themes
http://www.slideshare.net/saracannon/customizing-themeschildthemes
http://www.slideshare.net/brandondove/parentchild-themes-vs-theme-frameworks
http://www.slideshare.net/rfair404/wordpress-child-themes/
Week 9 - Introduction to Child Themes