Open up your theme’s functions.php and add this simple function:

// add the function to the init hook
add_action( 'init', 'woo_add_googlefonts', 20 );

// add a font to the $google_fonts variable
function woo_add_googlefonts () {
	global $google_fonts;
	$google_fonts[] = array( 'name' => 'Lustria', 'variant' => ':r,b,i,bi');
}

Here we have added a font name called Lustria, and after adding this it will show up in your options panel.

The new font in the typography option

First, lets find a nice home icon. If you go to IconFinder you can search for “home” and find many nice ones. We’re going to use this one, so download that and upload to your site. Use Media->Add New and copy the URL to the image after uploading.

Next step is to use Firebug to inspect a menu item, so you can find the ID of the list element.

Right click the menu item and inspect element to find the ID to use later.

Once we have the ID we can start adding some CSS to custom.css in your theme through Apperance->Editor.

#menu-item-290 {
     margin-left: 10px;
     width: 32px;
}
#menu-item-290 a {
     background: url("http://cdn2.iconfinder.com/data/icons/gnomeicontheme/24x24/actions/redhat-home.png") no-repeat scroll 0pt 0pt transparent;
     text-indent: -99em;
}

The first style targets the main list element, and sets the width to 32px so it’s the same width as the image, and just moves the image 10px to the right.

The second style targets the link or anchor inside the list element, and sets the background of that anchor to the icon. To hide the text we simply move it off the screen with negative text indent.

That’s it! The finished product will look like this:

The Home linnk replaced by a home icon!

When you have more than 100 themes, it is expected that some users will want to port features between themes. One of the most requested is the Twitter feed that you can see in the header of the Busybee theme. In this tutorial you’ll learn how to add a Twitter feed to the Canvas header using hooks.

The final result

A Twitter feed in the Canvas header

The finished code

add_action('woo_header_inside','woo_add_twitter_header', 10);
function woo_add_twitter_header() {
?>

<div id="twitter_header">
 <ul id="twitter_update_list_header"><li></li></ul>
 <?php echo woo_twitter_script('header', 'woothemes', 1); ?>
 <div class="fix"></div>
</div>

<?php
} // End woo_add_twitter_header()

What the code does

1. Instruct the “woo_header_inside” hook to look for and execute the “woo_add_twitter_header()” function.
2. Setup a wrapping DIV tag with an ID of “twitter_header” and the necessary markup for the Twitter script. The PHP code outputs the Twitter feed for the username woothemes (replace with yours).

Lastly, the CSS and the Twitter bird image

If you test the code right now, you should see the Twitter feed in your header above your logo. We don’t want it there so we must add some CSS to the “custom.css” file.

#twitter_header { float: right; padding-left:60px; background:url(images/twitter_bird.png) no-repeat left center; }
#twitter_header a.time { display:block; }

The CSS above adds the Twitter bird image as background to the left of your “twitter_header” DIV and also some padding or the image would be under your text. The last line moves the time to a new line.

You can grab the Twitter bird HERE. Add it to your theme “images” folder or, alternatively, replace “images/twitter_bird.png” with the full url to the image (example: http://your-site.com/twitter_bird.png).

LESS CSS?

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

LESS is a language much akin to CSS which we all know and love. As the quote above says, it extends CSS in different ways, making it modular, flexible and quicker to write. It’s a perfect partner for CSS3 with it’s vendor prefixes.

If you can write CSS, you can write LESS. There are however have a couple of options to consider before diving in; particularly whether to compile your LESS files locally via an app or remotely via JavaScript. While it takes a little time to set up I would recommend using a desktop application every time rather than forcing unnecessary bandwidth usage on your server.

So with the boring bit out the way, let’s have a look at the language itself. As I said, if you’re comfortable with CSS then LESS will be very easy to pick up. I’ll echo a few examples from the LESS site to demonstrate some of the ways we use it to improve the CSS in our new themes.

Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

In this example a color is specified as a variable. This can be used throughout your LESS document in any place you want to utilize that color. The above would be compiled thusly:

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

The beauty of this is that if you should want to change that color at any point, you simply change the variable in your LESS file and save it to compile the CSS. Obviously this is much quicker than going through the entire document finding and replacing.

Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments.

Mixins are particularly useful given the range of vendor prefixes we find in CSS3. Let’s say you wanted to make a div have rounded corners. In traditional CSS you would apply the following to your class(es):

.rounded {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

This can be extremely tedious, especially when you want round specific corners, or if standards evolve and certain Vendor prefixes are no longer necessary, or more are required. Mixins allow us to specify these rules once, and then call on them throughout the rest of our LESS file. Here’s another example:

.border_radius (@radius: 10px) {
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
-o-border-radius:@radius;
border-radius:@radius;
}

#header {
.border_radius;
}

#footer {
.border_radius(20px);
}

