How to Integrate a WordPress Blog Into an Existing Website (2011)

Want to host a blog at your own website without redoing your whole site? You’ve come to right place. Here you’ll learn how to add a WordPress 3 blog to your existing website. There are a few conditions: you should be using PHP, CSS and XHTML and, although it isn’t essential, you should be using includes for common parts of your site like the header, menu and footer. By the way, the Twenty Twelve theme version of this is available here.

This is not a tutorial about making a standard WordPress theme and it doesn’t adhere to the standards set in Designing Themes for Public Release. It is intended to seamlessly incorporate a WordPress 3 blog into your existing website.

Also, it uses a simplified file structure instead of a WordPress child theme. Child themes are great and should be used whenever you can, but I’ve found that for many people overriding the CSS in the parent theme can be too much of battle and just isn’t an efficient use of time.

You’ll need to know some basics:

  • how to FTP to your site;
  • how to set permissions;
  • your database hostname (probably localhost), the database name, your username and your password for the database; and
  • some CSS and XHTML basics.

Check out the finished example PHP website with a WordPress blog.

By the way, one might consider the option of redoing the whole site completely in WordPress. It works great.

Prepare WordPress

Download and install WordPress

  1. Download the latest version of WordPress. Some web hosts offer easy installation options from the website control panel.
  2. Install WordPress on your server in a new directory. Call it something user-friendly like blog or articles. For this article let’s call it blog. Follow these easy five-minute installation instructions.
  3. Complete the installation and make sure everything is working. See Common Installation Problems or add a comment below if you’re having trouble.
  4. Right off the bat you may want to activate the Akismet plugin to help keep spam at bay.

Create the folder for your own theme.

  1. FTP into the themes folder in your WordPress installation (blog/ wp-content/ themes). Remember, we’re calling the WordPress installation folder blog.
  2. Create a new folder in themes to hold your theme files. We’ll call it mytheme but you can call it whatever you like.

Create the two can’t-do-anything-without-them files, index.php and style.css.

  1. In mytheme, add a new empty file with the name of index.php. We’ll come back to this one later.
  2. Also in mytheme, create a new file called style.css. This file is necessary for WordPress to recognize your new theme.
  3. In style.css add the following code. Obviously, change what’s necessary to make it your own.

Change the current theme to My Theme.

  1. Login to your WordPress installation. In this case it would be at blog/wp-login.php.
  2. Click on Appearance then Themes if you aren’t already there.
  3. If all went well so far, you should see your theme, My Theme, the version number, your name and the description. Click Activate. If it tells you the theme is broken or similar, go back and check style.css.
  4. Preview your theme to make sure there are no serious errors. All you should see is a blank page.

