• Save
Customizing WordPress Themes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Customizing WordPress Themes

on

  • 4,158 views

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 ...

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!

Statistics

Views

Total Views
4,158
Views on SlideShare
4,150
Embed Views
8

Actions

Likes
7
Downloads
0
Comments
1

4 Embeds 8

http://www.linkedin.com 3
http://buildcmswebsite.com 3
https://twimg0-a.akamaihd.net 1
http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \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

Customizing WordPress Themes Presentation Transcript

  • 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 versusWordPress Template✤ WordPress Theme = a grouping of several templates working together.✤ WordPress Template = a singular file.@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
  • 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. 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 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. 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 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. 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 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. Main Index Template@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
  • 25. Theme Functions@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
  • 26. Theme FunctionsAdd Custom Background Feature add_custom_background();@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
  • 27. Theme Functions Add Post Thumbnailsadd_theme_support( post-thumbnails );add_image_size( blog, 600, 200, true );@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
  • 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. Theme FunctionsAdd Widget Areas:if ( function_exists(register_sidebar) ) register_sidebar(array( name => Sidebar, id => sidebar-widget,));@LisaSabinWilson | WordCamp Atlanta - Feb. 2012
  • 30. Theme Functions Referencehttp://codex.wordpress.org/Theme_Featureshttp://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