• Save
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Upcoming SlideShare
Loading in...5
×
 

Build WordPress themes like a heavyweight - WordCamp Lancaster 2013

on

  • 1,326 views

My presentation from WordCamp Lancaster 2013 on theme design.

My presentation from WordCamp Lancaster 2013 on theme design.

Statistics

Views

Total Views
1,326
Views on SlideShare
1,273
Embed Views
53

Actions

Likes
3
Downloads
0
Comments
0

3 Embeds 53

https://twitter.com 31
http://tancdesign.com 21
http://eventifier.co 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Build WordPress themes like a heavyweight - WordCamp Lancaster 2013 Build WordPress themes like a heavyweight - WordCamp Lancaster 2013 Presentation Transcript

  • Jonny Allbut Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com Build themes like a Heavyweight
  • 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
  • Why build your own themes? Build for purpose Consistent development No compromises Build for the future Performance
  • My theme build workflow Establish business priorities Rationalise content structure Widgetise/menus/post types Creative design Layout coding Custom functions Extra views
  • Question... “What are the big trends in theme design today?”
  • A starter for one... RESPONSIVE!
  • 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?
  • 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
  • Tanc responsive testbed
  • 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!)
  • 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
  • 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
  • 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
  • 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'; }
  • Testing for post thumbnail if ( !has_post_thumbnail() ) { $this_img_single = get_bloginfo('stylesheet_directory'). '/images/default-thumbnail.jpg'; }
  • Detecting last post if( ($wp_query->current_post + 1) < ($wp_query- >post_count) ): echo ‘This is the end!’;
  • 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' );
  • 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; ?>
  • Useful hooks for theme developers after_setup_theme template_redirect pre_get_posts
  • Theme testing and debugging Debugging on: define('WP_DEBUG', true); Theme unit test data: http://codex.wordpress.org/Theme_Unit_Test Developer plugin http://wordpress.org/plugins/developer Virtual machines http://www.modern.ie Adobe Edge Inspect / Ghostlab IETester
  • The effects of not testing throughout your design process
  • All criticism, ideas and patches welcome! www.wonderflux.com @Wonderflux Jonny Allbut Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com