All the latest news and announcements, straight from the WooThemes HQ!
by Adii Rockstar in WooLabs, WooThemes News
We launched WooCommerce yesterday and with many new products suddenly flooding into the WooThemes infrastructure, we had to accommodate them in some way (especially in terms of the WooThemes Club and our subscribers on those plans). Having interacted with many of our subscribers in the last 24 hours, we have decided to change the terms of our club subscriptions to be both fair to subscribers, but also viable to us – as a company – in the longer term.
Continue Reading »
by Matty Cohen in Canvas
When using the “Magazine” page template provided in Canvas, your blog posts are displayed in a neat grid, similar to how articles are laid out in a printed magazine. What if you want to disable this grid on pages 2, 3, 4, etc, when paging through the “Magazine” template? In today’s tutorial, we’ll discuss how a single line of CSS can be used to achieve this result.
Before we start, lets take a look at the finished code.
body.paged .block { float: none; display: block; width: 100%; }
The above code does the following:
Through this single line of CSS, we’re able to entirely change the look of how our “Magazine” pages look when visitors browse through beyond the first screen. Nifty, right?
The end result should resemble the following:
The "Magazine" template, with no grid when paging through
by Mark Forrester in WooCommerce
As you’d expect, WooStore makes full use of all of WooCommerce features. We’ve painstakingly married theme and plugin to provide a seamless front-end experience. Every single one of WooCommerce widgets has been lovingly styled to match the beautiful design, as has each key component of the plugin such as the product categories, product descriptions, cart, checkout and user account sections. Read all about the benefits of WooCommerce here.
A custom homepage featured slider to showcase your products with style, all powered by jQuery. Optional slider pagination gives your visitors easy overview.
The homepage features a stylish jQuery slider as well as the option to display content from one of your pages. There’s even an option to display your featured products, either in a slider of their own or a static grid.
The theme takes full advantage of the new custom post types functionality that came with WordPress 3.0, so adding slides and products (via WooCommerce) is dead easy!
The theme has 1 widgetized sidebar (which can be moved from the right of the content to the left) and 4 footer regions, and as always comes with 8 custom Woo Widgets PLUS a multitude of WooCommerce widgets too. Widgelicious!
by Mark Forrester in WooCommerce
As you’d expect, Coquette makes full use of all of WooCommerce features. We’ve painstakingly married theme and plugin to provide a seamless front-end experience. Every single one of WooCommerce widgets has been lovingly styled to match the beautiful design, as has each key component of the plugin such as the product categories, product descriptions, cart, checkout and user account sections. Read all about the benefits of WooCommerce here.
Coquette is supplied with two bespoke colour schemes. ‘Mithril’ is a predominantly grey theme while ‘Taupe’ utilises organic greens and browns for a more down-to-earth aesthetic.
A custom home page featured slider to showcase your products with style, all powered by jQuery. Optional slider pagination gives your visitors easy overview.
The homepage features a stylish jQuery slider and a custom layout including the display of featured and recent products.
The theme takes full advantage of the new custom post types functionality that came with WordPress 3.0, so adding slides and products (via WooCommerce) is dead easy!
The theme has 1 widgetized sidebar (which can be moved from the right of the content to the left) and 4 footer regions, and as always comes with 8 custom Woo Widgets PLUS a multitude of WooCommerce widgets too. Widgelicious!
by Mark Forrester in WooCommerce
As you’d expect, Wootique makes full use of all of WooCommerce features. We’ve painstakingly married theme and plugin to provide a seamless front-end experience. Every single one of WooCommerce widgets has been lovingly styled to match the beautiful design, as has each key component of the plugin such as the product categories, product descriptions, cart, checkout and user account sections. Read all about the benefits of WooCommerce here.
Our number 1 goal with the design of Wootique was to make the theme a great solution for any online store. From the theme options page you can easily stamp your brands own unique style on the theme by changing the background colour, adjusting the menu and footer or adding a background image. The rest of the minimalist design lends itself to almost any colour or style!
The homepage features a nifty css3 / jQuery powered slider. The slider rotates through your stores featured products and is flexible enough to contain as many products as you want to throw at it. Better yet, we’ve used some css3 animations to ‘flip’ the product imagery revealing further information. Nifty!
Aside from the slider you can customise your homepage with content from a specified WordPress page. There’s also an archive of your recent products and of course a widgetised sidebar.
The theme has 1 widgetized sidebar (which can be moved from the right of the content to the left) and 4 footer regions, and as always comes with 8 custom Woo Widgets PLUS a multitude of WooCommerce widgets too. Widgelicious!
by Mark Forrester in Child Themes, WooCommerce
All WooCommerce features are accounted for and have been scrupulously styled to match the parent themes aesthetic.
Developed in-house by WooThemes designers and developers, this product ensures guaranteed compatibility with our market leading eCommerce plugin; WooCommerce.
As with all of our products, after your purchase you’ll gain access to our acclaimed premium support.
by Mark Forrester in Child Themes, WooCommerce
All WooCommerce features are accounted for and have been scrupulously styled to match the parent themes aesthetic.
Developed in-house by WooThemes designers and developers, this product ensures guaranteed compatibility with our market leading eCommerce plugin; WooCommerce.
As with all of our products, after your purchase you’ll gain access to our acclaimed premium support.
by Mark Forrester in Child Themes, WooCommerce
All WooCommerce features are accounted for and have been scrupulously styled to match the parent themes aesthetic.
Developed in-house by WooThemes designers and developers, this product ensures guaranteed compatibility with our market leading eCommerce plugin; WooCommerce.
As with all of our products, after your purchase you’ll gain access to our acclaimed premium support.
by Mark Forrester in WooLabs, WooThemes News
With much excitement, pride, and anxiety after such a long journey we can finally happily announce the release of WooCommerce.
For the last month, since the announcement of WooLabs/WooCommerce, Mike and Jay have been working like men possessed tinkering with every piece of code, adding valuable new core features, coding and collaborating on payment gateway, product and shipping extensions, and of course working on some beautiful themes.
Continue Reading »
by Matty Cohen in Canvas
In Canvas version 4.5.0, we added a feature to exclude specific portfolio galleries from the “Portfolio” page template. This feature can be used in conjunction with multiple instances of the “Portfolio” page template customise which portfolio galleries display on each instance of the template. This tutorial aims to explain the logic behind this code in more detail.
Before we start, lets take a look at the finished code.
add_filter( 'woo_portfolio_gallery_exclude', 'woo_custom_portfolio_gallery_slugs', 10 );
function woo_custom_portfolio_gallery_slugs ( $slugs ) {
if ( is_page( 'portfolio' ) ) {
$slugs = 'lakes';
}
return $slugs;
} // End woo_custom_portfolio_gallery_slugs()
The above code does the following:
To expand on this snippet to work with multiple pages, we could use the following snippet instead:
add_filter( 'woo_portfolio_gallery_exclude', 'woo_custom_portfolio_gallery_slugs', 10 );
function woo_custom_portfolio_gallery_slugs ( $slugs ) {
if ( is_page( 'portfolio' ) ) {
$slugs = 'lakes';
}
if ( is_page( 'a-second-portfolio' ) ) {
$slugs = 'nature, buildings';
}
return $slugs;
} // End woo_custom_portfolio_gallery_slugs()
The above snippet excludes the “lakes” portfolio gallery from the page with the slug of “portfolio”, and the “nature” and “buildings” portfolio galleries from the page with the slug of “a-second-portfolio”, where both pages are setup using the “Portfolio” page template. This code could be expanded using any portfolio gallery slugs in the $slug variable (separated by commas) as well as any appropriate condition in the IF statement.
And that’s all there is to it. We’ve now setup two pages with the “Portfolio” page template and have transformed each into it’s own dedicated portfolio with it’s own galleries.
by Matty Cohen in Canvas
While Canvas comes bundled with a “Magazine” page template, consisting of a featured posts slider and a “Magazine”-style grid, there may be a time when only the grid is required… or a custom implementation of the grid, for that matter. In this tutorial, we’ll discuss a short code snippet that can be added to your “functions.php” file to transform the default WordPress “Your Latest Posts” homepage into a “Magazine”-style grid.
This modification is divided into four parts in your “functions.php” file; a CSS class on the <body> HTML tag, a CSS class on each post & a second CSS class on every second post, a “.fix” DIV tag after every second post and forcing the homepage to include the “content-magazine-grid.php” content template file into the Canvas content templating system.
Before we start, lets take a look at the finished code.
// Add "magazine" CSS class to <body> tag on homepage.
add_filter( 'body_class', 'woo_custom_add_magazine_bodyclass', 12 );
function woo_custom_add_magazine_bodyclass ( $classes ) {
if ( is_home() ) {
$classes[] = 'magazine';
}
return $classes;
} // End woo_custom_add_magazine_bodyclass()
// Add "block" CSS class to each post.
add_filter( 'post_class', 'woo_custom_add_block_postclass', 12 );
function woo_custom_add_block_postclass ( $classes) {
global $wp_query;
$current_count = $wp_query->current_post + 1;
if ( is_home() ) {
$classes[] = 'block';
if ( $current_count % 2 == 0 ) {
$classes[] = 'last';
} // End IF Statement
}
return $classes;
} // End woo_custom_add_block_postclass()
// Add the "fix" DIV tag after every second post.
add_action( 'woo_post_after', 'woo_custom_add_magazine_blockfix', 12 );
function woo_custom_add_magazine_blockfix () {
global $wp_query;
$current_count = $wp_query->current_post + 1;
if ( is_home() && ( $current_count % 2 == 0 ) ) {
?>
<div class="fix"></div><!--/.fix-->
<?php
} // End IF Statement
} // End woo_custom_add_magazine_blockfix()
// Make sure the "content-magazine-grid.php" file is used instead of the default "content-*.php" file.
add_filter( 'woo_template_parts', 'woo_custom_home_templatepart_magazine', 12 );
function woo_custom_home_templatepart_magazine ( $templates ) {
if ( is_home() ) {
$index_to_replace = count( $templates ) - 2;
$templates[$index_to_replace] = 'content-magazine-grid.php'; // Preserve the default Canvas content templating system.
// $templates = array( 'content-magazine-grid.php' ); // Override the content templating system entirely.
}
return $templates;
} // End woo_custom_home_templatepart_magazine()
The above code does the following:
In addition to the end result of a “Magazine”-style grid on your homepage, this is an example of how Canvas can make use of a selection of smaller filters and actions to achieve a greater result, rather than making extensive modifications to the core theme template files, or using an extensive and difficult to decipher code snippet. Through 4 short code snippets, we’ve recreated the “Magazine”-style grid and can add/remove pieces at any stage to modify the end result.
The final result looks something like this:
The default Canvas homepage, styled as a "Magazine"-style grid
by Matty Cohen in Canvas
In some instances, you may want to remove the custom logo in the header area entirely, move it somewhere else in the design, or add a second copy of the logo somewhere else in the layout. In this tutorial, we’ll discuss moving the Canvas custom logo option into a function that we can add where we like within the layout.
The modifications required for a movable logo are divided into two parts; a customised “header.php” file and a custom action in your “functions.php” file.
Before we start, lets take a look at the finished code.
<?php
/**
* Header Template
*
* Here we setup all logic and XHTML that is required for the header section of all screens.
*
* @package WooFramework
* @subpackage Template
*/
// Setup the tag to be used for the header area (`h1` on the front page and `span` on all others).
$heading_tag = 'span';
if ( is_front_page() ) { $heading_tag = 'h1'; }
// Get our website's name, description and URL. We use them several times below so lets get them once.
$site_title = get_bloginfo( 'name' );
$site_url = home_url( '/' );
$site_description = get_bloginfo( 'description' );
global $woo_options;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php woo_title(); ?></title>
<?php woo_meta(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="all" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); } ?>
<?php wp_head(); ?>
<?php woo_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php woo_top(); ?>
<div id="wrapper">
<?php woo_header_before(); ?>
<div id="header" class="col-full">
<?php woo_header_inside(); ?>
<?php if ( ( isset( $woo_options['woo_ad_top'] ) ) && ( $woo_options['woo_ad_top'] == 'true' ) ) { ?>
<div id="topad">
<?php if ( ( isset( $woo_options['woo_ad_top_adsense'] ) ) && ( $woo_options['woo_ad_top_adsense'] != "") ) {
echo stripslashes(get_option('woo_ad_top_adsense'));
} else { ?>
<a href="<?php echo get_option('woo_ad_top_url'); ?>"><img src="<?php echo $woo_options['woo_ad_top_image']; ?>" alt="" /></a>
<?php } ?>
</div><!-- /#topad -->
<?php } ?>
</div><!-- /#header -->
<?php woo_header_after(); ?>
add_action( 'woo_header_before', 'woo_custom_add_logo', 12 );
function woo_custom_add_logo() {
global $woo_options;
// Setup the tag to be used for the header area (`h1` on the front page and `span` on all others).
$heading_tag = 'span';
if ( is_front_page() ) { $heading_tag = 'h1'; }
// Get our website's name, description and URL. We use them several times below so lets get them once.
$site_title = get_bloginfo( 'name' );
$site_url = home_url( '/' );
$site_description = get_bloginfo( 'description' );
?>
<div id="logo">
<?php
// Website heading/logo and description text.
if ( isset($woo_options['woo_logo']) && $woo_options['woo_logo'] ) {
echo '<a href="' . $site_url . '" title="' . $site_description . '"><img src="' . $woo_options['woo_logo'] . '" alt="' . $site_title . '" /></a>' . "\n";
} else {
echo '<' . $heading_tag . ' class="site-title"><a href="' . $site_url . '">' . $site_title . '</a></' . $heading_tag . '>' . "\n";
} // End IF Statement
if ( $site_description ) { echo '<span class="site-description">' . $site_description . '</span>' . "\n"; }
?>
</div><!-- /#logo -->
<?php
} // End woo_custom_add_logo()
?>
The above code does the following:
To add the logo in it’s original position, as well as use the filter, replace “woo_header_before” with “woo_header_inside”, as below:
add_action( 'woo_header_inside', 'woo_custom_add_logo', 12 );
The final result looks something like this:
The Canvas Logo, Moved Above the Header
The Canvas Logo Code, Moved Above the Header
by Mark Forrester in New Themes
Buró - A business theme that responds
“Responsive” design has been the buzz word amongst web designers on social media channels & blogs for the past few months, some debating how it will change the web. This week marked quite a milestone with a major news publication “The Boston Globe” launching a subscription-only website featuring content from the daily newspaper as well as breaking news, customized for different digital devices, including smartphones and tablets (Source: The Washington Post).
The idea of having a layout that adjusts according to the browser width/resolution and device it is viewed on, without the use of any plugins, or seperate design stylesheets is one that has been commonly requested within the WordPress community.
Continue Reading »
by Mark Forrester in Business
The Buro theme allows your website to display optimally at all browser widths/resolutions and on all media devices. Go ahead and scale your browser window and see the results.
A custom home page featured slider to showcase your work or products with style, all powered by jQuery. Optional slider pagination gives your visitors easy overview.
Custom home page layout with an optional slider, blog module and testimonial modules, not to forget all the widgetized homepage and footer specific regions.
The theme takes full advantage of the new custom post types functionality than came with WordPress 3.0, so adding slides, and feedback/testimonials is dead easy!
You can customize the typography in the theme to suit, and there is full support for Google Fonts in the font selector.
The theme has 1 widgetized sidebar (that you can even include on the home page), 3 homepage specific widgetized regions, and 4 footer regions, and as always comes with 8 custom Woo Widgets (Ad Space, Blog Author, WooTabs, Subscribe, Feedback, Search, Flickr and Twitter).
The theme includes 5 alternative color styles which you can preview in the demo, and also has styling options for background color/image and setting link and button color.
by Adii Rockstar in WooThemes News
We launched the “new” WooThemes about 2 weeks ago and included in this launch was a complete overhaul of our backend and your user dashboard. We’ve included some of the details of this in our launch post, but since we have now stabilized (after some minor niggles), we’d like to take you through a proper tour of all the new stuff.
The Dashboard
The Central Hub of your WooThemes Activity
The new user dashboard is basically the culmination of this overhaul and is now the central hub of everything that happens in & around WooThemes and that relates to your account.
You can now do all of this directly from your dashboard (the links are for preview images specifically for non-WooThemes user who can’t log in & play with this awesomeness):
Continue Reading »
More WooCommerce goodies & an update on 1.4 progress 
January theme teaser 
Musicians and bands take note! 
A continuous journey of customer support optimization 
Breathing even more life into WooCommerce Musicians and bands take note! 
Unsigned 
Add more Google Fonts to options 
Theme Options – Friend or Foe? A continuous journey of customer support optimization 
tricia: That's good - thanks Magnus...
Matty Cohen: Hi Simon.We'll be happy to help out in our Su...
Craig: @AdiThanks...that's very helpful...I like the...
Back to top.© 2012 WooThemes. Terms & Conditions. 
