WordPress theme development has, over the years, become a much more involved industry than it was during years past. Themes have gotten more intelligent, more feature rich and, to sum up, far more robust in their offering. It is not uncommon today for a theme to, for example, include an advanced theme options screen for tailoring a theme without code, or a selection of custom-developed widgets to showcase content is a specific manner or of a specific type.

As with scaling in any context, expanding one’s offering is vital to maintaining the status quo and “keeping up” with industry competitors. At WooThemes, this expansion is generally handled within the WooFramework (the engine that powers all of our 120+ themes) by creating and adding features such as a shortcode generator (along with a wide collection of popular shortcodes), a collection of popular social widgets, SEO settings via WooSEO and a system to create custom sidebars via the Sidebar Manager. This expansion is also, at times, handled using our popular “Theme Options” screen, where settings specific to your WooTheme of choice are controlled.

As one can imagine, adding theme option after theme option could easily get out of hand, creating a long list of settings you’d need to run through to customise your theme. This brings us to the question we posed during a development discussion at WooHQ last year- “are theme options always the answer?”.

The approach

This question has caused us to take a slightly different approach to our theme options and how we approach them. Rather than going through and adding options as we see fit, we’ve taken a stance on adding options as sparingly as possible. This allows us to analyze the theme in full and decide which settings require specific theme options and which settings are, for want of a better word, redundant. Certain settings may not apply in all contexts or to all users of the theme, while others (such as, for example, the ability to activate or deactivate a specific section of the theme’s functionality) is something that applies in all cases.

Along with this approach, we’ve taken a slightly different angle in terms of how the functionality itself is developed. By creating small components and bundling related functionality into either a single file (for small components) or a class (and object) for larger components, we are able to focus on each component individually, ensuring that the specific component in question is approached from the most accurate context.

A practical example

Lets take our Wikeasi theme as a practical example of how we’ve applied these principles.

The Wikeasi default homepage layout

Wikeasi is a WordPress theme based around the creation of a wiki system, built on WordPress. Wiki’s themselves tend to lean towards specific functions such as a table of contents, revision management and display and being able to create bibliography or source references. Wikeasi handles all three of these functions, as well as many more.

In our approach to Wikeasi, we left the theme options to the very end, right after all the functionality was developed, tested and firmly in place. With revision or reference management, for example, it’s quite easy to get carried away and add theme options for every possibility. Is this the answer to an attractive and ultimately, more usable, product? We don’t believe so, no. Fewer theme options allowed us to focus in and ask, “what would I, as a user of this theme, want to change and setup?”. The majority of theme options in Wikeasi (organised into component-specific sections) allow for the activation/deactivation of the specific component and possibly a short notice explaining a feature of that specific component. This means it’s possible to get in and out of the theme options screen quickly, having easily setup and customised your theme without being overwhelmed with theme options.

Enabling The Table of Contents

Other functionalities, such as the customisation of a component’s output, for example, are handled using carefully placed WordPress filters. Using filters, it’s possible to customise the theme to your needs with a short snippet of code, rather than a complex theme option that, perhaps, 8 out of 10 users won’t benefit from.

Has this approach worked?

Yes, it has.

This approach can also be seen within WooCommerce and other popular WordPress plugins. For example, why create a whole interface to add tabs to the “Product Details” box in the WooCommerce admin, when a simple WordPress action hook will produce the same result with a leaner code base?

How do we know this? The numbers speak for themselves.

Wikeasi is, according to PressTrends, powering some 528 websites currently. The number of support queries Wikeasi has received in our forums is roughly 11% of that. We can, therefore, ascertain that this approach works. Scale back on unnecessary theme options in favour of a code-based solution.

Lets not forget the fact that Wikeasi is a feature-rich theme.

Hold on, are we losing functionality?

Quite the contrary. This approach affords greater functionality and flexibility, without the limitation of a theme option. For example, what if we wanted to turn the filter bar in Wikeasi off on a specific section where it was displayed previously (for example, on search results)? With the theme options approach, this would need to be a selection of theme options to enable/disable the filter bar in various cases… this is boxing you in as the user. By changing our approach ever so slightly, we’ve just opened up a whole spectrum of new possibilities.

The “golden age” of theme options is over

To sum up, our approach to theme development is evolving and changing as the industry develops. Minimising theme options used in themes, coupled with careful consideration of a component’s application in the theme and a selective placement of WordPress filters, allows for a richer theme setup experience for our users while still adding a level of flexibility that is possible to hone in on, should you wish to do so.

