How to Setup Your Authority Blog With the WordPress Canvas Theme

Many would-be bloggers are intimidated into inaction by the perception that creating and running a blog is too technically challenging. If you count yourself amongst that group then this post is for you.

In reality,the fact that you are currently reading this almost certainly qualifies you to create a website. You need little more than a basic level of computer literacy in order to learn what is necessary to create and maintain your very own blog. Gone are the days when you needed to get your hands dirty with code such as HTML and CSS in order to create your own corner on the web — although such skills are certainly still useful in many applications, they are no longer a necessity.

When it comes to creating a blog,all you need isa good ideaand a few hours of your time(or even less) to get up and running. Furthermore, with an enormous selection of highly customizable theme frameworks to choose from, you can create a professional-looking website in short time with relative ease. The next three posts in this series on creating a successful authority blog will focus on the nuts and bolts of creating your very own blog, and this post will focus specifically on how to create a unique design for your website. Let’s get started!

Why WordPress?

Going back around fifteen years, I used to create websites by manually coding them in Microsoft Notepad and uploading each HTML page via FTP. It wasn’t easy. But fast forward to 2013 and creating your own website can be no more complicated a process than using a word processor.

For your website we are going to use the world’s most popular Content Management System: WordPress. More specifically, we are going to use self-hosted WordPress.

But before we go any further lets address the elementary questions. First of all, what is a Content Management System (or CMS)? Wikipedia defines it as follows:

A computer program that allows publishing, editing and modifying content as well as maintenance from a central interface.

Put simply, it is to designing websites what Microsoft Word is to creating documents. It creates a framework from which you can launch a website with the click of a button. Furthermore, it easily allows you to drastically alter and improve upon both the design and functionality of your website with ease. In short, it’s awesome and is (in my humble opinion) by far the best option for our purposes.

But why use self-hosted WordPress in place of its counterpart, WordPress.com? Well, it is not within the scope of this article to go into detail on that front, especially when so many articles have been written on the topic before. Here is my favorite on the topic if you want to educate yourself. One of the main advantages to self hosting is it enables you to customize your WordPress setup extensively. Take it from me — self-hosted WordPress is the right option for creating an authority blog.

If you need direction on how to purchase a domain name, hosting, and setup WordPress, watch this video in which I show you how to do it in just a few minutes. It’s a piece of cake.

Why Canvas?

When you install WordPress it comes packaged with a few free default themes such asTwenty Twelve. While youcanstart blogging straight away with one of these themes,installing a premium theme can make all the difference in providing a more unique and pleasing experience for visitors to your site. It doesn’t have to break the bank either — the theme I am going to recommend to you costs just $60 and offers stunning design and flexibility.

I am talking about theCanvas framework,which I consider to be the best premium theme framework available for WordPress. I’m not just paying it lip service either — I use Canvas for authority blogs I own; most notably Leaving Work Behind:

You canpurchase Canvas directly from Themeforest.It comes packaged with complete installation instructions — not that you’re likely to need much help on that front; the installation process is very straightforward. What I want to focus on in this tutorial is how to shape and mold Canvas to create a unique-looking design for your own authority blog.

To give you an idea of the diversity of design you can create with Canvas, here are two versions of the same basic website:

The exact same website, different settings within Canvas. You can use this theme to create just about anything.

This tutorial is split up into five sections, of which each will show you how to make major alterations to the Canvas framework with relative ease. Each section is standalone and does not rely upon the others, so feel free to approach the customization of your authority site in whatever way you see fit.

While there is an enormous amount you can do in terms of customization within the Canvas theme framework, in this tutorial we are focusing on a relatively small list of high-impact actions you can take to create a truly unique theme.

1. The Layout

One of the most noticeable changes you can make to your site is to its layout. In this section we will alter the width of your site as well as the general structure.

Step 1

Navigate to Canvas > Theme Options > Styling & Layout from your WordPress sidebar. Use the slider to change the width of your website (including any sidebars).

Note that the maximum recommended width is 1,600px — if you go beyond this your site is likely to extend beyond the width of many visitors’ screens and is not recommended.

As a rule of thumb allow ~600px for your content column and an additional ~300px for any columns. Even if your site has two columns, there’s no reason for your site’s width to extend beyond ~1,200px.

Step 2

In the same screen, select your site’s main layout.

You have a total of six options. The first is a zero column layout (similar to the Signal vs. Noise blog), and the rest are a selection of varying sidebar options.

The most popular blog layout is a single main column display with a sidebar column, typically with the sidebar place to the right of the main content. As you can see from the above screenshot, that layout is selected by default. If you want to go with something more unique, choose a different columns layout, or be even bolder and go with a zero column layout.

Step 3

In the same screen, select your site’s footer widget areas.

