Rapidly Developing Static Sites Within Wordpress

Hi, I thought I'd post part of an article I just wrote on using Wordpress as a content management system. I'd appreciate any feedback on ways I could optimise my approach. Thanks in advance!

The full article can be found here.

I'm tired of going through the laborious process of setting up a website. I haven't much time these days so I've to manage my resources carefully. I simply can't afford to spend a week on a set of pages anymore. That's why I'm trying to devise an ideal way to develop sites using Wordpress as a CMS.

In this article I will explore the various steps I take to get a site up and running quickly using Wordpress as a Content Management System. Please note that I realise my techniques are far from perfect! I'd appreciate it if you could leave a comment with any suggestions for improvements that you might have!

From experience this approach works best when developing reasonably small websites. I haven't tested the theory out on many larger sites. Your milage may vary.

Right, lets get started! I'll assume that you already have Wordpress installed. If not, the installation procedure for the application is out of the scope of this tutorial. Check out the Wordpress Codex's Installing WordPress article for more information.

Now, I don't know about you but I dislike the look and feel of a basic Wordpress install. It's not that the theme is poorly designed or anything, it's just that you see that layout everywhere on the Internet.



See what I mean? It would be great if this design was unique to your website, but that isn't the case. It's now time to demolish the layout and build one of your own from the ground up. It's not as painful as you might think!

First things first, when I'm editing the CSS of a Wordpress site I always change the theme to Wordpress Classic 1.5. Why? I like keeping things simple! This theme is much easier to dismantle than the Default Template and it still allows us to have all of the structure we need for the site. To change the template, simply click on the 'Wordpress Classic 1.5' title inside Presentation ] Themes.



Now that the classic theme is activated we can begin to edit the CSS....unless the next bit applies to you . The Wordpress install of the site I'm using in my example was created with the Fantastico wizard and it fails to set the right permissions for the theme directories which means that I can't edit them until I've changed the permissions.



Fixing this is reasonably straightforward, it's a simple case of opening up your FTP client, navigating to the wp-content/themes/ folder of your Wordpress install and changing the entire classic folder's permissions to 666. This post on the official Wordpress support website describes it in more detail.

Once this is sorted, the "If this file were writable you could edit it" message will disappear and you'll see the "Update This File" button onscreen.

I'll now list all of the changes I make to each page to stop the website looking like a blog. These are only suggestions, you might want to keep some of the functionality which the code offers.
Main Index Template

1. Remove the the_date code
2. Remove the div with
3. Remove the div with
4. Remove the comments_template snippet
   
5. Remove the posts_nav_link snippet.

Sidebar

1. Remove all of the information between the menu DIV
   
2. Include this inside the menu DIV [size=-1]wp_list_pages('title_li=); ?]. The wp_list_pages code generates a linked list of all of the pages in your website and it's is extremely handy. The 'title_li= parameter stops the default text of 'Pages' from appearing at the top of the menu list.[/size]

Footer

1. You might want to remove all of the content from within the credit p tag. I recommend that you don't though as this link openly displays your support for the Wordpress project.

Header

1. Remove the H1 tag with the id header and it's containing code.

Stylesheet

1. I've deliberately left this to last as there is more involved with it than on the other screens.
2. Start by deleting all of the information inside the stylesheet box.
3. Now it's time to cheat! I'd advise you to look away now if you're a diehard CSS fanatic as this will probably sicken you! Visit BlueRobot.com and select a CSS template that appeals to you. For the purposes of this tutorial I'll be using the "Two Columns - Left Menu" design. Click on the View CSS link towards the bottom of the screen and copy all of the style information from the page that appears. Now re-enter the Wordpress Theme Editor, click on Stylesheet, paste in the code and click Save.
4. You'll now need to make a few subtle changes to your markup for it to be compatible with the BlueRobot styles. Let's start with the Main Index Template. Create an opening div tag with before . Now close the div tag after the php endif; code.
5. Next, enter the sidebar Edit screen and change the div's id from menu to Menu. Save your changes.

Now try visiting your website. You should see something similar to the following.



A lot of websites have a standard index page with static content, whereas blog index's display a list of the most recent code. Mimicing the behaviour of a static website is easy within Wordpress. Start by creating a post which will contain the information you want to display on the homepage. Normally this will take a form of a Welcome message. It doesn't really matter - it's up to you.

Once you've created the post, enter the Manage ] Posts page. For my Belfast Nightlife site I've created a Welcome post entitled "Guinness City U.S.A" that will appear on the index page. It has an ID of 3. Take note of the ID of your own index as you'll need it in just a minute!

Now go back to the Presentation ] Theme Editor screen and click on Main Index Template. Insert the following code just before the Content div. Make sure that you replace the p=3 inside the query_posts function with your index page's ID.
if($_SERVER["REQUEST_URI] == "/" || $_SERVER["REQUEST_URI] == "/index.php") query_posts('p=3'); ?]

For example if the index's ID is 10 instead of 3, the code would read like this.

if($_SERVER["REQUEST_URI] == "/" || $_SERVER["REQUEST_URI] == "/index.php") query_posts('p=10'); ?]

This snippet of code checks to see if the visitor is currently at your home page and if so Wordpress will then display your index page. and only your index page.

Now it's time to get the site URL's a more static feel. Go into the Options ] Permalinks page and select "Custom - specify below" from Common Options. What goes into the "Custom Structure" box is purely down to personal preference. I tend to use "/%postname%.html" so my pages can be accessed through postname.html.

This won't work if the .htaccess file within the root of your Wordpress install isn't writeable and you'll be asked to make the changes manually. Again you might want to refer to this page for information on how to change permissions if you aren't already familiar with the process.

Now all you have to do is create some pages and optionally alter the CSS and your website should be up and running!

 

What you basically did was create a new them. Once you did this for one blog, you should download it. Then, when you create a new blog, you can upload it to the themes folder, select it and viola! done.

Do you have the link to a site you did this way?

 

Yeah, I created Gothic Fairies using this method.

 

Great tutorial! Green rep for you.

 

Very nice and incredibly useful.
Green rep for you.