WooThemes Tutorials
Tips & Tricks to make you smarter!
Add a Twitter feed to your header
Posted on 14. Jan, 2012 by Tiago Noronha in Canvas
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 [...]
Remove all rounded corners
Posted on 09. Oct, 2011 by Magnus in Canvas
Some might not like the use of rounded corners, so the solution would be to go through style.css and find all CSS selectors that have border-radius set and then add it to custom.css. This was done on a user request and here are the selectors from style.css: .nav li ul li a, .nav a, .nav [...]
Adding a category tree to single post breadcrumbs
Posted on 06. Oct, 2011 by Matty Cohen in Canvas
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 “Business” slider to the default WordPress homepage
Posted on 03. Oct, 2011 by Matty Cohen in Canvas
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 [...]
Disable the grid when paging through the “Magazine” page template
Posted on 28. Sep, 2011 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 [...]
Creating multiple instances of the “Portfolio” page template
Posted on 22. Sep, 2011 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 [...]
Transform the default Canvas homepage into a “Magazine”-style grid
Posted on 20. Sep, 2011 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 [...]
Move the logo outside of the header in Canvas
Posted on 19. Sep, 2011 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 [...]
Create a full-width footer in Canvas
Posted on 08. Sep, 2011 by Matty Cohen in Canvas
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, [...]
Display page content below the featured slider on the “Magazine” page template
Posted on 08. Sep, 2011 by Matty Cohen 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 [...]
Add the “Magazine” slider to the default homepage
Posted on 08. Sep, 2011 by Matty Cohen in Canvas
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 [...]
Add custom links to the breadcrumb trail on single blog posts
Posted on 02. Sep, 2011 by Matty Cohen in Canvas
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’, [...]
Customising the footer content on Different Pages
Posted on 24. Aug, 2011 by Matty Cohen in Canvas
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( [...]
Add search details to the search results list
Posted on 16. Aug, 2011 by Matty Cohen in Canvas
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, [...]
Moving the page title outside of the content area
Posted on 15. Aug, 2011 by Matty Cohen in Canvas
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: Disabling the original title. Adding a new title [...]
Adding a search box to the header in Canvas
Posted on 12. Aug, 2011 by Matty Cohen in Canvas
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 [...]
