From WordPress blog to Website in 6 Easy Steps

Hello everyone. I know it’s been a while since I posted last. What can I say, life is demanding. One of the things that took up so much of my time was a website build. The site itself was pretty simple and straight forward, it was the prep work that took time.

I wrote these instructions because I was looking for a easy way to put together a website. I’m comfortable with using Wordress as a blog and I like how streamlined and well it works with search engines. So I thought it would be cool to build a website with WordPress. Some may ask, why not just use Dreamweaver or one of those easy drag and drop site buildingservices? Well for one, I didn’t have the time to learn Dreamweaver and for two, you can really get pigeonholed with those site building services when you want to expand later. I also read where people were using WordPress in many different ways including as a static website. I thought it would be easy enough to find a guide that would walk me through the process, however many of you know when it comes to finding exactly what you’re looking for on the internet it’s not always as straight forward as typing the key words into Google and hitting the Search button? I ended up finding bits and pieces of information here and there and after some blood, sweat, and tears I had a functional site I was happy with. It took a little longer that I planned and most of the time went into research, trouble shooting, and work arounds. Grant it, that’s all a part of building a website, but this project could have been done in a third of the time if I had a step by step guild to follow.

So I decided to write one myself.

Here’s were I’ll put my little disclaimer. I’m no expert webmaster. I’m just a average guy with enough technical skill to run a blog. I do have a couple sites and I’m sure they could stand some improvements. That being said I have learned a few things through trial and error over the years and I want to help you save valuable time so you’re not spinning your wheels like I was. My process may not be technically correct but it worked for me. If you know a better way to execute any of these steps please share them so I can update these instructions for the next person that comes along.

I wrote this guide for those who have at least a basic understanding of WordPress. If you’ve built a static website or ran a WordPress blog before you should have no problem with these instruction. However, I didn’t want to leave the beginners out, so there will be links to pertinent information as we go through the steps. Just click the links provided when you come to a section you don’t understand. With that said let’s get started.

Step 1: Get a Web Hosting service

The very first step in building a WordPress website is choosing reliable web hosting to house your site. Actually, registering your domain name would be the first step but I’m assuming you already have that part done. If not check out this link. You may already have a Web Host too, but for those who don’t or if you’re not real sure what a Web Hosting service is, check out this link. I recommend Bluehost because it’s the host I use and it utilizes Fantastico which turns installing WordPress into a one click process. It’s a beautiful thing.

Step 2: Installing WordPress

As mentioned above, if you’re using Bluehost or any host that takes advantage of the Fantastico App, installing WordPress is a breeze. It’s so easy I’m not even going to bother mentioning the manual way. I must say it is good to know how to install Wordpess manually because you never know when you might find yourself alone in a dark ally wishing you knew how to do the install yourself. Follow this link to learn the manual installation method.

To get started the automatic way, login to your Bluehost or respective web host’s account and go to the cPanel and find the section titled Software and Services.

The Fantastico logo is circled in red. Click on it and look for WordPress among the list of blog packages. Start a New Installation and follow the on screen instructions.

Once you’ve installed WordPress and set up your WordPress account, you should have a site that looks something like the one below. Now login with your username and password and you’ll be taken to the dashboard were the real work begins.

Step 3: Add plugins

Up to this point everything has been pretty much straight forward. Hopefully it wasn’t too boring. You’ll have to stay awake from here on out because this is where we stray away from the typical blog setup path.

Now is the time to add the plugins you’ll need for your sites functionality. Everyone has there favorite plugins, but choose wisely because many plugins are blog specific, and because we’re building a static site they won’t be of much use. For instance, I like the Yet Another Related Posts Plugin, but since this site won’t have posts, that plugin won’t be necessary. You do of course have the option to use the site as both a website and a blog. But for the purposes of these instructions we will focus on creating a static website. To keep things simple, below I have provided a list of plugins I’m currently using in one of my sites;

Google XML Sitemaps