This would output the following:

#header {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

#footer {
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
}

It’s plain to see that even using basic mixins will rapidly increase the speed at which you can write and globally modify your CSS.

Nested Rules

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

My personal favorite LESS feature is nested rules. It’s simple, but once again makes CSS easier to write and easier to read / organise. Let’s look at another example:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

The above would output:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Pretty nifty!

These are probably the three simplest features of LESS but they clearly represent what it’s all about and how it can help any project. Hopefully it has been enough to whet your appetite to find out more.

.nav li ul li a,
.nav a, .nav li.current_page_item, .nav li.current_page_parent, .nav li.current-menu-ancestor, .nav li.current-menu-item, .nav li.sfHover, .nav li.selected,
#top .nav li.sfHover a,
#top .nav li ul, #top .nav li ul li:last-child a,
.woo-pagination a:link, .woo-pagination a:visited, .woo-pagination a:active, .woo-pagination span.current,
.searchform,
.widget_woo_twitter .back,
#tabs,
#tabs ul.wooTabs li a.selected, #tabs ul.wooTabs li a:hover,
#comments .reply a,
.button, .button:visited, .reply a, #respond .form-submit input#submit,
#connect .newsletter-form .submit,
#portfolio #port-tags .port-cat a
{
   border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;
}

The woo_breadcrumbs() functionality, bundled with the WooFramework, provides ease and flexibility when displaying breadcrumbs on your website. In this tutorial, we’ll discuss adding a category tree for the current blog post into the breadcrumb on all single blog post screens.

The finished code

Before we start, lets take a look at the finished code.

// Add the full categories hierarchy to the breadcrumb trail.
add_filter( 'woo_breadcrumbs_trail', 'woo_custom_breadcrumbs_trail_add_categories', 10 );

function woo_custom_breadcrumbs_trail_add_categories ( $trail ) {
	if ( ( get_post_type() == 'post' ) && is_singular() ) {
		global $post;

		$category_objs = get_the_category( $post->ID );
		$links = array();

		foreach ( $category_objs as $c ) {
			$parents = get_category_parents( $c->cat_ID, true, ', ' );
			if ( $parents != '' ) {
				$parents_arr = explode( ', ', $parents );

				foreach ( $parents_arr as $p ) {
					if ( $p != '' ) { $links[] = $p; }
				}
			}
		}

		// Add the trail back on to the end.
		$links[] = $trail['trail_end'];

		// Add the new links, and the original trail's end, back into the trail.
		array_splice( $trail, 1, count( $trail ) - 1, $links );
	}

	return $trail;
} // End woo_custom_breadcrumbs_trail_add_categories()

What the code does

The above code does the following:

1. Instruct the “woo_breadcrumbs_trail” filter to look for and execute the “woo_custom_breadcrumbs_trail_add_categories()” function.
2. If we’re on a single post screen, get all categories assigned to the post.
3. For each of those categories, loop through and get the category’s parents, each time adding the category to the breadcrumb trail (from the assigned category up to the top level parent category).
4. Add the current post title to the end of our new array and merge this new array with the existing breadcrumb, using the array_splice() PHP function.

The final result looks something like this:

The category tree for "Category 3" in the breadcrumb, as viewed on a single post screen

The “Business” slider and page template are an ideal way to feature your services or products in a sliding area and, if using the page template, display information below the slider area, showcasing information about your business or service offering. In certain instances, you may want the “Business” slider and not the information below. Following on from our tutorial on how to add the “Magazine” slider to the default WordPress “Your Latest Posts” homepage, this tutorial discusses how to add the “Business” slider to the homepage, above both the post list and the widgetised sidebar.