WordPress itself is about making publishing easy for the end user. Why not echo that ideal within your theme or plugin? Make the initial setup process easy. If the user wishes to delve deeper, add the functionality to allow them to do so.

“Just add a theme option” is a phrase that is steadily becoming somewhat of a “curse word” at WooHQ. Why stick to using theme options when we could do so much more by slightly changing our approach to the code itself?

WordPress actions and filters have been a long-running standard within WordPress itself. Why not hone in on that and take full advantage of the functionality possibilities it offers?

Keep an eye out for this one, folks. The days of “just add a theme option” are slowly moving behind the WordPress community.

We’ve been testing WP 3.3 internally for the last couple of weeks and it’s already running on all of our demo’s. We’re happy to report that we’ve not found any issues with our themes running on WP 3.3, which means you are safe to update and take advantage of the new goodies included in Sonny.

We did however notice that in some rare cases, the spiffy new media uploader seemed to be broken when using a WooTheme. This is however solved by clearing your cache and refreshing your WP admin page. So don’t be alarmed if your first image upload doesn’t go as well as planned.

If you’ve already upgraded to WP 3.3: What is your most favourite new feature?

The WooAffiliates widget options.

Over the past few weeks we’ve been brainstorming ways of helping our affiliates advertise our themes in an efficient, professional manner. Previously, you’ve been limited to advertising banners and text links that you can manually place anywhere in blog posts, text/adsense widgets, sidebars and footers. Today we launch the “WooAffiliates” plugin that takes this a step further.

Available from the WordPress plugin repository you can now download and activate this light plugin that then enables a “WooAffiliates” widget. This widget comes with numerous simple display controls and a place to add your WooThemes username that automagically recognizes you as a WooThemes affiliate. Place this widget in a widgetized region and voila, you can proudly market WooThemes and start making money from sales referred from your site.

With version 1 of the plugin you can display a specific theme, the most popular in the past 30 days, a random theme, or the latest theme. Place this widget more than once if you like to highlight different themes in different areas of your site.

The code wranglers Matty and Warren have loads of plans to make this plugin/widget even more powerful and useful as a sales tool for you, all the while giving you complete control as to what and how you want to display it – subtly or more prominently.

To track sales made you just need to login to your WooThemes dashboard and navigate to the affiliates page. Find out more about our affiliate program here.

Find out more about the plugin on it’s WordPress plugin repository page.

A WooAffiliates widget placed on my personal site advertising the latest WooTheme available.

Adii's site now sporting a "Powered by" WooAffiliates badge in his sidebar, showcasing the theme his site is built on top of.

Enter Paul Weingartz and Jon Van Rooyen of Guntribe, two Cape Town based developers with a wealth of knowledge on BuddyPress. Over the past couple months they’ve been adding new template pages, including a widgetized homepage and new settings pages, fixing styling bugs and making the child theme is 100% compatible with 1.5.x. With 2.0 development already underway.

The Canvas BuddyPress widgetized homepage.

Club members and Canvas users who’ve had access to this child theme in the past will continue to do so, whilst going forward the child theme will now be a commercial product and not be made available to new Canvas users. They’ll need to purchase the $20 child theme. This is to ensure it’s maintenance and upgrades by our collaborative partner.

Take the new Canvas BuddyPress child theme for a spin on our demo or view the theme listing here.

Let us know what you think of Canvas BuddyPress and what you want included in it going forward, we listening.

The PressTrends "Framework Settings" options panel.

We were recently approached by George Ortiz, a member of the Storefront Themes team, about his new project called “PressTrends“.

In short, PressTrends is a new service for tracking how and where your WordPress themes are being used, ideally to improve your themes in the future. (Source: WPCandy)

George asked if we were keen to test out his service in finding out some more detailed stats on our theme usage by our community. Matty gave their code a thorough test drive, and recommended some tweaks to their scripts, before implementing it in Wikeasi. All of which George was more than willing to implement.

As you can see above you can quite easily opt out of this tracking, and as can be seen below, we assure you that we are not storing any of your personal details. Here’s a quick screenshot of our dashboard reports:

Statistics we are gathering on Wikeasi to help improve it further.

The stats are obviously still very raw, and should be refined over the next few weeks, but as you can see it’s very basic stats that we are drawing, that you shouldn’t be worried about at all, but that provide some great insight for us to make strategic and development decisions.

We’ll soon be implementing PressTrends into all our themes. This is just a heads up and us trying to be as transparent as possible – as we are sure that’s what you’ve come to expect from us.

