theme development essentials columbus oh word camp 2012
DESCRIPTION
TRANSCRIPT
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: [email protected] Website: www.unlimitedimaginationstudio.com