Save $200 and book your WooConf ticket before June 30th!

WooConf takes place October 19-20 in Seattle, Washington.

How to Create a Unique WordPress Website: 15 Top Hacks for Canvas

Written by Mark Forrester on August 19, 2013 Blog.

canvas-design-hacks

It’s a common story.

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.

canvas-optionsThen 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.

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.

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.

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.

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.

If you find that this introduces a sideways scroll on your page use this css instead:

This is not a one size fits all approach as depending on the number of items in your menu and the space it takes you should adjust the 87% accordingly.

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.

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 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.

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.

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.

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.

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.

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:

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

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:

You can remove the Top Navigation with this code:

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:

Then add this code to the Custom CSS Area:

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:

Then add the following code to the Custom CSS area:

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.

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.

43 Responses

  1. Sebastien
    August 19, 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. 🙂

    • Matty Cohen
      August 19, 2013 at 3:41 pm #

      Thanks Sebastien.

      For further customisation tips, there are plenty listed (for all of our themes) in our Community Forum. 🙂

  2. allmyhoney
    August 19, 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 😉

    • Jon
      August 19, 2013 at 4:44 pm #

      +1 to point 2!

      I really wish there was an easy way to do this with canvas. If you add it to the woodieas board put a link and I’ll add 3 votes to it.

      Or if anyone has a tutorial on how to do this please share.

    • Dale Wright
      August 19, 2013 at 5:36 pm #

      Thanks for sharing Tom.

      @allmyhoney – A full width slider for Canvas has been on my wish list for a while now. Please vote it up here: http://ideas.woocommerce.com/forums/72423-general-ideas-/suggestions/3623520-option-for-full-width-slider-in-canvas

      @magnus – You recently hinted that your working on an update for Canvas. Anything you can share?

      • Matty Cohen
        August 19, 2013 at 5:59 pm #

        We’re definitely exploring it. No ETA as yet. 🙂

        • dalewright
          August 19, 2013 at 8:10 pm #

          Cheers Matty! Looking forward to it as I use Canvas for all projects 🙂

          • thomas-krueger
            August 21, 2013 at 11:18 am #

            A slider that loads images via a xml file would be fine.

    • webjump
      August 19, 2013 at 9:38 pm #

      1. DITTO
      2. DITTO

      CANVAS ROCKS!

    • sk
      August 20, 2013 at 1:28 am #

      Fully agree with @allmyhoney, this would be great for canvas!

      I have experimented with a few different ways to do these and combined ACF with Canvas to make it happen on a recent project: http://petersongroup.com.au/

      • webjump
        August 20, 2013 at 6:17 pm #

        LOVE THE SITE, SK.

        You should do a tutorial – PLEAAAASE!!

        • renegadesk
          September 16, 2013 at 6:06 am #

          Cheers webjump! Definitely keen to do a tut, will put something together on my site when I re-do my blog so keep an eye out! http://www.renegade-empire.com/

    • Bradley Charbonneau
      August 20, 2013 at 7:48 pm #

      Great points, allmyhoney.

      1.) I couldn’t figure out how to use the Canvas slider but I have “a” slider working full-width in Canvas.

      2.) +1 Pretty please!

  3. dotp
    August 19, 2013 at 3:33 pm #

    And don’t forget to test all your customizations on mobile devices since Canvas is responsive. Even the simplest Canvas mod can create issues on mobile devices.

    • Katie
      August 28, 2013 at 4:44 am #

      Yes you are right. I added number 4, Center the Navigation Menu, and it messed with the mobile versions. So I took it out.

      • chrisivester
        October 16, 2013 at 7:11 am #

        If you add the Center Nav code to this media query instead of the “global styles” section in custom.css it clears up the issues with mobile version:

        @media only screen and (min-width: 767px) {
        /* Desktop styles go below this line */
        }

  4. uddhava
    August 19, 2013 at 6:05 pm #

    I was wondering if these wonderful snippets will be included in the Docs area ? Or are they already there ?

  5. webjump
    August 19, 2013 at 9:44 pm #

    Woo Canvas is simply light years ahead of the pack, yet lacks some features as requested by allmyhoney.

    Canvas’ framework lets you do your job fast, and this needs to be capitalised upon. PLEASE start to build Child Themes, add more how to videos and docs to help us build better Canvas products.

    Canvas can help us all build something extraordinary – without compromise, so help us, help you make it shine.

  6. Conor
    August 20, 2013 at 12:17 am #

    13. Adding a Related Posts Area With Thumbnails to a Post

    Is there anyway to do this with the Mystile theme? I hate using 3rd party plugins if I don’t have to.

    Thanks!

  7. Mark
    August 20, 2013 at 3:16 am #

    Yeah, these are great. How long until this URL turns 404 like all your other pages I’ve bookmarked over the past year?

    Here are a couple more, for anyone interested.

    http://www.pootlepress.co.uk/2013/06/65-tips-tricks-and-css-tweaks-for-woothemes-canvas/

  8. allmyhoney
    August 20, 2013 at 4:33 pm #

    I need a hack to place a normal shortcode button on a page that does the follow: When the button is clicked a product is added to the cart and user taken to the cart. Like this shortcode [add_to_cart id="99"] but a normal button shortcode link that would do the job the same? Any ideas 😉

  9. Bradley Charbonneau
    August 20, 2013 at 7:42 pm #

    You had me at “Move the Top Navigation.” 🙂

    I’ve been adding some more Canvas CSS Tweaks but decided not to limit myself to a number and see how many I can build up. I have some duplicates to what you have above, but hopefully some new ones to help out other WOO fans. I’ll keep adding to it.

    Lost of WOO Canvas Tweaks.

    Keep ’em coming! Thanks WOO!

  10. aronwp
    August 21, 2013 at 7:57 am #

    Very nice list, most of these where already in my text expander snippets. This is the type of stuff that should be shared with woo members all the time.

    BTW SPOILER ALERT!!! new theme coming thursday called SHOWOFF

    (i seen it in my subscription downloads for a few minutes so just a guess but I would bet the farm on it)

    • Ryan Ray
      August 22, 2013 at 5:53 am #

      Cleaned up your duplicates. 😉

  11. Ronald de Caluwé
    August 21, 2013 at 9:24 am #

    Thx for these nice and usefull tips! I hope the first of a series…
    😉

    Cheers!

  12. Toby
    August 21, 2013 at 6:18 pm #

    Hi, Canvas looks like another great theme from Woo. I love the idea of using Google webfonts – this adds more choice, which is needed when it comes to blogs – especially seeing as not everyone is comfortable messing around with code.

    Q: Just out of interest, can you please tell me what font this page uses for its body text?
    … and is it one of the G Fonts available with Woo Themes – Canvas?

    Thanks for reading 🙂

  13. Johny
    August 21, 2013 at 9:06 pm #

    Awesome Woo! I have one question: How to change blog post images to circles?

  14. tylerdurden
    August 22, 2013 at 9:19 pm #

    A hack. That’s exactly what wordpress is.

    • Ryan Ray
      August 29, 2013 at 6:22 am #

      Mysterious comment, that’s exactly what this is…

  15. Alex Kuznetsof
    August 23, 2013 at 11:23 pm #

    It would be nice to have a canvas club so all devs like me, who makes small business sites on canvas could share child themes and save some time 🙂

  16. dgpromo
    August 25, 2013 at 7:02 pm #

    Really usefull ! A very BIIIIIIG thanks 😉

  17. Meg
    August 28, 2013 at 4:21 pm #

    I could not get #2 to work in Safari … is there a trick to it? I ended up doing something much more complicated …

    • Ryan Ray
      August 28, 2013 at 5:25 pm #

      It’s only broken in Safari? Strange, no cache or anything on the site at the moment when testing it between browsers? 🙂

  18. dafman
    August 28, 2013 at 9:04 pm #

    What is the best way to remove responsiveness of the theme. I know there is handy switch somewhere in the settings, but on other themes there is not. I wonder what changes the switch makes to the code and script.

  19. EmmaD
    August 29, 2013 at 1:06 pm #

    Re number 12 – I’ve tried this and nothing changes for either the primary or top navigation. Is this code definitely meant to go in the custom CSS box?

    • gnarlymedia
      September 20, 2013 at 12:17 pm #

      Hi EmmaD, for number 12 that code should go in a functions.php file in your theme folder. The best way to do this is to create a child theme (if you’re not sure how to do this Google will help you) and put just that code in a functions.php file in your child’s theme folder.

      On that note, I tried this for my primary nav and it works a treat (because I am moving my nav to the top nav position) but it also removes all the nav from the mobile nav (when the site is viewed in a narrow browser) – has anyone discovered a way to prevent it affecting the mobile nav?

      Thanks
      Simon

  20. 46digital
    September 2, 2013 at 5:48 am #

    Number 4 adds horizontal scroll to my layout (adds spacing to right of screen) when I have several menu items (nav items don’t exceed the width of the layout at 960px yet scroll/spacing to right still appears).

  21. Knuth Becker
    September 2, 2013 at 6:14 pm #

    I inserted the code for removing border from image into custom.css. But no change at the imageborder :(. What am i doing wrong?

  22. andykinsey
    September 5, 2013 at 5:42 pm #

    some great hacks, when i get some time i will write up a few i found too!

    The one thing I would say is the using display:none for titles , depending on if they are heading 1 2 etc, can have effects on search rankings in a bad way – a better way would be to remove it from the template file itself or (if memory serves) you can add a custom function to find page-title on pages and remove it from the code – but that maybe a little advanced

  23. dearlc
    September 6, 2013 at 3:59 am #

    I’m looking for a custom.css option to move the “cart-contents” icon and info out of the navigation and into the header area. I’d also like to add a login/account link there as well as social media icons.

  24. Sandi
    September 14, 2013 at 7:41 pm #

    I implemented #14 and it has spit into two rows. Gow do I shrink the size of the search box? And how do I change the color of the “search for” text? Lastly, can I see what people input into that window? Thank you!

  25. Lori
    September 30, 2013 at 5:28 pm #

    Where do I place the code for #15?

WooCommerce - the most customizable eCommerce platform for building your online business.

%d bloggers like this: