{"id":14,"date":"2011-03-02T16:44:26","date_gmt":"2011-03-02T15:44:26","guid":{"rendered":"http:\/\/www.retibus.com\/en\/blog\/?p=14"},"modified":"2011-03-07T19:27:38","modified_gmt":"2011-03-07T18:27:38","slug":"embedding-wordpress-into-an-existing-website","status":"publish","type":"post","link":"http:\/\/www.nubaria.com\/en\/blog\/?p=14","title":{"rendered":"Embedding WordPress into an existing website"},"content":{"rendered":"

WordPress is the content management system that is used as the underlying software platform for a lot of blogs, including this one. When I decided to start the Retibus Blog, I briefly considered rolling out my own PHP-based solution in order to add a blog section to the website. I quickly dismissed that idea, though. It would have been a lot<\/em> of work to get most of the features that people expect from blogs, like enabling readers to register as users, add comments, make permalinks available for the individual posts and so on. I then decided that it would be much more convenient not to re-invent the wheel and leave all the dirty work in the hands of WordPress. That was a wise decision. The WordPress software is very powerful and elegant, and makes it very easy to administer a blog. However, while it is quite easy to download the latest version, install it and set up a website wholly powered by WordPress, things are not that simple if you want to integrate a WordPress blog within an existing website, keeping a uniform look and feel across the blog and non-blog parts of the site. In this post I’m going to explain a technique to seamlessly integrate a blog powered by WordPress into an existing website.<\/p>\n

\n\"A\n<\/div>\n

<\/p>\n

1. Alternative approaches<\/h2>\n

There are actually three possible approaches if you want to add a WordPress-powered blog to an existing site:<\/p>\n

    \n
  1. Rebuild the whole site using WordPress. WordPress lets you add custom pages where you can replicate the contents of the original site.<\/li>\n
  2. Write your own PHP code in order to set up a WordPress loop<\/a> within the existing site.<\/li>\n
  3. Tweak a WordPress theme so that the blog page mimics the look and feel of the rest of the site.<\/li>\n<\/ol>\n

    The problem with the first approach is that it affects the whole site. If you’re building a new site from scratch, it may make sense to make it fully managed by WordPress, but if you just want to add a \u2018Blog\u2019 or \u2018News\u2019 section while leaving the rest unchanged, porting everything to WordPress pages may be a high price to pay. My decision was not to go that way, and use WordPress only for the \u2018Blog\u2019 section. This leaves us with the two other options.<\/p>\n

    The second option consists in doing everything by hand. The WordPress documentation has an article<\/a> which explains the basic facts about how the WordPress loop works. This approach gives you a lot of flexibility. By calling functions such as get_posts<\/code>, query_posts<\/code> and have_posts<\/code> you can retrieve the posts as plain text and use your HTML, CSS and PHP skills to format them as you wish. But it should go without saying that this approach is not for the faint-hearted. After you manage to display some posts, you will find that you need to provide a \u2018Comments\u2019 section, and then the permalinks, and then a way to navigate through the posts, and then a 404 error page… After a lot of time and effort, you’ll be the PHP programmer of the month, but you’ll probably still be struggling with the odd glitch here and there.<\/p>\n

    The third option is more of a top-down approach, where we begin by setting up an ordinary WordPress blog and then modify its active theme to match the rest of the site. This is in my opinion the easiest way of integrating a WordPress blog within an existing website, and it is how the Retibus Blog itself has been implemented. The remainder of this post explains how to do this.<\/p>\n

    2. The basic steps<\/h2>\n

    Let us suppose that we have a site www.example.com<\/em>. We now want to add a new \u2018Blog\u2019 section powered by WordPress. We will need to follow the next steps.<\/p>\n

    1. Create a dummyblog<\/em> subdirectory and a dummyblog.html<\/em> file that matches the general layout of the site. In this explanation I will assume that the file is HTML and that there is a separate dummyblog.css<\/em> file for the styles, but everything should be the same if the skeleton file is a PHP file or if the styles are inlined.<\/p>\n

    2. In the dummyblog.html<\/em> file add a div element where you would like the blog to appear, like this:<\/p>\n

    <div class="my-website-blog-area">Blog goes here.<\/div><\/code><\/p>\n

    Add a new CSS class to the dummyblog.css<\/em> file, something like this:
    \n
    \n.my-website-blog-area
    \n{
    \nbackground-color:red;
    \n}<\/code><\/p>\n

    Now if you save this and check the www.example.com\/dummyblog\/dummyblog.html<\/em> file, you should have a red area where the blog will be embedded, as shown in the picture below.<\/p>\n

    \n\"A\n<\/div>\n

    3. The next step consists in installing WordPress in a blog<\/em> subdirectory of the site. I assume you know how to do this. If in doubt, refer to the official documentation<\/a>. Once you’ve installed WordPress, the blog<\/em> subdirectory will contain all the WordPress files including index.php<\/em> whereas the sibling dummyblog<\/em> subdirectory contains our non-WordPress dummyblog.html<\/em> and dummyblog.css<\/em> files. If you now access www.example.com\/blog\/index.php<\/em>, you will see the WordPress blog with the default Twenty Ten theme:<\/p>\n

    \n\"A\n<\/div>\n

    Now the problem we are faced with is that we have a fully functional WordPress blog with the Twenty Ten look and feel (blog\/index.php<\/em>) and a dummy web page with a placeholder empty blog area (dummyblog\/dummyblog.html<\/em>). The task ahead consists in tweaking the WordPress theme in order to incorporate the HTML elements of dummyblog.html<\/em> into the web page that the WordPress file index.php<\/em> generates.<\/p>\n

    4. We now have to copy the WordPress default Twenty Ten theme. In order to do this, simply go to the example.com\/blog\/wp-content\/themes\/<\/em> directory and make a copy of the twentyten<\/em> directory, renaming it as mywebsite<\/em>.<\/p>\n

    5. In the new example.com\/blog\/wp-content\/themes\/mywebsite\/<\/em> directory you will find a file style.css<\/em>. Open it in a text editor.<\/p>\n

    6. Edit the comment at the top so as to replace the Twenty Ten name and description with your own:
    \n\/*
    \nTheme Name: My Website Theme
    \nTheme URI: http:\/\/www.example.com\/
    \nDescription: A custom modification of the WordPress Twenty Ten theme.
    \n(…)<\/span><\/p>\n

    7. Open the WordPress dashboard (www.example.com\/blog\/wp-admin\/<\/em>) and check that there is now a second theme in the Themes menu:<\/p>\n

    \n\"WordPress\n<\/div>\n

    Note that WordPress uses the comment at the top of style.css<\/em> to identify the name and description of the theme. If you want to have a different thumbnail image, you’ll just need to edit the screenshot.png<\/em> file in the same directory.<\/p>\n

    8. Activate the new theme. The blog still looks the same since the new theme is just a copy of Twenty Ten. Now comes the fun part.<\/p>\n

    9. In the themes\/mywebsite<\/em> directory find the file header.php<\/em> and open it in a text editor. This file contains the HTML head and the first part of the body.<\/p>\n

    10. In the head element, we need to merge those parts of the dummyblog.html<\/em> file which are required for our site, such as links to JavaScript files and the favicon. In my test I added the highlighted text below:<\/p>\n

    <!DOCTYPE html>
    \n<html <?php language_attributes(); ?>>
    \n<head>
    \n(…)
    \nwp_head();
    \n?><\/span>
    \n<script src="..\/..\/..\/..\/..\/js\/main.js"><\/script>
    \n<link rel="icon" type="image\/png" href="..\/..\/..\/..\/..\/images\/favicon.png"><\/span>
    \n<\/head><\/span><\/p>\n

    You might want to change the way the title is processed too, but the Twenty Ten code does some nifty things like adding page numbers, so it is probably better to leave it as it is.<\/p>\n

    11. We now continue editing the header.php<\/em> file in order to modify the body part. You will find that the Twenty Ten theme has a div element of class wrapper<\/code> inside the body element. That’s where we have to insert the HTML code. So, open dummyblog.html<\/em> and copy all the HTML markup between <body><\/code> and <div class="my-website-blog-area"><\/code>.<\/p>\n

    <body <?php body_class(); ?>><\/span>
    \n(…)<\/span><-- Here goes all the HTML code between body and the my-website-blog-area div --><\/span>
    \n<div class="my-website-blog-area"><\/span>
    \n<div id=”wrapper”><\/span><\/p>\n

    12. Save the header.php<\/em> file.<\/p>\n

    13. Now open the file footer.php<\/em> in the text editor. This is the file that generates the final part of the HTML document.<\/p>\n

    14. In the dummyblog.html<\/em> file copy the part from the closing <\/div><\/code> tag for the my-website-blog-area<\/code> element up to the final closing <\/body><\/code> tag. In footer.php<\/em>, paste the code just before the closing <\/body><\/code> tag:<\/p>\n

    wp_footer();
    \n?><\/span>
    \n<\/div><\/span> <!-- my-website-blog-area --><\/span>
    \n(…)<\/span><-- Here goes all the HTML code between the closing tag for the my-website-blog-area div and the closing \/body tag --><\/span>
    \n<\/body><\/span><\/p>\n

    15. Save footer.php<\/em>.<\/p>\n

    16. Open the file style.css<\/em> in a text editor together with dummyblog.css<\/em>. Copy all the styles for your id and class selectors from dummyblog.css<\/em>, and paste them at the end of the style.css<\/em> file.<\/p>\n

    17. Save these changes and load your site www.example.com\/blog\/index.php<\/em>. There will probably be some glitches with the styles. The things to watch out for are:<\/p>\n