Incorporating a WordPress Blog into an Existing HTML Web Site

Print Friendly

Overview

I searched the web trying to find instructions on how to incorporate a WordPress Blog into my existing HTML web site. All the instructions I found were not what I was wanting; creating a WordPress blog to look like your web site and use it instead of a HTML web site. I finally found bits of instructions that actually incorporate a blog into an HTML site and here is everything put together to hopefully help someone else out trying to do the same thing.

What This Process Creates

  • A new WordPress Blog web site that resides inside of your HTML web site directory.
  • A new page on your HTML web site that displays the latest 3 posts of your external blog site.

The Prep Work

  • You will need access to your web server.
  • A text editor.
  • An FTP Client.
  • Your web browser of choice.
  • Check to make sure that you have the minimum requirements to run WordPress.
  • Download the latest release of WordPress.
  • Unzip the downloaded file to a folder on your hard drive.
  • Be prepared with a secure password(s) for your database and WordPress User.

 The “How To”

  1. Download the latest version of WordPress here:  http://wordpress.org/download/
  2. Unzip the WordPress package. You should end up with a WordPress folder after unzipping. If you need additional detailed instruction on how to download and install WordPress; follow these instructions: http://codex.wordpress.org/Installing_WordPress.
  3. Using an FTP Client create a directory (folder) inside of your web sites’ main directory. Name this new folder “blog” – this is where the WordPress files will reside once we get to the uploading step. For now, leave it empty and ready.
  4. Now let’s set up a new database for WordPress.
    1. In your browser go to your web sites’ hosting control panel. I use GoDaddy so I logged in to my account and then went under My Account to Web Hosting, In the Web Hosting section I clicked on the Launch button next to my hosting account in the list.
    2. In the Databases section; click on MySQL button.
    3. In the MySQL window click on Create Database button.
    4. Fill in the Description, MySQL Database/User Name, and Password fields and click OK. Be sure to write down the password you use while filling out this form – it will be needed again later on.
    5. Now you will be back at the MySQL window and the newly created database will show a Status of Pending Setup. Before continuing on; wait for the status to change to Setup.
    6. Now that the Status is Setup; click on the small pencil next to Setup. You will see all the details about your new database. Copy this information and put it in a safe place. You will need it for later steps.
    7. You can now log out of the hosting accounts control panel. You are done creating a new database and user to access it.
  5. Time to use the information we just gathered and set up the config file Inside the WordPress folder on your computer. First rename the file
    wp-config-sample.php

    to

    wp-config.php
  6. Now open the wp-config.php in a text editor and fill in your database details gathered in step 4F. I have drawn red boxes around the fours spots that need new info. Be sure to put the new info in between the two  (one at the beginning and one at the end of the info).
  7. Here it is filled in with the info (password has been replaced with *’s for security purposes of this screen shot – I will use the real password before uploading):
  8. Save and close the wp-config.php file.
  9. Using a FTP client; upload the WordPress files (not the folder but it’s contents) into the blog folder created in step 3.
  10. Run the WordPress installation script by accessing wp-admin/install.php in a web browser. Since we put our WordPress in a blog folder inside the main directory; we will access it with: http://example.com/blog/wp-admin/install.php (replacing “example.com” with your web sites address).
  11. Install screen! Now fill in your Blogs’ Site Title (this can be changed later if you don’t like it), change the Username if you don’t like admin and then enter a password that you will use to access the blog editing content with. Enter your email address and click Install WordPress.
  12. Success screen! Just click Log In.
  13. Enter your log in information and click on Log In.
  14. Set up your new WordPress blog how you want.
  15. Now we’ll connect the Blog to your HTML web site. First we’ll create a blog.php page. The new file has to have the php extension or WordPress will not work. You can simply create a new html document and then change the extension to php if you want.
  16. Open the blog.php file and in the header area place this code. Note this will display 3 blog posts (you can change that number to display up to 10).
    ?php
    // Include WordPress
    define('WP_USE_THEMES', false);
    require('./blog/wp-load.php');
    query_posts('showposts=3');
    ?>
  17. In the body section where you want to display the blog posts place this code:
    <?php while (have_posts()): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
    <p><a href="<?php the_permalink(); ?>"
    class="text3-normal">Read more...</a></p>
    <?php endwhile; ?>
  18. Upload your file and check that your HTML web site is blog file working correctly.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image