Crash Course in Theme Surgery

1,260 views

Published on

The slides from my presentation at WordCamp Baltimore 2012.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,260
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Crash Course in Theme Surgery

  1. 1. Crash Coursein Theme SurgeryWordCamp Baltimore 2012@mattdevillewww.rationalfrank.com
  2. 2. Agenda • getting started with theming • what is theme surgery? • child themes • modifying an existing theme • helpful functions 2
  3. 3. Who am I? • Creative Director at G.1440 • a blogger • a cyclist • an artist • part-time metalhead 3
  4. 4. Ever feel like someone iswatching you?
  5. 5. If you have a blog,someone probably is.
  6. 6. Content may be King… butExperience is Everything
  7. 7. What are Themes? • PHP files • CSS files • JavaScript files • ImagesThey control the look and feel of your site.They are located in /wp-content/themes. 7
  8. 8. Theme StructureThemes are (or should be) broken into logicalcomponents that mimic the way we typically thinkabout web pages: • header • body • sidebar • footer 8
  9. 9. Structure Visualized These parts relate to files in a theme:header.php Header sidebar.phpindex.phppage.php Body/Content Sidebarsingle.php Footer footer.php 9
  10. 10. More Theme StructureThemes can contain more files: • archive.php • content.php • category.php • image.php • search.php • page-home.php (a page template file) 10
  11. 11. Simple ThemesSimplest is 83 lines of PHP and 75 lines of CSS in 4 files. 11
  12. 12. Complex ThemesTwentyEleven is quite complex.Lots of files.Very flexible.Fully localized.Confusing. (At least for me) 12
  13. 13. Modes of LearningSome folks learn bestwhen starting fromscratch. I don’t. I like to break things. 13
  14. 14. Getting StartedFind a theme that is close to what you want: structurally visually functionally 14
  15. 15. Theme Surgeryremove what you don’t want or need change the colors tweak the typography alter the html structure rewrite the styles make the logo bigger… 15
  16. 16. Word of Caution Surgery isn’t always the best option 16
  17. 17. Another Word of Caution If you edit a theme from the directory: change the stylesheet so it doesn’taccidentally get overwritten when an upgrade is released! 17
  18. 18. Child ThemesChild themes inherit from an existing theme: • structure • style • functionality 18
  19. 19. Child ThemesChild themes also: • Allow you to change the appearance of your site without compromising the original theme • Give you the ability to fall back to the original at the click of a button 19
  20. 20. Child Themes /* Theme Name: heavy metal ground hog Theme URI: http://rationalfrank.com Author: Matthew DeVille template Author URI: http://rationalfrank.com/ refers to the Description: simple responsive theme! name of the Template: crashcourse parent theme’s Version: 1.0 directory License: GNU General Public License License URI: license.txt Tags: simple, responsive */ import the parent theme’s @import url(“../crashcourse/style.css”); stylesheet 20
  21. 21. Child ThemesOnly bring overthe styles youwant to override. ANDOnly bring overthe files you wantto override. 21
  22. 22. CSS Not Enough?If you need to change the HTML structure, you canstill do surgery with child themes. • It is still non-invasive, but very effective. • Add files to your child theme to override the parent theme. • Add functions to the child theme functions file to allow for further customization. 22
  23. 23. The LoopThe loop is the center of theWordpress universe. • it is basically an elaborate while loop • use it to cycle through multiple posts and display in a list • use it to display the content of one post/page 23
  24. 24. The Loop<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class=”post”> <h1><?php the_title(); ?></h2> output post/page <?php the_content(); ?> content here. </div><?php endwhile; else: ?> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p><?php endif; ?> 24
  25. 25. Use body_class();Make sure your theme uses body class. It will giveyou clues to the file being used to generate aspecific page.<body <?php body_class(); ?>> Firebug rules 25
  26. 26. Images and PathsWant to include an image? Code for portability:WRONG<img src=”/images/groundhog_of_doom.jpg”>USE<?php bloginfo(‘template_url‘); ?>RIGHT<img src=”<?php bloginfo(‘template_url‘); ?>/images/groundhog_of_doom.jpg”> 26
  27. 27. CSS and JavascriptThe same goes for CSS and JS. Code for portability:WRONG<script src=”/wp-content/themes/crashcourse/js/respond.min.js”></script>USE<?php bloginfo(‘template_url‘); ?>RIGHT<script src=”<?php bloginfo(‘template_url‘); ?>/js/respond.min.js”></script> 27
  28. 28. What is your Function?functions.php is where you add functionality toyou theme: • sidebars • menus • post thumbnails • custom post types • general use functions 28
  29. 29. Adding MenusYour theme can have one or many menus:register_nav_menu( ‘main_nav’, location ‘Main Navigation’ description);register_nav_menu( ‘footer_nav’, ‘Main Navigation’); 29
  30. 30. Calling MenusYou could then call those menus:by name:wp_nav_menu( array(‘menu’ => ‘Main Navigation’ ));or by locationwp_nav_menu( array(‘location’ => ‘main_nav’ )); 30
  31. 31. Adding SidebarsYour theme can have multiple sidebars:register_sidebar( array( ‘name’ => __( ‘Right Hand Sidebar’ ), ‘id’ => ‘right-sidebar’, ‘description’ => __( ‘Widgets in this area will be shown on the right-hand side.’ ), ‘before_title’ => ‘<h1>’, ‘after_title’ => ‘</h1>’ )); 31
  32. 32. SidebarsPossible locations for multiple sidebars: Header Sidebar register_sidebar( array( Body/Content Sidebar 1 ‘name’ => __( ‘Right Sidebar 1’ ), ‘id’ => ‘right-sidebar-1’, ‘description’ => __( ‘description goes here’ ), Sidebar 2 ‘before_title’ => ‘<h1>’, ‘after_title’ => ‘</h1>’ ) ); Footer Footer Sidebar 1 Footer Sidebar 2 Footer Sidebar 3 32
  33. 33. Calling SidebarsYou could then call those sidebars:by name:<?php dynamic_sidebar(‘Right Sidebar 1’); ?>or by ID:<?php dynamic_sidebar(‘right-sidebar-1’); ?> 33
  34. 34. Adding a Page TemplateNot every page in a site needs to look the same.That’s where templates come in handy. <?php /* Template Name: Full Width */ get_header(); ?> 34
  35. 35. The Abrupt Conclusion Go forth and make something!
  36. 36. QUESTIONS?

×