243 thoughts on “How to Integrate a WordPress Blog Into an Existing Website (2011)

      1. I think I would have a separate installation for WordPress with a link to it on your Opencart site. It’s easy enough to add links from WordPress back to Opencart and I’m sure it’s easy to add a link from OpenCart to a WordPress blog.

        There may be an Opencart extension for blogging or even one for WordPress.

  1. Howdy would you mind sharing which blog platform you’re working with?
    I’m going to start my own blog soon but I’m having a hard time
    making a decision between BlogEngine/Wordpress/B2evolution
    and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something completely
    unique. P.S My apologies for getting off-topic but I
    had to ask!

    1. You could use an iFrame. But that would show the blog header and footer. You could use CSS to not display that parts of the blog you didn’t want to show.

  2. I am viewing in wordpress twentythirteen . I can’t foung following files in it.
    loop-attachment.php
    loop-page.php
    loop-single.php
    loop.php

    AND also in 404.php i can’t found


    I AM BEGINNER TO WORDPRESS . CAN HAVE TUTORIAL COMPATIBLE WITH LATEST WORDPRESS ???

  3. Hi are using WordPress for your site platform? I’m new to the blog world but I’m
    trying to get started and create my own. Do you need any html coding knowledge to make your own blog?
    Any help would be really appreciated!

    Review my site: hotte aspirante ilot (ireport.cnn.com)

    1. Yes, you need to be somewhat familiar with HMTL, CSS, and PHP. It’s not hard to learn, but this tutorial requires a basic knowledge of those three technologies.

  4. Hi

    I have an existing asp.net web application and i wish to integrate a wordpress blog with the application. Also the user once logged in my web application can go to their home page in wordpress blog without the need of relogin. How can we map users from web application to their blogs in wordpress???

  5. Hi. Thank you for this awesome post. But no matter how i do it, i just can’t get it right. I tried this tutorial with wordpress twentyten, it worked. But my page was not well aligned. It was looking very ugly. Then i tried the twentytwelve tutorial. But that ended up showing me a blank page all through. So i changed back and am currently using this twentyten tutorial. I will be very satisfied if i can get this twentyten tutorial perfectly aligned for my blog. Please if you have the time, check out my blog (http://luli-creations.internethood.org/blog/). Any help will be appreciated. Thanks in advance.

    1. Alignment problems are almost always CSS problems but in this case it looks to me like you have get_template_part( 'loop', 'index' ); in index.php twice. Plus, I can see from your CSS that you are using twentyten as a child theme Template: twentyten but import the twentytwelve styles @import url('../twentytwelve/style.css'); instead of twentyten. I suppose that could work but it might cause some headaches.

  6. I am able to easily install wordpress on my exisiting website using cPanel. I also have a blog on wordpress.com that I’ve been running for years. I’m a newbie to wordpress stuff, but I have done a few things like make a child theme and edit it.

    I would love to remake my whole website (on a domain/hosting I already own) using wordpress AND integrate my exisiting blog onto my site in a directory or subdomain. How do I use my exisiting wordpress.com account to install wordpress on my domain? Or is there no way to do this?

    1. Hi Hannah

      I’m not very familiar with wordpress.com, but with the self-hosted WordPress installation, you can export your content as an XML file with Tools > Export, then import the XML file at another WordPress installation with Tools > Import > WordPress. After selecting WordPress under Import, you’ll be prompted to install the WordPress Importer plugin. It’s pretty easy. Let me know how it goes.

      Steve

  7. Great tutorial! However I had to stop when I got to the .php files bit for my own site.

    My own site doesn’t have any .php files that I have created. I have only used .html and .css can I do anything like this without .php as I have zero experience.

    I really just want to keep my own logo,nav bar and footer (all created with html/css) and create a div tag in the middle of the page where I can insert a blog.

    Any ideas would be great.

    Thanks
    Sarah

    1. Hi Sarah

      If you can create one file for the logo and nav bar, maybe call it site_header.php and another file for the footer, perhaps called site_footer.php, you should be OK to proceed. For site_header.php, make a file with everything above the banner, or you could include the banner. For site_footer.php use everything inside and including the div “.footercont”. It doesn’t matter if you call the files .php or .html but I would use .php just to help tie into WordPress. You’ll need to play around with it some and correct the links to other files including artwork.

  8. Great Tutorial but I was stopped as well on the part where you say add my site’s php. I am using opencart on my site. What files do I get for this header and footer? Some of the files are also .tpl. Is this possible to integrate into an opencart site? Thanks much for your help

    1. Hi Mark

      I haven’t explored integrating WordPress with OpenCart. Others have asked this question before and I’m pretty sure there’s a blog module for OpenCart. Alternatively, you could create PHP snippets from your OpenCart header, nav and footer calling them site_header.php, site_nav.php and site_footer.php or similar. Or, they may already exist. Then follow the tutorial.

      Other than using the OpenCart blog module, the easiest thing to do is install WordPress and have a link from WordPress to OpenCart and from OpenCart to WordPress. Unfortunately, this way wouldn’t let you keep the OpenCart header stuff in WordPress.

      I hope this helps.

  9. Thanks for a very useful tutorial, I just used it successfully (I know you now have a twentytwelve tutorial too, but I found it was easier to get twentyten to match my website’s style).

    However I think there’s one little omission – in the code you supply for the footer there’s a closing body tag “”, but neither your header.php nor index.php code has an opening “” tag in it. I’ve stuck mine in header.php, just after the closing head tag. Not that leaving it out makes any difference in my browser! But of course it’s good practice to include it, and I believe in certain circumstances it could cause an error, e.g. some (older) browsers, XHTML pages, or if the first thing inside the body element were a space character or a comment.

    Thanks again for such a good tutorial which I’ve been able to follow even having never used WordPress before yesterday!

  10. Hi. thanks for this tutorial. Its been very helpful. I’ve got it 98% working but it doesn’t look quite right. Its as if there’s a container that sits 10-20px from the top of the page that my blog is sitting within. Please take a look at my site http://www.cinic.co.uk/. The blog is on the ‘news’ link. Thanks

  11. Hi. I’ve followed your instructions and I’ve successfully set up a custom theme in WordPress. Now I’m stuck on how to set up/re-create the pages from the existing website. If you look on http://www.awarenessclinic.co.uk/news/ you see the blog is integrated in the WP custom theme. What I need to achieve is a home, treatments, fees and contact page (as you can see on http://www.awarenessclinic.co.uk) that can be edited from the WP back-end. Can you point me in the right direction please?

  12. Thanks for your tutorial. I’ve followed everything and now I’m stuck on how to transfer pages like the home and contact page…

    I have created a website (http://www.awarenessclinic.co.uk) and I’m trying to convert it to WordPress so that my client can edit the site himself.

    I have created a custom theme according to your instructions: http://www.awarenessclinic.co.uk/news/ which looks identical to the existing page.

    At the moment I have just managed to integrate the blog posts but these need to move to under the News link at some stage. Now I’m trying to work out, what I do next to re-create the home, treatment, fees and contact page so they can be edited in the WP back end.

    And once this is done what path do I use to update the navigation menu?

    Thanks for your help.

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">