HostGator Web Hosting

Canvas Magazine Page Template and Magazine Image Slider Setup

We’ve made it to part 3 in our series on how to build a professional magazine style site with WordPress and the Canvas theme.  WooThemes is the creator of Canvas and to date, it’s their most flexible and easy to customize theme.  Our focus in this tutorial series is on the Canvas Magazine template functionality which we’ll continue to build on. It’s also important to note that the Canvas theme has the ability to function as a business style site, a portfolio style site, a straight up blog style site or a mix of all of them.  Towards the conclusion of this Canvas theme tutorial series, we’ll touch on the Business and Portfolio templates so stay tuned for that.Canvas Theme Magazine Image Slider

The focus of this tutorial is on setting up the Canvas Magazine template and the magazine featured image slider.  In the first video below we’ll show you how to create the magazine page template and set it up so that it acts as the home page of your site.  In the second video we’ll show you how to configure the general settings of the magazine template.  Finally, in the third tutorial video we’ll show you how to setup the Canvas Magazine image slider.

Creating the Canvas Theme Magazine Page Template

Follow the steps below to begin the process of transforming Canvas into a magazines style site…

In the WordPress admin go to Pages > Add New > give the page a title of “Magazine” > scroll down the page to the Page Attributes widget on the right-hand-side of the page and in the “Template” drop-down select “Magazine” > Publish the page

Now that you’ve created the Magazine template page the next step is to update your “Reading Settings” so that the Magazine page is set as your Home page…

To set the Magazine template as the sites Home page go to Settings > Reading > change the “Front page displays” settings to “A static page” and in the Front page drop-down select Magazine > Save Changes

The Home page of your site should now be the Magazine template.  The video below will demonstrate this process in more detail…

 Configuring the Canvas Theme Magazine Template Settings

The home page layout of your site is now set to the magazine template but we still have work to do.  Specifically, we need to decide on the overall number of posts to display on the home page.  We also need to decide on the number of feature posts to display on the home page.  Follow the steps below to configure the magazine template…

In your WordPress admin g0 to Canvas > Theme Options > Magazine Template > Magazine Setup > Set “Number of Posts to Display” to 6 > Save All Changes

Next go to Featured Posts and set the number of Featured Posts to 4 > Save All Changes

Through trial and error, we’ve found that six overall home page posts and four featured posts is a good starting place.  However, please keep in mind that you’ll have the ability to change the “Number of Posts to Display” and the “Number of Featured Posts” at any time as your site grows.  The video below demonstrates just how easy it is to configure the Canvas Magazine template…

Canvas Magazine Featured Image Slider Setup

It’s now time to setup the Canvas magazine featured image slider.  In the WordPress admin we need to first upload our initial featured image slides to their individual posts.  After the slides have been uploaded to each post we need to connect them / link them to the magazine Post Slider via the use of “Post Tags”.  Follow the steps below to enable the magazine featured image slider…

In the WordPress admin go to Posts > go to the post that you want to upload your first featured slide to and click Edit > scroll down to the Canvas Custom Settings section and click Upload > Use this image > Update Post > repeat this process for each of your featured image posts

Now that the featured image slides have been uploaded to their respective posts, it’s time to tie them together with the Canvas magazine image slider…

Go to Canvas > Theme Options > Magazine Template > Post Slider > check the “Enable Featured Slider” check-box > paste in the Tags used for each post that you uploaded a featured slide to separating each with a comma > set the “Number of Posts to Display” via the drop-down > click Save All Changes

The Canvas magazine image slider should now display on the home page of your site.  You have the ability to tweak the functionality of the image slider by updating the “Slider Settings” as shown in the tutorial video below.  Spend some time playing around with the slider settings until you find what works best for your Canvas theme site.

Canvas Magazine Template Post Image Slider Notes:

  • Post Tags are the key… Post Tags are what tie the featured image slides to the actual Post slider.  Post Tags make the magazine image slider show up on the site.
  • Recommended Canvas Magazine Image Slider image slide dimensions: 620 x 320
  • You can have up to 19 featured image slides
  • If you don’t have Photoshop then I recommend using Gimp to create your featured slides.  Gimp is an open source (free) image edition program that functions much like Photoshop.  Simply Google “Gimp” to download it.

HostGator Web Hosting