The finished code

Before we start, lets take a look at the finished code.

// Display the "Business" slider above the default WordPress homepage.
add_action( 'get_header', 'woo_custom_load_biz_slider', 10 );

function woo_custom_load_biz_slider () {
	if ( is_front_page() && ! is_paged() ) {
		add_action( 'woo_main_before_home', 'woo_slider_biz', 10 );
		add_action( 'woo_main_before_home', 'woo_custom_reset_biz_query', 11 );
		add_action( 'woo_load_slider_js', '__return_true', 10 );
		add_filter( 'body_class', 'woo_custom_add_business_bodyclass', 10 );
	}
} // End woo_custom_load_biz_slider()

function woo_custom_add_business_bodyclass ( $classes ) {
	if ( is_home() ) {
		$classes[] = 'business';
	}
	return $classes;
} // End woo_custom_add_biz_bodyclass()

function woo_custom_reset_biz_query () {
	wp_reset_query();
} // End woo_custom_reset_biz_query()

What the code does

The above code does the following:

1. Load the “Business” slider before the “main” DIV tag, and only if on page 1, on the homepage.
2. Instruct the “Business” slider JavaScript to load.
3. Add the “business” CSS class to the <body> tag to keep the “Business” slider’s styling.

The final result looks something like this:

The "Business" slider, displaying on the default WordPress homepage

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.

The finished code

Before we start, lets take a look at the finished code.

body.paged .block { float: none; display: block; width: 100%; }

What the code does

The above code does the following:

1. Use the auto-generated CSS classes added to the <body> tag by WordPress (more information on this on the WordPress Codex Function Reference) to target the “paged” screens, specifically.
2. Reset the “float”, “width” and “display” properties for all “.block” items within these “paged” screens, such that they take the appropriate default width.

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

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.

The finished code

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()

What the code does

The above code does the following:

1. Add a filter on the “woo_portfolio_gallery_exclude” hook to run the “woo_custom_portfolio_gallery_slugs” function at priority level 10.
2. If we’re currently viewing the page with the slug of “portfolio”, set the $slugs variable to “lakes”, which is the slug of the portfolio gallery to be excluded.

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.

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.

The finished code

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()

What the code does

The above code does the following:

1. Add the “magazine” CSS class to the <body> HTML tag.
2. Add the “block” CSS class to each post, and the “last” CSS class to every second post.
3. After every second post, add a “.fix” DIV tag.
4. Force the homepage to include the “content-magazine-grid.php” content template file instead of “content-post-full.php” or “content-post.php”, or simply override all content template options.

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

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.

The finished code

Before we start, lets take a look at the finished code.

Modified header.php

<?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(); ?>

Custom action added to functions.php

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()
?>

What the code does

The above code does the following:

1. The modified “header.php” file (best added via a child theme) strips out the #logo DIV tag, and it’s contents, from the “header.php” file, to now be added via a custom action.
2. The custom action in the “functions.php” file adds the logo code back onto the screen, this time above the #header DIV tag.

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

On the web, some designs call for a footer section that spans the full width of the screen, while keeping the content centred on the screen (our Delicious Magazine WooTheme does this well). Despite Canvas being bundled with a fixed-width footer, it just wouldn’t be Canvas if a full-width footer wasn’t possible. In this tutorial, we’ll discuss the few small modifications we’d need to make to create a full-width footer.

The modifications required for a full-width footer are divided into three parts; a customised “footer.php” file, a custom action in your “functions.php” file and some CSS to take advantage of the full-width footer section.

The finished code

Before we start, lets take a look at the finished code.

Modified footer.php

<?php
/**
 * Footer Template
 *
 * Here we setup all logic and XHTML that is required for the footer section of all screens.
 *
 * @package WooFramework
 * @subpackage Template
 */

 global $woo_options;
?>
	</div><!-- /#wrapper -->

	<div class="fix"></div><!--/.fix-->

	<?php wp_footer(); ?>
	<?php woo_foot(); ?>
	</body>
