Download Report

How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
Home
Codesscripts
Themes
Plugins
WooCommerce
Blog
Support
U
My Account
Cart
The WooThemes Blog
All the latest news and announcements, straight from the WooThemes HQ!
How to Create a Unique WordPress
Website: 15 Top Hacks for Canvas
SIGN UP
Sign up to our newsletter to hear about
product releases, WordPress news
and our awesome promotions.
August 19, 2013 in Blog
Email *
Submit
FIND US ON FACEBOOK
WooThemes
Like
12,363 people like WooThemes.
It’s a common story.
Facebook social plugin
You create a website that you’re proud of and fill it with great content, but the design vision
in your head doesn’t match what’s on the screen. You launched the site using a free theme
and decide you need a premium theme and stand out from the crowd. You install such a
theme and for a little while you’re happy.
But a few weeks go by and you begin to notice that other websites are of course using that
exact same theme. This isn’t what you wanted — you wanted to be truly unique. So you go
and find a new premium theme. You’re happy until once again you start finding websites
using that theme and the cycle repeats itself.
Then you find Canvas and everything changes.
Canvas is our flagship premium theme, but more importantly, it can
be made to look completely unrecognizable from its default design
without losing any of its functionality. You can make a huge number
of design changes with the inbuilt theme options, but with simple
CSS hacks and additions to the functions.php file added to your
arsenal, you can make make this theme truly unique.
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
With that said, let’s take a look at some of the best customization hacks you can use in
Canvas!
Simple but Effective CSS Hacks
The easiest way to customize Canvas is by adding CSS code to the custom.css area. This
lets you manipulate almost every aspect of the site design and goes a long way to creating
the unique theme that you want.
In order to make these changes, simply copy the code below and add it to the Custom CSS
area in the Canvas Theme Options.
1. Move the Top Navigation
The top navigation is easily missed if left in its default state because it positions that menu
above the site logo. To make it more visible you can move it over to the right hand side.
1
#top-nav {
2
3
float: right;
}
Canvas Move the Top Navigation hosted with
by GitHub
view raw
2. Change the Header Image Per Page
This CSS hack lets you change the header image of individual pages — so if for example
you have a product page that needs its own special header, or if you want to give each
page its own header image, you can use this code.
To use the code you need to replace .xxxx with the specific ID number of the page you
want to change.
1
.page-id-xxxx #header { background: url("imageurl") no-repeat scroll 0 0
transparent; }
Canvas Change the Header Image Per Page hosted with
by GitHub
view raw
3. Center the Header Logo
By default your logo sits on the left hand side of the header. That’s fine for most people but
if you want to move it to the center of the page, doing so is a piece of cake.
1
#logo { float: none; margin: 0 auto; width: 300px; }
Canvas Center the Header Logo hosted with
by GitHub
view raw
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
4. Center the Navigation Menu
If you’ve chosen to move your logo to the center of the header you may also want to move
the navigation menu to match that style.
1
#navigation {
2
position: relative;
3
}
4
5
#main-nav {
6
clear: left;
7
float: left;
8
list-style: none;
9
margin: 0;
10
padding: 0;
11
position: relative;
12
left: 50%;
13
text-align: center;
14
}
15
16
.nav li {
17
display: block;
18
float: left;
19
list-style: none;
20
margin: 0;
21
padding: 0;
22
position: relative;
23
right: 50%;
24
}
25
26
.nav li.hover, .nav li.hover {
27
position: relative;
28
}
29
30
.nav li ul li {
31
32
left: 0;
}
Center the Navigation Menu hosted with
by GitHub
view raw
5. Remove the Header Completely
It would be an unusual design choice to completely remove the header but it’s your site and
you can do whatever you want. If you just want the navigation menus followed by the main
body of the page, Canvas can easily oblige with this simple line of code.
1
#header { display: none; }
Canvas Remove the Header Comletely hosted with
by GitHub
view raw
6. Remove the Title from All Pages
At the very top of each page of your site in large header tags you’ll see the name of the
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
page. That can be an unnecessary distraction when you are looking for a smooth transition
from the header to the body text. So let’s remove them.
1
.page .title {
2
display: none;
3
}
Canvas Remove the Title from All Pages hosted with
by GitHub
view raw
7. Remove the Title from Specific Pages
You may not want to remove the title from every page on your site. If you only need to
remove the title from a specific page use the following code.
Replace the xxxx with the page ID number. You can use this code multiple times by
changing the page ID number with each use.
1
.page-id-xxxx .title {
2
display: none;
3
}
Canvas Remove the Title from Specific Pages hosted with
by GitHub
view raw
8. Remove the “Comments are Closed” Text
Comments are a great way to interact with your readers and help build a community, but
not every page or post needs to have them enabled. When you close the comments on a
post the “Comments are Closed” text is shown instead. This draws attention to the fact that
you’ve disabled them and that might not be something you want. Let’s remove it.
1
.nocomments {
2
3
display: none;
}
Canvas Remove Comments are Closed Text hosted with
by GitHub
view raw
9. Change User Avatar Images to Squares
The Canvas theme changes the author profile image and comment images to circular
avatars. This looks great in my opinion, but isn’t for everyone. Thankfully, converting them
back to the standard square images is simple.
1
#post-author .profile-image img, #comments .avatar img {
2
border-radius: 0;
3
-moz-border-radius: 0;
4
-webkit-border-radius: 0;
5
}
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
Canvas Change User Avatar Images to Squares hosted with
by GitHub
view raw
10. Remove the Image Border
While we’re looking at the images in Canvas, you’ll have noticed that every image inserted
into a post has a fine gray border. Some people like this, some don’t. If you’re one of the
latter then use this code to remove it.
1
.entry img, img.thumbnail {
2
background: none;
3
border: medium none;
4
5
padding: 5px;
}
Canvas Remove the Image Border hosted with
by GitHub
view raw
Intermediate Hacks With functions.php
With the above 10 simple CSS hacks you can make the site look completely different from
its default design. but if you want to dig a little deeper and customize your theme even
further, you need to start using the functions.php file. By adding code here you can make
fundamental changes to the structure and functionality of Canvas.
If you plan on adding code to the functions.php file then you should create a child
theme. Child themes allow you to make all of these changes without editing the original
Canvas files. It also ensures that updates to the framework won’t overwrite all of your hard
work. You can use the WooThemes tutorial to help you create a child theme.
11. Widgetize the Header
The header in Canvas has an Advertising section that can be utilized, but if you want to
have more control of that that area you should widgetize it. This will let you add almost
anything into the right hand side of your header, giving you greater flexibility. You can do so
by adding the following code to functions.php:
1
if (function_exists('register_sidebar')) {
2
register_sidebar(array(
3
'name' => 'Header Widget',
4
'id' => 'header-widget',
5
'description' => 'This is a widgetized area in the right side of the header.',
6
'before_widget' => '<div id="%1$s" div class="widget">',
7
'after_widget' => '</div>',
8
'before_title' => '<h3>',
9
'after_title' => '</h3>'
10
));
11
add_action( 'woo_header_inside', 'custom_canvas_header' );
12
function custom_canvas_header () {
13
?>
14
<div id="header-widget">
15
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header-widget')) :
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
16
else : ?>
17
<?php endif; ?>
18
</div>
19
<?php
20
}
}
gistfile1.txt hosted with
by GitHub
view raw
You then need to add the following code into the Custom CSS area (you will also need to
adjust the width and margins to suit your own design choices).
1
#woo-canvas-header-widget {
2
float: right;
3
width: 400px;
4
margin-top: 10px;
5
6
}
#woo-canvas-header-widget h4{
7
color: #069;
8
}
Canvas Widgetize the Header CSS hosted with
by GitHub
view raw
12. Remove the Primary or Top Navigation
Canvas comes with two navigation bars by default. You have the Top Navigation that is
above your header and the Primary Navigation below the header. Not everyone needs (or
wants) to use both.
You can just add an empty custom menu into that navigation slot, but that still leaves a
block of space where a menu should be. Rather than leave that obvious space in the
design, let’s remove the navigation bar completely.
You can remove the Primary Navigation with this code:
1
add_action( 'init', 'remove_canvas_main_navigation', 10 );
2
3
function remove_canvas_main_navigation () {
4
// Remove main nav from the woo_header_after hook
5
6
remove_action( 'woo_header_after','woo_nav', 10 );
}
Canvas Remove the Primary Navigation hosted with
by GitHub
view raw
You can remove the Top Navigation with this code:
1
add_action( 'init', 'remove_canvas_top_navigation', 10 );
2
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
3
function remove_canvas_top_navigation () {
// Remove top nav from the woo_top hook
4
remove_action( 'woo_top', 'woo_top_navigation', 10 );
5
6
}
Canvas Remove the Top Navigation hosted with
by GitHub
view raw
13. Adding a Related Posts Area With Thumbnails to a
Post
There are plugins that allow you to create an area after each post with related posts from
your site. Canvas includes a rudimentary ‘related posts’ feature, if you require a simple
solution. To create this area add this code to functions.php:
1
// Start custom_add_related_posts()
2
add_action( 'woo_post_inside_after', 'custom_add_related_posts' );
3
function custom_add_related_posts () {
4
if ( is_single() ) {
5
echo '<h3>You may also like to read:</h3></br>';
6
echo do_shortcode('[related_posts limit="4" image="120"]');
7
}
8
} // End woo_add_related_posts()
Canvas Add Related Posts hosted with
by GitHub
view raw
Then add this code to the Custom CSS Area:
1
.woo-sc-related-posts ul li {
2
list-style: none;
3
width: 100px;
4
float: left;
5
clear: none;
6
margin:0 10px
7
}
8
.woo-sc-related-posts
{ margin-bottom:20px }
Canvas Add Related Post Area CSS hosted with
by GitHub
view raw
14. Create a Search Box in the Primary Navigation Bar
You can easily add a search box to your sidebar in Canvas but doing so takes up valuable
space. Instead, let’s make use of the empty space on the right side of your navigation bar.
Before you add any code to make this change, you need to remove the RSS icon that’s
currently there. Do this by going to Canvas > Theme Options > Style & Layout > Primary
Navigation and unchecking the “Show Subscribe Link” box at the top of the page.
Once the RSS icon is removed, add the following code into functions.php:
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
1
add_action( 'woo_nav_inside', 'custom_nav_searchform', 10 );
2
3
function custom_nav_searchform () {
4
5
echo '<div id="nav-search" class="nav-search fr">' . "
";
6
get_template_part( 'search', 'form' );
7
echo '</div>' . "
8
";
9
}
Canvas Nav Search Box hosted with
by GitHub
view raw
Then add the following code to the Custom CSS area:
1
#nav-search .icon-search {
2
position: absolute;
3
right: 9px;
4
}
5
6
#nav-search {
7
margin-right: 9px;
8
top: 10px;
9
10
}
Canvas Nav Search Box CSS hosted with
by GitHub
view raw
15. Show the Full Post for Single Item Search Results
This is a very subtle tweak but is useful for your readers.
When the search box on your site is used the results are presented as a list of post
excerpts. With this tweak, if there is only one result from that search, the reader will be
taken directly into the post rather than being shown the excerpt.
This cuts down on unnecessary clicks for the reader and makes for a smoother experience.
1
add_action('template_redirect', 'redirect_single_post');
2
function redirect_single_post() {
3
if (is_search()) {
4
global $wp_query;
5
if ($wp_query->post_count == 1 && $wp_query->max_num_pages == 1) {
6
wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
7
exit;
8
}
9
10
}
}
Canvas Single Search Result hosted with
by GitHub
view raw
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
This is Only the Beginning
Using the built in styling options and these hacks is a tremendous first step in making your
site completely unique. We’ve barely scratched the surface of the design hacks available to
make Canvas a theme that is exactly what you want it to be.
With that in mind, if you have your own design hacks for Canvas we’d love to read
about them in the comments, so fire away!
This fantastic guest post was crafted by Tom Ewer.
TIPS AND TRICKS
2 Responses
Sebastien
19 August 2013 at 3:22 pm #
Finally you are providing some form of modification tips to your themes.
Need more of these for all your themes.
e Reply
allmyhoney
19 August 2013 at 3:24 pm #
Canvas is a tremendous theme and even potential framework to be honest.
A major design feature I feel it needs:
1. is some kind of full width slideshow option
2. A shortcode option to allow for full width section dividers down a page like
so: http://www.shopify.com/ as you scroll down the homepage you will see
sections divided by full width lightly coloured sections.
I feel the full width header and footer options were a great step forward and
a full width slider and this section piece I speak of would be the icing on the
cake for canvas
e Reply
Leave a Reply
Name (required)
Mail (will not be published) (required)
Website
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]
How to Create a Unique WordPress Website: 15 Top Hacks for Canvas | WooThemes
submit
Notify me of new posts by email.
WOOTHEMES
PRODUCTS
SUPPORT
WE RECOMMEND
About
Themes
Documentation
Pre-sales FAQ
Blog
Theme Club
Support FAQ
Customer Stories
Team
Plugins
Help Desk
Affiliated Woo
Press
WooCommerce
Videos
Workers
Contact
Extensions
Support Policy
Theme Demo Content
Submit Your Idea
Hosting Solutions
f
T
B
COPYRIGHT WOOTHEMES 2013.
TERMS & CONDITIONS.
Sell Your Extensions
http://www.woothemes.com/...a-unique-wordpress-website-15-top-hacks-for-canvas/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer0a73b&utm_medium=twitter[19/08/2013 15:37:45]