(IT’S NOT A REALLY SMALL THEME…)
WHYCREATE A  CHILD THEME?
A CHILDTHEME CANTAKE YOUFROM THIS…
http://diythemes.com/thesis/
http://www.shatterboxx.com
http://demo.graphpaperpress.com/modularity
http://www.heidibaker.co.uk
http://www.jumpingsunshinestudio.com
http://www.principlepictures.com         (coming soon)
http://www.niophoto.com
CHOOSING  YOUR PARENT THEME
 Well-written, semantic  code Lots of widget areas Tons of flexibility Extra functionality
PREMIUM     vsFRAMEWORK     vs   CODEX
THEESSENTIALSOF A CHILD  THEME
  Parent theme  style.css  screenshot.png  Template tag  @import call
/*     	Theme Name: Babymatic 		Theme URI: http://www.babymatic.com 		Description: A child theme for my new site.	Version:...
THEOPTIONALSOF A CHILD  THEME
 Functions.php Additional CSS files Javascript files New template files  http://lauri.es/wphierarchy
FIREBUG… THE CHILDTHEME’S BEST  FRIEND
http://lauri.es/damasking
http://lauri.es/babymask
Download the theme files here:http://wpdivas.com/themes
1
2
3/*     	Theme Name: Babymask 		Theme URI: http://playground.wpdivas.com/babymask/	Description: An awesome child theme for...
4To make yourAppearance > Themespage pretty.
5Add this code to your file:<?php// your code goes here?>
6//register a second menu	add_action(init’,register_sub_menu’);	function register_sub_menu() { 	register_nav_menus( array(...
7//register a new sidebar area	register_sidebars( 1, 		 	array( 	 		 	 	name => Footer,	 		 	 	id’ => footer1,    	 		 	 	...
8   FOOTER.PHP
9<div id="footerwidget">	 	<?php if (function_exists
(dynamic_sidebar) &&dynamic_sidebar(Footer’))?>	</div>
10<div id="submenu"> 	 	<?php wp_nav_menu(array(menu => SecondaryNavigation’,theme_location’=> secondary )); ?> 	</div>
11 SIDEBAR.PHP
12body{	 	background-image: url(images/giza.gif);	}	         CHANGE YOUR BACKGROUND IMAGE
13#content{	 	float:right;	}	#sidebar{	 	float:left; padding-left:10px;	}	                  REVERSE YOUR COLUMNS
14a{	 	color:#781C50;	}	a:hover{	 	color:#89862E;	}	         CHANGE YOUR LINK COLOURS
function childtheme_postheader() {
     echo bacon;
 }	add_filter(thematic_postheader, childtheme_postheader);	           ...
function widgetize_footer({		echo <div class="footerwidget">;		dynamic_sidebar(Footer);  echo </div>;	}	add_action(thesis_...
1.  WordPress Codex: http://codex.wordpress.org/Child_Themes2.  WordPress Template Hierarchy: http://codex.wordpress.org/ ...
1.    Thesis/DIY Themes {diythemes.com/thesis}2.    Shatterboxx Media {shatterboxx.com}3.    Graph Paper Press {graphpaper...
Dress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
Dress Your WordPress with Child Themes
Upcoming SlideShare
Loading in …5
×

Dress Your WordPress with Child Themes

2,460 views
2,340 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,460
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Dress Your WordPress with Child Themes

  1. 1. (IT’S NOT A REALLY SMALL THEME…)
  2. 2. WHYCREATE A CHILD THEME?
  3. 3. A CHILDTHEME CANTAKE YOUFROM THIS…
  4. 4. http://diythemes.com/thesis/
  5. 5. http://www.shatterboxx.com
  6. 6. http://demo.graphpaperpress.com/modularity
  7. 7. http://www.heidibaker.co.uk
  8. 8. http://www.jumpingsunshinestudio.com
  9. 9. http://www.principlepictures.com (coming soon)
  10. 10. http://www.niophoto.com
  11. 11. CHOOSING YOUR PARENT THEME
  12. 12.  Well-written, semantic code Lots of widget areas Tons of flexibility Extra functionality
  13. 13. PREMIUM vsFRAMEWORK vs CODEX
  14. 14. THEESSENTIALSOF A CHILD THEME
  15. 15.   Parent theme  style.css  screenshot.png  Template tag  @import call
  16. 16. /* 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;}
  17. 17. THEOPTIONALSOF A CHILD THEME
  18. 18.  Functions.php Additional CSS files Javascript files New template files http://lauri.es/wphierarchy
  19. 19. FIREBUG… THE CHILDTHEME’S BEST FRIEND
  20. 20. http://lauri.es/damasking
  21. 21. http://lauri.es/babymask
  22. 22. Download the theme files here:http://wpdivas.com/themes
  23. 23. 1
  24. 24. 2
  25. 25. 3/* Theme Name: Babymask Theme URI: http://playground.wpdivas.com/babymask/ Description: An awesome child theme for my newsite. Version: 1.0 Author: Laurie M. Rauch Author URI: http://www.wpdivas.com Template: damasking */ @import url(../damasking/style.css);

  26. 26. 4To make yourAppearance > Themespage pretty.
  27. 27. 5Add this code to your file:<?php// your code goes here?>
  28. 28. 6//register a second menu add_action(init’,register_sub_menu’); function register_sub_menu() { register_nav_menus( array( secondary => __( SecondaryNavigation ), ) );}
  29. 29. 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 => <h2class="widgettitle">, after_title => </h2> ));
  30. 30. 8 FOOTER.PHP
  31. 31. 9<div id="footerwidget"> <?php if (function_exists
(dynamic_sidebar) &&dynamic_sidebar(Footer’))?> </div>
  32. 32. 10<div id="submenu"> <?php wp_nav_menu(array(menu => SecondaryNavigation’,theme_location’=> secondary )); ?> </div>
  33. 33. 11 SIDEBAR.PHP
  34. 34. 12body{ background-image: url(images/giza.gif); } CHANGE YOUR BACKGROUND IMAGE
  35. 35. 13#content{ float:right; } #sidebar{ float:left; padding-left:10px; } REVERSE YOUR COLUMNS
  36. 36. 14a{ color:#781C50; } a:hover{ color:#89862E; } CHANGE YOUR LINK COLOURS
  37. 37. function childtheme_postheader() {
 echo bacon;
 } add_filter(thematic_postheader, childtheme_postheader); THEMATIC
  38. 38. function widgetize_footer({ echo <div class="footerwidget">; dynamic_sidebar(Footer); echo </div>; } add_action(thesis_hook_footer, widgetize_footer);
 THESIS
  39. 39. 1.  WordPress Codex: http://codex.wordpress.org/Child_Themes2.  WordPress Template Hierarchy: http://codex.wordpress.org/ Template_Hierarchy3.  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
  40. 40. 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}

×