Logo Studio 7c

Photography and Video for London and the South East

Integrate a WordPress blog with your website

 
It’s difficult to find good information about integrating a WordPress blog into your existing website. I’m happy to report that I successfully used the video on this page to get the job done:

Integrate WordPress into Any Website Using TwentyTen 2011

You need to watch it very, very carefully to see what’s going on. The chap in the video completes the process in 14 minutes … for your first time I’d allow 240 minutes or so! You also need a little html/css knowledge, and feel happy about hacking files around.

It’s 2013, but I used the WordPress TwentyTen theme … it’s what the video is about, and it provides two lovely columns of blog and sidebar, so that settled it for me.

What I used:
Wordpress 3.5 (Theme is stored blog/wp-content/themes/twentyten)
Interarchy 9.0.1 FTP Software
Dreawmeaver CS5

I created the studio website in Dreamweaver – I know and like Dreamweaver, and I didn’t want to use WordPress to create the whole site – I know this approach is favoured by lots of web developers, but I’m not a web developer!
I had two empty columns to fill, one with blog posts, the other with usual blog sidebar stuff. How hard could this be?

What I learned along the way:
Studio7c.co.uk uses Dreamweaver templates, and my first challenge was to deal with this. I decided the best way was to abandon any hope of getting the template mechanism work with the blog pages. My first step was to create a new page based on the site’s .dwt template – but importantly, I unchecked ‘Update page when template changes’.
The great thing, and the terrible thing about websites is that they are simple text pages – so any changes to the template (normally for menu, header, footer) can be cut and pasted to the blog source. Most changes to your regular site, will also have to be made to header.php.

The next thing to understand is that identifying the head and body of your page has nothing to do with the html <head> and <body> tags … Worpress seems to work by serving up chunks of html that together make a whole, proper html page. So header.php doesn’t supply the contents of the <head> tag, but when it’s called, it does spew out the html for the top of your page.

Accurately carving your site into a header / body and footer is the key to success.
For my page, the ‘body’ is very simple. It’s the code that refers to my two empty columns:

  <div class="main-content">
    <div class="content p7ehc-1">

     <p>Main blog stuff in here</p>

    </div>
  </div>

  <div class="sidebar">
    <div class="content p7ehc-1">

     <p>Sidebar in here</p>

    </div>
  </div>
  <span class="clearfix"> </span>

Anything above these divs is the ‘header’ and anything after is the ‘footer’. Once you identify these three chunks, it’s relatively simple to finish the job.

The main part of the video tutorial deals with header.php, index.php and footer.php – notice that sidebar isn’t that important, though we do remove the bulleted lists near the end of the job.

The other files mentioned in the video that need to be changed are:
404.php
archive.php
author.php
category.php
search.php
single.php

If you get this far, then you’ll be feeling more confident – and you’ll see if any other .php needs to be changed if clicking something in your blog. Click on an attachment and all hell breaks loose, so change attachment.php …

After the blog was integrated and working, I spent a lot of time trying to work out what TwentyTen’s style.css was doing, I wanted to match fonts and colours etc.
What I realised is that the .css you use for your main site is working hard on those blog columns, so look there first. I think there are some specific tags that need to be styled, so I also took some code from the WordPress style.css file and added to the end of one of my sites .css files:

.widget_search label {
    font-size: 1.2em;
    color: #E1E1E1;
}
.widget-title {
    font-size: 1.2em;
    color: #E1E1E1;
    font-weight: bold;
}

Seemed to get me what I wanted.

This entry was posted in Website and tagged . Bookmark the permalink.

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>