This document provides an overview of theme development in WordPress. It discusses what a theme is and some of the basic theme files like style.css, header.php, and footer.php. It also covers using frameworks to speed up development, making themes responsive using child themes, reasons for creating a custom theme, tips for theme development like testing and validation, and links to additional resources. The presenter has experience with graphic design, web development, and WordPress themes.

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