How to Integrate a TwentyTen WordPress Blog into your website

 

Embedding a WordPress blog into an existing website is a relatively easy matter to acheive by using the Iframe method – just link your website blog URL to the Iframe and if you have tweaked the CSS to eliminate most of the WordPress styling then a fairly plain looking blog can sit nicely inside your custom HTML pages to match the rest of your site.

Our Childrens Clothes website here at Boobox was originally designed that way however, this did not allow our site to link correctly to our blog and vice versa because the two sites behave as two.

If somebody finds your blog URL (usually www.yoursite.com/BLOG/) then they will see a plain, unstyled page with no reference to your actual site or any of your site template. Also, although the direct URL to the blog will be correct, if it is seen on your main site inside the Iframe it will always only have one URL link i.e www.yoursite.com/blog/INDEX.HTM/.

So, the best way to integrate WordPress is to create a custom theme using your existing website template. This is not as complicated as it seems and may also serve as a method of designing future custom themes. The method described here is how we implemented this blog integration.

Firstly, I will assume that you have downloaded and installed WordPress to your site and have used the now default Twenty Ten theme and that your default install directory is www.yoursite.com/BLOG/. Look at this link http://codex.wordpress.org/Installing_WordPress if you need help with installation or if you have c-panel login to your website, you may have scriptaculous where you can install WordPress automatically.

wordpress 300x262 How to Integrate a TwentyTen Wordpress Blog into your website

Step One: Make a backup copy of the Twenty Ten theme and rename it to your choice of theme name. Make sure that the copy is in the same directory as the original Twenty Ten theme www.yoursite.com/blog/wp-content/themes/ this will ensure that if you make a future update to your wordpress software it does not overwrite your new theme. Go to appearance/themes and activate the new copied theme.

Step Two: You need to customise the new theme to achive the look of the blog section (this is your page body and not any of your custom design) that you require inside your website. To do this you must edit the theme in appearance/editor/styles/stylesheet.css (sytle.css). The Twenty Ten theme is very minimalistic to start with so it needs very few changes, but you might want to change header and footer text, the width of the theme and some of the colours. Pay particular attention to the top of the blog as you may need the create a space large enough for your website design header.

#header {
padding: xy px 0 0 0;
}

The first value (xy) of the above CSS rule is the margin from the top so a typical value may be between 100 and 500px but it all depends on your site design. This is our blog page after styling.

wordpress 3 300x254 How to Integrate a TwentyTen Wordpress Blog into your website

We have removed the header image from the page in appearance/header.

Step Three: Copy two files from your WordPress installation to you computer for editing. Using your favorite FTP software go to www.yoursite.com/BLOG/WP-CONTENT/THEMES/NEW THEME/ download HEADER.PHP and FOOTER.PHP.

Step Four: If you have a HTML website you will have a plain page with no content but all the code of the template design – if you don`t have one then build one. This will typically be made up of a header / empty body and a footer. In order to make things a little simpler you need to split this page into two new pages. Make one page with just the header / empty body, include any menus, java scripts etc that you need and save it as a plain HTML file (header.htm). Make another page with just the footer again with any menus, java script etc but make sure that the footer is at the top of that page and not further down as you would expect (this will allow the footer to move with the content from the end of your blog).  Save this file as another plain HTML file (footer.htm). Look through all the code on these two new pages for href=” and src=”. These links may look like this: href=”../[page url] and src=”../[image url]. Make sure that you have absolute links at all these places i.e href=”www.yoursite.com/[page url] and src=”www.yoursite.com/[image url].

Step Five: Using your favorite HTML editor i.e Dreamweaver or other, open up the previously downloaded WordPress files header.php and footer.php and the newly created header.htm and footer.htm. Look at the code from your new temporary HTML header page template and copy everything from the top of the page to the end of your code . Go to header.php and look down the code to about line 51 and you should see the start point for the WordPress header – paste the copied code between the wp_head and head tags:

wp_head();
?><—- Add Code Here—–></head>

Save this file back to its original location in your WordPress installation (www.yoursite.com/blog/wp-content/themes/new theme/).

Step Six: Go back to your new temporary HTML footer page template and copy all the code from the top of the page to the end of your code. Go to footer.php and paste this code at about line 48 between the wp_footer and html tags:

wp_footer();
?><—-Add Code Here—–></body></html>

Save this file back to its original location in your WordPress installation (www.yoursite.com/blog/wp-content/themes/new theme/).

You should now have your website design as a template with your blog showing. You may need some more CSS tweaks in stylesheet.css if the blog page is not in the correct position.

If your site has a background element showing either side of the main page then the Twenty Ten theme has an option to add this. Go to appearance/background and choose the options there that you need.

It is important to change the name of your theme within the stylesheet so that WordPress does not see it as Twenty Ten and overwrite it. At this point and you can also customise other details of your theme. Go back to the stylesheet.css and edit the details at the top of the file shown here in red:

Theme Name: Your Theme Name
Theme URI: http://www.yoursite.com/
Description: A custom modification of the WordPress Twenty Ten theme designed by Your Name.
Version: 1.2
Author: Your Name

A small tip for those who don`t use CSS regularly, if you make a change to any value write down the original value first so that if it is wrong you can return it back to its default and if you keep a changed value mark it with your own personal signature so that you can retrace any changes you make. At Boobox we simply add /*BB*/ after the value – this does not affect the CSS and you can put anything between * *.

This entry was posted in Web Design. Bookmark the permalink.

One Response to How to Integrate a TwentyTen WordPress Blog into your website

  1. Thanks for sharing your solution – I’ve been trying to resolve exactly this problem on one of my sites. I’ll post again once I’ve implemented your advice.

    Thanks again

    John