A discussion of how to build a child theme for WordPress, given at WordCamp Montreal on July 10, 2011.

3. (IT’S NOT A REALLY SMALL THEME…)

4. WHY
CREATE A
CHILD
THEME?

5. A CHILD
THEME CAN
TAKE YOU
FROM THIS…

6. http://diythemes.com/thesis/

7. http://www.shatterboxx.com

8. http://demo.graphpaperpress.com/modularity

9. http://www.heidibaker.co.uk

10. http://www.jumpingsunshinestudio.com

11. http://www.principlepictures.com
(coming soon)

12. http://www.niophoto.com

13. CHOOSING
YOUR
PARENT
THEME

14.  Well-written, semantic
code
 Lots of widget areas
 Tons of flexibility
 Extra functionality

15. PREMIUM
vs
FRAMEWORK
vs
CODEX

16. THE
ESSENTIALS
OF A CHILD
THEME

17.  Parent theme
 style.css
 screenshot.png
 Template tag
 @import call

18. /*
Theme Name: Babymatic
Theme URI: http://www.babymatic.com
Description: A child theme for my new site.
Version: 1.0
Author: Laurie M. Rauch
Author URI: http://www.wpdivas.com
Template: thematic
*/
@import url('../thematic/style.css');
body{background-color:#b0b;}

19. THE
OPTIONALS
OF A CHILD
THEME

20.  Functions.php
 Additional CSS files
 Javascript files
 New template files
http://lauri.es/wphierarchy

21. FIREBUG…
THE CHILD
THEME’S BEST
FRIEND

24. http://lauri.es/damasking

25. http://lauri.es/babymask

26. Download the theme files here:
http://wpdivas.com/themes

27. 1

28. 2

29. 3
/*
Theme Name: Babymask
Theme URI: http://playground.wpdivas.com/
babymask/
Description: An awesome child theme for my new
site.
Version: 1.0
Author: Laurie M. Rauch
Author URI: http://www.wpdivas.com
Template: damasking
*/
@import url('../damasking/style.css');

30. 4
To make your
Appearance > Themes
page pretty.

31. 5
Add this code to your file:
<?php
// your code goes here
?>

32. 6
//register a second menu
add_action('init’,'register_sub_menu’);
function register_sub_menu() {
register_nav_menus( array(
'secondary' => __( 'Secondary
Navigation' ), ) );
}

33. 7
//register a new sidebar area
register_sidebars( 1,
array(
'name' => 'Footer',
'id’ => 'footer1',
'description' => 'Footer widget area’,
'before_widget' => '<div id="%1$s"
class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2
class="widgettitle">',
'after_title' => '</h2>'
));

34. 8 FOOTER.PHP

35. 9
<div id="footerwidget">
<?php if (function_exists
('dynamic_sidebar') &&
dynamic_sidebar('Footer’))?>
</div>

36. 10
<div id="submenu">
<?php wp_nav_menu
(array('menu' => 'Secondary
Navigation’,'theme_location’
=> 'secondary' )); ?>
</div>

37. 11
SIDEBAR.PHP

38. 12
body{
background-image: url(images/giza.gif);
}
CHANGE YOUR BACKGROUND IMAGE

39. 13
#content{
float:right;
}
#sidebar{
float:left; padding-left:10px;
}
REVERSE YOUR COLUMNS

40. 14
a{
color:#781C50;
}
a:hover{
color:#89862E;
}
CHANGE YOUR LINK COLOURS

41. function childtheme_postheader()
{
echo 'bacon';
}
add_filter('thematic_postheader',
'childtheme_postheader');
THEMATIC

42. function widgetize_footer({
echo '<div class="footerwidget">';
dynamic_sidebar('Footer');
echo '</div>';
}
add_action('thesis_hook_footer',
'widgetize_footer');
THESIS

44. 1. WordPress Codex: http://codex.wordpress.org/Child_Themes
2. WordPress Template Hierarchy: http://codex.wordpress.org/
Template_Hierarchy
3. GraphPaperPress: http://graphpaperpress.com/2010/02/10/how-
to-create-child-themes-for-our-modularity-theme-for-wordpress/
4. Thematic: http://themeshaper.com/modify-wordpress-themes/
5. Thesis: http://diythemes.com/thesis/rtfm/customizing-with-hooks/
6. Firebug: https://addons.mozilla.org/en-US/firefox/addon/firebug/
7. Added Bytes (Dave Child) CSS CheatSheet http://
www.addedbytes.com/cheat-sheets/css-cheat-sheet/
8. W3Schools: http://w3schools.com/css/
9. Html dog: http://www.htmldog.com/
10. Din Pattern: http://www.dinpattern.com

45. 1. Thesis/DIY Themes {diythemes.com/thesis}
2. Shatterboxx Media {shatterboxx.com}
3. Graph Paper Press {graphpaperpress.com}
4. Heidi Baker {heidibaker.co.uk}
5. Jumping Sunshine Studio
{jumpingsunshinestudio.com}
6. Principle Pictures {principlepictures.com}
7. Nio Photography {niophoto.com}
8. Thematic {themeshaper.com}
9. WP Divas {wpdivas.com}