How to Integrate a WordPress Blog Into an Existing Website, Twenty Twelve Theme

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.

This is a follow-up tutorial for the original How to Integrate a WordPress Blog Into an Existing Website. The main differences are:

  • This tutorial uses the Twenty Twelve theme that is installed with current WordPress installations.
  • We’ll use a child theme dependent on Twenty Twelve.

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 example site, a PHP website with a WordPress blog.

A side note… you may want to consider redoing the whole site completely in WordPress. It works great.

A favor please, I would greatly appreciate it if you would let me know if you find errors, typos, or something isn’t clear or doesn’t work. These are pretty complicated things to write and it’s easy to make a mistake or assume too much.

Prepare WordPress

Download and install WordPress

  1. Download the latest version of WordPress. Most 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.

Just so we’re clear, when you see words or phrases like ‘yourdomain’ or ‘Your Name’, use your real domain or your real name. If a URL does not use ‘yourdomain’ you can probably assume that it should be entered as is.

Create the Twenty Twelve child theme

  1. If you haven’t already, install WordPress in ‘blog’ folder.
  2. Find the themes folder blog/wp-content/. You should see the twentytwelve folder in there.
  3. In themes folder, make a new folder calling it the name of your theme. I’m calling mine mytheme for this tutorial.
  4. Make a new file called style.css and save it in the mytheme folder. It must be called style.css and be in mytheme, not in a folder in mytheme.
    1. It should be an empty file. Add the following:
      /*
      Theme Name: My Theme
      Theme URI: http://yourdomain.com
      Author: Your Name
      Author URI: http://yourdomain.com
      Template: twentytwelve
      Version: 1.0.0
      */

      Remember to substitute your info for My Theme, yourdomain.com and Your Name.

    2. Next, import the Twenty Twelve CSS by adding:
      @import url('../twentytwelve/style.css');
    3. Below that import your existing site’s CSS. It will look something like the following but might be different. Be sure to put this below the Twenty Twelve stylesheet import so that your styles will take precedence over Twenty Twelve’s.
      @import url("http://yourdomain.com/css/site_styles.css");
    4. Log in to your WordPress admin area and go to  Appearance > Themes, you should see My Theme ready to activate.
    5. Activate My Theme and check out your blog. It should look like an odd hybrid between your website and Twenty Twelve.

Adjust some theme settings

It may be possible to make some simple adjustments to get you started toward making the blog look like your website and get your blog working properly. These are my preferences and of course you can change them later.

Since this is going to be a blog and not a whole website you can adjust a few settings under Settings.

  1. Settings > General: make sure the Site Title, Tagline, Timezone, and Week Start On fields are correct.
  2. Settings > Reading > Front page displays: Use Latest Posts.
  3. Settings > Reading > For each article in a feed: Summary. To get summary to work, I use the More tag after the first paragraph or so in a post.
  4. Settings > Permalinks: I usually use Post Name.
  5. Appearance > Background: You can select your site’s background color or background image.

There may be other settings you want to play with before moving on. Don’t worry if it doesn’t work, you can always come back to this.

Take a look at your blog. There should be some content there, but it doesn’t look much like your website. In the next step we’ll create some files that match your site.

WARNING: it’s going to get worse before it gets better.

63 thoughts on “How to Integrate a WordPress Blog Into an Existing Website, Twenty Twelve Theme

  1. I am not too certain what I am doing wrong, but my page stays a blank if I preview it. I am now on page three of your tutorial, but I probably mucked up something on page two. Care to give some assistance?

  2. Hi there,

    Great tutorial!

    I have been following the tutorial and all good right up until the last step. As you can see on http://www.trafiki.com/marketing-news/ I have the blog working and everything but the styling compared to the rest of the site (http://www.trafiki.com/) is obviously not quite there.

    I have tried to look at the source code and used web developer tools in Chrome (and Firefox) and don’t seem to be able to see below the header content. I have managed to make full use of this tutorial working fully on another site (http://www.charteredsurveyorinlondon.co.uk/news/) so followed the general layout for what I did on that one but no such luck!

    Any help will be greatly appreciated!

  3. Hi
    Thanks heaps for your tutorial
    Can I suggest that you don’t include the comment:

    at the beginning of the index.php file.
    For internet explorer it put the browser into “quirks” mode and really messed up the formatting. Took me ages to find out what was causing it
    Thanks

    1. oops – the comment got commented out in my post above
      This comment
      !– begin index.php —
      (with the angle brackets)

    2. NJW, thanks for bringing that to my attention. I changed comment to begin the header file.

      Those comments are supposed to be there to help reduce confusion, not create more.

      1. Hi

        No what I mean is you have to have NO comments at the start of index.php (or header.php) It is the comment that makes internet explorer go into quirks mode. It is because the comment ends up being before the DOCTYPE statement.

  4. So this is simply the BEST article I have found on this topic – have followed it before and just spent 15 minutes searching for the article again having failed to bookmark it that last time. This is such a simple implementation and your time to create this post is VERY much appreciated!! Bookmarked!

  5. Hi
    I have a theme boostrap 3.I have many CSS files, as two folders for CSS files.What would I do? Please tell me where how to impotrt all these files.Because with one file my page is messed

  6. I still have a blank page at the point where it says that I should see the header, navigation and footer. I am pretty sure it is because I have no idea how to work out what the basic divs that make my sites structure are. I am using opencart. I would be very grateful if someone could help me.

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>