</html>

Custom action added to functions.php

add_action( 'wp_footer', 'woo_footer_below_wrapper', 12 );

function woo_footer_below_wrapper () {
	echo '<div id="footer-widgets-container">';
		woo_footer_top();
	echo '</div>';

 	woo_footer_before();
?>
<div id="footer-container">
	<div id="footer" class="col-full">
	<?php woo_footer_inside(); ?>
		<div id="copyright" class="col-left">
			<?php woo_footer_left(); ?>
		</div>

		<div id="credit" class="col-right">
			<?php woo_footer_right(); ?>
		</div>
	</div><!--/#footer-->
</div><!--/#footer-container-->
<?php
 	woo_footer_after();
} // End woo_footer_below_wrapper()

Example CSS

This CSS adds a background colour that now spans the full width of the screen. This would be customised to suit the design of your website. This should be placed either in the “custom.css” file or the “Custom CSS” theme option.

#footer-container, #footer-widgets-container { background: #EDEDED; }

What the code does

The above code does the following:

1. The modified “footer.php” file (best added via a child theme) strips out the main content of the “footer.php” file, to now be added via a custom action.
2. The custom action in the “functions.php” file adds the footer code back onto the screen, this time below the closing #wrapper DIV tag, allowing us to change the width.
3. Add a #footer-container DIV tag, to enable additional styling possibilities.

The final result looks something like this:

Full-width footer in Canvas

The “Magazine” page template displays your posts in both a featured image slider and a magazine-style grid, providing a magazine look and feel to your content. As this is a page template, we can see that the page’s content isn’t displayed, in favour of the posts. In some instances, it can be useful to display the content of the page with the “Magazine” page template, as well as your blog posts. In this tutorial, we’ll discuss displaying the page’s content of that page’s WYSIWYG content field below the featured slider on the “Magazine” page template.

The finished code

Before we start, lets take a look at the finished code.

add_action( 'get_template_part_loop', 'woo_custom_display_page_content', 10, 2 );

	function woo_custom_display_page_content ( $slug, $name ) {
		if ( $name != 'magazine' ) { return; }
			wp_reset_query();
			global $post;
			setup_postdata( $post );
?>
	<div <?php post_class( 'post' ); ?>>
	<?php the_content(); ?>
	</div><!--/.post-->
<?php
	} // End woo_custom_display_page_content()

What the code does

The above code does the following:

1. Instruct the “get_template_part_loop” action to find and execute the “woo_custom_display_page_content()” function, at priority setting “10″ with “2″ parameters (the $slug and $name of the template part).
2. If the $name variable is “magazine”, we’re not on the “Magazine” page template, don’t run the custom code.
3. Reset the current WordPress database query to the default, setup the data for the current page and display it’s content using “the_content()” inside a DIV tag with the CSS class of “post”, along with the default CSS classes added by WordPress.

The final result looks something like this:

Page content, displayed below the featured slider on the "Magazine" page template

The “Magazine” slider and page template are an ideal way to feature specific posts in an image slider and, if using the page template, display other posts in a magazine-style grid. In certain instances, you may want the “Magazine” slider and not the posts grid below. In this tutorial, we’ll discuss how it is in fact possible to have one’s cake and eat it, in this context, by adding the “Magazine” slider to the default “Your Latest Posts” homepage.

The finished code

Before we start, lets take a look at the finished code.

add_action( 'woo_loop_before_home', 'woo_slider_magazine', 10 );
add_action( 'woo_loop_before_home', 'woo_custom_reset_query', 11 );
add_action( 'woo_load_slider_js', '__return_true', 10 );
add_filter( 'body_class', 'woo_custom_add_magazine_bodyclass', 10 );

function woo_custom_add_magazine_bodyclass ( $classes ) {
	if ( is_home() ) {
		$classes[] = 'magazine';
	}
	return $classes;
} // End woo_custom_add_magazine_bodyclass()

function woo_custom_reset_query () {
	wp_reset_query();
} // End woo_custom_reset_query()

What the code does

The above code does the following:

