A child theme inherits the functionality of a parent theme and allows customizing or adding to that theme. Using a child theme lets you leverage the parent theme's functionality, continue updating the parent theme without overwriting customizations, and speeds up development time. Key child theme files include style.css, functions.php, and custom template files that override the parent theme.
1. CHILD THEMES
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.
http://codex.wordpress.org/Child_Themes
@JEFFREYZINN OF @PIXEL_JAR 2012 · MAY · PASADENA · MEETUP
Monday, April 30, 2012
2. WHY USE A CHILD THEME
‣LEVERAGE THE FUNCTIONALITY OF THE PARENT THEME
‣BE ABLE TO CONTINUE UPDATING PARENT THEME
‣WILL NOT OVERWRITE YOUR CUSTOMIZATIONS
‣SPEED UP DEVELOPMENT TIME
@JEFFREYZINN OF @PIXEL_JAR 2012 · MAY · PASADENA · MEETUP
Monday, April 30, 2012
3. PARENT CHILD
THEME THEME
@JEFFREYZINN OF @PIXEL_JAR #CHILDTHEMES 2012 · MAY · PASADENA · MEETUP
Monday, April 30, 2012
4. PARENT THEME: LUKE CHILD THEME: YODA
• PILOT • [ALL OF LUKE’S ATTRIBUTES]
• WHINY • LIFT X-WING FROM SWAMP
• RUNS, JUMPS, FLIPS • AGED WISDOM
• LIFT ROCKS AND R2-D2 • DELICIOUS SOUP
• LIGHTSABER
• [FUTURE IMPROVEMENTS]
@JEFFREYZINN OF @PIXEL_JAR 2012 · MAY · PASADENA · MEETUP
Monday, April 30, 2012
5. PARENT THEMES vs. CHILD THEMES
PARENT THEME CHILD THEME
• CAN BE ANY THEME • INHERITS PARENT THEME FILES
• REQUIRES: • OVERRIDES PARENT SCRIPTS (if present)
• index.php • functions.php (amended to parent
• style.css functions.php)
• REQUIRES:
/*
Theme Name: Twenty Eleven
• style.css (*not inherited)
Theme URI:
Description:
Author:
http://example.com/
Description about this theme
Author name here
required!
/*
Author URI: http://example.com/about/
Theme Name: Twenty Eleven Child
Version: 1.3
Theme URI: http://example.com/
*/
Description: Description about this theme
Author: Child Author name here
Author URI: http://example.com/about/
Template: twentyeleven
Version:
*/
0.1
parent folder
@JEFFREYZINN OF @PIXEL_JAR 2012 · MAY · PASADENA · MEETUP
Monday, April 30, 2012
6. 2012 · MAY · PASADENA · MEETUP
http://codex.wordpress.org/Template_Hierarchy
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012
WHICH TEMPLATE PAGE WILL WORDPRESS CHOOSE?
7. HYPOTHETICAL SITUATION
WE VERY MUCH LIKE THE TWENTY ELEVEN THEME, EXCEPT WE ABSOLUTELY
NEED TO MAKE THE FOLLOWING CHANGES:
‣ NEED THE STYLESHEET TO HAVE SOME DIFFERENT RULES (blue nav)
‣ NEED A SPECIAL TEMPLATE PAGE FOR ONE PARTICULAR CONTENT PAGE (no title on about
us page)
‣ NEED TO REVISE THE WAY A SINGLE POST DISPLAYS (remove prev/next links)
‣ ADD FILTER FUNCTION (modify the_content() )
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012
8. THEME FILES
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012
9. CHILD THEME CSS FILE (does not inherit parent styles)
TWO OPTIONS:
‣ ADD IMPORT CALL TO PARENT STYLESHEET; ADD CUSTOMIZATIONS AFTER IMPORT
‣ COPY/PASTE PARENT STYLESHEET INTO CHILD STYLESHEET; CUSTOMIZE AS NECESSARY
/*
Theme Name: Twentyeleven Child Theme
Template: twentyeleven
*/
/* Either import parent style.css file or copy/paste styles */
@import url("../twentyeleven/style.css");
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012
10. CHILD THEME functions.php (does inherit parent functions)
‣ ONLY CREATE IF NECESSARY
‣ ADD NEW FUNCTIONALITY TO CHILD functions.php PAGE
<?php
add_filter( 'the_content', 'my_special_instructions' );
function my_special_instructions( $content ) {
...
return $content;
}
?>
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012
11. CHILD THEME SCREENSHOT/THUMBNAIL
‣ ADD screenshot.png TO YOUR CHILD THEME FOLDER
‣ WIDTH: 300px; HEIGHT: 225px
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012
12. CHILD THEME CUSTOM FILES
‣ style.php (theme identity and custom styles)
‣ functions.php (add in a filter function)
‣ page-66.php (special template for about page)
‣ single.php (remove prev/next links)
‣ screenshot.php (sweet thumbnail for admin)
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012
13. The End. Thank You. Any Questions?
https://github.com/jeffreyzinn/pasadena-wp-may-2012-child-theme
http://codex.wordpress.org/Child_Themes
http://codex.wordpress.org/Template_Hierarchy
TWITTER WEB
JEFFREYZINN@PIXELJAR.NET
EMAIL
@JEFFREYZINN OF @PIXEL_JAR
Monday, April 30, 2012