21 COMMENTS

    • Hi Sarah – Yes, you can use the Canvas them Magazine template on any page of your site. Just create a page and set the page template to Magazine. Thanks for your question and please let us know if you have any additional Canvas or WordPress questions.

      Adam

    • Hi Jan – Thanks for the complements on our Canvas theme tutorial. You’ll find the “Slides” option in the WordPress admin on the left hand side of the screen just above “Portfolio” as shown in the screen capture below…

      Canvas theme Slides Settings in WP admin

      Canvas image slider settings

      Please let me know if this helps answer your question. Thanks,

      Adam

  1. Thanks this did help me. One question though is how would I go about keeping the homepage magazine without it showing the new page I created on the navigation bar?

  2. Urghhh Im having a mare here. I just bought the Canvas Wootheme and want a static website. I have set up the Magazine template but I dont get the homepage. My homepage is http://www.mywebsite.com and on that page now I have this: Sorry, no posts matched your criteria.

    I dont want posts on the homepage at all. Also, I added a new page and called it “home”, added it to my top nav but couldnt find a way to get in tehre and edit it. It also had “Home” at the top of the page which I obviously dont want. Can you help please?

    • Hi Kris,

      Did you change your Reading settings to set the new homepage to “Home” and the posts page to “Blog”? Please take another look at your Reading settings to make sure they are set up correct. If they are and you’re still having problems with it please let me know and I will take a closer look at your site. Thanks,

      Adam

  3. Teddy,
    Your Web site has been most helpful. I know next to nothing about designing my blog and wonder if you, or anyone else, have any useful suggestions about setting up Wootheme’s Delicious Magazine. Would much appreciate any advice.
    Thankxczs.
    Lamont & Sharon

    • Hi Lamont,

      Thanks for letting us know that our WordPress tutorials have been helpful. I’ve unfortunately not yet had a chance to do any work with WooThemes Delicious Magazine theme. I’ll go ahead and publish your comment and if anyone else out there knows where to find good tutorials on the Delicious Magazine theme please let us know. Thanks

  4. Hi,

    I have given Slider Height as 500 in Posts slider settings but still images in magazine slider are taking height as “auto”.(I have disabled auto height option from slider settings).Please let me know your thoughts.

    Thanks & regards,
    Sowmya

  5. Your tutorial helps me a lot. Thank you very much!
    One more question I have is to set up the slide column like this http://demo.woothemes.com/canvas/ I would like to have the subscribe tools look like this one and put the popular posts, latest posts, comments, and tags in the tab format. Do I need to install plugins for these two features?

  6. Teddy,

    I followed you tutorial already. but still the image wasn't show yet on my site.
    I want to make my site like you site example.
    can you help me fix the problem?

  7. Hi I learned so much since reading your blog. Thank you. I like the size of the image slider in the magazine template but want static content below it. I know you can have static content below the business slider (which is what I want) but don't like the image slider width that the business template has. Is there away to do this? Thank You

    • Thanks for the positive feedback and I’m happy to hear Upload WP has helped you Andy. As far as I know, there is not an easy way to adjust the width of the Business template image slider. However, I would encourage you to go to my forums / the Upload WP Forums as there are many people there much smarter than me that will most likely be able to give you the CSS you need to adjust it.

  8. I configured the landing page in Magazine Template and it is working fine on laptops, but on smart phones, it open a Magazine Page. One has click on View Full Size at the bottom of the page. There are few people got that. How do I do it to make it exactly as it is on laptops. My second question is about the Grids in Magazine, there are large spaces when there is no Excerpt in the post. Is there any css code or plugin that push up to fill the empty spaces with the next post?

  9. Hi Thanks for making these videos! Keep trying to get this but I’m not understanding something… I get three dots on the home page where the magazine slider is supposed to see and a message that says there are no posts that I am looking for.Do you have any idea what I am doing incorrectly? Thanks

  10. On mobile devices, one lands on Welcome page which is part of the setup for Magazine template of the Canvas theme. On laptops and others it is the Home page. One has to click on View Full Size at the end of the page on Mobile devices to get to the Home page. But I want them to land on the page without clicking on View Full Size. Any one has the same problem?

  11. Hi Teddy, very interesting tutorials and information. I have set the Canvas Reading page settings to: Front page to Magazine and Posts page to Blog. Now Home, Magazine, and Blog show exactly the same posts (blogs). Nothing shows my magazine template pages. I know I must have something set incorrectly but can’t work out what. Any suggestions?
    Cheers,
    Wendy

LEAVE A REPLY