Recently we took on a client to implement WordPress blog into their already existing website. The thumbnail on the left below is a photo of their previously existing website. The thumbnail on the right shows their new WordPress blog implementing into their already existing design. (click on the images below to see an expanded example):

The Customization and implementation of the blog took us about a days work in order to get the formatting perfect. One of the biggest concerns is getting the the formatting and colours consistent throughout all of WordPress’s inner pages.

In more WordPress news we successfully implemented the JavaScript lightbox 2.0 image viewer used with the thumbnails above which was an extremely simple process. In the header file for your WordPress theme you include the reference to your Lightbox 2.0 pack which can be found here:

Lightbox 2.0

And then when including the anchor tag to link your thumbnail to your larger screenshot image, you include a rel=”lightbox” parameter, and to get images into a set, you include a common ID. An example of this is:

<a rel=”lightbox[sosm]” href=”../images/blog_assets/sosm1.jpg”>

<a rel=”lightbox[sosm]” href=”../images/blog_assets/sosm2.jpg”>

Wow, that is enough excitement for today! Enjoy yourselves out there.

~R. Charmley

It took a few hours to determine the best way to integrate a WordPress build into my already functioning website. With these tips you should be able to do it in under an hour and here is how:

• Download WordPress here: WordPress Weblog Platform
• Move the WordPress build into the http://www.yourwebsite.com/blog folder
• Add a shell database using PhpMyAdmin
• Install WordPress by going to: http://www.yourwebsite.com/blog
• Login to your blog (I immediately change the admin password) and go to the ‘Design -> Theme Editor’ section
• First modify the Header. I include my StyleSheet as the last style sheet and access it by adding ‘http://www.yourwebsite.com/’ to the beginning of the path (which is what you will need to add to all of your IMG and HREF tags.
• Next, copy and paste your templates header replacing the WordPress tags <div id=page> and <div id=header> I include everything that exists within my template that appear before the content (ie banner, left menu, top menu). Don’t forget to update your IMG and HREF tags with a ‘http://www.yourwebsite.com/’.
• Then I address the footer file. Here I replace all of the code with my footer. It is important to include your closing div tags for any opened div tags that you added to the header. Do this with maintaining the structure from your template.
• Address the sidebar section next. Here I remove the meta information list element and customize the titles between the H2 tags.
• A seemingly daunting but simple area is the Main Index Template (index.php). In here I delete nothing. To add static content above your blog’s main page, add it under the <?php get_header(); ?> tag and above the <div id=”content” class=”narrowcolumn” > tag.
• Now you must carry through the changes to index.php to all of the inner content pages.  These include: 404.php, archive.php, archives.phh, image.php, links.php, page.php, serach.php and single.php.  The same system can be employed that was employed for the index.php file.
• Lastly is adjusting the CSS file which can be found in the Stylesheet (style.css) section. Consideration varies depending on the definitions that appear in your template’s CSS file. This part is by far the most complex and will take some time to master to master the elements.  I recomment deleting most of the wordpress template definitations and creating your own, especially in regards to UL, LI, and the header tags.

That’s it! Now you are ready to share your voice with the world in the luxury of your own website / template design!

Blog on.