Seamlessly Integrating a Blog into Your Non-Blog Website

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.

Family in New York blog

Family in New York 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
  11. 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:

  12. 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

follow us in feedly

Madcap FlareAdobe Robohelp

This entry was posted in general, web design, WordPress on by .

By Tom Johnson

I'm a technical writer working for a gamification company called Badgeville in the Silicon Valley area in California. I'm primarily interested in topics related to technical writing, such as visual communication (video tutorials, illustrations), findability (organization, information architecture), content development (DITA, testing), API documentation (code examples, programming), web publishing (web platforms, Web design) -- pretty much everything related to technical writing. If you're trying to keep up to date about the field of technical communication, subscribe to my blog either by RSS or by email. To learn more about me, see my About page. You can also contact me if you have questions.

47 thoughts on “Seamlessly Integrating a Blog into Your Non-Blog Website

  1. Ted

    It’s a new site from a template, not a conversion like you did, but here’s a WordPress site that is mostly static with a prominent blog component: http://www.starrkingschool.org.
    Check out how the “News” page plays a double role: you can look at it as one static page among many, or as a blog in itself. And the titles from the posts roll up to the right margin of the front page, etc. etc. Had a lot of fun putting this together.

    Teds last blog post..Come to Fruition

  2. Tom

    @ Ted, thanks for pointing me to your site. Looks great — very clean and easy to navigate.

    @ Paul, wow, I wasn’t expecting docguytraining.com. Ingenious idea and good choice of theme. The font is a little small, but otherwise very intuitive and easy to find information. Glad to see you made that. (Are you going to transition to blogging there instead of your other blog?)

  3. John Hewitt

    My transition from traditional website to blog was a painful one. I sometimes wish I had simply started a blog on another site. The problem is that you end up changing the page urls from the original, and that means that every link you have established to the original pages gets destroyed. This may not be a big deal for some, but because I already had 1000 daily visitors and many established links, it was a difficult move for me.

    John Hewitts last blog post..Writing an Action Outline

    1. Tom

      @ John, I agree — backlinks bring in serious Google karma. Take them all away and it’s almost like starting over. I think it was a good idea, though, to migrate all your content onto one site. It must make it easier to manage.

      By the way, congrats on your site traffic. You have a lot of excellent content on a regular basis. I enjoyed your recent post on narrative.

  4. Pingback: 10/28/2008 Writing Jobs and Links | PoeWar

  5. Pingback: Links am Wochenende - Doku-Hotline - Birgit Grossmann über Texte, Technik und technische Dokumentation

  6. Pingback: Integrating WordPress into an Existing Website | I'd Rather Be Writing - Tom Johnson

  7. Erick

    is there a way to remove linking from a post tittle? Each time I post on the blog, you can click on the tittle of the post to view it on a page by it self, and it removes the modifcations.

  8. jon perry

    I tried to integrate, but no luck. If anyone could help me out on this project, I can pay you. I need to have my blog integrated into my normal webpage, but I’m not very design savvy. If you are interested please email me at victorypunch@gmail.com Thanks

    1. K L Jonasson

      Hi Jon,

      I can give you a hand, and get it working for you within a day. I sent you an email, letting you know. If you are still interested please contact me back.

      Regards.

  9. Steve - Integrated Marketing

    This is a great article. I have a very small nitpick with the description. On a lot of webhosts, file names are case-sensitive so there’s the potential for some very subtle (read time-consuming to debug) and not-so-subtle bugs if you capitalize the first letter of the filenames as in step 10.

  10. Dennis Freed

    I would be interested in you creating a better looking blog site for me. I have already got one going (link on the right side of my home page with the title “Why military manuals…). I would keep it more updated if it was integrated into my main site and would benefit form traffic etc. Please contact on price, time frame etc.

    Thanks

  11. Pingback: Tiago Tavares - Blog » Integrating wordpress with my website

  12. Gary

    Is it possible to simply remove the html, head and body tags of the wordpress page, insert into the non-WP page any required head scripts from the WP page, then insert the body content as an include?

    1. Tom Johnson

      Paul, if you were going from a blog template to a normal template, that’s what you would do. But most people migrate regular HTML templates to blog templates. In that case, you pretty much do the reverse of what you explained. Just look for the php tags in a sample WordPress theme and splice them into your blog. However, you also need to set up a database on the backend and configure that — otherwise no content will appear.

      1. Vinni K

        Hello Tom,
        Great Article.
        So you are taking on business? Please check my site http://www.vinnikiniki.com simple created in HTML. Can word press be intergrated seemlessly into one of the windows?
        How much would you charge for the service?
        Look fwd to hearing back from you
        Thanks
        Vin

  13. Johan H

    Hi there. Can you please help me with exactly this type of thing? I want to implemnt WP on a website that I allready created for some on else.
    Please let me know if you can.

    Regards,Johan

  14. Tom Johnson

    Look at wp_query in the wordpress codex. If you want I can send you some code. But basically that’s the php statement that you want. If you’re just trying to syndicate your rss feed on a non-wordpress site, that’s different. in that case, see something like feeddigest for a javascript rendering of your feed.

  15. Josh

    So is this basically how to do this process with a HTML table based website? Or should one convert they’re table based website into CSS first?

  16. Véridique Online Transcription Services

    What an excellent, excellent article. *Exactly* what I was looking for; thank you so much.

    I’ve always been mystified by the process, going with the option you initially mentioned, finding a theme that looks similar to the site and making rudimentary edits. However, for my current design, that was definitely not an option. Thank you so very much for the *step-by-step* DETAILS that I needed!

    Respectfully,
    - Harmony M.

    P.S. In the last sentence of Paragraph 2 of your article, I think you meant “so the reader will have ‘A’ seamless navigation experience.”

    :~)

  17. Ashley

    I am trying to intergrate the blog into my site and so far so so good but I get this message:

    Fatal error: Call to undefined function: cfct_loop() in /homepages/15/d310880152/htdocs/wordpress/index.php on line 103

    Do you have any suggestions?
    Do you know what I can/need to do?

    1. Tom Johnson

      Ashley, integrating WordPress into a regular HTML site requires a knowledge of the necessary PHP tags. When you get an error, it’s most likely a problem with The Loop. Search the Codex for info about the loop for more details.

      The cfct_loop() function, though, isn’t the WordPress loop. That seems to be part of a plugin. Maybe you deactivated a plugin that has a php call that is now problematic? Try removing it or reactivating your plugins.

    1. Tom Johnson

      wow, I receive a lot of how-to questions with this post. While I would love to provide more guidance here, I simply don’t have time. If you get too frustrated trying to do this on your own, I am available for hire. I can usually create a theme for you for about $300 to $500.

  18. William Clark

    Hi there,

    I would like to buy a little of your time. I am a lamp developer, but do not have much experience with WordPress.

    Can You email me with your phone number and a good time to call? I can pay you immediately using PayPal.

    best regards,
    Bill Clark

  19. eventman

    We have finally intergrated a new blog to our existing site and were happy with the results, I would however in future just build the entire site in wordpress and just create a custom theme to start off with!

    Take a look http://www.centre-events.co.uk the blog part/wordpress part is in the news section

  20. Tom Johnson

    No, you don’t need to pay to modify a theme. Even if you buy a premium theme, the licensing behind WordPress allows you to do whatever you want to it. However, if you’re on wordpress.com, then yes, you need to pay for the CSS upgrade to access your stylesheet. Even then, you can only make superficial updates.

  21. locvacancesm

    [MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
    Un site excellent ! La location saisonnière est une bonne alternative à l’hôtel et beaucoup moins cher !

  22. types of dogs

    [MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
    Hi and many thanks for the comment you still left on my blog, i’ve also bookmarked your internet site and can return as i uncovered the data within your internet page just like a very good source to my very own pup regards Eddie

  23. foods high in vitamin b12

    [MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
    Thanks just like a support to charming the metre to deliberate this, I be informed highly on heart-breaking it and lady-love erudition way more on this topic.

  24. home remedies flaky scalp

    [MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
    I cling on to listening in the direction of rumor speak about obtaining boundless internet dependent grant programs so i’ve been looking for near to for the best internet site to obtain one. Could you reveal to me please, especially where could i arrive around some?

  25. Maya Contrell

    [MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
    Hey how are you doing? I just wanted to stop by and say that it’s been a pleasure reading your blog. I have bookmarked your website so that I can come back & read more in the future as well. plz do keep up the quality writing

    1. Tom Johnson

      Thanks for letting me know about the link issue. I’ll fix it. In the meantime, do you have any specific questions about creating a WordPress theme to match a regular HTML site?

  26. David Johnson

    Hello tfforums,

    I am interested in your concept of using a content div to integrate a blog into my existing website. More importantly, I am interested in what limitations such a strategy would have.

    DGJ

  27. tfforums

    Hi David,

    The technique is based on jquery (www.jquery.com), the load() method in particular. This allows sections of pages on the same base URL (ie blog content) to be loaded in other sections of the page (ie content div). It gets more tricky when the links (blog archives etc) also have to work but it is possible by altering the href of any links in the newly loaded content. I took this to the extent of creating a jquery plugin, although its not published because I never really finished it to a professional level – just to my needs. The only thing I couldn’t get to work was the adding of comments section, however i didn’t really try that hard. This means that currently its useful for seemlessly adding blog entries to your site within a div but not if comments are vital. Note that sometimes comments can also attract spam and or script attacks on your site. So now if a client wants comments, I publish to the site using FTP and alter the blog template to match the site. If they dont require comments, I use the plugin. If you want you can have plugin, maybe you could even get the comments section to work!

Comments are closed.