Themes are very popular with users of WordPress, primarily because the theme defines the look and feel of your web site, and the functions within the template carry your content forward to the eyes of your readers. Yet, themes still remain a mystery to many new users of WordPress, especially getting started in creating your own theme. This session covers the basics of WordPress themes and provides practical tips on how to get started creating your own theme. In this session you will learn the basic templates (index, header, sidebar, footer), including the stylesheet with basic CSS information to help you with styles and formats; additionally, you will learn how to connect the template files together to create a basic WordPress theme that you can build on from there. Discover basic template tags to help you accomplish your goals of content delivery and even learn how to make sure your theme supports basic WordPress features such as widgets, featured images, custom header and custom backgrounds. At the end of the session, Lisa provides you with a link where you can download the example basic theme for you to work with long after WordCamp Atlanta is over, as you continue your journey towards becoming a WordPress theme master!

1. Customizing WordPress Themes
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

2. About Your Presenter:
Lisa Sabin-Wilson
✤ Wisconsin (Go Pack!)
Lisa Sabin-Wilson
Author of books.
✤ WordPress user since 2003 Designer of sites.
Lover of WordPress.
✤ Author since 2006
http://lisasabin-wilson.com
@LisaSabinWilson
✤ Twitter: @LisaSabinWilson
Thanks for coming!

3. WordPress Books
✤ WordPress For Dummies
✤ WordPress All In One
✤ WordPress Web Design For
Dummies

4. This session covers the basics of
WordPress themes and provides
practical tips on how to get started
creating your own theme.
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

5. Please hold questions
until the end - thank you!
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

6. There is more than one way to skin a cat
I present one way to accomplish building a WordPress theme - your mileage may vary.
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

7. WordPress Theme versus
WordPress Template
✤ WordPress Theme = a grouping of several templates
working together.
✤ WordPress Template = a singular file.
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

8. WordPress Theme versus
WordPress Template
A WordPress Theme is a collection of WordPress
Templates made up of WordPress tags.
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

9. Structure is IMPORTANT
Before digging into template functions for WordPress
themes - understand the syntax of the template tags you
will be using:
<?php the_title(); ?>
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

10. Structure is IMPORTANT
<?php the_title(); ?>
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

11. Where Do Themes Live??
In the WordPress installation
directory on your web server:
/wp-content/themes/
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

12. Where Do Themes Live??
Each theme has its own folder:
/wp-content/themes/your-awesome-theme/
/wp-content/themes/your-lame-theme/
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

13. 6 Main Template
Files:
✤ Stylesheet (style.css)
✤ Header (header.php)
✤ Main Index (index.php)
✤ Sidebar (sidebar.php)
✤ Footer (footer.php)
✤ Theme Functions (functions.php)
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

14. 6 Main Template Files:
✤ Stylesheet => Contains the CSS that defines the formatting and style
✤ Header => Starting point for every page of a web site
✤ Main Index => contains template tags that display the content
✤ Sidebar => Navigation items, links, banners, etc
✤ Footer => copyright statements, menus, etc.
✤ Functions => contains functions to include features in your theme such as
thumbnails, menus, custom backgrounds, etc.
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

15. Creating a Theme from Scratch:
part slides / part live demo.
Download sample files here:
http://lisas.co/wcatl-demo
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

16. Theme Stylesheet (style.css)
✤ Contains the CSS style information for your
site
✤ ALSO must contain theme information in
the form of comments so WordPress
recognizes the unique theme.
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

17. Theme Stylesheet (style.css)
/*
Theme Name: WordCamp ATL Theme Demo
Theme URI: http://lisasabin-wilson.com
Description: WordCamp ATL Theme Demo
Version: 1.0
Author: Lisa Sabin-Wilson
Author URI: http://lisasabin-wilson.com
License: GNU Public License
*/
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

18. Theme Stylesheet
(style.css)
Comments in the style.css file
display in the Theme Information
section in the Dashboard under
“Manage Themes”
Create a 300 x 225 JPG or PNG file
called “screenshot” to display the
theme thumbnail.
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

19. Theme Stylesheet (style.css)
Follow coding standards for CSS for best results:
http://codex.wordpress.org/CSS_Coding_Standards
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

20. Header Template
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

21. Sidebar Template
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

22. Footer Template
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

23. Use Simple includes to pull
template files into the Main Index:
✤ To include the header, use get_header()
✤ To include the sidebar, use get_sidebar()
✤ To include the footer, use get_footer()
✤ To include the search form, use get_search_form()
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

24. Main Index Template
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

25. Theme Functions
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

26. Theme Functions
Add Custom Background Feature
add_custom_background();
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

27. Theme Functions
Add Post Thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size( 'blog', '600', '200', true );
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

28. Theme Functions
Add Post Thumbnails to your template file:
<?php if ( has_post_thumbnail($post->ID)) {
echo get_the_post_thumbnail($post->ID, 'blog');
}
?>
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

29. Theme Functions
Add Widget Areas:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar-widget',
));
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

30. Theme Functions Reference
http://codex.wordpress.org/Theme_Features
http://codex.wordpress.org/Function_Reference
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

31. Creating a Theme from Scratch
http://lisas.co/wcatl-demo
@LisaSabinWilson | WordCamp Atlanta - Feb. 2012