WordPress is one of the most popular platforms used for developing and managing website content. Responsive design (building sites that respond to the specifications of the end users browser) is one of the most popular topics about so let’s combine them and discuss the tools, pitfalls and opportunities a WordPress webmaster faces when trying to ‘go responsive’.

“Traffic stemming from mobile devices to a dozen web sites in various industries, including retail, accounted for 13% of total web traffic in the fourth quarter of 2011, up from 6% in Q4 2010, finds a study by marketing and public relations firm Walker Sands Communications.”
Internet Retailer Magazine

When Is It Time To Plan For Mobile And ‘Go Responsive’?

Right now. When about one in every eight of your visitors is using a mobile device you can’t really afford to wait any longer. A suboptimal browsing experience for that many users is simply going to be unacceptable when you come to review your marketing strategy and sales figures.

Even more important to consider is the early mover advantage. Two sites with a similar user-base competing heavily might currently have little ‘edge’ over each other. However the first to capture a truly inspiring mobile experience will have the opportunity to win those users over – potentially forever.

Failed Design And Homogeneous Sites

Nobody wants a homogeneous Internet founded on a bunch of cloned sites and identical solutions to a problem. These solutions are a symptom of our failure as a design community to embrace suitable solutions. Blog owners (who aren’t designers) and browser coders (such as the Opera Mini designers) adopt these solutions because design is so poor and offers such an unacceptable mobile experience that they have no choice.

One of the most popular solutions for WordPress is WPtouch. Webmasters who have purchased a design in the past (or a template) that doesn’t really support mobile can install WPtouch and it will deliver a more acceptable user experience.

“WPtouch automatically transforms your WordPress website into an application-like theme, complete with ajax loading articles and effects when viewed from the most popular mobile web browsing devices like the iPhone, iPod touch, Android mobile devices, Palm Pre/Pixi and BlackBerry OS6 mobile devices.”
WPtouch

Learn more about WPtouch Pro »
This solution is exactly that – a solution to a problem: just like reputation management cleans up some bad press, this plugin cleans up some bad design. It produces a nice way to display WordPress to mobile users. Articles and headers are laid out well and some of the layout can be customised. Visit a few dozen sites using WPtouch, however, and you will soon realise there is little to distinguish the sites.

Embracing The Difference

Truly adapting our WordPress site for mobile users involves much, much more than simply installing a plugin with a default mobile template that fits ‘most’ sites’ general strategies (display some articles). This line of thinking should remind you of the beginnings of WordPress when detractors would say that every blog looked the same and no ‘real’ sites could ever be hosted on WordPress. Looking back that seems ridiculous as thousands and thousands of beautiful sites are hosted on WordPress. Many of them extremely unique and with fresher and more powerful features than any of the old sites that were once better than the plain old blog.

Now designers face, once again, the exact same challenge. The easy solution is provided by the WPtouch developers of this world. The tough solutions – the ones that will allow you to develop a unique and stylish mobile experience – come from responsive design.

Basic Responsive Design Principles For A WordPress Site

Many sites on WordPress will be blogs – often extremely content rich. One of the first areas the designer will need to think about is how to display that content in a manner that’s optimal for mobile users. Loading huge picture files then simply squashing them down to a more reasonable size using ‘max-width: 100%’ or a similar attribute to your images won’t necessarily be optimal – further reading on images is can be found in our resources at the end.

Having said that, this leads us to the beauty of responsive design. A site with a responsive template and a team of writers no longer needs to concern the writers with sizes of photos, videos and other items. They can be crafted by the editing team and scaled by the template to perfectly fit all screen sizes, devices and users.

Most WordPress templates feature a sidebar; many homepages have a content slider and a huge header and footer area. All of these standard features are lost if we simply take a WPtouch style approach. Instead, think about how to adapt the header as screen space becomes smaller. Perhaps the logo can become the size of a letter instead of a quarter of the screen! Adapt the menu from a wide single line of buttons into a multi-line menu with large, finger friendly buttons. Combine sidebars, footers and additional pop ups and information into a seamless flow of information under the articles or blog listing. Controlling your content this way will allow you to optimise your unique graphics, squeeze pages and other content to deliver optimal results on mobile.

Even more importantly your unique site might just stick in the minds of our readers – unlike the ten homogeneous sites they also visited today.

Further Reading On Responsive Design

http://unstoppablerobotninja.com/entry/fluid-images/
http://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/
http://www.w3schools.com/css/css_mediatypes.asp

Example:

@media screen and (max-width: 777px) {
.
.
your css here is for users up to 777px wide browsers
.
.
}

We received an e-mail a few weeks ago from a freelance writer who wanted to contribute a guest post to our blog.  We told her we were happy to post anything that was on topic and she sent us the following article.  If you’d like to contribute to our blog, contact us, we welcome any contributions that are relevant and add value to our readers.

This review is focused on the WP Mobile Detector Premium Plugin and I used Safari’s developer tools to render the theme using the Iphone mobile client.

Responsive Mobile Themes