1. Load the “Magazine” slider before the loop on the homepage.
2. Instruct the “Magazine” slider JavaScript to load.
3. Add the “magazine” CSS class to the <body> tag to keep the “Magazine” slider’s styling.

The final result looks something like this:

The "Magazine" slider, above the blog posts on the default "Your Latest Posts" homepage

The woo_breadcrumbs() functionality, bundled with the WooFramework, provides ease and flexibility when displaying breadcrumbs on your website. In this tutorial, we’ll discuss adding a link to a WordPress Page into the breadcrumb on all single blog post screens.

The finished code

Before we start, lets take a look at the finished code.

add_filter( 'woo_breadcrumbs_trail', 'woo_custom_breadcrumbs_trail_single', 10, 1 );

function woo_custom_breadcrumbs_trail_single ( $trail ) {
	if ( is_single() && ( get_post_type() == 'post' ) ) {
		// The ID of the page you want to add to the breadcrumb. Replace this with your own.
		$page_id = 2;

		// Get the page's title and permalink, and group them in an HTML anchor tag.
		$title = get_the_title( $page_id );
		$permalink = get_permalink( $page_id );
		$page_link = '<a href="' . $permalink . '" title="' . esc_attr( $title ) . '">' . $title . '</a>';

		// Add the new page link, and the original trail's end, back into the trail.
		array_splice( $trail, 1, count( $trail ) - 1, array( $page_link, $trail['trail_end'] ) );
	} // End IF Statement

	return $trail;
} // End woo_custom_breadcrumbs_trail_single()

What the code does

The above code does the following:

1. Instruct the “woo_breadcrumbs_trail” filter to look for and execute the “woo_custom_breadcrumbs_trail_single()” function.
2. Specify the ID of the WordPress page we want to add to the breadcrumb, and get the title and permalink for that page. Construct an HTML anchor tag, using the page’s title and permalink.
3. Add the new permalink, along with the original trail ending text, to the end of the breadcrumb trail.

The final result looks something like this:

A custom link to the "About" page on a single blog post's breadcrumb trail

Today’s tutorial involves techniques we’ve learned across earlier tutorials, involving the use of custom filters. Today, we’ll be applying this technique again for a different purpose- to customise the footer content for certain, specific pages.

The finished code

Before we start, lets take a look at the finished code.

add_filter( 'woo_footer_left', 'woo_custom_footer_left', 20 );
add_filter( 'woo_footer_left', 'wpautop', 21 );

function woo_custom_footer_left ( $content ) {
	// Add the slugs here of the pages you want to customise the footer of.
	$pages = array( 'about', 'contact', 'blog' );

	foreach ( $pages as $p ) {
		if ( is_page( $p ) ) {

			// Calling the __( '', 'woothemes' ) function here makes this text translatable.
			$content = __( 'This is our customised footer.', 'woothemes' );
			break;
		}
	}

	return $content;
} // End woo_custom_footer_left()

What the code does

The above code does the following:

1. Instruct the “woo_footer_left” filter to look for and execute the “woo_custom_footer_left()” function on the footer left content area.
2. Setup an array of pages for which we want to customise the footer.
3. Loop through the array and, when we reach the page we’re on, change the content and break out of the loop (as we’ve found the page we’re looking to customise the footer for).
4. Make sure we run the `wpautop` function on the text after we’ve customised it, to make sure the paragraph tags are in place correctly.

A different application for this code

What if you want a custom footer for a different condition (all posts, perhaps)? WordPress contains several Conditional Tags which can be used to determine when do display content or perform specific actions. In this case, we only want to change the footer text on single blog posts, so we use the `is_single()` conditional tag. The adjusted code would look like this:

add_filter( 'woo_footer_left', 'woo_custom_footer_left_single', 20 );
add_filter( 'woo_footer_left', 'wpautop', 21 );

function woo_custom_footer_left_single ( $content ) {
	if ( is_single() ) {

		// Calling the __( '', 'woothemes' ) function here makes this text translatable.
		$content = __( 'This is our customised footer for all single posts.', 'woothemes' );
	}

	return $content;
} // End woo_custom_footer_left_single()

The final results look something like this:

The Canvas Footer, Customised for a Specific Page

The Canvas Footer, Customised for all Blog Posts

