Using WordPress to create your page-based website

July 1st, 2009

You’re a web designer, and you want to create a website – and like a lot of sites these days, it will be based around the pages, yet include a blog or news section. Congratulations! I am now going to give you a quick tutorial on making a page-based site using WordPress. This will make editing the pages easy, yet make it look like the blog is a separate installation.

If you have never touched PHP, roll up your sleeves and get ready to get dirty. I will try to make this relatively painless.

What you need!

• WordPress

WordPress Plugins (Optional):

• All In One SEO Pack
• Contact Form 7
• NexGen Gallery
• PageMash
• WP Google Analytics

Programs

You’ll need to BYOP but here are the ones I use:

• TextMate OR any text editor
• Transmit OR any FTP program

Services

• Domain name
• Hosting

You are now armed and ready!

Step 1: Install WordPress

If you got the hosting I recommended, all you need do is log into your control panel (yourdomain.com/cpanel) and click on “Fantistico”. From there, you can follow the instructions under “WordPress” and it will install automatically.

Otherwise you will need to follow the directions WordPress provides.

Step 2: Install your plugins (Optional)

WordPress now offers the nifty feature of being able to install plugins straight from the admin section. Go to yourdomain.com/wp-admin/plugin-install.php and search for the plugins I listed at the top of this article.

If you already downloaded them, use your FTP program to upload them into the plugins folder of WordPress (directions).

Make sure you activate them!

Step 3: Download a theme

You now also need to choose a theme for your site. There are probably quite literally thousands of free and paid themes to choose from, or you can create your own (which I recommend). However, the “how-to” create your own theme is an entirely different post.

You can download themes from the WordPress website, or use Google to search for themes to download. Install and activate your theme!

Step 4: Modify your theme

4.a Creating the “Blog” page

Now is the tricky part. Create a new file in your theme folder called “blog.php” – copy and paste the code from your “index.php” file into this new page.

At the top of this file, add the following code:

<?php
/**
 * @package WordPress
 * @subpackage THEME NAME
 */

 /*
 Template Name: Blog Listings
 */

Make sure that you include this before the get_header() function, inside the php tags. The top of the page should be wrapped in “<?php” and “?>” like so -

<?php
/**
 * @package WordPress
 * @subpackage THEME NAME
 */

 /*
 Template Name: Blog Listings
 */

get_header(); ?>

Now, find the lines that look like this:

<?php if (have_posts()) : ?>

 <?php while (have_posts()) : the_post(); ?>

Directly in above these lines, you need to add the following…

<?php query_posts("order=DESC&paged=$paged"); ?>

We are telling WordPress that when it loads this template, we don’t want to see the content of the page we created, we just want a list of posts, listing the newest first.

Make sure that the get_sidebar() function is being called on the page, and if it is not, use the other template files to see where you should include it.

4.b Creating/editing the “Page” page

Technically, you could simply modify the existing page.php file, but I like to create a new template so that I can always refer back to the original, or even use it if I want. So, create a new file called “page-simple.php” and copy and paste the contents from page.php into it and delete the get_sidebar() function.

Usually I make further edits to help simplify the page, but this will vary depending on your theme.

Add the template name to the top of the page like we did when we created the Blog page.

/*
 Template Name: Simple Page
 */

4.c Creating a “Front” page (optional)

If you want to get fancy, you can rinse and repeat to create a custom front page template for your theme. You should base the PHP on page.php from your theme. Don’t forget to label the template!

4.d Upload!

Make sure that you upload your new template files! Otherwise you won’t be able to access them on your installation.

Step 5: Creating your pages

We’re getting close to being finished!

5.a Publish the Blog

Go and create a new page called “Blog” – don’t write any content, if you do it’s not going to show up. Before you publish the page, look on the right hand side for the option to choose your template. Select the “Blog Listings” template you created earlier.

Now you can publish your page. Visit it – it should be showing you a list of your blog posts just like the regular front page!

5.b Publish the Home page

Create another page, this one called “Home Page” or “Front Page” (it doesn’t really matter). Put the content you want to show up on your front page. If you created a special template for your front page, make sure to select it when you save it!

Step 6: Setting up WordPress to play nice

6.a Setting the permalinks

Log into your WordPress dashboard. Go to Settings > Permalinks. Now, I don’t care what format you want to take when making these permalinks, and you can get the WordPress permalink tags from their site, I recommend something like /year/month/name-of-post.

The thing I need you to do though, is add “/blog/” to the beginning of whatever you choose.

• /blog/%postname%
• /blog/%year%/%postname%
• /blog/%year%/%monthnum%/%postname%

Those are all fine examples. I hope you get the idea. So choose your permalink structure and enter it into the “Custom Structure” option and hit save. Here’s a screenshot of my settings:

6.b Setting the front page

Now, go to Settings > Reading.

Switch the first radio button from “Your latest posts” to “A static page” – and in the drop down menu, choose the Home page you created in the previous step.

Step 7: Cleaning up and optimizing your site

Now it’s time to tame the beast.

• Use PageMash to hide/show pages you want to be seen or not seen in the main navigation (such as your new “Home Page”).
• Use the All In One SEO package to create custom titles and meta tags.
• If you need a contact form, Contact Form 7 is your man.
• If you need to show images, use the NexGen Gallery – it includes different methods of displaying these, using JavaScript and/or Flash.
• I highly recommend getting a Google Analytics account and using the WP Google Analytics plugin to stick it into your site.

While these plugins may be more or less optional, they will probably come in handy for almost any kind of website you are creating.

What have we created?

You now have a website that is more focused on pages than posts.

One of your pages is the “Blog” page, which displays your posts. The link to the blog looks like “yourdomain.com/blog” and your post links will follow suit and look like “yourdomain.com/blog/permalink/structure/your-post“, but your pages will maintain links like “yourdomain.com/about” or “yourdomain.com/contact“.

Leave any comments, tips, questions or concerns in the comments! Especially if you found this to be useful.