Responsive Web design has attracted a lot of attention lately. It is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The themes provided by WP Mobile Detector Plugin are all at least partly responsive, adapting to the size of the browser and rendering sidebar widgets underneath the posts. The number of posts to be displayed on each page can be changed in the settings menu of the plugin.

The WP Mobile Detector Home Page (Twenty Eleven Theme)

The Home Page adapts to the size of the browser

WP Mobile Detector Features:

The premium plugin packs a lot of features to help you get the most out of your mobile theme. Once the plugin has been installed the options can be accessed from the WP Mobile Detector panel in the backend.

Settings

The WP Mobile Detector has basic settings giving you the ability to choose  to redirect traffic to another site if they are on a mobile device and turn mobile statistics on or off.

Stats

The Stats contained within the plugin gives you an overview of the breakdown between Basic and Advanced Mobile devices used to access your site, as well as a log showing further details of each unique visitor, including the User Agent used.

Mobile Themes

The WP Mobile Detector Plugin comes with 10 preloaded themes that give you a wide choice of colour and style. Of these themes, only the Corporate Mobile and Websitez Mobile themes can be customized further using the Mobile Themes Editor.

WP Mobile Detector Mobile Themes Editor

The customization options contained within the Editor are quite impressive, and include:

• Customization of the Menu, including the option to include search functionality and which pages to display
• Customization of colours, including Top Header, Content Area, Header & Post, Link, Post Background and Logo Text font colour
• Images, including custom Logo and Header Images as well as predefined Background images and Header Icons
• The ability to add Analytics to the theme
• Mobile Header and Footer ads

Conclusion

The WP Mobile Detector Premium Plugin is an easy to use and effective solution for delivering a WordPress experience to your users on the go. It is a welcome entrant in the Mobile WordPress Theme plugin landscape and shows a lot of potential for growth. It’s definitely worth keeping an eye on Websitez.com and the WP Mobile detector Plugin.

Click Here for further information on our mobile development experience, or Contact us today for a quote on a WordPress solution to suit your needs

We have also been known to chip in and help fix bugs and other errors when the need arises, as we did with a coupon code issue we encountered while working on Truth Coffee. Our fix was integrated by Getshopped.org in WP eCommerce with version 3.7.6.6

It was in this spirit that we decided to help Getshopped get their documentation up to scratch. As we’ve stated before, GetShopped’s WP eCommerce is a great plugin that lacked a bit in the areas of support and documentation.

Luckily we had our crack team of Donavan and Iggi on hand to help them sort it out.

A Canvas Child Theme for GetShopped

In order to make the GetShopped documentation site more usable and bring it inline with web standards, we developed a Canvas child theme.

Don also developed a handy code snippet that allows the Custom Post Types (e.g. Resource, and Documentation) to appear in the regular Category and Tag archive. It essentially adds the Custom Post Types to the query_var before WordPress outputs the loop.

The Code

/* filter to allow CPTs to be queried on normal cat and tag archives. */
add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
if(is_category() || is_tag() || is_home() && empty( $query->query_vars['suppress_filters'] ) ) {

$post_type = get_query_var('post_type');
if($post_type)
$post_type = $post_type;
else
$post_type = array('post','documentation','nav_menu_item', 'question', 'resource');
$query->set('post_type',$post_type);

return $query;
}
}

Other Plugins

Don incorporated these plugins into the theme:

• Search Excerpt WordPress Plugin - The Search Excerpt plugin displays text snippets around found keywords, with matches highlighted, in a WordPress search.
• 5Sec Category Search

Content Cleanup

Iggi collaborated with the GetShopped team to help clean up and rewrite the content of the WPEC plugin documentation. They removed all the old and outdated documentation and updated the content.

WP eCommerce continues to be a great eCommerce solution for WordPress and with the updated support we trust that GetShopped will continue to grow from strength to strength.

Contact us today to for a quote on a custom WP eCommerce solution to suit your needs

LightSpeed was approached by Media 24 to develop four magazines sites for their Country Living Magazines division (this division has since been restructured) which included Home Magazine, Ideas Magazine and their Afrikaans counterparts, Tuis and Idees.

Using Canvas to develop our Publisher Theme

At LightSpeed we’ve made no secret about how much we love the WooThemes Canvas Theme. Canvas has the most extensive functionality of all the WooThemes and is well suited to magazine sites – which made it the perfect platform for building on and adding additional functionality to meet our design goals.

Instead of developing individual themes for each site which would have resulted in unnecessary duplication of functionality, we decided to create a theme that could be applied to a number of sites, but with the flexibility to be modified and customised according to each site’s specific requirements – Our WordPress Publisher Theme was born.

The LightSpeed WordPress Publisher Theme

The Publisher Theme is essentially our magazine publishing framework for building magazine style websites. It is a Canvas child theme aimed at websites for magazines and publishing houses.

We used the Canvas Magazine template and extended the functionality with the use of theme options and the addition of widgetized areas which can be added or removed through the backend.

Our Publisher theme for Canvas includes the following features:

