1. Theme Development
Essentials
WordCamp Columbus 2012

2. Topics
 What is a Theme?
 What can a Theme do?
 Theme Frameworks… Theme What?
 Making a Theme Responsible
 Why create a Custom Theme?
 Where to Start
 Tips
 Q&A

3. Who is Joe?
 Graphic Design and Computer Art background
 Web Designer/Developer for 15 years
 Work for a community college full-time
 Own my consultant business
 Self taught in Asp.Net, PHP, HTML, CSS,
Javascript, jQuery, SQL
 Working with WordPress for little over 1 year
 Developed 6 custom themes and counting

4. What is a Theme?
 A theme is a collection of php scripts, a css file and maybe a
few images to create the look and feel for a WordPress site.
 A theme can also introduce functionality to a WordPress site.
 Custom Post Types
 Theme Options
 Sidebars
 Navigation Menus
 And much, much more…

5. Basic Theme Files
 Style.css – Contains base theme information and styles for
site.
 Header.php – Starts the web page, and contains the header
information
 Index.php – Contains the call to the header, footer, and loop.
Could include other custom html if needed for the homepage.
 Loop.php – Contains the php code used to display the posts.
Also the last resort file for anything that is displayed from
WordPress
 Footer.php – Finishes the body, includes the footer of the
webpage, and should finish the page, ie. “</html>”

6. Basic Theme Files
 Sidebar.php – Used to contain the widget areas for the site.
Non-Essential
 page.php, category.php, tag.php, author.php, single.php,
archive.php, taxonomy.php, date.php, single-{post-type}.php,
home.php, front-page.php, 404.php

7. Style.css
/*
Theme Name: Twenty Ten Theme
URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header,
custom-background, threaded-comments, sticky-post, translation-
ready, microformats, rtl-language-support, editor-style, custom-
menu (optional)
License: License
URI:
General comments (optional).
*/

8. Basic - Style.css
/*
Theme Name:
Description:
Author:
Tags:
Version: 1.0
*/

9. Theme Frameworks…
Theme What?
 Frameworks allow rapid development of a theme
 Commonly used functionality is built already
 Allows developer to update underlying functionality without
messing with design.
 Design is generally handled in a Child Theme

10. Available Frameworks
 Thematic – Free
 themeshaper.com/thematic
 Thesis – Costs
 diythemes.com/thesis
 Genesis – Costs
 studiopress.com/themes/genesis
 Gantry – Free
 gantry-framework.org
 Pagelines – Costs
 pagelines.com

11. Available Frameworks
 Hybrid – Free
 themehybrid.com
 HEADWAY – Costs
 headwaythemes.com
 Whiteboard – Free
 whiteboardframework.com

12. Making a Theme Responsible
 Child Themes allow a designer to change the
look of a theme without interfering with underlying
functionality
 Parent Theme can be updated when core
changes.
 Child Themes can contain just design code,
without the need to mess with the functionality
code.

13. Child Theme – Style.css
/*
Theme Name: Twenty Eleven Child Theme
URI: http://example.com/
Description: Child theme for the Twenty Eleven
theme
Author: Your name here Author
URI: http://example.com/about/
Template: twentyeleven
Version: 0.1.0
*/
codex.wordpress.org/Child_Themes

14. Why Create a Custom Theme?
 Functionality is required, that cannot be accomplished
through plugins
 Unable to find a theme that can either be modified or have a
child theme created for it.
 Because you want to!

15. Where to Start?
 WordPress Codex
 codex.wordpress.org/Theme_Development
 Look at a sample theme (Twenty Ten or Twenty Eleven)
 Both are child theme friendly, can someone say “Framework”
 Download a theme from the wordpress.org Respository
 What not to do
 Download a theme from a “free wordpress theme” web search.

16. Where to Start?
 Are you going to create a framework, use a framework to
start?
 Will the theme be a child theme based on someone else‟s
theme?
 How will the site function?
 Will it be mostly posts, or pages, or a mix?
 Create a design for your theme.
 Decide how to divide your theme, so you can create the
necessary files.

17. Tips
 Codex – codex.wordpress.org/Theme_Development
 Use define(„WPDEBUG‟, true) in your wp-config file to see
any deprecated function calls or other WordPress related
errors.
 codex.wordpress.org/Theme_Development#Theme_Testing_Pro
cess
 Break your Theme!
 http://codex.wordpress.org/Theme_Unit_Test
 Theme Checker plugin
 bit.ly/Theme-Checker
 Do not hack core!!

18. Tips
 If you‟re creating a custom theme, add your Google Analytics
tracking code directly to your header code, don‟t use a
plugin.
 Evaluate your plugins that you currently use, and see which
ones you can make obsolete by doing the same thing with
code in your theme.
 Grab a good book
 Smashing Magazine
 OReilly
 Do not hack core!!

19. Tips
 If you are missing the admin bar, make sure you have
<?php wp_footer(); ?> in your footer.php file.
 Run a web server on your workstation/laptop for theme
development
 Install a multi-site install
 Install a regular install
 Install a theme breaking site
 Keep your development workstation up-to-date!
 Do not hack core!!

20. Helpful Links
 Theme Unit Test (used for breaking your theme)
 codex.wordpress.org/Theme_Unit_Test
 Theme Check Plugin
 bit.ly/Theme-Check
 Theme Heirarchy
 codex.wordpress.org/Template_Hierarchy
 WordPress Codex
 codex.wordpress.org/Theme_Development

21. Q&A

22.  Twitter: @joequerin
 Email: joe@unlimitedimaginationstudio.com
 Website: www.unlimitedimaginationstudio.com