Dress Your WordPress with Child Themes

  • 1,977 views
Uploaded 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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,977
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

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}