When searching a website, it’s often useful to know where in the search results list you’re currently browsing, and how many results, if any, have been found for your search. In this tutorial, we’ll be using a contextual hook to display these search details on the search results list.

The finished code

Before we start, lets take a look at the finished code.

add_action( 'woo_loop_before_search', 'woo_custom_search_info', 10 );

function woo_custom_search_info () {
	global $wp_query;

	// Retrieve the values we need to work out which items we're displaying.
	$per_page = $wp_query->query_vars['posts_per_page'];
	$paged = $wp_query->query_vars['paged'];
	$past_pages = 0;
	if ( $paged > 0 ) { $past_pages = $paged - 1; }
	$post_count = $wp_query->post_count;
	$total = $wp_query->found_posts;

	if ( $total == 0 ) { return; }

	// Setup the start and end values.
	$processed_entries = $per_page * $past_pages;
	$start = $processed_entries + 1;
	$end = $processed_entries + $post_count;

	// Setup our information for display as HTML.
	$html = '';

	$html .= '<div id="search-details" class="search-details">' . "\n";
		$html .= __( 'Displaying', 'woothemes' ) . ' ';

	if ( $total == 1 ) {

		$html .= '<strong>' . $total . '</strong> ' . __( 'result', 'woothemes' );

	} else {

		$html .= sprintf( __( '%1$s to %2$s of %3$s results', 'woothemes' ), '<strong>' . $start . '</strong>', '<strong>' . $end . '</strong>', '<strong>' . $total . '</strong>' );

	}

	$html .= ' ' . __( 'for', 'woothemes' ) . ' <strong>"' . get_search_query() . '"</strong>' . "\n";

	$html .= '</div><!--/#search-details .search-details-->' . "\n";

	// Display the finished HTML.
	echo $html;
} // End woo_custom_search_info()

What the code does

Right. That’s quite a lot of code to take in with a single read. Lets take a look at what it does.

The above code does the following:

1. Instruct the “woo_loop_before_search” hook to look for and execute the “woo_custom_search_info()” function. “woo_loop_before” is the main hook. Adding “_search” to the end ensures that it only executes on the “search” screen.
2. Retrieve the necessary values from the current screen’s “$wp_query” object and determine the total number of results, current start and current end numbers.
3. If there are no results, stop the code and don’t display any text.
4. Setup a wrapping DIV tag with an ID of “search-details” and CSS class of “search-details”, setup our text starting point (“Displaying”) and load it inside the new DIV tag.
5. If there’s only a single result, display “1 result”, otherwise display the start, end and total number of results inside the new DIV tag.
6. Print out (echo) the new HTML to the screen.

Lastly, the CSS

Lastly, we’ll add some CSS to the `custom.css` file to give the search details some space before the results list starts.

.search-details { margin-bottom: 20px; }

The final result should look something like this:

Search details added to the Canvas search results screen

Sometimes, you may want to move a page’s title to another part of the page’s layout. This may be for CSS styling reasons, or simply because you prefer it there. Today, we’ll look into how we can achieve this in Canvas.

What we’ll be doing here is:

1. Disabling the original title.
2. Adding a new title in our desired location.

The default position of the page title looks as follows:

The default page title position in Canvas

The finished code

Before we start, lets take a look at the finished code.

add_filter( 'the_title', 'woo_custom_hide_single_page_title', 10 );

function woo_custom_hide_single_page_title ( $title ) {
	if ( is_page() && in_the_loop() ) { $title = ''; }

	return $title;
} // End woo_custom_hide_single_page_title()

add_action( 'woo_content_before_singular-page', 'woo_custom_add_page_title', 10 );

function woo_custom_add_page_title () {
	global $post;
	$title = '<h1 class="title">' . get_the_title( $post->ID ) . '</h1>' . "\n";
	echo $title;
} // End woo_custom_add_page_title()

What the code does

As can be seen above, we’ve got two custom functions, a filter and an action.

The above code does the following:

1. Run a custom filter on “the_title”. If it’s being used on a single page and is in The Loop, disable it.
2. Add a custom action on “woo_content_before” (only in the “singular-page” context) and display the title text, wrapped in “h1″ tags.

