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).
*/
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
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