Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
•
3 likes•2,188 views
Jonny Allbut discusses best practices for building responsive WordPress themes. He outlines his theme development workflow and covers topics like using responsive design, PHP and CSS tricks, testing, and common theme trends like responsive layouts. The document provides tips on structure, templates, images, widgets, and useful hooks for developers.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
Similar to Build WordPress themes like a heavyweight - WordCamp Lancaster 2013 (20)
More from Jonny Allbut
More from Jonny Allbut (10)
Recently uploaded
Recently uploaded (20)
Build WordPress themes like a heavyweight - WordCamp Lancaster 2013
- 1. Jonny Allbut Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com Build themes like a Heavyweight
- 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. Why build your own themes? Build for purpose Consistent development No compromises Build for the future Performance
- 4. My theme build workflow Establish business priorities Rationalise content structure Widgetise/menus/post types Creative design Layout coding Custom functions Extra views
- 5. Question... “What are the big trends in theme design today?”
- 6. A starter for one... RESPONSIVE!
- 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. 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
- 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. 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. 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. 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. 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. Testing for post thumbnail if ( !has_post_thumbnail() ) { $this_img_single = get_bloginfo('stylesheet_directory'). '/images/default-thumbnail.jpg'; }
- 16. Detecting last post if( ($wp_query->current_post + 1) < ($wp_query- >post_count) ): echo ‘This is the end!’;
- 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. 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. Useful hooks for theme developers after_setup_theme template_redirect pre_get_posts
- 20. 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
- 21. The effects of not testing throughout your design process
- 22. All criticism, ideas and patches welcome! www.wonderflux.com @Wonderflux Jonny Allbut Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com