@JEFFREYZINN OF @PIXEL_JAR

CHILD THEMES

2012 · MAY · PASADENA · MEETUP

http://codex.wordpress.org/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.

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

‣LEVERAGE THE FUNCTIONALITY OF THE PARENT THEME‣BE ABLE TO CONTINUE UPDATING PARENT THEME‣WILL NOT OVERWRITE YOUR CUSTOMIZATIONS‣SPEED UP DEVELOPMENT TIME

WHY USE A CHILD THEME

2012 · MAY · PASADENA · MEETUPMonday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

PARENTTHEME

CHILDTHEME

2012 · MAY · PASADENA · MEETUP#CHILDTHEMESMonday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

PARENT THEME: LUKE CHILD THEME: YODA

• PILOT• WHINY• RUNS, JUMPS, FLIPS• LIFT ROCKS AND R2-D2• LIGHTSABER• [FUTURE IMPROVEMENTS]

• [ALL OF LUKE’S ATTRIBUTES]• LIFT X-WING FROM SWAMP• AGED WISDOM• DELICIOUS SOUP

2012 · MAY · PASADENA · MEETUPMonday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

PARENT THEMES vs. CHILD THEMES

PARENT THEME CHILD THEME

• CAN BE ANY THEME• REQUIRES:

• index.php• style.css

2012 · MAY · PASADENA · MEETUP

• INHERITS PARENT THEME FILES• OVERRIDES PARENT SCRIPTS (if present)• functions.php (amended to parent

functions.php)• REQUIRES:

• style.css (*not inherited)/*Theme Name: Twenty ElevenTheme URI: http://example.com/Description: Description about this theme Author: Author name hereAuthor URI: http://example.com/about/Version: 1.3*/

/*Theme Name: Twenty Eleven ChildTheme URI: http://example.com/Description: Description about this theme Author: Child Author name hereAuthor URI: http://example.com/about/Template: twentyelevenVersion: 0.1*/

required!

parent folder

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

WHICH TEMPLATE PAGE WILL WORDPRESS CHOOSE?

2012 · MAY · PASADENA · MEETUP

http://codex.wordpress.org/Tem

plate_Hierarchy

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

‣ 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() )

HYPOTHETICAL SITUATION

WE VERY MUCH LIKE THE TWENTY ELEVEN THEME, EXCEPT WE ABSOLUTELY NEED TO MAKE THE FOLLOWING CHANGES:

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

THEME FILES

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

CHILD THEME CSS FILE (does not inherit parent styles)

‣ ADD IMPORT CALL TO PARENT STYLESHEET; ADD CUSTOMIZATIONS AFTER IMPORT‣ COPY/PASTE PARENT STYLESHEET INTO CHILD STYLESHEET; CUSTOMIZE AS NECESSARY

TWO OPTIONS:

/* Theme Name: Twentyeleven Child Theme Template: twentyeleven*/

/* Either import parent style.css file or copy/paste styles */@import url("../twentyeleven/style.css");

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

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;

}

?>

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

CHILD THEME SCREENSHOT/THUMBNAIL

‣ ADD screenshot.png TO YOUR CHILD THEME FOLDER‣ WIDTH: 300px; HEIGHT: 225px

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

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)

Monday, April 30, 2012

@JEFFREYZINN OF @PIXEL_JAR

JEFFREYZINN@PIXELJAR.NETEMAIL

TWITTER WEB

http://codex.wordpress.org/Child_Themes

http://codex.wordpress.org/Template_Hierarchy

The End. Thank You. Any Questions?https://github.com/jeffreyzinn/pasadena-wp-may-2012-child-theme

Monday, April 30, 2012