StatPress Reloaded

WordPress Database Backup

and because I have a lead generator on my site I also use;

Contact Form 7

Really Simple CAPTCHA

I’m sure there are other plugins I could be using, but these are the ones I currently have working for me. If you can think of some plugins I should be using, by all means do share.

In WordPress 2.8.6 you can get your plugins from within the Dashboard which it very cool.

Just click Plugins, then Install Plugins and you’ll be taken to a onboard plugins directory page where you can search by entering the name of the plugin, choose by category, or select from the normal list.

Once you find what you want click Install on the far right and you’re done.

Step 4: Themes

Choosing a theme can be both the most exciting and frustrating part of creating your site. There are so many free themes to choose from, yet some how none of them will have the exact look and feel you’re going for. And if you do happen to find the perfect theme it’s inevitable that there will be something about it that makes it less than perfect upon closer examination.

In the mist of your theme quest keep in mind, we are creating a simple static site and for the purposes of this exercise I won’t bother with a complex, bells and whistles, multi-column theme. Truth be told, you can take any theme and with a little creativity and a graphic editor like Gimp, turn it into something completely unique. The most important features to look for in a theme are; valid code, seo optimization, and browser and search engine compatibility. For now we’ll just stick with Kubrick.

Note, for these instructions you really need a theme with the navigation bar built into the header, not along a side column as this area of the site will be eliminated. I’m using Kubrick only because it’s the default theme and everyone has access to it.

Step 5: Static Page Templates

At this point you have your web host, installed WordPress, and selected the plugins and a theme. Now it’s time to get down and dirty and turn your blog into a static website.

To customize the site you will need to work with the Custom Page Templates in your active theme’s directory. Go to your host cPanel and navigate to the WordPress directory which should be in a section titled something like File Management.

You well need to access your theme directory which is located in the WP-Content subdirectory. Depending on your setup the route to your theme directory may look like this:

Public_html—>WP-Content—>Themes—>Default which is Kubrick (or whatever the name of the theme you are using).

Open your favorite text editor and create a new file called “home_page.php” with the following php code.

<?php
/*
Template Name: home page
*/
?>

<?php define(“EG_BODY_CLASS”, “no-sidebar”); get_header(); ?>
<?php get_footer(); ?>

In fact just copy and paste what I have here. Please note that the file/template name is included in the code on the third line. This portion of code helps WordPress identify the new template and must correspond with each new file. Save this file with the .php extension and place it in your active theme’s directory like so.

Now go back to your WordPress dashboard. Create a new Page and give it the title Home.

On the Attributes sidebar, click the Template dropdown menu and select the new home_page template you just created. At this point you’ll want to deselect Allow Comments and Ping at the bottom of the Page Editor screen and publish it.

Go back to the WordPress dashboard and go to your Settings and click “Reading”.

Now change the Front Page Displays setting from “Your latest posts” to “A static page”. Just below the Static Page radio button use the dropdown menu and change the front page to your new home page and click Save Changes to capture these settings.

Now visit your site. What you should see is just the header and footer of your theme with nothing in the middle. This is the first of your custom pages and will serve as your Home page and the foundation for your entire site.

Step 6: Add html to pages

I know you’re thinking, what do I do with a header/footer page? Look at it as a blank canvas awaiting your masterpiece. You’ll need to add html code directly into the php template to add your content between the header and footer. This is where things could get a little complex, especially if you’re a novice at coding like I am. So in this section I’ll only be showing you some basic codes to add for a very simple WordPress website, but of course you can go as far as your coding skills and imagination will take you. I’ll show you the code I used and you can adapt it to your site. Admittedly, my code is not the cleanest and a bit outdated. I’d much rather make use of css but to be honest I don’t have a handle on adapting cascading style sheets to this modification.

From the dashboard screen, under Appearances click on “Editor”. This is where you can edit those php files without having to leave WordPress. On the right-hand side of the Editor screen, select the “home page” php file.