One of the most popular features across our themes is our custom typography options, which afford website administrators the option of customising the typography settings across their website with a few simple clicks in the WooFramework “Theme Options” screen. When customising the typography settings, the administrator makes changes, hits the “Save all Changes” button and then visits their website to see how the typography has changed. The process, therefore, consists of 3 steps: setup, save, view- until today.

Upon re-examining the user experience surrounding this interface, we felt there were too many steps involved and, if the website being modified was live (for example), a user may not have the desired look displayed to their visitors for a few minutes while they tweaked their typography options. As user experience, and the experience your visitors are presented with when visiting your website are important to us, we’ve introduced an enhancement to the custom typography settings in the WooFramework; a live typography preview.

The new "live preview" button on our custom typography settings

The live typography preview does exactly what it says on the tin. When modifying typography settings in the WooFramework, it’s now possible to view a quick snapshot of what the customized typography will look like, before hitting “Save all Changes”. This agile build (developed and tested over the last weekend) takes the required steps down from 3 to 1, saving you time and making customizing your WooTheme even easier.

Custom typography, using the new live preview

The live typography preview includes support for all fonts available within the typography settings in the WooFramework, including the ever-growing collection of Google WebFonts we’ve integrated to further enhance the typography options available when customizing your website.

Previewing a Google WebFont using the live typography preview

This update is available in WooFramework version 4.7.0 along with a collection of optimizations and improvements, as is customary when upgrading the WooFramework. To take advantage of this exciting new feature, upgrade your copy of the WooFramework today.

WooThemes approached me to do a security audit on the framework that powers their themes. I ensured that WooFramework is using secure WordPress coding techniques, and gave their developers pointers on keeping it secure going forward. WooThemes understands that security is a process, and a commitment to users, so I will be doing a followup review at a later date to continue the security vigilance.

Matty & Jeff have worked tirelessly to implement all of the feedback that Mark provided and we’re happy to say that the WooFramework is now more secure than ever. Considering that the WooFramework powers all of our 99 (!!!) themes, this was a very important exercise for us in making sure that our code is as secure as possible. 

As a result of this security flaw, the author of TimThumb and the author of WordThumb have worked together to release TimThumb v2 which fixes these security issues.

We’d highly recommend that you update your WooFramework like described below.

How to update your theme

Update TimThumb with WooFramework v4.4.2

You need to update to the latest version of the WooFramework (v4.4.2), as we have now moved thumb.php into the framework so it is easier to keep updated. There is also a new function in the framework which will remove your old TimThumb from the theme.

To update your Framework, simply go to your theme menu and select “Update Framework” (see our tutorial on the topic).

Need further help?

We have created a dedicated forum for TimThumb issues in our support forum. Please make a new post in this forum and we’ll be along to assist you. View the new forum.

Kris Millsap

I’m Kris Millsap, a web developer and video editor with New Media Samurai (NMS3 for short). We provide creative services (web development & video production) for companies looking to enhance and develop their brand/persona across the internet. We’re Affiliated Woo Workers and active users of WooJobs.

I am a super fan of WooThemes and the WooFramework. The flexibility and functionality combined with forward thinking of the WooFramework has enabled us to build client friendly sites at a much faster pace while keeping up with the latest and greatest trends on the ever evolving web. Canvas has become our boilerplate for almost all of our projects and the launch of Canvas v4 held as much anticipation and excitement for me as awaiting the latest iThing… well… close to that level of anticipation and excitement.

Adii recently asked me to translate a design from Chris Rowe utilizing Canvas v4 for use on his personal blog. It was a tremendous opportunity and the development of the Child Theme took me deeper down the Woo rabbit hole than I had been to date.

Canvas Layout: Before & After (design by Chris Rowe)

The following is a loose chronicle of my journey (I almost said Woo Journey, but thought that to be a bit Woo Much).

A Few Requirements

The project began with an email from Adii containing the PSD files and a list of requirements including the following:

• Should be developed as a child theme of Canvas v4.
• The Contact Me should use a pop-up modal and should use Gravity Forms for the contact form.
• Create custom post types to manage the content on the About Me page.
• Use the LessFramework to create a responsive design.

Obviously there were additional notes, conversations and areas of focus, but we want to keep this case study from becoming a novel so we’ll just keep this simple.

Child Themes, Hooks & Meta Managers

Canvas: Hook/Filter Reference

The new Hooks and Meta Managers take a lot of pain out of building more advanced child themes. I printed the Canvas: Hook/Filter Reference and then planned my adjustments accordingly.

