This document provides an overview of theme surgery and customizing WordPress themes. It discusses getting started with theming, using child themes to modify existing themes without directly editing files, and some helpful functions for adding functionality like menus and sidebars. The key points covered are: - Child themes allow modifying a parent theme's appearance without overwriting files on updates - Functions.php is used to add extra functionality to a theme - Templates can be created for non-standard page layouts - Menus and sidebars can be registered and called in functions.php and template files

1. Crash Course
in Theme Surgery
WordCamp Baltimore 2012
@mattdeville
www.rationalfrank.com

2. Agenda
• getting started with theming
• what is theme surgery?
• child themes
• modifying an existing theme
• helpful functions
2

3. Who am I?
• Creative Director
at G.1440
• a blogger
• a cyclist
• an artist
• part-time metalhead
3

4. Ever feel like
someone is
watching you?

5. If you have a blog,
someone probably is.

6. Content may be King…
but
Experience is Everything

7. What are Themes?
• PHP files
• CSS files
• JavaScript files
• Images
They control the look and feel of your site.
They are located in /wp-content/themes.
7

8. Theme Structure
Themes are (or should be) broken into logical
components that mimic the way we typically think
about web pages:
• header
• body
• sidebar
• footer
8

9. Structure Visualized
These parts relate to files in a theme:
header.php Header
sidebar.php
index.php
page.php Body/Content Sidebar
single.php
Footer footer.php
9

10. More Theme Structure
Themes can contain more files:
• archive.php
• content.php
• category.php
• image.php
• search.php
• page-home.php (a page template file)
10

11. Simple Themes
Simplest is
83 lines of PHP
and 75 lines of CSS
in 4 files.
11

12. Complex Themes
TwentyEleven
is quite complex.
Lots of files.
Very flexible.
Fully localized.
Confusing. (At least for me)
12

13. Modes of Learning
Some folks learn best
when starting from
scratch.
I don’t.
I like to
break things.
13

14. Getting Started
Find a theme that is close to what you want:
structurally
visually
functionally
14

15. Theme Surgery
remove 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. Word of Caution
Surgery isn’t always the best option
16

17. Another Word of Caution
If you edit a theme from the directory:
change the stylesheet so it doesn’t
accidentally get overwritten when an
upgrade is released!
17

18. Child Themes
Child themes inherit from an existing theme:
• structure
• style
• functionality
18

19. Child Themes
Child 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. 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. Child Themes
Only bring over
the styles you
want to override.
AND
Only bring over
the files you want
to override.
21

22. CSS Not Enough?
If you need to change the HTML structure, you can
still 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. The Loop
The loop is the center of the
Wordpress 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. 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. Use body_class();
Make sure your theme uses body class. It will give
you clues to the file being used to generate a
specific page.
<body <?php body_class(); ?>>
Firebug rules
25

26. Images and Paths
Want 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. CSS and Javascript
The 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. What is your Function?
functions.php is where you add functionality to
you theme:
• sidebars
• menus
• post thumbnails
• custom post types
• general use functions
28

29. Adding Menus
Your 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. Calling Menus
You could then call those menus:
by name:
wp_nav_menu(
array(‘menu’ => ‘Main Navigation’ )
);
or by location
wp_nav_menu(
array(‘location’ => ‘main_nav’ )
);
30

31. Adding Sidebars
Your 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. Sidebars
Possible 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. Calling Sidebars
You could then call those sidebars:
by name:
<?php dynamic_sidebar(‘Right Sidebar 1’); ?>
or by ID:
<?php dynamic_sidebar(‘right-sidebar-1’); ?>
33

34. Adding a Page Template
Not 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. The Abrupt Conclusion
Go forth and
make something!

36. QUESTIONS?