• BuddyPress social network functionality
• Events and recipes (including calendars, sliders etc.)
• The homepage includes widgetized areas for displaying Recent Articles and customizing articles displayed
• The theme includes extensive theme options – allowing our Content Managers to easily setup and customize sites quickly through the backend without requiring extra development
• The basic theme features generic, vanilla styling with additional stylesheets for adding colours and backgrounds to individual sites (these stylesheets can be activated with a stylesheet-switcher – allowing us to customise the theme to suit different sites)
• Use of the WPML (WordPress Multi Language plugin) and extensive use of Translatable strings throughout the theme allow us to translate the theme into different languages. Tuis magazine is the Afrikaans equivalent of Home magazine.
• The header includes Search, Social Media links and Subscribe functionality which can be customized extensively with theme options in the backend
• The footer includes a Subscribe section with options to upload images and customize content in the backend (using theme options)
• In addition, there is a section for Related weblinks – which link to related sites (these make use of the WordPress menu system and theme options for easy setup and customization)
• Latest issues have their own custom post type, page templates and widgets for easy management
• Archives of posts include a featured section for the first post displayed – This helps to draw users into the content
• Individual posts have been customized to include related posts
• Our Ad Manager Plugin further extends the theme – allowing Ads to be added and updated quickly and efficiently

LightSpeed Modules

In the course of developing our Publisher theme, we had to develop certain modules to meet the requirements of our client. This development was mostly undertaken by Warwick Booth and Iain Coughtrie, and they did an excellent job.

Modules:

• LightSpeed Ad module using CPTs for adtags (Warwick)
• LightSpeed Events module for Canvas (Warwick and Iain)
• LightSpeed Recipes module for Canvas (Iain)
• LightSpeed Q&A module for Canvas (Iain)

Ideas Recipes Module

Homemag Events Module

When initially planning each module, we firstly decided which features we would like to see in each respective module, and then organised that into phases – What we could realistically expect to achieve in the limited time we had available.

Within a few months Iain had built a relatively stable Events module. He learned a lot during the process, and was able to apply that knowledge to developing the Recipes module. Whilst developing the modules for the Home/Ideas sites, they were also incorporated into other sites, (Shape and Runner’s World) which had slightly different specs. Improvements and changes in a module on one site would be incorporated into the other themes employing these modules. Through this process Iain was able to continuously build upon the modules and eliminate bugs across all sites using them.

The biggest challenge for the Q&A module was successfully porting a complete plugin into the Publisher theme. Once the code was in and functioning properly, he didn’t deviate too much from the original functionality, but it made layout and styling customisation a lot easier.

Module Features

Events:

• Post Type with custom taxonomies and custom fields.
• Landing page with slider (for featured events)
• Upcoming / Past Events
• Featured Events
• Single Event posts
• Event Search
• Events Calendar (linking to single event posts)
• Frontend event posting
• Ratings

Recipes:

• Post Type with custom taxonomies and custom fields.
• Landing page with slider (For featured Recipes)
• Theme options (that define via Dropdown menus which Recipe Types, Methods and Cuisines to feature on the landing page)
• Featured Recipes
• Single Recipe posts
• Recipe Search
• Frontend Recipe Posting
• Ratings

Q&A:

• Ported the WPMU Q&A plugin into the Publisher theme, and made some slight modifications
• Includes separate post types for Questions and Answers
• Categories and Tags
• Users profiles
• Voting and ratings for Questions and Answers
• Reputation Points
• Frontend Q&A posting
• Q&A search

Ad Module:

• Custom post type, with each Ad as a new ‘Ad post’
• Assignable ‘Zone’, which defines where the ad will display on the page
• Assignable conditions per post, for selecting which posts, pages, categories etc will display each ad.

Looking towards the future we have decided to convert these modules into Plugins. Converting the various modules into plugins will result in a slicker, compressed theme, make it easier to move the functionality across themes and enable us to keep the code of the plugins current without complication.

WPtouch Pro and Canvas brings the Mobile Experience Home

We developed the Publisher-Mobile WPtouch theme for Tuis/Home and Ideas/Idees. This mobile theme contains Canvas within it, allowing us to use all standard WooThemes Canvas theme functionality (like hooks, functions and shortcodes). This gives us a lot more freedom from a development perspective, and ensures that content and templates that are reliant on the Canvas infrastructure will work without issues on the mobile version of a site.

Responsive Design

Our Publisher-Mobile theme is partly responsive. The standard WooThemes slider has been switched out for a responsive JavaScript slider, that re-sizes slider images (without losing proportion) based on the size of the screen on which you’re viewing the site. The size of images and divs is generally defined using percentages, meaning that objects and images expand or shrink depending on the interface.

To Illustrate, here is the Tuis site viewed on Safari using the Iphone User agent:

The Publisher Mobile Theme is partly Responsive

WordPress MultiSite

We used two WordPress Multisite installs for the different magazines, Tuis/Home and then Ideas/Idees.

WPML – The WordPress MultiLingual Plugin

We used WPML (The WordPress MultiLingual Plugin) to translate the sites to Afrikaans. WPML allows a non-developer to find and translate language strings. It has many languages supported by default, but the software can be used as a tool for integrating uncommon languages like Afrikaans. Once translation is complete (+- 6000 strings in the case of Tuis/Home and Idees/Ideas), the language file can be downloaded and re-used.