Usually in Child Themes, I copy so many of the files (header.php, footer.php, etc.) that by the time we are ready for launch, we have seemingly more files in our child theme than appear in the parent. In Adii’s theme, I relied on the Meta manager to add, edit and remove post meta through short codes and then wrote most of my codes intended for the header/footer/loop files into the Hooks Manager. Management of the changes became less of a concern and I was able to update the parent theme without concern of overwriting a key file. What used to be my instinct to immediate rip into the code has been replaced with the practice of leaving the code alone whenever possible and making my adjustments in the Hooks Manager. The ability to execute short codes without any further php is a welcomed feature.

Contact Adii… through this handy box

This was a unique challenge. I had only utilized a contact form in a modal through a methods similar to the easy to follow Gravity Forms tutorial. However, there were some style and placement specifics in the design that made the use of FancyBox or other lightbox plugins not an option. Specifically, the box had to appear directly below the contact form and not in the center of the page. I began searching and experimenting with options before stumbling onto the simplest and most effective solution.

I placed a div in the woo_header_inside area of the Hooks Manager with the Execute Shortcodes on this Hook box checked. This area was also where I built the main navigation which was nice as it put the box just below the link in the navigation.

<div class="ContactMe">[gravityform id=1 name=ContactMe title=false ajax=true]</div>

Once the div was styled and positioned on the page, I used a short jQuery script to show and hide the div when the contact link was clicked. I placed the script in the wp_head area of the Hooks Manager so that it would load in the header of the page.

<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery(".ContactMe").hide();
        jQuery(".contactlink").show();
	jQuery('.contactlink').click(function(){
	jQuery(".ContactMe").slideToggle(1000);
	});
});
</script>

Since the box was created as a div not a lightbox, adjusting the CSS for the adaptive layout was much much easier and I didn’t have to worry about additional plugins, frames or page templates.

Custom Post Types

The About Me page is managed through two custom post types running through an added page template.

