I was having coffee yesterday, and interviewing a lady called Sarah. Now I know Sarah as her kids go to the same school as mine – and she’s a great target Profile for the www.OneSpoonAtATime.com.
Now Sarah’s a talented lady who’s considering starting an online business. In the course of our Interview I wanted to find out what her three biggest barriers were.
The first barrier that she raised was the technological hurdle of setting up and maintaining a professional looking website. In this article I’m going to show her how you can do that using a Content Management System (CMS) called WordPress.
A quick note before we get started – when you set up a website for yourself you should check that the company that you’re going to host that website with has a service called ‘Fantastico’ as part of its package. Fantastico allows you to install WordPress in less than two minutes straight from your website’s control panel.
I’ll cover this more fully in a future article. For today though I’m going to walk through the process using a free blog at www.wordpress.com. If you’ve not set up a blog or a website before I’d recommend setting up a free blog here and having a play around and getting a feel for it.
I’m a big fan of modeling – so I’m going to copy the basic layout of www.OneSpoonAtATime.com. This was modeled on a couple of other websites that I really like.
So let’s get to work on this particular elephant and see how many spoons we can eat him up in?
Spoon 1: Register Free Blog at WordPress.Com
Ok, this is what the page looks like when you first get to WordPress.com.
You want to click on the Orange button that says ‘Sign Up Now.’ This will take you to a screen where you fill in some details…I’m sure you don’t need specific help with choosing usernames and passwords. Here’s what this screen looks like.
When you’ve filled in your details, there’s another nice and helpful orange button that says ‘NEXT’ on it. Click that.
Spoon 2: Name Your Website
On the next screen you get to name your free website. Now for the purposes of this article it doesn’t matter what I call it, as once this has been set up I’m probably never going to actually use it for anything.
But if you’re planning to use this free website for anything you want to name it carefully. As once you’ve named it, you can’t change it.
Here’s what the screen looks like with some information filled in.
Again we’ve got a nice helpful orange button that says ‘Sign Up’ on it. If you click this, your basic website will be created.
Spoon 4: Email Verification
Before you can access your website and start customizing the layout you’ll need to click on a verification link that is sent to the email address that you entered as part of the set up process.
When you click on the link you’ll open a new screen that says: Your Account Is Now Active. Like this:
Now log in, and we can really get going!
Spoon 5 – Using The Dashboard – Creating Our Basic Layout
Once you’ve logged in to your new website you’ll land on this screen, which is known as The Dashboard.
When you work in WordPress, the Dashboard is the work space where you create both the structure of your website and the content for it.
Now the layout that we’re modeling today is the website that you’re on. If you are not familiar with the site have a click around and explore the different pages. Take particular notice of the two different styles of pages.
If you click on the ‘Blog’ tab in the header bar, you get what’s called a ‘two column’ layout. And if you click on any of the other tabs in the header bar (e.g. About, or Contact, or Home) you’ll find a different layout. This layout is a ‘one column’ layout.
There’s another crucial difference that characterizes these two different layouts too. The ‘two column’ layout is what WordPress calls a Post. And the ‘one column’ layout is what WordPress calls a Page.
Without going into too much detail at this stage here’s the difference between a Page and a Post. Although we are using WordPress to build a website, the WordPress software is actually blogging software. And when you create a new entry into a blog you create a ‘post.’ The latest post is always displayed at the top of the blog entries, and older posts get pushed further down the screen. (Click on the ‘blog’ button above and you’ll see what I mean).
A Page on the other hand is a more like a traditional, static web site page. Once you’ve created it, that’s it. It doesn’t change unless you edit the content. Newer pages don’t supplant it in the way that blog posts do. They are static pages in their own right.
So let’s create our layout using the dashboard.
The first thing to do is to create a ‘Page’ that duplicates each of the headings in the horizontal navigation bar of the One Spoon website. Those categories are: Home, Products, Blog, Resources, Contact, About and Subscribe.
So look down the left hand side of the Dashboard, and follow down until you see the word ‘Pages.’ Then click that, and the ‘Pages’ menu should appear.
You’ll see that there’s already an ‘About’ Page created as standard. So that’s one less to do. Now go and create the other 6 pages we need. You do this by entering the title of the Page into the blank text box below ‘Add New Page’ and then clicking publish.
(Note: each time you click Publish, you’ll return to the ‘Pages’ dialogue again and have to click ‘Add New Page’ again.)
That’s all I want you to do for this step. When you’ve done the remaining 6 pages click on the ‘Pages’ link and you should see something like this:
If you hover your mouse pointer over one of those pages, a sub-menu for that page will appear that says: Edit | Quick Edit | Trash | View
Click on ‘View’ and you should see something like this:
Spoon 6 – Tweaking The Layout
Now that last screenshot looked vaguely like the One Spoon layout. But there’s some important tweaking that we need to do to replicate the One Spoon layout.
The first tweak that we’re going to do is to re-order the different pages that we created. To do that we go back to the dashboard (clicking the back button on your browser will do this) and then we edit the Pages.
The first ‘Page’ we want to appear on the horizontal navigation bar is the ‘Home’ Page. So hover your mouse around that and you’ll see the ‘Edit | Quick Edit | Trash | View’ menu appear again. Click on edit.
On the Right Hand Side you should see a series of elements that you can edit under the title of Page Attributes. To change the order of the pages in the Nave Bar we need to go to the ‘order’ element. The Home Page wants to be ‘0’ – so you can leave it at that.
But go to the other pages one by one, and change the order number as the list below:
Home – 1
Product – 2
Blog – 3
Resources – 4
Contact – 5
About – 6
Subscribe – 7
Each time you change the Order of a Page by entering a number, don’t forget to click the blue ‘Update’ button that tells WordPress to save your changes.
When you’ve entered the order numbers, click on view a page and you should see something like this:
(You’ll notice there are suddenly TWO ‘Home’ pages. Don’t worry that will be fixed very shortly…)
Spoon 7 – More Layout Tweaks
OK, we’re going to go back to our Dashboard – and specifically our Page Edit section – and we’re going to make some further layout changes.
What we’re going to do is to make the ‘static’ pages a One Column layout. And we’re going to make the Blog page have the two-column layout.
Here’s how you do it. Go to the first of your static pages and click on edit it – then click on the dropdown box under ‘Template’ in the page attribute setting, and change it from Default to ‘One Column No Sidebar.’
Do that for all the ‘static’ pages. But leave the ‘Blog’ page as it is – it should be set to Default under the ‘Template’ page attribute. Don’t forget to click on the ‘Update’ button each time you make a change. When you’re done, the Home Page should look like this:
Spoon 8 – Changing the Default Location Where Blog Posts Go
The default location WordPress uses for where your blog posts go is the Home Page. We’ll talk about the strategy of whether you should have blog posts on your home page, or a static page in a later article – for now, we’re following the model of the One Spoon website. And the blog posts appear on the ‘blog’ page.
If you click on ‘Settings’ on the left hand side of the dashboard (it’s near the bottom), this sub menu will appear:
Click on the ‘Reading’ menu and we’ll get to another screen where we can alter the location of where the website puts posts.
What you want to do is click the second radio button – that says ‘static posts’ and then select ‘Home’ for the front page, and ‘Blog’ for the ‘Posts’ page. Like this:
Now scroll down to the bottom and press ‘Save Changes.’
If you now go to the ‘Blog’ page via the Pages Menu, and click on View, you should see something like this:
Notice that the ‘duplicate’ Home Page in the navigation tab has now disappeared.
Spoon 9 – Adding a ‘Header’ Graphic
Although WordPress has chosen a lovely flower graphic for us – it doesn’t fit with what we’re trying to achieve. But it’s a pretty simple job to change that.
Clicking on ‘Appearance’ on the left hand side of the Dashboard gives us sub-menu options. Click on ‘Header.’
You’ve now got the choice of choosing one of the standard headers provided with the Theme. Or you can upload your own. (Note, if you’re making your own or having it made for you, it should be 940 x 198 pixels.
I’ve obviously got my ‘One Spoon’ graphic. So I’ll upload that. And now if I give you a screenshot of what we’ve got, it looks pretty similar to the One Spoon website:
Spoon 10 – Adding Content
The basic layout is now complete and all that’s left is to add some content to the static pages, and some blog posts to the blog section of the website.
I’ll cover that in the next article.
Now although this is quite a long post, if you follow the steps outlined in this article you’ll be able to create a basic but professional looking website layout in anywhere from 10 to 30 minutes depending on your degree of computer familiarity.
This basic version of WordPress that we’ve used to create this test site is very similar to the version you’ll use if you get a properly hosted site, e.g. at Hostgator or somewhere like that. So it’s worth experimenting and getting used to the interface, and putting content on pages.
And we’ll do that in the next article.