Theme Development EssentialsWordCamp Columbus 2012

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

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

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…

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

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

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

Basic - Style.css

/*Theme Name: Description: Author: Tags:Version: 1.0*/

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

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

Available Frameworks Hybrid – Free

themehybrid.com HEADWAY – Costs

headwaythemes.com Whiteboard – Free

whiteboardframework.com

Making a Theme Responsible Child Themes allow a designer to change the

look of a theme without interfering with underlyingfunctionality

Parent Theme can be updated when core changes.

Child Themes can contain just design code, without the need to mess with the functionalitycode.

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

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!

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.

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.

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_Process Break your Theme!

http://codex.wordpress.org/Theme_Unit_Test Theme Checker plugin

bit.ly/Theme-Checker Do not hack core!!

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

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

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

Q&A

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