On the About Me page, there are two custom post types (Conferences & Projects). I used the WordPress Custom Post Type Code Generator (http://themergency.com/generators/wordpress-custom-post-types/) to generate the initial code for the functions.php file and then copied in some of the elements and styles from the existing Woo codes used for the Slides custom post type to ensure that the meta boxes would be consistent with the look of the rest of the admin layout.

I established a page template that housed the two post types along with a filter for the Conferences that would place the posts under the proper tab based on a radio button in the post cleverly titled “Upcoming or Previous Event?”.

I was familiar with custom post types before beginning this project, but had never built one from scratch. WordPress ease of use combined with easy to follow references in the existing Woo Themes code made it easier to build the custom post types quickly and keep my code organized and more straightforward.

I found that each time I was at a loss of how to accomplish a task or function, I could reference the existing code in the Woo Theme. Their organization and advanced coding is accompanied by very easy to follow comments making it much easier to find what you seek and then modify or duplicate accordingly.

An Adaptive Layout

Adaptive Layout courtesy of the Less Framework

Installing the Less Framework was the absolute last item on my To-Do list. I saved it for the last as I was sure that it was going to contain the most frustration and heartache in the process. In the days leading up to it, I became nervous as the idea that the whole layout would shift automatically with the browser dimensions seemed too advanced and would surely result in me pounding my keyboard into oblivion as I hulk out in code rage.

I was wrong.

Integrating the Less Framework into Canvas was almost effortless. I copied the code from the Less Framework 4 site and pasted it into the wp_head section of the Hooks Manager and then created a CSS file in my child theme to contain their initial CSS setup. Just going that far, I could drag and resize the browser window to see the layout attempting to shift and change.

My method to make the modifications then became resizing the window until I saw the layout snap to the new resolution, using Firebug to give me the class or id that needed to be modified, and then pasting in the adjusted code to the Less Framework CSS file.

My Less Framework Workflow

What I thought was going to be an exhaustive process was actually fun. Yes… FUN.

If you haven’t experimented with the Less Framework, you need to immediately. I think this method of adapting your layout beyond mobile and desktop is a wonderful way to connect no matter the device and is much easier to implement and adjust versus building multiple sites or adapting a plugin with its own quirks. I’ve continued to experiment and am continually amazed at its potential.

Canvas: Before & After

I’ve worked with other frameworks and many themes. I’ve yet to find anything comparable to Canvas in terms of ongoing improved standards that stay current with trends. With each version, the Woo Team continues to refine an already near flawless product.

The product is properly defined by its title, a blank canvas that allows the user to make it as big or as subtle as they choose.

We continue to experiment and try to define the limitations of Canvas, an exceptionally difficult task as the potential is seemingly limitless. Our next Canvas incarnation will build on what we’ve learned from Adii’s site. We are rebuilding our site using Canvas, but that’s for another case study.

Additional Utilized Resources

• CSS3 Generator
• CSS 3.0 Maker
• Sprite Cow
• WooCodex
• WordPress Codex

I was specifically thinking of our “Custom Logo” function, which is included in every single theme and allows the user to quickly & easily replace the theme’s default logo with their own. No frills, no fuss. This isn’t a very glamorous feature and as far as usage goes, you’d probably find that almost all WooCommunity users have used it. The development that went into the feature is also minimal, since it’s not the most complicated function that ever needed coding. This obviously also means that support enquiries for this feature is pretty much non-existent.

Could this be the perfect feature? Maybe.

We’re not saying that we don’t believe in the more expansive, elaborate & complicated features which we include in themes like Listings, SupportPress & the likes. But in the search for which theme features are most used across the whole WooCommunity, simple may be best. Less perhaps sometimes is more.

What is your favourite WooThemes feature? What simple features do you think we should include in more themes?

With the recent launch of Canvas 4 a couple months back we are now hugely confident in Canvas’s codebase. Matty has spent countless hours refining the structure into a more modular design, flexible enough for child theming, and custom hooks, filters and functions to be added.

The Canvas portfolio page template.

As seen in our popular business themes, Canvas now boasts a full portfolio component for keeping track of all the awesome work you do and showcasing it to prospective clients and collaborators.

Canvas portfolio features

The Canvas portfolio component includes options to display a single image, image gallery, or video on a per-item basis, as well as testimonials from your clients (where they can tell everyone how happy they are with your work) regarding the project you’re showcasing and a link back to the finished product. This allows you to choose the best method possible to showcase the work in your portfolio.

The portfolio settings of the new Canvas module.

Along with being able to showcase your work, it’s also possible to group similar items together, where viewers can see, for example, all your design work in a single place and get straight to the work they’re looking for. This is done by means of a portfolio galleries manager and a neat gallery switcher on the newly-added “Portfolio” page template. Each gallery has it’s own page with a unique URL, making it easy to share your content online.

A single portfolio item page. You can use the 'layout' custom setting to move the sidebar, or disable it.

A lightbox pop-up can display all the images/videos within a portfolio item.

Existing Canvas users, and club members, Canvas 4.4 is now available for download. Look forward to seeing some implementations of the portfolio module soon! 3 cheers for Matty!

Editorial’s design is very much inspired by traditional newspaper layouts, focusing on the content. The center aligned header, slightly textured background, strong sans-serif headlines, serif body copy and drop-caps all help to give the design a more traditional aesthetic. But the theme’s real strong point, the feature that sets it apart from other magazine themes, is it’s single post layouts. Users have the option to choose from a number of different columnized post content layouts, allowing each post to be styled uniquely.

A three column post layout

These layouts divides the post content into different vertical columns, just like a print publication. These column layouts are setup via a couple of options on the edit post screen, giving the user as much flexibility and control over their layout as possible. First the user selects the column layout they want – Traditional full-width blog, traditional blog, 3 column, 2 column wide left, 2 column wide right or 2 column 50/50. The great thing about the columns is that they do not automatically split the text up. The user sets the “column breaks” in the post editor by using the “Add Column Break” button on the toolbar.

Column settings and the "Add Column Break" button

You can also control the appearance of the post titles, setting them to span either one or two columns, or even spanning full-width across the top of the post. This, along with options to add a post gallery image slider and an intro paragraph (the excerpt) really allows the user to create a variety of different layouts.

Now that you’ve seen how to control the columns in Editorial, let’s take a look at how these columns are actually built with CSS.

Whilst doing research I came across a couple of approaches to building HTML/CSS columns. One was to use the CSS Multi Column Layout module, which proved to work relatively well, but I experienced problems with floating images and controlling text breaks. There are also a number of Javascript solution out there, but none of them really offered me the control I was looking for.

We ended up going with a custom CSS & jQuery solution. First off, based on the options selected on the edit post screen, CSS classes for each of the different layouts are added to the HTML, allowing me to target each layout with CSS. Next we have to specify the columns in the markup. As mentioned above, the column breaks are inserted with a button on the post edit screen. These column breaks are detected with PHP (thanks to some magic by Matty) and the blocks of text are wrapped in DIV tags, allowing the columns to be floated with CSS.

Layout classes, column markup and column CSS

There were some issues with spanning the post title only x amount of the columns. The columns that were not spanned by the title, still defaulted below it, unlike when you float an image in a paragraph of text. We used jQuery to determine the height of the post title and applied negative margins to the “non-spanned” columns, pulling them up to be vertically top aligned with the title.

The aforementioned float issue and the jQuery that fixes it

The CSS & jQuery solution works really well, and results in the columns being compatible in most browsers, even Internet Explorer 7!

So there you have a brief look into what went into building the custom single post layouts for Editorial. The theme has loads of other cool features that make it a great magazine theme, be sure to head on over to demo site to see it in all it’s glory!

If you haven’t already seen what the faster, cleaner version 3.2 offers watch this great video by WordPress which summarizes it’s new features and optimizations nicely.

Well done to all the core contributors!

WordPress Requirements Changes (view the WordPress 3.2 codex here) -

• PHP 5.2.4 or greater (old requirement – since WordPress 2.5 was PHP 4.3 or greater)
• MySQL 5.0.15 or greater (old requirement – since WordPress 2.9 was MySQL 4.1.2 or greater)

We’ve spent a good few hours testing our themes compatibility with WordPress 3.2, since it was officially released, as well as having upgraded our WooThemes site, and we are happy to report the themes are all playing nicely. Please do report any problems you might find though in our forums where we are on standby. As always we recommend you back up your site before upgrading!

“Responsive design” were two other words which kept cropping up. Mobile perusal of the web is an increasing trend and we decided to embrace this by delivering a device agnostic design. In Laymans terms this means that whether you’re checking out FaultPress on your desktop, your iPad or your smartphone, content is delivered to you in an intuitive and appropriate way.

FaultPress displays for the iPhone and iPad.

So how is it done? With a little spinkling of CSS3 media queries. Media queries have been attracting a lot of attention recently, so much so that we’re already starting to see responsive web design galleries popping up.

A media query is a simple piece of code, placed in a web site header or a stylesheet the purpose of which is to detect different information about a user, and deliver a specific stylesheet based on that information. There are several different media features we can query but the most important one for us was width, browser width that is. By finding out the current width of the users browser we can make educated assumptions as to which device they’re using. For example:

• 320 x 480 – Smartphone
• 480 x 320 – Smartphone in landscape orientation
• 768 x 1024 – iPad
• 1024 x 768 – iPad in landscape orientation / netbook
• Anything larger – Desktop / laptop computer

Numbers are representative of pixels.

Using these widths as thresholds we delivered optimised designs for each of these devices.

How? As I mentioned earlier media queries can be included in the page header (if you want to separate your stylesheets per device) or directly in a main stylesheet. Because FaultPress is a very large theme, we opted to create a separate stylesheet for each device. The code itself is very straightforward:

If you want to place media queries within a stylesheet opposed to the page header you should use the following syntax;

@media only screen and (min-width: 768px) and (max-width: 991px) {
    Styles go here
}

Read more about media query syntax here.

The first stylesheet is the default and all the main styles are placed here. This is aimed at resolutions between 1024×768 and 1280×1024. The two most popular resolutions at present. The second is for modern widescreen displays and will be delivered to users whose screen resolution width is greater than 1212px. The third is for tablets and viewports with a resolution width between 768px and 991px.

With specific stylesheets prepared for a sufficient range of devices, the next thing to do is make sure your main wrapping element’s width is appropriate for those devices. The easiest and most semantic way to do this is by using the body tag. As a quick example (I don’t want to bore you with endless code), inside your handheld-portrait.css file you would insert something along the lines of:

body {
    width:300px; /* Smartphone resolution 320 x 480 */
    margin: 0 auto;
}

With smartphones accounted for you can go ahead and create rules for different devices based upon the resolutions outlined above.

Hopefully that covers the basics of media queries and will help you set up responsive designs. The final comment I leave you with is to be careful with this technique. It’s easy to fall into the trap of assuming that Smartphone users are in a hurry therefore not interested in feature x. I used the term “device agnostic design” at the beginning of this article and it’s one I much prefer to “responsive design”. Your web site should deliver identical functionality across devices, media queries simply allow us to optimise how that functionality is delivered.

As our flagship theme, Canvas has seen many enhancements and additions since it’s released early last year. The response to Canvas’ flexibility and ease of use from users at all levels has been incredible. With this in mind, it was time to give Canvas a bit of a tune up under the hood and overhaul the code for even more flexibility.

When approaching a task of this nature, which concerns users of all types and skill levels, it is important to take that into consideration as a primary pillar on the project- users of all skill levels need to be able to take advantage of the new features. Enter the Manager modules.

The Manager modules, “Layout”, “Hooks” and “Meta”, provide users with an easy-to-use interface for making use of advanced functionality in Canvas (such as it’s bundled hooks via the “Hook” Manager and filtering common areas via the “Meta” Manager). This means that, without understanding too much about what a hook or filter is, a user can make use of them. Therefore, at a basic level, these advanced functionalities no longer seem daunting and unapproachable. More advanced users can, of course, still make use of a standard coded filter in their child theme, once comfortable with the concepts of what hooks and filters are.

When the average WordPress user starts out with customizing themes, they become familiar with the theme template file system, page templates an how the templates all piece together. For a new user, or a user simply trying to debug an issue or customize only a small element of a single page of their website, trawling through hundreds (even thousands… eek!) of lines of code can be cumbersome and can get messy with many IF conditional statements, etc. Enter the new Canvas templating engine.

Canvas’ templating engine has been overhauled to provide granular control over the display of your website, right down to how a single specific post is displayed everywhere on your website (search results, archive and the detail screen). The templates aim to separate the main template file (containing the presentation and website structure), the loop (containing the logic) and the post content (how that specific post is displayed).

And best of all: all this granular control is 100% child theme friendly. This means you can make changes to the way your template files look without needing to carry over any of the common logic to your child theme. Pretty cool, right?

In the first few paragraphs I discussed the “why” behind the Manager modules. Here’s a bit more about how they work.

Meta Manager

The “Meta” Manager uses flexible shortcodes to customise the areas below each post’s title and below each post in the “read more” area. This Manager provides simple text areas for inputting text, HTML and shortcodes.

The Canvas Meta Manager

To touch briefly on these new shortcodes in Canvas, we have created flexible shortcodes to display commonly used content such as a post’s categories, tags, date, time, author and more, as well as shortcodes such as general credit and copyright text, for use primarily in the footer (which now also supports shortcodes).

As a side note, all our other shortcodes (aside from Custom Typography at, present) work here as well. Therefore, a customization such as inserting a Twitter button below each post is now a breeze.

Hook Manager

The “Hook” Manager assists users with adding content at any of the Canvas custom hook points. This, coupled with custom CSS, makes code additions a breeze, without needing to dive into code. These hooks support HTML, plain text and, you guessed it, shortcodes!

The Canvas hook manager

Layout Manager

The “Layout” Manager is the veritable “big daddy” of the Managers. It controls all layouts in Canvas, allowing for the customization of the widths of each column in each of the available layouts, via a draggable user interface. Customise each layout as desired and, when selected for use on a page or post (or as the default layout), that layout’s customized widths will be put to use. Just another way we’re handing over control of customizations to you, our awesome WooCommunity.

Changing column sizes with the Canvas layout manager

To sum up, when overhauling a project such as Canvas, it’s important to consider all use cases for the project. Users who are making use only of the comprehensive theme options, as well as users who are developing advanced customisations via their own child themes. This consideration, as illustrated above, saw the birth of several new functionalities within Canvas, in an attempt to bridge the gap and assist users in making use of the more advanced functionalities that Canvas has on offer. Considering the varied scope of the users who make use of a product can change the outcomes and approaches involved in improving said product.

We’re looking forward to seeing what the WooCommunity can build with this new version of Canvas.

We’ve noted recently that the WooCommunity has become more & more adept at modifying the heck out of WooThemes (especially Canvas) and in the process are creating some mind-blowingly beautiful websites. The recent re-launch of Wishlist Member was just another amazing example of the power & flexibility of Canvas.

This prompted us to sit down (using this user-submitted idea as the basis of our discussion), take some time out of our regular release schedule and attempt to work some magic into Canvas. We wanted to release a new version of Canvas, which would make your life easier in enabling you to create more unique, beautiful websites easier. Simple as that.

To that extent we’d like to announce that Canvas V4 is now ready for purchase (or for download to existing users / club subscribers) and we simply can’t wait to get your feedback on this release. Below we’ve given you a proper overview of all the new functionality that has been included int he new version of Canvas…

A Revamped Templating Engine

Finely tune your website down to a tee with the new Canvas templating engine. Separating the website structure from the WordPress loop code, this creates further customisability and control over the various template files in Canvas, right down to customising how each post or page looks within archives, search results or on the single post page itself.

Basically that means that we’ve abstracted the template’s code into snippets that are as small as possible. This gives the advanced developer more flexibility and also makes customizing the code much less daunting to less advanced users.

Manager Modules

Canvas now includes three new “Manager” modules; Layout, Hooks and Meta.

Layout Manager adds control over the widths of the columns in each layout type available in Canvas, adding flexibility for creating the design you want, with the widths and layout you desire.

Changing column sizes with the Canvas layout manager

Hook Manager adds the ability to make use of the available hooks in Canvas, to add custom HTML code, shortcodes and text to any of the available hooks, using a familiar interface and without needing to add any extra functions in your code.

The Canvas hook manager

Meta Manager adds control over the “post meta” (below the title) and “post more” (below the post), allowing for the customisation of the text displayed in these sections. Using a collection of shortcodes to display categories, tags, date, time, author and other common post information (as well as the majority of our WooFramework shortcodes), it is possible to customise these areas to suit your every need.

The Canvas Meta Manager

New Shortcodes

Canvas now includes intuitive shortcodes for common elements such as post date, post author, post categories and post tags, as well as copyright text, credit text, a link to WordPress and a link to WooThemes (with support for your custom affiliate link). These add even further control over your theme’s content.

Some of the new Canvas shortcodes.

Additional enhancements for Child Themes

As a robust framework, Canvas is well suited to child theming. The above-mentioned templating engine, as well as the numerous hooks, filters and pluggable functions make it easy to customise Canvas to suit your needs by modifying only a small set of files to achieve your desired customisations.

Over to you…

Canvas V4 has gone through some rigorous testing internally at the WooHQ, but now it’s over to you. You need to use it out in the wild and give us feedback on any bugs that may pop up or tweaks that would be valuable to you.

Note also that this is an entirely new version of Canvas, which means we do not recommend replacing your existing version with the new version, as we changed quite a few things in the file structure of the theme especially. So use a clean version of Canvas to save yourself losing any data.

Child theming has been around in WordPress for a considerable amount of time, allowing users to create a smaller theme that piggybacks off of a larger theme, with it’s own CSS and customised PHP functions. A perfect fit with “Advanced Parent Themes”, yes? So why are some users apprehensive about it? Fear of the unknown.

To many WordPress users, child theming is an “advanced concept”, which is standing in the way of setting up their website and getting them blogging. It doesn’t have to be that way. In addition to this, once a child theme has been created (essentially a folder with two virtually empty files in it), what has the user actually achieved? They’ve added no custom CSS and no custom PHP functionality. The child theme now either looks empty or looks like the parent theme (if the parent theme’s stylesheet was imported, which is another step).

With this in mind, I sat down the other night and sought to make this process easier for users. Easier to not only get their child theme created, but also to get some base code into the files to assist the user in customising their child theme. Within a few hours, I’d created a tool that, with a few clicks, could create a child theme with some basic starter functions (provided by the parent theme) to get the user started with customising their child theme.

At WooThemes, we like to observe and give back to the WordPress community (see Appearance -> Menus in your WordPress Dashboard). With the rise in “Theme Frameworks” and “Advanced Parent Themes”, we feel that this tool could benefit the community at large. Therefore, with the addition of one or two small text fields to any WordPress theme, it would be able to setup starter code within child themes created of it.

Here’s a screencast of this functionality (which is very much a work in progress):

So, what child themes have you created today?

The New Single Portfolio Page in V1.1

Here’s a couple of things we’ve tweaked:

• A brand-new, single portfolio page has been added with its own, nifty gallery (pictured above).
• Small styling tweaks have been made to the hover state of the top navigation, as well as including an indicator / navigation for for the featured slides.
• An optional, secondary navigation space on inner pages (see this screenshot).
• A new, Google Maps widget which works really well on the contact page.
• We’ve added an additional, new “Dark” style (pictured below).
• A couple of minor jQuery upgrades & fixes…

The new, alternative dark style that has been added to Simplicity

Not bad value, eh?

As far as efficiency goes, that’s probably not it…

Luckily for you we share your frustration in this regard and we’re hoping our new free plugin, WooInstaller, will make this process more fun, easier and a whole heap quicker.

What is WooInstaller?

The Main WooInstaller Dashboard

We wanted to replicate the UI & ease-of-use workflow that is used by the native WP themes functionality i.e. getting as close to a one-click installation and activation. So this is what WooInstaller does:

• Install the WooInstaller plugin by going to Plugins > Add New in your WP Dashboard or download it from the WP repository here.
• It creates a new tab in the WP Dashboard under Appearance > Install WooThemes. On initial activation, you’ll be prompted to add your WooThemes username & password, which then connects with your account & purchased themes on WooThemes.
• Thereafter the main WooInstaller dashboard is available to you, where you can pick & choose any of your available themes and install them directly to your WP installation. No downloads or uploads necessary.

Pretty  nifty, right?

We’ve had a play with the beta versions and Release Candidates and so far none of our themes have been broken. As soon as WP 3.1 drops, you can thus upgrade with peace-of-mind, knowing that your WooThemes will work just fine.