Seamlessly Integrating a Blog into Your Non-Blog Website

by Tom Johnson on Oct 23, 2008
categories: technical-writing • web-design • wordpress

Last weekend I was asked by someone to set up a WordPress blog that would integrate well with his existing site, familyinnewyork.com. I looked at the site and asked why he didn't just migrate his existing content into a blog, one with a professional design? He said no -- he wanted to keep his existing site.

When starting blogs, many people have the same dilemma. Typically, a person has crafted a traditional website with all the navigation buttons, colors, images, and other customizations they need. At some point they realize they want a blog too, but none of the blog themes look like their site. They can't discard their original site without throwing away hundreds of hours of work. And in many cases, the original site does a good job at what it was designed to do. The owner is only looking to add a blog for search engine optimization and reader interaction. He or she wants the blog to closely resemble the original site, so the reader will have a seamless navigation experience.

I told the Family-in-New-York person that I would try to make the blog look like his site. It turns out this is much easier than I anticipated. Because the original site is already designed, you don't have to spend time making design decisions. You just have to add WordPress template tags into the web structure that's already set up.

In the past when people approached me with the same question, I would recommend that they find a theme that already looks similar to their site, and I would tweak it to match the colors, font, spacing, and other details. However, with the blog for familyinnewyork, I fully ported over the original site into a seamless theme. The result is that the blog looks like part of the site. You can view the blog at http://familyinnewyork.com/blog.

Here are the general steps for creating custom WordPress blogs that integrate seamlessly with your non-blog website. The steps below aren't intended to be a full tutorial, and they assume you're already somewhat familiar with WordPress.

1. Go to the site you want to clone, right-click the home page, choose View Source, and copy the source code into a text editor such as Notepad ++.
2. Change relative image paths to absolute image paths. For example, the image URLs often look like this: images/picture.jpg. The absolute image path is usually something like this: http://familyinnewyork.com/images/picture.jpg. Do a find and replace to make these changes throughout the page. This is so you can properly see the site on a different domain (I have a scratchpad domain at wpsandbox.com to build my sites.)
3. Take an existing WordPress theme that is somewhat basic, such as the default Kubric theme or Upstart Blogger Minim and use this as your model.
4. Looking through your WordPress theme, pick out the relevant WordPress template tags on the index.php file and splice them into the home page code of the original site (what you copied in step 1). This is where you need a basic understanding of WordPress' template tags. Basically, anything that is surrounded by <? php ….. ?> is a WordPress template tag. Template tags pull information from the WordPress database. The most important template tag you need to recognize is the Loop -- the fundamental call that pulls posts from your WordPress database. Other template tags pull in author information, post dates, comments, and other details.
5. The template tags are often surrounded by CSS styles, such as <div id="container">. Most of the styles you'll want to leave out, but for content that may not already have a style, you might keep the CSS tags. For example, you can probably throw away the style tag that defines the page container (because the existing site you're copying already has one), but you might keep the style tags that define the date, time, and author below each post. Make sure you add the new styles to the original site's stylesheet.
6. Rename the file to index.php.
7. Install a new WordPress blog in subfolder on the original site, usually calling it "blog." If your client is using Yahoo, you have to go through an extra special install process that is actually a bit complicated. Yahoo and WordPress is an entirely separate discussion, but just see this Codex page.
8. Upload your modified index.php file into the blog's theme, overwriting the blog's original index.php file. At this point, the home page of the blog should look similar to the original site. If not, look at the template tags, make sure the entire loop is intact, and verify that you wrapped the right styles around the right areas of content. It sounds confusing, but once you get into it, things do get clearer.
9. Chop the top part of the home page into a header.php file, the side into a sidebar.php file, and the bottom into a footer.php file. You can actually make an arbitrary judgment about exactly where to chop them.
10. In your index.php file, insert php includes to the header, sidebar, footer files where appropriate. See your blog's original index.php file for the php include code that call these components.
    • Category.php – called when a user clicks a category
    • Archive.php – called when a user clicks a past date
    • Single.php – called when a user clicks a post title
    • Tag.php – called when someone clicks a tag
    • Author.php – called when someone clicks an author's name
    • 404.php – called when someone gets an error
    • Searchresults.php – called when someone searches on your site

You're not totally done, because WordPress has a host of other template files that are called based on what the user clicks. If you don't already understand WordPress' template hierarchy, study the template hierarchy section of the Codex. In addition to WordPress' index.php file, there are about 7 other files:

11. Just like you modified the index.php file, do the same for each of the other files in the template hierarchy. Only now you have your model, index.php, to help you with this. The other templates are mostly derivatives of your index.php model. Look at the WordPress template tags used on each of the template files, and insert them instead of what you inserted in index.php.

This entire process isn't rocket science by any means. It only requires that you can recognize WordPress template tags and CSS style tags. When you can see and understand the difference, the project really only involves splicing the two together.

If you need me to add a blog to your existing website, let me know. I can usually turn this around in a weekend. For example, you might want to add a blog to your STC chapter's site for your newsletter. Or you could add a blog to increase your site's search engine rankings. Whatever your purposes, a blog only adds to your site's power. You'll interact more with your readers and enable your site to have fresh information published right when it's written. Best of all, you can implement a blog without revamping your original site.

Other Resources

• How to convert any web template into a WordPress theme
• Theme Development (WordPress Codex)
• How to – Design Your Own WordPress Theme
• Designing a WordPress Theme from Scratch