Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dress Your WordPress with Child Themes

2,110

Published on

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

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,110
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. (IT’S NOT A REALLY SMALL THEME…)
  • 2. WHYCREATE A CHILD THEME?
  • 3. A CHILDTHEME CANTAKE YOUFROM THIS…
  • 4. http://diythemes.com/thesis/
  • 5. http://www.shatterboxx.com
  • 6. http://demo.graphpaperpress.com/modularity
  • 7. http://www.heidibaker.co.uk
  • 8. http://www.jumpingsunshinestudio.com
  • 9. http://www.principlepictures.com (coming soon)
  • 10. http://www.niophoto.com
  • 11. CHOOSING YOUR PARENT THEME
  • 12.  Well-written, semantic code Lots of widget areas Tons of flexibility Extra functionality
  • 13. PREMIUM vsFRAMEWORK vs CODEX
  • 14. THEESSENTIALSOF A CHILD THEME
  • 15.   Parent theme  style.css  screenshot.png  Template tag  @import call
  • 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. THEOPTIONALSOF A CHILD THEME
  • 18.  Functions.php Additional CSS files Javascript files New template files http://lauri.es/wphierarchy
  • 19. FIREBUG… THE CHILDTHEME’S BEST FRIEND
  • 20. http://lauri.es/damasking
  • 21. http://lauri.es/babymask
  • 22. Download the theme files here:http://wpdivas.com/themes
  • 23. 1
  • 24. 2
  • 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. 4To make yourAppearance > Themespage pretty.
  • 27. 5Add this code to your file:<?php// your code goes here?>
  • 28. 6//register a second menu add_action(init’,register_sub_menu’); function register_sub_menu() { register_nav_menus( array( secondary => __( SecondaryNavigation ), ) );}
  • 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. 8 FOOTER.PHP
  • 31. 9<div id="footerwidget"> <?php if (function_exists
(dynamic_sidebar) &&dynamic_sidebar(Footer’))?> </div>
  • 32. 10<div id="submenu"> <?php wp_nav_menu(array(menu => SecondaryNavigation’,theme_location’=> secondary )); ?> </div>
  • 33. 11 SIDEBAR.PHP
  • 34. 12body{ background-image: url(images/giza.gif); } CHANGE YOUR BACKGROUND IMAGE
  • 35. 13#content{ float:right; } #sidebar{ float:left; padding-left:10px; } REVERSE YOUR COLUMNS
  • 36. 14a{ color:#781C50; } a:hover{ color:#89862E; } CHANGE YOUR LINK COLOURS
  • 37. function childtheme_postheader() {
 echo bacon;
 } add_filter(thematic_postheader, childtheme_postheader); THEMATIC
  • 38. function widgetize_footer({ echo <div class="footerwidget">; dynamic_sidebar(Footer); echo </div>; } add_action(thesis_hook_footer, widgetize_footer);
 THESIS
  • 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. 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}

×