WordPress Theme Design - Rich Media Institute Workshop


Published on

In this workshop, we will show the process of taking an HTML & CSS designs and PhotoShop templates and converting them into a fully working WordPress theme. Along the way, we’ll look at the main aspects of WordPress theming, some best practices and a few tricks. WordPress 2.6 and 2.7 makes the whole process easier than ever, so get started making your WordPress site look not like a WordPress site!

Published in: Technology, Business
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WordPress Theme Design - Rich Media Institute Workshop

  1. 1. WordPress Theme Design Rich Media Institute Brendan Sera-Shriar BackSpaceStudios.com
  2. 2. What’s a Theme? Seriously, do I really have to answer this…
  3. 3. In this workshop, I will explain the basics of how a WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required (but learning some will always help), however, you will need Photoshop and CSS skills to create your own design.
  4. 4. The Basic Template <ul><ul><li>We will be using the ‘Default’ theme as our template for structure. </li></ul></ul><ul><ul><li>Take note of the elements (header, post title, search form, navigation, footer, etc.) </li></ul></ul>index.php single.php
  5. 5. Let’s take a quick look at the WordPress Theme Architecture
  6. 6. Theme Architecture <ul><ul><li>The Main page </li></ul></ul><ul><ul><ul><li>home.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>Single Post page </li></ul></ul><ul><ul><ul><li>single.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>WordPress Page </li></ul></ul><ul><ul><ul><li>page.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>Category page </li></ul></ul><ul><ul><ul><li>category.php </li></ul></ul></ul><ul><ul><ul><li>archive.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul>
  7. 7. Theme Architecture <ul><ul><li>Cont… </li></ul></ul><ul><ul><li>Search Result page </li></ul></ul><ul><ul><ul><li>search.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>404 (Not Found) page </li></ul></ul><ul><ul><ul><li>404.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul>
  8. 8. The Next Step <ul><li>Create a Photoshop mockup for your new theme or use an existing static HTML+CSS template. </li></ul><ul><li>Photoshop Mockup After the design is done, you will need to build am HTML+CSS template from your psd file. Make sure to create an index.php, single.php, and page.php file. </li></ul><ul><li>For this workship, we will be using the HTML+CSS template ‘Keep It Simple’ from styleshout.com. You can download the theme here </li></ul><ul><li>http://www.backspacestudios.com/RMI/kis.zip </li></ul>
  9. 9. Here’s The Template
  10. 10. HTML+CSS <ul><li>Why Create a Static HTML File First? </li></ul><ul><li>Mainly because it will make the development process a lot easier. I usually create a HTML file for every template that I need, test it across all browsers, validate both HTML and CSS markups, then all I have to do is cut & paste the WordPress code. By doing so, I don’t have to worry about HTML or CSS bugs during my theme making process. </li></ul>
  11. 11. A Quick Look At Template Structures <ul><li>Basic Template Files </li></ul><ul><li>To generate such a structure within a WordPress Theme, start with an index.php template file in your Theme's directory. This file has two main functions: </li></ul><ul><ul><li>Include or &quot;call&quot; the other template files </li></ul></ul><ul><ul><li>Include the WordPress Loop to gather information from the database (posts, pages, categories, etc.) </li></ul></ul><ul><li>Most theme structures include three other template files: the header, sidebar, and footer . These must be named header.php, sidebar.php , footer.php . The Template Tags that include them look like this: </li></ul><ul><li><?php get_header(); ?> </li></ul><ul><li><?php get_sidebar(); ?> </li></ul><ul><li><?php get_footer(); ?> </li></ul><ul><li>In order to display the posts and pages of your blog (and to customize how they are being displayed), your index.php file should run the WordPress Loop between the header and footer calls. </li></ul>
  12. 12. The WordPress Loop <ul><li>Understanding The Loop </li></ul><ul><li>The Loop is used to display blog posts and it also lets you control what to display. </li></ul><ul><li>Basically, The Loop checks if there are posts in your blog, while there are posts, </li></ul><ul><li>display it, if no post found, say &quot;Not Found“. </li></ul><ul><li><?php if (have_posts()) : ?> </li></ul><ul><li><?php while (have_posts()) : the_post(); ?> </li></ul><ul><li><div> </li></ul><ul><li></div> </li></ul><ul><li><?php endwhile; ?> </li></ul><ul><li><?php else : ?> </li></ul><ul><li><h2>Not Found</h2> </li></ul><ul><li><?php endif; ?> </li></ul>
  13. 13. The Stylesheet - style.css <ul><li>The stylesheet - style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first. </li></ul><ul><li> /* </li></ul><ul><ul><li>Theme Name: name-of-your-theme </li></ul></ul><ul><ul><li>Theme URI: the-theme's-homepage </li></ul></ul><ul><ul><li>Description: a-brief-description </li></ul></ul><ul><ul><li>Author: your-name </li></ul></ul><ul><ul><li>Author URI: your-URI </li></ul></ul><ul><ul><li>Template: use-this-to-define-a-parent-theme--optional </li></ul></ul><ul><ul><li>Version: a-number--optional </li></ul></ul><ul><ul><li>*/ </li></ul></ul>
  14. 14. Let’s look at the code…
  15. 15. WordPress Page Template <ul><li>Ok, final example. I will show you how to use Page Template to create an archive </li></ul><ul><li>page that will list all posts on your blog (good for sitemap). Copy the archives.php file </li></ul><ul><li>from the default theme folder. Delete the unwanted code and you should have </li></ul><ul><li>something like this: </li></ul><ul><li><?php / * Template Name: Archives with Content */ </li></ul><ul><li>?> </li></ul><ul><li><?php get_header(); ?> </li></ul><ul><li><div> <h2><?php the_title();?></h2> </li></ul><ul><li></div> </li></ul><ul><li><?php get_sidebar(); ?> </li></ul><ul><li><?php get_footer(); ?> </li></ul>
  16. 16. WordPress Page Template <ul><li>Cont… </li></ul><ul><li>Now, login to your admin panel, </li></ul><ul><li>write a new page, title it Archives. </li></ul><ul><li>On the Page Template dropdown, </li></ul><ul><li>select Archives. </li></ul>
  17. 17. <ul><li>Bridging Two Worlds! </li></ul><ul><li>FlashPress is an extension to WordPress, which allows Flash designers/developers to use the WordPress engine to communicate with a Flash site. The use of the WordPress CMS in Flash overcomes many obstacles involved with maintaining and updating a Flash site. </li></ul><ul><li>The FlashPress development thread is restricted to contributors of this group. If you would like to contribute to this project please contact us at [email_address] </li></ul><ul><li>Launching soon http://www.flashpress.ca and http://www.flashpressdevelopers.com </li></ul><ul><li>We will be launching FlashPress at FITC Toronto 2009! </li></ul>
  18. 18. <ul><li>FREE PHUG Workshops </li></ul><ul><li>Current Scheduled Workshops: </li></ul><ul><li>Tiki Wiki </li></ul><ul><li>FBML and Facebook Fan Pages </li></ul><ul><li>The Power of Twitter </li></ul><ul><li>Advertising for the Social Web </li></ul><ul><li>Customizing WP2.7 Admin </li></ul><ul><li>We would like to thank some of our sponsors and affiliates: </li></ul><ul><li>PHUG, Lifecapture Interactive Inc., BackSpaceStudios, Mozilla Firefox, WordPress.org, Drupal.org, </li></ul><ul><li>FITC ( Flash In The Can ), RMI ( Rich Media Institute ), TikiWiki, Citadel Rock. </li></ul><ul><li>If you would like to present or no someone who does we are still taking applications. Please send us an </li></ul><ul><li>email at [email_address] </li></ul><ul><li>http://workshops.phug.ca </li></ul>
  19. 19. <ul><li>WordCamp Toronto 2009 </li></ul><ul><li>Hosted by PHUG </li></ul><ul><li>WordCamp is a conference type of event that focuses squarely on everything WordPress. Everyone from casual end users all the way up to core developers show up to these events. These events are usually highlighted by speeches or keynotes by various people. </li></ul><ul><li>http://www.wordcamptoronto.com </li></ul>
  20. 20. Resources <ul><ul><li>http://www.backspacestudios.com </li></ul></ul><ul><ul><li>http://www.phug.ca </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Working_with_WordPress#WordPress_Features </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Template_Hierarchy </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Conditional_Tags </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Templates </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Customizing_Your_Sidebar </li></ul></ul><ul><ul><li>http://www.tamba2.org.uk/wordpress/graphicalcss/ </li></ul></ul><ul><ul><li>http://www.ndesign-studio.com </li></ul></ul><ul><ul><li>http://www.webdesignerwall.com </li></ul></ul><ul><ul><li>http://bloggingsquared.com </li></ul></ul><ul><ul><li>http://automattic.com </li></ul></ul><ul><ul><li>http://www.blog.spoongraphics.co.uk </li></ul></ul><ul><ul><li>http://www.webappers.com </li></ul></ul><ul><ul><li>http://www.wppotential.com </li></ul></ul>
  21. 21. Thank You <ul><li>WordPress Theme Design Workshop at RMI </li></ul><ul><li>Brendan Sera-Shriar, Director BackSpaceStudios </li></ul><ul><li>http://www.backspacestudios.com </li></ul><ul><li>[email_address] </li></ul><ul><li>Founder of PHUG – Open Source Culture </li></ul><ul><li>http://www.phug.ca </li></ul>