Footer widgets will be displayed below your content and extended across the full width of your site (including columns). They are “widgetized areas”, which means that you can drag and drop pre-made “widgets” (such as a search box, recent posts, popular posts, etc.) into them.

You can have as many as four footer widgets on your site, or none at all.

2. Logo and Background

Incorporating your own logo and a custom background color or image can immediately make a theme your own. Fortunately, with the Canvas theme, doing so is easy.

If you’re graphically challenged (like me), there are loads of options in terms of logo designs that suit every budget. Two places to find freelance logo designers are theFreelanceSwitch Job Boardand Envato’s new siteMicrolancer.

Step 1

Navigate toCanvas > Theme Options > Quick Start from your WordPress sidebar. Click on theUpload button under theCustom Logo section to upload a logo.

Step 2

Navigate toCanvas > Theme Options > General Stylingfrom your WordPress sidebar. Pick a background color using the color selector.

Your site does notneed to have a background color, although having one is an easy way to set your site apart from others.

Step 3

In the same screen, click on theUploadbutton under theBackground Imagesection to upload a background image. Then use theBackground Image Repeat,Background Image Position andBackground Attachment options to ensure that your background image is presented in the correct fashion.

3. General Styling

Along with typography, this is the area in which you can have arguably the greatest impact. Canvas’s extensive customization options enable you to completely change the way your site looks — from the navigation bar to the sidebar and footer widgets.

In following the steps below you will come across various options relating to typography. You are welcome to experiment with them at this stage but they will be covered in the fourth and final step of this tutorial.

Step 1

Navigate toCanvas > Theme Options > Primary Navigationfrom your WordPress sidebar. You will be presented with a number of options, including (but not limited to):

Although the sheer number of options may seem overwhelming, each is self-explanatory.

Start by altering the colors. Use the color selectors to define aBackground Color,Hover Text Color,Hover Background Color,Current Item Text ColorandCurrent Item Background Color. Note that the colors you pick will have to be complimentary to each other — there is little use in making both your background color and hover text color blue (as the text will disappear when moused over).

Then edit the navigation borders. Define border widths and colors for theDivider,Dropdown Menu Border, Border Top, Border BottomandBorder Left/Right. Finally, if you would like your navigation bar to have rounded corners, select a pixel amount in theNavigation Rounded Corners drop down box.

Step 2

Navigate toCanvas > Theme Options > Widgetsfrom your WordPress sidebar. You will be presented with a set of options similar to that in the Primary Navigation screen, including (but not limited to):

There is only one main color to alter and that is the Widget Background Color. You can drastically change the look of your site’s widgets by altering theWidget Border, Widget PaddingandWidget Title Bottom Border. Finally, I recommend that you setWidget Rounded Corners to the same value that you setNavigation Rounded Corners in the previous step in order to demonstrate continuity of design.

Step 3

Navigate toCanvas > Theme Options > Footerfrom your WordPress sidebar. You will be presented with a nearly identical set of options compared to those found within theWidgets screen, including (but not limited to):

I recommend that you set these options in a manner that is congruent with the widget settings.Set theFooter Background along withFooter Border Top,Footer Border Bottom,Footer Border Left/Right andFooter Rounded Corners.

4. Typography

For the purposes of this tutorial, typography refers to the font, color and styling of all text on your site — from the Primary Navigation to the post meta. Due to the structure of the Canvas customization options, the typographical settings are scattered throughout various screens. Each of the following steps will show you how to change the typography for each distinct section of your website.

Step 1

Navigate toCanvas > Theme Options > Primary Navigationfrom your WordPress sidebar and select aNavigation Font Style.

Step 2

NavigatetoCanvas > Theme Options > Posts / Pagesfrom your WordPress sidebar.You will be presented with a number of options, including (but not limited to):

The most important settings to change are Post/Page Title Font StyleandPost/Page Text Font Style. These will have the most dramatic effect in terms of creating a unique page design.

Step 3

Navigate toCanvas > Theme Options > General Stylingfrom your WordPress sidebar. Use the color selectors to define theLink Color andLink Hover Color.

Step 4

Navigate toCanvas > Theme Options > Widgetsfrom your WordPress sidebar.

Change theWidget Title andWidget Text.

Step 5

Navigate toCanvas > Theme Options > Footerfrom your WordPress sidebar and changeFooter Font Style.

What Next?

By now you should have a truly unique-looking website, but your journey to creating a successful authority blog is far from over.

In the next two posts in this series I will focus on what you can do to make your site more interesting and dynamic for visitors — both in terms of its functionality and structure. After that, we will move onto the real nitty-gritty by focusing on creating and promoting great content.

In the meantime, if you have any questions or comments please do not hesitate to get in touch via the comments sectionbelow. Good luck!