WPML allows you to search the theme and plugins for language strings that can be translated, which can then be downloaded as a .po file for use with other sites. Unfortunately we did not get this functionality to work properly, and we were unable to import the .po file successfully to other sites.

One of the lessons we learned on this project is that it is best to translate before customizing the theme and plugin code. We found that custom code needs to be incorporated in a particular way in order to be translatable with WPML.

WordPress Plugins used

The following WordPress Plugins were used in the development of the Tuis/Home and Ideas/Idees sites;

• BuddyPress (and related plugins such as oEmbed for BuddyPress)
• bbPress (and related plugins such as GD bbPress Attachments)
• Gravity Forms 1.6 RC2
• Jetpack
• WPtouch Pro
• Yoast WordPress SEO

Conclusion

The Tuis/Home/Idees/Ideas project allowed us to push Canvas farther than ever before. Our Publisher Theme now forms the basis of all our Magazine style projects and with the inevitable creation of our various plugins the theme will be lightweight and allow for easy customization in future projects. We’re very proud of the Publisher Theme and it has proven it’s worth in saving valuable time and resources.

CONTACT US today for a quote on a solution for your Magazine or online Publishing needs

Another year has flown by and it’s time to take a much needed break over the festive season. LightSpeed has had a fantastic year and we are currently hard at work finishing up our projects before we close for our holidays. The highlight of our year was organising and hosting the very successful WordCamp Cape Town 2011 event in September, and we look forward to this again in 2012.

If you have any urgent work requests, please try to send them to us by Friday 9th December and we will do our best to assist. We will be closing the office from Friday 23rd December (last working day will be 22nd December) and re-opening on Monday 9th January. During this time there will be an emergency support contact on call, so if there are any critical issues during this time, please email support@lsdev.biz. 

We would like to take this opportunity to thank our fantastic team at LightSpeed for all their hard work this year and we would also like to take this opportunity to thank you for your great support.

To all our clients and friends, have a safe,  Merry Christmas and happy New year. We are looking forward to see you all in 2012.

Read the full Case Study here

The gallery post format is the section I had the most fun coding. To add support for the gallery as well as other Canvas post formats it’s neccesary to declare all the formats again as there is a limitaion in the WordPress function, like so: add_action( ‘after_setup_theme’, create_function( ”, ‘add_theme_support( “post-formats”, array( “aside”, “image”, “audio”, “video”, “quote”, “link”, “gallery” ));’ ));

After that I created a simple content template, based on the Canvas post.php template, called content-format-gallery.php. This is all that is need for your gallery posts to display in the loop. Though by display I mean like a normal post, nothing special. I replaced the the_content() call with a get_template_part() to call my part-gallery.php file which does all the displaying of the gallery.

The gallery part file is based on the gallery.php file used for the single portfolio section. It grabs all the images in the posts gallery, formats the data as the WooThemes file doesn’t use the post attachments and adds the js required.

Here’s the code:

<!--?php global $woo_options, $post, $post_settings; /*-----------------------------------------------------------------------------------*/ /* Variables and general gallery setup. */ /*-----------------------------------------------------------------------------------*/ $html = ''; $pagination_html = ''; $container_class = 'slides_container'; $post_meta = get_post_custom( $post--->ID );

$settings = array();

$settings['use_timthumb'] = true; 		// Set to false to disable for this section of theme. Images will be downsized instead of resized to 640px width
$settings['limit'] = 20; 				// Number of maximum attachments to get
$settings['photo_size'] = 'full';		// The WP "size" to use for the large image
$settings['width'] = 435;				// Default width
$settings['height'] = 550;				// Default height
$settings['thumb_width'] = 150;			// Default thumbnail width
$settings['thumb_height'] = 150;		// Default thumbnail height
$settings['use_height'] = false;		// Use height value
$settings['post_id'] = get_the_ID();	// Post ID to get the attachments for
$settings['embed'] = '';				// Determine whether or not the post has an embedded video
$settings['use_embed'] = false;			// Determine whether to display the embed code, if one exists, in place of the post gallery/image.

$dimensions = woo_portfolio_image_dimensions( $woo_options['woo_layout'], $woo_options['woo_layout_width'] );

//$settings['width'] = $dimensions['width'];
//$settings['height'] = $dimensions['height'];
$settings['thumb_width'] = $dimensions['thumb_width'];
$settings['thumb_height'] = $dimensions['thumb_height'];

if ( $settings['height'] > 0 ) { $settings['use_height'] = true; }

if ( ( $post_settings['embed'] != '' ) ) {
	$settings['use_embed'] = true;
}

$embed_args = 'width=' . ( $settings['width'] - 6 ); // Cater for the 3px border.

/*-----------------------------------------------------------------------------------*/
/* Custom Process code */
/*-----------------------------------------------------------------------------------*/

