One of the powerful things you can do with WordPress is add pages. This turns your WordPress site in to more than just a blog – in fact many people use WordPress to create their whole web site with the blog just a section of that (just like the Design Studies site in fact).
In this tutorial I’ll show you what the difference is between a page and a post, how to add pages and how to create a "hierarchy". I’ll also explain how important it is to plan your site on paper first.
Planning your site
Websites can get complicated very easily, and if you start to add more and more pages, you’ll find it difficult to keep track of what goes where. To prevent confusion, you need to start with a piece of paper and a pen, and sketch out a plan of your site.
I’m using a program called OmniGraffle for the Mac, but you can use post-it notes, postcards, or just a sheet of paper – there’s no right way to do this, so long as it works.
Here I’ve added sections for "About me" and "Portfolio" and then further divided them in to sub sections. You might not want to get too sub-divided: the "About me" page could just be one page rather than two. But it’s probably a good idea to divide your portfolio in to different areas if that’s more logical to people you’re trying to attract to your site. For example, if you’re a jeweller, you might want to place experimental pieces separately from more commercial designs, or large-scale pieces separately from smaller pieces. Rings on one page, brooches on another? It’s up to you – but this is why you should plan it out first before you start designing your site for real, as it’s easier to change your mind now than later. (Using post-its or cards is useful if you’re going to be moving things around a lot, and getting outside opinion can be useful too).
Note that there is a bit of technical jargon involved here. A page underneath another page is a "child", while the page it is under is its "parent". Pages on the same level are "siblings" (as in brother or sister). It’s similar to a family tree. You’ll see why this is important later!
The Pages dashboard
Go to your blog’s dashboard, expand the "Pages" section and click on the "Pages" sub menu. This will bring up the Pages panel.
The Pages panel
The pages panel lists all the different pages you have in your site
At the moment you probably only have one, but this is a bit misleading, so let’s try to explain how a WordPress blog works.
Pages, blogs and WordPress
WordPress is what is known as a "content management system" or CMS. Most people only really use it for blogging but it also has the ability to present "static pages" – what you and I normally know as web pages with content that, once uploaded, doesn’t really change much. A blog is a database of short entries that might contain text, images, video and so on.
It might help to imagine that your WordPress site is a web site with two pages, your actual blog and the "About" page. Your site’s default home page, the one that visitors go to when they type in your URL, is your blog. You can change this if you want. The Design Studies site has a static home page, and you get to the blog via a menu at the top of the page.
So although the Pages panel only lists one page, it helps to imagine that you’ve got two: Blog, and About.
We’re going to add some more pages.
Create a new page
Click on the "Add New" button to create a new page.
This brings up the blank page template. Before we go any further we need to check our diagram.
Entering text and images
Our site diagram says we need three "top level" pages (ignoring "Home" for now – that’s currently the blog). We’ve already got two of them – About and Blog. So we need to add our Portfolio page.
So I’ve given it a title (very important) and added some basic text. For now, I’m just keeping it very basic and will come back later to complete it. All I need at the moment is a bit of intro text so I remember what this page is for, and to repeat the names of the sub-pages as I’ll add links to those once I’ve created them.
Once you’re happy with your page, click "Publish".
Check your page is listed
Return to the pages panel and you should see your new page is listed. Now we look at our diagram and see that we need to add a new "sub-page" under Portfolio.
Creating a sub-page
The first stage is simply to create a new page. Again, give it a title and add some placeholder text. Then take a look at the "Page Attributes" section of the panel, on the right.
Click on the drop-down menu under "Parent" and you’ll see a list of your existing pages. We want this page to go under "Portfolio" so select this as the parent page. "Editorial Design" becomes a child of "Portfolio" (check the diagram again to make sure you understand this).
Now take a look at the number under the panel. This lists the order of the pages under the parent. If you’re not bothered what order they come in, leave it zero, but some sites will have menus that list pages and you may want them to appear in a particular order. For example, hover your mouse over Course Notes on the Design Studies site, then move down to "Semester 1 Handbook". See how all the child pages area listed in the right order? That’s because I numbered them when I created them. For things like this, it’s important to get the order right, so when you do your diagram, write numbers on your children!
Click "Publish" when you’re done, and go back to the Pages panel.
Checking your hierarchy
You should now see a pages list similar to this, with Editorial Design underneath Portfolio and inset (or "nested") by one level, indicated by the single dash. Pages can be nested several levels if you want, but it’s a good idea to try to keep everything simple.
Now add the rest of the pages as in the diagram.
Correcting a misplaced page
Here’s my finished site hierarchy but notice that CV is out of place. It should be a child of "About". Fixing this is easy.
Entering Quick Edit mode
Hover your mouse over any page and a hidden menu will appear. If you click "Edit" you can edit the whole page, including its title, position in the hierarchy etc. But that can take time, especially if there’s lots of stuff on the page. Quick Edit allows you to change the basics.
Quick Edit
You can change the title here, and the date (pages with a date in the future won’t be published until then. It’s a useful way of scheduling updates ahead of time). You can even make a page secret, only accessible by password, which is useful for private information you only want to share with certain people.
Status allows you to set a page to "Draft", which means it will only be visible to you when you’re logged in. No one else will see it, so you can carry on working on it.
Notice too that you can turn comments on and off. Comments are fine on blogs but you may not want them on your static web pages.
Template depends on the template you’re using for your blog. Some have two-column, full-screen, wide templates and so on.
For now I’m going to change the page’s status to draft, turn off comments, and change its parent to "About".
And there we are. Click "Update" to leave Quick Edit mode (or cancel if you change your mind).
This is what it looks like now. It’s in the right place, but as it’s a draft page it won’t be visible to the outside world.
The finished site
Depending on the template you chose for your site, the way your pages are listed will vary. Some list them in a side bar, others have drop-down menus (like the Design Studies site), others just list the top-level pages and allow the visitor to drill down to individual pages there.
Here’s my menu. "Archive" is a complete listing of all my blog entries, "About" is where I’ll post information about me, and "Portfolio" will show off my work.
Adding links
There’s one more thing to do! If I click on "Portfolio" I’m taken to the page I created earlier, but note that there are no links to the other pages, which means it’s impossible for visitors to get to them. Let’s sort that out now. Get back to the dashboard (note the "Edit this page" link? That’s the quick way!)
Getting URLs
To add a link we need the URL of the page we’re going to link to, so in dashboard, click on the page you want to link to. In this case I’m going to link to "Branding". There are two links, the "permalink" which is just a fancy way of saying URL, and the "shortlink", which is a shortened version of the URL. You need to copy one of them – doesn’t really matter which (the shortlink is a useful one to give people or paste in to email as it’s easier to type in, and less likely to "break" if it’s in an email.
To copy the link, just select it all, then copy it using either the edit menu on your computer or command-C (Mac) or control-C (Windows).
Adding the link
Now go back to the page you want to link from, in this case it’s the Portfolio page. Select the text you want to be the link (1), then click the button that looks like a chain (2).
Paste the URL
The box is already selected for you, no need to delete what’s there. Just paste the link from earlier in to it (Command-V or Control-V).
Then click "Insert".
You should see the text is now a link to your other page (1). Let’s go and see that on the site itself. Click "Update", then click "View Page" (2) to see it in the flesh.
Checking it’s worked
And there it is. Add all the other links from your parent pages. You could also add links between siblings (i.e. from Branding to Web Design etc) but you might want to leave that for another time.
For now though, that’s all we need to do. Other than add some content!
Top Tip: Plan, Plan, Plan!
Remember the key to making this simple is to plan, plan, plan. Don’t skip the planning phase for any web design project. You need to know what pages you want, and where in the hierarchy they should come. You need to be able to visualize all the necessary links between pages.
Only once you’ve done that should you start creating your pages in WordPress. Not doing it will dramatically increase the time it takes to create your site.
