Customizing WordPress Themes@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
About Your Presenter:Lisa Sabin-Wilson✤   Wisconsin (Go Pack!)                                Lisa Sabin-Wilson           ...
WordPress Books✤   WordPress For Dummies✤   WordPress All In One✤   WordPress Web Design For    Dummies
This session covers the basics of           WordPress themes and provides          practical tips on how to get started   ...
Please hold questions           until the end - thank you!@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
There is more than one way to skin a cat I present one way to accomplish building a WordPress theme - your mileage may var...
WordPress Theme versusWordPress Template✤   WordPress Theme = a grouping of several templates    working together.✤   Word...
WordPress Theme versusWordPress Template A WordPress Theme is a collection of WordPress Templates made up of WordPress tag...
Structure is IMPORTANT  Before digging into template functions for WordPress  themes - understand the syntax of the templa...
Structure is IMPORTANT  <?php the_title(); ?>@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Where Do Themes Live??  In the WordPress installation  directory on your web server:  /wp-content/themes/@LisaSabinWilson ...
Where Do Themes Live??  Each theme has its own folder:  /wp-content/themes/your-awesome-theme/  /wp-content/themes/your-la...
6 Main TemplateFiles:✤   Stylesheet (style.css)✤   Header (header.php)✤   Main Index (index.php)✤   Sidebar (sidebar.php)✤...
6 Main Template Files:✤   Stylesheet => Contains the CSS that defines the formatting and style✤   Header => Starting point ...
Creating a Theme from Scratch: part slides / part live demo.  Download sample files here:      http://lisas.co/wcatl-demo@L...
Theme Stylesheet (style.css)✤   Contains the CSS style information for your    site✤   ALSO must contain theme information...
Theme Stylesheet (style.css)  /*  Theme Name: WordCamp ATL Theme Demo  Theme URI: http://lisasabin-wilson.com  Description...
Theme Stylesheet(style.css)Comments in the style.css filedisplay in the Theme Informationsection in the Dashboard under“Man...
Theme Stylesheet (style.css)  Follow coding standards for CSS for best results:  http://codex.wordpress.org/CSS_Coding_Sta...
Header Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Sidebar Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Footer Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Use Simple includes to pulltemplate files into the Main Index:✤   To include the header, use get_header()✤   To include th...
Main Index Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Theme Functions@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Theme FunctionsAdd Custom Background Feature  add_custom_background();@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Theme Functions Add Post Thumbnailsadd_theme_support( post-thumbnails );add_image_size( blog, 600, 200, true );@LisaSabinW...
Theme FunctionsAdd Post Thumbnails to your template file: <?php if ( has_post_thumbnail($post->ID)) {    echo get_the_post_...
Theme FunctionsAdd Widget Areas:if ( function_exists(register_sidebar) )  register_sidebar(array(    name => Sidebar,    i...
Theme Functions Referencehttp://codex.wordpress.org/Theme_Featureshttp://codex.wordpress.org/Function_Reference@LisaSabinW...
Creating a Theme from Scratch   http://lisas.co/wcatl-demo@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
Upcoming SlideShare
Loading in...5
×

Customizing WordPress Themes

2,955

Published on

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!

Published in: Technology, Business
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,955
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Customizing WordPress Themes"

    1. 1. Customizing WordPress Themes@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    2. 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. 3. WordPress Books✤ WordPress For Dummies✤ WordPress All In One✤ WordPress Web Design For Dummies
    4. 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. 5. Please hold questions until the end - thank you!@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    6. 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. 7. WordPress Theme versusWordPress Template✤ WordPress Theme = a grouping of several templates working together.✤ WordPress Template = a singular file.@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    8. 8. WordPress Theme versusWordPress Template A WordPress Theme is a collection of WordPress Templates made up of WordPress tags.@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    9. 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. 10. Structure is IMPORTANT <?php the_title(); ?>@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    11. 11. Where Do Themes Live?? In the WordPress installation directory on your web server: /wp-content/themes/@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    12. 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. 13. 6 Main TemplateFiles:✤ 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. 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. 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. 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. 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. 18. Theme Stylesheet(style.css)Comments in the style.css filedisplay in the Theme Informationsection in the Dashboard under“Manage Themes”Create a 300 x 225 JPG or PNG filecalled “screenshot” to display thetheme thumbnail.@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    19. 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. 20. Header Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    21. 21. Sidebar Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    22. 22. Footer Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    23. 23. Use Simple includes to pulltemplate 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. 24. Main Index Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    25. 25. Theme Functions@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    26. 26. Theme FunctionsAdd Custom Background Feature add_custom_background();@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    27. 27. Theme Functions Add Post Thumbnailsadd_theme_support( post-thumbnails );add_image_size( blog, 600, 200, true );@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    28. 28. Theme FunctionsAdd 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. 29. Theme FunctionsAdd Widget Areas:if ( function_exists(register_sidebar) ) register_sidebar(array( name => Sidebar, id => sidebar-widget,));@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    30. 30. Theme Functions Referencehttp://codex.wordpress.org/Theme_Featureshttp://codex.wordpress.org/Function_Reference@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
    31. 31. Creating a Theme from Scratch http://lisas.co/wcatl-demo@LisaSabinWilson | WordCamp Atlanta - Feb. 2012

    ×