$image_object = get_children( array('post_parent' => $settings['post_id'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

if (!function_exists('object_to_array')) {
  function object_to_array( $object ) {
    $array = array();
    foreach( $object as $member => $data ) {
      $array[$member] = $data;
    }
    return $array;
  }
}

$images_temp = array();
foreach ( $image_object as $image ) {
  $image = object_to_array($image);
  $images_temp[] = $image;
}

$images = array();
foreach ( $images_temp as $key => $image ) {
  $images[$key]['url'] = $image['guid'];
  $images[$key]['caption'] = $image['post_title'];
  $images[$key]['id'] = $image['ID'];

}

/*-----------------------------------------------------------------------------------*/
/* Generate the HTML to be outputted, if applicable. */
/*-----------------------------------------------------------------------------------*/

if ( ! empty( $images ) ) {

	$counter = 0;

	$main_css_class = '';

	$slide_container_class = 'slide';

	if ( count( $images ) == 1 ) {
		$slide_container_class = 'image';
		$main_css_class = ' single-image';
	}

	foreach ( $images as $k => $img ) {
		$counter++;

		$caption = '';
		$title = '';
		$src = '';
		$img_url = '';
		$img_atts = ' class="single-photo"';

		/* Set the position of all non-first slides to "out of the view", while loading.
		This gets overridden by loopedSlider when the gallery is fully loaded.
		This is to prevent other images with longer heights than the first, from displaying
		underneath the first while the gallery is loading. */

		$style = '';

		$position_setting = $settings['width'] + 6;
                /* echo $position_setting; */
		if ( $counter == 1 ) {} else {

			$style = ' style="position: absolute; left: -' . $position_setting . 'px;"';

		} // End IF Statement

		// Setup the caption text, with a filter.
		if ( $img['caption'] != '' ) {
			$caption = apply_filters( 'woo_post_gallery_image_caption', '<span class="photo-caption">' . $img['caption'] . '</span>', $img['id'] );

			$img_atts .= ' alt="' . strip_tags( $caption ) . '"';
			$title = ' title="' . strip_tags( $caption ) . '"';
		} else {
			$title = 'title="' . get_the_title( $img['id'] ) . '"';
		}

		// Setup the image source, with a filter.
		$src = $img['url'];

		// Setup "template" for displaying each slide.
		$before = '</pre>
<div class="' . $slide_container_class . '"><a href="'. get_attachment_link( $img['id'] ) .'">';
 $after = '</a>' . "\n" . $caption . '</div>
<pre>
<!--/.slide-->' . "\n";

		$before_thumb = '</pre>
<ul>
	<li style="width: ' . $settings['thumb_width'] . 'px; height: ' . $settings['thumb_height'] . 'px;"><a href="#">';
 $after_thumb = '</a></li>
</ul>
<pre>

' . "\n";

		// Add the HTML to our main HTML to be outputted.
		$html .= $before . woo_image( 'return=true&src=' . $src . '&width=' . $settings['width'] ) . $after;
		if ( count( $images ) > 1 ) { $pagination_html .= $before_thumb . woo_image( 'return=true&src=' . $src . '&width=' . $settings['thumb_width'] . '&height=' . $settings['thumb_height'] ) . $after_thumb; } // End IF Statement
	}

} // End IF Statement

if ( $html != '' ) {
?>
	<!-- Start Photo Slider --></pre>
<div class="gallery-container gallery<?php echo $main_css_class; ?>
">
<div class="hidden <?php echo $container_class; ?>">
 <!--?php echo $html; // This will show the large photo in the slider ?--></div>
<!--/.pagination-->
</div>
<pre>
	<!-- End Photo Slider -->
<!--?php } // End IF Statement ?-->
<!--?php if ( $counter --> 1 && ( ! function_exists( 'gallery_init' )) ) {
  function gallery_init() { ?>
<script type="text/javascript">// <![CDATA[
	jQuery( document ).ready( function() {

        jQuery( '.gallery-container' ).slides({
                	generateNextPrev: false,
                	generatePagination: false,
                	autoHeight: true,
                	pagination: true,
                	paginationClass: 'pagination',
                	slidesLoaded: function () {
                		jQuery( '.slides_control' ).each( function() {
                			jQuery( this ).css( 'height', jQuery(this).children(':first').height() );
                		});
                	}
          	});

          	if ( jQuery( '.gallery-container .pagination ul li' ).length > 3 ) {
                  	jQuery( '.gallery-container .pagination ul' ).jcarousel({
                                        visible: 3,
                                        scroll: 3,
                                        wrap: 'circular',
                			itemFallbackDimension: 140,
                                });

                	 //Make sure the original click event doesn't fire on our slider navigation.
                	 jQuery( '.pagination a.next, .pagination a.previous' ).click( function ( e ) {
                	 	return false;
                	 });
                }

        });
// ]]></script>
<!--?php      } // End function add_action('wp_footer', 'gallery_init'); } // End IF Statement   if ( $woo_options['woo_post_content'] == 'content' || is_single() ) { the_content(__('Continue Reading &rarr;', 'woothemes') ); } else { the_excerpt(); }   if ( $woo_options['woo_post_content'] == 'content' || is_singular() ) wp_link_pages( $page_link_args ); ?-->

And lastly you need to enque the carousel js like so:

wp_register_script( 'jCarousel', get_template_directory_uri() . '/includes/js/jquery.jcarousel.min.js', array( 'jquery' ) );
wp_enqueue_script( 'jCarousel' );

I haven’t had the chance to find a way to load it just when there is a gallery post yet though so it needs to go in functions.php.

——————————————————–

The other area of interest was enabling the prettyphoto lightbox with gallery support as woothemes don’t: Here’s the code for that,

/*-----------------------------------------------------------------------------------*/
/* Script to enable lightbox on all images including gallery support
/*-----------------------------------------------------------------------------------*/

add_filter('the_posts', 'test_the_posts');
function test_the_posts( $posts ) {
  global $img_found;
  if ( is_admin() || empty( $posts ) || ( $img_found == true ) || ( $posts[0]->post_type === 'ad' ) || ( $posts[0]->post_type === 'magissue' ) ) return $posts;

        $string = '~</pre>
<img alt="" />
<pre>]* />~';
	$img_found = false;

	foreach ($posts as $post) {
		preg_match( $string, $post->post_content, $matches );

                if ( !empty($matches) ) {
			$img_found = true;
			break;
		}
	}

	if ( $img_found ) {
          add_filter( 'body_class', 'add_lightbox_body_class' );
          wp_register_script( 'prettyPhoto', get_template_directory_uri() . '/includes/js/jquery.prettyPhoto.js', array( 'jquery' ) );
          wp_enqueue_script( 'prettyPhoto' );
          add_action ('woo_footer', 'pretty_init' );
	}

	return $posts;
}

function add_lightbox_body_class ( $classes ) {
  $classes[] = 'has-lightbox';
  return $classes;
}

function pretty_init () { ?>

<script charset="utf-8" type="text/javascript">// <![CDATA[
	jQuery(document).ready(function(){
		if ( jQuery( 'body' ).hasClass( 'has-lightbox' ) && ( ! jQuery( 'body' ).hasClass( 'blog' )) ) {

			jQuery( 'a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]' ).each( function () {
			       var imageTitle = '';
			       if ( jQuery( this ).next().hasClass( 'wp-caption-text' ) ) {
				imageTitle = jQuery( this ).next().text();
			       }

				jQuery( this ).attr( 'rel', 'lightbox[pp_gal]' ).attr( 'title', imageTitle );
			})
		};

		jQuery("a[rel^='lightbox']").prettyPhoto({
			animation_speed: 'fast', /* fast/slow/normal */
			slideshow: 1000, /* false OR interval time in ms */
			autoplay_slideshow: false, /* true/false */
			opacity: 0.80, /* Value between 0 and 1 */
			show_title: true, /* true/false */
			allow_resize: true, /* Resize the photos bigger than viewport. true/false */
			default_width: 500,
			default_height: 344,
			counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
			theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
			deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
			overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
		});
	});
// ]]></script>
<!--?php <br ?-->}

Plain Canvas vs Sports Illustrated

Goals of the Redesign

The main goals of the redesign were to move away from the customized Crisp parent theme while keeping the same look and feel and porting the site over to a canvas child theme. This then allowed us to use our existing code solutions, like our Events and Ad modules. (We developed a series of modules in our work for the Idees/Ideas and Tuis/Home  Magazine sites, but more on that to follow in an upcoming Case study)

As lead developer Donavan’s main concern was to achieve these goals with as little impact on the parent theme as possible. Canvas is fantastic in this regard, as this required extensive use of the WordPress filter and hook APIs.

WordPress template Parts in action

WordPress template parts helped keep the amount of code down and the design pattern is implemented throughout Canvas. This was used to create a login ‘part’, based on the wp-login code, that can be inserted into a widget or page template. The other part file Donavan created was used for the gallery post format which is discussed in detail here.

Tumblog

For Sport’s Illustrated we utilized the WooTumblog functionality that has been embedded into Canvas. Tumblog streamlines the process of uploading different kinds of content and eliminates the need to use custom post types for video and galleries. This solution is perfectly suited to Sport’s Illustrated as they publish a huge volume of varied content.

To use WooTumblog, you simply allocate the posts to the correct post format based on the content attached and the theme takes care of the rest. For example, if the post has video or has a gallery, you would then select the video and or gallery post format, without having to insert shortcodes into the content.

Post Format Options in the backend

The different Post formats are displayed in the front end of your blog with icons showing the different format/content types at the top of each post:

For the code we wrote on Sports Illustrated, Donavan extended the post formats supported by Canvas to include an extra post form called “gallery” and provided code to style this.

This was a first for us and as a result we moved the client away from using the NextGen Gallery plugin to using native WordPress galleries – This means one less plugin and a faster load time.

For an in-depth examination of Donavan’s work on the Gallery Post Format – Read this

Donavan customized the way tumblog functions to a huge extent. One customization we love is the way images are handled inside the content. If you add a full size image to a post from the insert media to post window, that image (even if it is wider than the actual body content area on the front) will re-size with the correct aspect ratio to fit perfectly into the area. Now there is no need to re-size your images before posting.

Other Features and customizations:

• Less Plugins - We removed the need for most of Sports Illustrated’s previous plugins by either coding functions into the theme or using a plugin like WordPress SEO that handles the functions that five other plugins did before.
• Mobile - For the mobile site we used WPtouch Pro and just setup and activated the Classic theme.
• Content Migration - The previous version of the Sport’s Illustrated website used the Next Gen gallery but for the new site we used the Lightbox plugin now included with Canvas. Iggi had to manually migrate the content from the old site to the new. This migration comprised 48 posts, 56 galleries and 602 images that had to be manually fetched from the live site and migrated via FTP to our dev site, and included some editing where required.

Other Canvas features used on SI:

• Portfolio module: The Canvas portfolio module includes the testimonials/feedback functionality and these features have proven easy to extend to other areas of Canvas using filters and actions. We did this for the gallery post format on Sports Illustrated.

• Meta Manager: On Sports Illustrated we used the Meta Manager to replicate the meta from the Crisp theme.

• Layout Manager

WordPress is an amazing platform and several theme companies have made strides towards creating mobile ready themes. Of these, Brave New Code’s WPtouch Pro plugin stands out as the best and that is why we chose it as our mobile theming solution for our clients.

WPtouch Pro and LightSpeed

LightSpeed offers customized mobile websites using the WPtouch theming framework. Using WPtouch Pro we create a mobile optimized version of your website to give your visitors access to your website on the go. The WPtouch Pro plugin automatically transforms your WordPress website into a fast, user-friendly and stylish mobile application experience for smartphones.

Visitors that arrive on your website from a smartphone or other mobile device are shown the mobile version of your site, while visitors arriving on your website from a computer are shown the full website.

Mobile Devices supported include:

• iPad
• iPhone
• iPod touch
• Google Android
• Palm Pre/Pixi
• Samsung touch
• BlackBerry OS6 devices (Although we’ve managed to make BlackBerry OS V5 work too)

Note: I’ve added an extended list of User agents compatible with WPtouch Pro at the bottom of this post.

Other WPtouch Pro Features:

• The ability to link Google AdSense and Analytics accounts, enabling you to continue earning ad revenue and monitor how users access your site, even from mobile devices.
• It doesn’t need to use an extended url: example.com/mobile or example.mobi. It uses the same url as the website.
• Installation for the plugin is pretty easy:

1.  Download the plugin from Brave New Code
2. Upload the plugin through the plugin interface
3. Once uploaded you put in your licence and the plugin is activated.

NB! If a caching solution is installed (like W3totalcache) it is a good idea to turn off caching, as it cause problems with loading the theme into your browser. It is also best to enter the names of the of the mobile browser exception list.

In terms of configuration, once you get it right it is relatively maintenance free.

Some of the configuration options are:

• From the General page, you can customize your mobile site’s name, language, add custom advertising and statistics tracking, and more.
• You can backup your WPtouch settings and import them into any one of your other sites (This is handy as most sites will require the same settings).
• WPtouch Pro currently offers two mobile themes: the Default, and the Skeleton theme
• The theme allows for quite a few customizations for your site: Fonts, header styles, background themes, menus, custom icons and a lot more.
• Turn off the image as attachments setting to prevent double images from appearing.

WPtouch Pro in action on Runner’s World

We’ve recently used WPtouch Pro to develop a mobile theme for Runner’s World. This includes a section for Articles and the race calendar. Individual Race posts feature Google Maps and Social media sharing buttons.

Learn more about WPtouch Pro »

Other sites we’ve developed using WPtouch Pro include:

• Home Mag
• Mom to Mom
• SportsIllustrated – using the standard Classic wp-touch theme.

LightSpeed on WordPress Mobile

• WPtouch Pro used for Shape Mag
• WPtouch Pro and BuddyPress
• Piggy Pro: Mobile WordPress eCommerce made easy
• LightSpeed at the Social Media World Forum (some interesting stats on mobile use in South Africa)
• Mobile Tools and themes for BuddyPress needed
• WP Mobile Detector Premium Plugin Review
• VIDEO: WordPress as a mobile Publishing Platform (a talk by Matt Geri at WordCamp 2011)

Of all the themes on offer by WooThemes, the Canvas theme stands head and shoulders above the rest as the flagship theme. Canvas was released in March 2010 and we started developing with it straight away. Ever since we’ve been using it as the basis for most of our websites, including most recently Ideas Mag, Home Mag, Thunda Celeb News and FairLady Testhouse.

Canvas improvements

The team at WooThemes are constantly updating and improving the Canvas theme, and 2011 saw the following changes:

• The release of Canvas V4
• The release of a Canvas child Theme for BuddyPress
• The release of a portfolio module (This included the testimonials/feedback functionality. These features have proven easy to extend to other areas of Canvas using filters and actions, as we did for the gallery post format on Sports Illustrated)
• The release of an eCommerce Canvas child theme for their newly launched WooCommerce plugin
• Canvas became fully multilingual, by being made compatible with the WPMU plugin

Why do we love this theme?

By default Canvas is very plain, with web standard fonts, navigation menu, main content area, sidebar, and a footer with areas for widgets. This can be misleading, as once it has been activated, a new collapsible menu is added in the WordPress admin section, that transforms canvas into the most functional WordPress theme available.

This Canvas Menu provides access to all Canvas features and options.

Theme Options

The Theme options section provides a vast array of adjustable styling elements that provide even more freedom once you drill down on the individual sections:

Canvas Theme Options

Widget Styling options drill down

The extensive theme options allows you to style your blog/website in any way that you want, with settings covering everything from layout, typography, Header-, post-, widget and footer styling, as well as the choice between predefined templates for Magazine and Business site layouts. It’s really easy to add your own using the function provided for in canvas

Hook Manager

Hook Manager allows us to insert HTML, Javascript or WP shortcodes at designated parts of the page templates. This makes additions to code rather easy, and the Canvas theme has an impressive list of hooks that allow users to modify areas of the WordPress theme with short snippets of code. The user friendly interface of the Hook Manager allows you to enter your code in the text fields provided.

For example, we could insert a search bar into the header by adding it to the ‘woo-header-inside’ hook or  place a Facebook ‘Like’ box and easily style or position it from there, without having to sift through code, or having to write a custom function.

This allows users to customize the way Canvas looks and functions without editing any of the templates

Layout Manager

In the theme options, the Canvas Layout options allows you to set the general site width and layout. Canvas comes with 6 pre-defined layouts and additional layout options for the Footer widget areas.

The new Layout manager gives you even more control by allowing you to freely set the width of your content and sidebar areas, by simply dragging the column divider to your liking.

On the individual post or page level, Canvas gives you even more flexibility by allowing you to set a specific layout for the post, overriding the default site layout.

Meta Manager

The Meta Manager is similar to the Hook Manager, except it applies only to the post meta on posts.

Post meta is the meta data relating to a post, such as author, date publisher, category etc.

You can now easily customize what you would like to display above and below post content, and the order in which it will display using text, HTML and WP shortcodes. There is a handy short code reference below the input fields in the meta manager which lets you display commonly used content such as a post’s categories, tags, date, time, author.

On Sports Illustrated we used the Meta Manager to replicate the meta from the Crisp theme.

Sidebar Manager

The Sidebar Manager allows you to create custom sidebars for specific sections of your site.
Once the custom sidebar has been created, it can be selected from the Widgets page.

Custom Sidebars can be created for:

• Individual pages
• Page templates
• Categories
• Post tags
• Template hierarchy (i.e. for example for single posts or for search results)
• Custom post types
• Post type archives

Canvas Features list

The Canvas theme offer a wide range of features unique to this theme:

• Customize the style and typography of every element in the design
• The ability to use your own images in the design
• Google font support
• Magazine and business page templates
• A revamped templating engine. (While a bit confusing at first, this is one of the best parts of Canvas, and really flexible)
• Manager modules for “Layout, Hooks, and Meta”
• Tumblog functionality
• Shortcodes
• It’s child theme friendly. (By this we mean that it has loads of hooks and filters that are key for creating unobtrusive child themes. It also has a fair amount of functions that are ‘pluggable’ or wrapped in a conditional that checks if it’s been declared already)
• Now includes LightBox. (Lightbox is the preferred way to display images and video, and once our clients see it, they always want it on their site)

On top of this Canvas also supports all the usual features of the WooFramework:

• Sidebar Manager
• Custom Navigation
• Backened Theme options
• Built in SEO options
• Cross browser compatibility
• Localised for translations
• Custom Page templates

Canvas Support

To help developers understand the full power of Canvas and the extent to which it can be customized WooThemes has published a Canvas How To section.

They’ve also published some interesting Case Studies on how Canvas was used in the development of various websites:

• Pootlepress
• Adii
• The Grow Academy (with BuddyPress)

Conclusion

WooThemes Canvas theme offers incomparable functionality and opportunities for customization. It’s easy to work with, has excellent support and continues to get better with every new release. It’s easy to see why we choose it as the basis for most of our projects.

Contact us today for more information on how LightSpeed can use the Canvas theme to provide you with the best WordPress website available and take your business to the next level.

Ashley is no stranger to accolades and in the past his entrepreneurial prowess has been acknowledged with winning the  2009 Velociti Enterprise Development Programme.

The Future 100 Awards

The Future 100 is an inspirational programme that seeks to recognise and promote promising young entrepreneurs in the country. It has been designed with a mandate of increasing entrepreneurial appetite amongst young people to claim the centre stage of economic development of the country.

Under the theme “Discovering South Africa’s 100 most inspiring young entrepreneurs”, the programme, spearheaded by the the South African Youth Chamber of Commerce (SAYCC) and the National Youth Development Agency (NYDA), seeks to encourage young people to engage in entrepreneurial activities.

The award has various categories, platinum (for the top 20), gold, silver and bronze. Participating companies ranged from IT, media, construction and manufacturing.

LightSpeed

LightSpeed also strives to be actively involved with the WordPress community, hosting WordCamp Cape Town 2011 and building strong partnerships with other industry leaders such as WooThemes and GetShopped.org.