• Save
Dress Your WordPress with Child Themes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Dress Your WordPress with Child Themes

on

  • 2,395 views

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.

Statistics

Views

Total Views
2,395
Views on SlideShare
2,394
Embed Views
1

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 1

http://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dress Your WordPress with Child Themes Presentation 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}