Theme DevelopmentEssentialsWordCamp Columbus 2012
Topics What is a Theme?   What can a Theme do? Theme Frameworks… Theme What? Making a Theme Responsible Why create a ...
Who is Joe? Graphic Design and Computer Art background Web Designer/Developer for 15 years Work for a community college...
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 f...
Basic Theme Files Style.css – Contains base theme information and styles for  site. Header.php – Starts the web page, an...
Basic Theme Files Sidebar.php – Used to contain the widget areas for the site.Non-Essential page.php, category.php, tag....
Style.css/*Theme Name: Twenty Ten ThemeURI: http://wordpress.org/Description: The 2010 default theme for WordPress.Author:...
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 i...
Available Frameworks Thematic – Free   themeshaper.com/thematic Thesis – Costs   diythemes.com/thesis Genesis – Costs...
Available Frameworks Hybrid – Free   themehybrid.com HEADWAY – Costs   headwaythemes.com Whiteboard – Free   whitebo...
Making a Theme Responsible Child Themes allow a designer to change the  look of a theme without interfering with underlyi...
Child Theme – Style.css/*Theme Name: Twenty Eleven Child ThemeURI: http://example.com/Description: Child theme for the Twe...
Why Create a Custom Theme? Functionality is required, that cannot be accomplished  through plugins Unable to find a them...
Where to Start? WordPress Codex   codex.wordpress.org/Theme_Development Look at a sample theme (Twenty Ten or Twenty El...
Where to Start? Are you going to create a framework, use a framework to  start? Will the theme be a child theme based on...
Tips Codex – codex.wordpress.org/Theme_Development Use define(„WPDEBUG‟, true) in your wp-config file to see  any deprec...
Tips If you‟re creating a custom theme, add your Google Analytics  tracking code directly to your header code, don‟t use ...
Tips If you are missing the admin bar, make sure you have    <?php wp_footer(); ?> in your footer.php file. Run a web se...
Helpful Links Theme Unit Test (used for breaking your theme)   codex.wordpress.org/Theme_Unit_Test Theme Check Plugin  ...
Q&A
 Twitter: @joequerin Email: joe@unlimitedimaginationstudio.com Website: www.unlimitedimaginationstudio.com
Upcoming SlideShare
Loading in …5
×

Theme development essentials columbus oh word camp 2012

1,571 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,571
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Theme development essentials columbus oh word camp 2012

  1. 1. Theme DevelopmentEssentialsWordCamp Columbus 2012
  2. 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. 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. 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. 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. 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. 7. Style.css/*Theme Name: Twenty Ten ThemeURI: http://wordpress.org/Description: The 2010 default theme for WordPress.Author: wordpressdotorgAuthor URI: http://wordpress.org/Version: 1.0Tags: 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: LicenseURI:General comments (optional).*/
  8. 8. Basic - Style.css/*Theme Name:Description:Author:Tags:Version: 1.0*/
  9. 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. 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. 11. Available Frameworks Hybrid – Free  themehybrid.com HEADWAY – Costs  headwaythemes.com Whiteboard – Free  whiteboardframework.com
  12. 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. 13. Child Theme – Style.css/*Theme Name: Twenty Eleven Child ThemeURI: http://example.com/Description: Child theme for the Twenty EleventhemeAuthor: Your name here AuthorURI: http://example.com/about/Template: twentyelevenVersion: 0.1.0*/ codex.wordpress.org/Child_Themes
  14. 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. 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. 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. 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. 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. 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. 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. 21. Q&A
  22. 22.  Twitter: @joequerin Email: joe@unlimitedimaginationstudio.com Website: www.unlimitedimaginationstudio.com

×