Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theme development essentials columbus oh word camp 2012

1,582 views

Published on

Published in: Technology, Business
  • Be the first to comment

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

×