Html code will go into the red area indicated below.

Below is the code for a simple four column home page. Copy and paste this code into the Editor in-between the last two lines as shown above. Note, you may need to make room for the code.

<tr valign=”top”>
<td>

Eam luptatum Lorem ipsum ea aeque omnium interpretaris cum, eu eos blandit delicata. In legimus habemus adolescens cum, natum aliquip maluisset ad per. Eruditi luptatum recusabo quo id, an accusam quaestio sensibus duo. In harum aliquid oporteat sit, dicam diceret repudiare ad sed. Meis doctus perpetua sea et, solet platonem torquatos usu at.
</td>
<td bgcolor=”#d3d3d3″>
</td>
<td>

Eruditi luptatum recusabo Pro patrioque gubergren cotidieque no, sea sint ponderum perfecto cu, laudem tempor interpretaris an vim. Est in illud tempor appellantur, pro feugiat vulputate inciderint ut. Cum puto homero ex, decore luptatum concludaturque ei eam, sea no recusabo laboramus delicatissimi. Eam luptatum euripidis ad, duo ea vocibus fastidii reprehendunt, mel delenit electram explicari ne. Modus alienum eam et, eu vis oportere corrumpit.
</td>
<td bgcolor=”#d3d3d3″>
</td>
<td>

Probo aliquam Utroque convenire est ea, cum harum discere incorrupte et. Ex possim dolorum interpretaris sit, sit eu augue euismod habemus. Ad eripuit eruditi intellegat per, ius amet eruditi delectus at. Id sea integre aliquam lobortis, congue nostro legendos duo ut, ea nam esse forensibus contentiones. Quis interesset quaerendum an sed, audire imperdiet mea ei.
</td>
<td bgcolor=”#d3d3d3″>
</td>
<td>

Ad eripuit eruditi Eu vix dicit doctus nostrud. Tantas aliquam antiopam ius te, no pro inani consul reprehendunt. Probo aliquam fabellas quo ad. Eripuit perpetua percipitur ad cum, elit torquatos ut mel. Ex eos exerci mandamus.
</td>
</tr>
</table>

I know it looks like a lot but don’t let this freak you out. You will need to replace the filler copy (gibberish) with your own content.

Now click Update file and visit your site to take a look at what you’ve done. Cool huh!?

If you want only 3 columns you can delete the portion above indicated in red.

Now of course you can get much more elaborate and change the width of the columns, add color, graphics, etc, but I’ll leave that for you to explore on your own.

Now that your home page is done, all that’s left is to duplicate the same steps above for your supporting pages.

Create a new .php file with the same code used in step 5, give it the appropriate name you’d want for the next page of your website. Insert the html code at the same point as you did for the home page. Then create a new page within WordPress with the name you gave the .php file, select the appropriate template file and publish it. Click this link for plenty of html page templates that you can adapt to your Worpress website build.

That my friends is it. You should now have a basic static website with a home page and several supporting pages. As mentioned above, selecting a theme with a navigation bar in the header will be best suited for this exercise. For each new page you add the title link will show up in order across the top of your header.

I hope this information was as useful for you as it would have been for me when I was struggling to create a simple WordPress website. One of the best things about using WordPress like this is you can add a blog section with little effort and have the best of both worlds.

Again, if you have any suggestions, questions, or just want to let me know if this was helpful or not, please drop a comment.

Cost Cutting Tips that Won’t Hurt. In these tough economic times you may be forced to...
6 Answers to Designing on a Shoestring If you ever wondered how you could get something design...
Photoshop Resources you can’t live without If you’re new to graphic design or you’ve been trying...
How To Not Be Inspired If you’re uninspired and want to stay that way, don’t...
Privacy Policy Welcome to the Show & Tell Graphic Design Blog. We...

Related posts brought to you by Yet Another Related Posts Plugin.

From WordPress blog to Website in 6 Easy Steps

Interesting Articles