The final result should look something like this:

The page title outside of the Canvas content area

The WordPress search functionality is a useful way of helping your users find the specific content they’re looking for. Knowing that the searching functionality is in place, the main focus would then be on making the search box as visible to your visitors as possible. Therefore, why not add the search box in your website’s header area? This is what we’ll be adding to Canvas in today’s tutorial.

The finished code

Before we start, lets take a look at the finished code.

add_action( 'woo_header_inside', 'woo_custom_add_searchform', 10 );

function woo_custom_add_searchform () {
	echo '<div id="header-search" class="header-search fr">' . "\n";
	get_template_part( 'search', 'form' );
	echo '</div><!--/#header-search .header-search fr-->' . "\n";
} // End woo_custom_add_searchform()

What the code does

The above code does the following:

1. Instruct the “woo_header_inside” hook to look for and execute the “woo_custom_add_searchform()” function.
2. Setup a wrapping DIV tag with an ID of “header-search” and CSS classes of “header-search” and “fr” (float right), get the template part called search-form.php and load it inside the new DIV tag.

Lastly, the CSS

Lastly, we’ll add some CSS to the `custom.css` file to vertically centre the search box within the header (the value used here would differ depending on your header’s height).

.header-search { position: relative; top: 20px; }

The final result looks something like this:

A search box in the Canvas header

In some navigation systems, you may want to display a short description of the content of each navigation item, below the link. This can be seen in Adii’s blog redesign, where each navigation item has a short description below it. The WordPress Menus navigation manager (originally WooNav) has a neat “description” field bundled in. In this tutorial, we’ll make use of this field to display a short description below each navigation item.

Adii's blog navigation

To do this, we’ll need to do the following:

1. Enable the “Description” field.
2. Add text to the “Description” field for each and every navigation item on the top level of our navigation.
3. Tell WordPress to add this description text below each navigation item’s link.
4. Add some CSS to style the description text.

Enable the “Description” field

To do this, we open the “Screen Options” tab in the top-right corner of the “Appearance -> Menus” screen and check the checkbox next to “Description”. No code required.

Enable the "Description" field under the "Screen Options" tab

Add description text to each item.

Now that we’ve enabled the “Description” field, if we click the “down” arrow next to each navigation item, we should see a next textarea field labelled “Description”. This field may have post/page content in it already, depending on if the item is a post or page. If it has content in it already, this is WordPress’ way of compensating for potentially empty descriptions. Please delete this text and replace it with your own.

Adding a "Description" to a navigation item

Tell WordPress to add the “Description” text to the navigation items on the top-level

This is where the code comes into the picture. It’s a short function, added using a filter. We’ll add this code to the functions.php file.

The finished code snippet is as follows:

add_filter( 'walker_nav_menu_start_el', 'woo_custom_nav_menu_start_el', 10, 4 );

function woo_custom_nav_menu_start_el( $item_output, $item, $depth, $args ) {

	if ( $args->theme_location == 'primary-menu' ) {
		$description  = '';
		if ( ! empty( $item->description ) && ( $depth == 0 ) ) {
			$description = '' . esc_attr( $item->description ) . '';
		}

		// Get the description to sit inside the anchor tag.
		$item_output = str_replace( '</a>', $description . '</a>', $item_output );
	}

	return $item_output;
} // End woo_custom_nav_menu_start_el()

Currently, the above snippet has been coded to target the “primary-menu” theme location specifically. This can be changed to target any theme location you desire.

The description text is also placed within the anchor tag, to ensure that there is no gap between the anchor and any dropdown menus present on that navigation item. Adding the description below the anchor creates a gap between the navigation item and the dropdown menu.

Also, don’t forget to assign the menu to the appropriate theme location, if it isn’t already, as explained in our tutorial on adding custom navigation menus to Canvas.

Assign your menu to the appropriate Theme Location

Lastly, the CSS

Lastly, we’ll add some CSS to the `custom.css` file to make sure the description text displays neatly to start with.

.nav .description { display: block; font-size: 11px; font-style: italic; }

The final result, combining the above steps, should look something like this:

Descriptions under navigation items in Canvas