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.

Build WordPress themes like a heavyweight - WordCamp Lancaster 2013


Published on

My presentation from WordCamp Lancaster 2013 on theme design.

Published in: Design, Technology, Business
  • Login to see the comments

Build WordPress themes like a heavyweight - WordCamp Lancaster 2013

  1. 1. Jonny Allbut Head of Digital - Tanc Design @Jonnyauk | Build themes like a Heavyweight
  2. 2. Howdy Campers! Creative designer & developer Working with WordPress since early 2005 Creator & lead developer of: Wonderflux theme framework WP-CMS Post Control Tanc Dimensions Helper Avid theme developer, intermediate PHP coder
  3. 3. Why build your own themes? Build for purpose Consistent development No compromises Build for the future Performance
  4. 4. My theme build workflow Establish business priorities Rationalise content structure Widgetise/menus/post types Creative design Layout coding Custom functions Extra views
  5. 5. Question... “What are the big trends in theme design today?”
  6. 6. A starter for one... RESPONSIVE!
  7. 7. The trouble with responsive Huge audience Layout and media content Should we be designing mobile first? Pixel perfection? What's wrong with how it’s (often) done?
  8. 8. The quest for the holy grail The shortcomings of the Wonderflux grid Gutters are for drunks! Browser detection Extra browser classes on body tag Moving div generation to 'relative' sized div PHP function with responsive over-ride
  9. 9. Tanc responsive testbed
  10. 10. CSS tricks of the trade Use/abuse the body class <body <?php body_class('extraclass');?>> Use/abuse the post class <?php post_class('extraclass'); ?>> Use what WordPress gives you for free (if your themes built right!)
  11. 11. Useful CSS classes and ID's - post .post .page .attachment .sticky .category-example .size-full .size-large .size-medium .size-thumbnail .alignleft, img.alignleft .alignright, img.alignright .aligncenter, img.aligncenter .alignnone, img.alignnone
  12. 12. Useful CSS classes and ID's - menus .current_page_item .current-cat .current-menu-item .menu-item-type-taxonomy .menu-item-type-post_type .menu-item-home
  13. 13. PHP tricks of the trade is_page_template() has_post_thumbnail() Detecting last post Adding your own image sizes Checking if widget area populated Custom walker class for menus
  14. 14. Testing for page template if (is_page_template('template-2-column-sb-left.php')) { //Means we need to go for wider columns $columnsize = '18'; $columnsizecontent = '14'; } else { //Normal columns $columnsize = '12'; $columnsizecontent = '8'; }
  15. 15. Testing for post thumbnail if ( !has_post_thumbnail() ) { $this_img_single = get_bloginfo('stylesheet_directory'). '/images/default-thumbnail.jpg'; }
  16. 16. Detecting last post if( ($wp_query->current_post + 1) < ($wp_query- >post_count) ): echo ‘This is the end!’;
  17. 17. Adding image sizes add_image_size( 'special-image', 600, 600, true ); function mywfx_img_sizes( $sizes ) { $custom_sizes = array('special-image' => 'Special Image'); ! return array_merge( $sizes, $custom_sizes ); } add_filter( 'image_size_names_choose', 'mywfx_img_sizes' );
  18. 18. Is widget area populated? if ( is_active_sidebar( 'footer-right' ) ): ! echo ‘<div class="footer-utilities">’; ! ! <?php dynamic_sidebar( 'footer-right' ); ?> ! echo ‘</div>’; else: ! echo ‘<div class="footer-utilities">’; ! ! <p>I got no widgets, boo!</p> ! echo ‘</div>’; <?php endif; ?>
  19. 19. Useful hooks for theme developers after_setup_theme template_redirect pre_get_posts
  20. 20. Theme testing and debugging Debugging on: define('WP_DEBUG', true); Theme unit test data: Developer plugin Virtual machines Adobe Edge Inspect / Ghostlab IETester
  21. 21. The effects of not testing throughout your design process
  22. 22. All criticism, ideas and patches welcome! @Wonderflux Jonny Allbut Head of Digital - Tanc Design @Jonnyauk |