The short:

I’m ecstatic that  it was so flippingly easy to seamlessly integrate a self-hosted Wordpress blog into my website, and I’m going to share a couple tips on how anyone with a minimal knowledge of CSS, PHP, and HTML can do the same. I’m not sure if this is the correct way to do it, but it’s one way (and it works!)

 

The long:

I’ve been on a self-cyber-maintenence kick lately. This included a redesign of my web page (dangreenblatt.com), and a (third) attempt at blogging. My more successful of the previous two attempts, which was intended to chronicle my adventures in the northern parts is still up at danheartsfinland.blogspot.com. The other attempt was something I tried when I was bored at work one afternoon. I honestly don’t even remember what the URL is. 

So, with a web page in place (and looking mighty snazzy, I might add, thanks to the savvy people at Free CSS Templates) I came home from work today expecting to spend endless hours trying to integrate a blog in with my website. I had previously made an account on Wordpress, but spent some time today reading about the difference between using wordpress.com and wordpress.org, and the relative pros and cos of both approaches. Basically, the difference lies in where the Wordpress viscera is hosted. If you sign up for an account at Wordpress.com, you can log in to their website to manage your blog, and they have a very nice selection of Wordpress themes to choose from. But you can download the aforementioned code from Wordpress.org, upload it to your own hosted website, go through a ridiculously painless process, and log in to an administrative interface on your own site that lets you manage all your posts just as you would on Wordpress.com.

Why would one want to do this? There were two main advantages for me:

• Better functional integration — not making users go back and forth between two different domains (dangreenblatt.com and wordpress.com) when navigating through my site). For example, if someone clicks on the ‘Blog’ link and it takes them to the blog, then from within the blog they should be able to click on the ‘Home’ link and be taken to the homepage of my website, not the homepage of the blog. (this is, of course, a subjective matter – it’s how I wanted my site to work, but it’s by no means the ‘right’ way). Essentially, I wanted to have one global navigation bar across all parts of my site.
• Better aesthetic integration — I wanted my web page to have the same look and feel as the blog. While Wordpress.com offers a set of very svelte themes, I didn’t find an analog to the ‘plainoffice‘ CSS theme I used for my site (if you poke around the web, you can find many design themes that have ports for both Wordpress and ‘normal’ CSS web pages).

So, in a couple of easy steps (loose definition of ’step’), here’s how you too can host a blog on your server and integrate it in with a website:

1. As I mentioned earlier, if you spend enough time surfing around sites like Free CSS Templates and freewpthemes.net, you’ll find that some themes — such as plainoffice (css, wordpress theme) – have analogs that work for both a regular website and a Wordpress blog. I was fortunate (?) in that my site was up for a facelift, so I had the liberty of surfing the interwebs until I found one of these double-duty themes that fit my needs (specifically, clean, simple, and easy to work with). If you’re not so keen on the idea of revamping the look and feel of your site, then maybe this isn’t the right time to be thinking about doing this (honestly though, it’s not you, it’s me). Of course, you could convert your current site’s CSS theme into a Wordpress theme, but that’s another tutorial entirely (and I’m sure many have been written on the subject).Note: It will come in handy later on if you structure your web site to have a pretty simple navigation scheme — such as a global navigation bar (GNB) — which contains a link to your blog (and other links to ‘home’, ‘porfolio’, ‘contact’ .. whatever). I put my blog in a subdirectory (www.dangreenblatt.com/blog) and set the blog link of my GNB to there.
    
2. Once you’ve settled on a theme, and got your website up and running (haha – I already said that i was working with a loose definition of steps! , download the most current release of the Wordpress engine from Wordpress.org, and follow their really straightforward instructions on how to install this on your own site. I’m no expert at PHP, MySQL, CSS, HTML, and utilities such as FTP, but I’ve got a fair bit of knowledge about these – and installation was really a breeze. If you’re not super-familiar with these tools, the Wordpress site has got all kinds of links and support forums to help you on the way. My fingers are crossed that your experience was as painless (dare I say pleasurable?!?) as mine was….
3. Wordpress comes off-the-shelf with  one or two themes, so chances are that whatever theme you’ve picked is not going to be one of them. But … guess how easy it is to add new themes into your hosted Wordpress installation? Go on … guess! If you said stupid easy (or the equivalent), you are correct! It’s literally as simple as downloading the theme (most likely a .zipped folder chock full of .css files and .php scripts) from a sit, then uploading a folder to a particular location in the Wordpress installation on your web site. Then just reload the themes page of your Wordpress admin interface, and Whhooomph There it is!
4. OK – now comes the mildly challenging part of the whole process. How do you piece together the links in the navigation bar of your blog so that they link back to the appropriate pages on your site, and not ‘pages’ in the blog as they are intended for? You need to modify a special file in your Wordpress theme called ‘header.php’ and replace the smart, dynamic php code with plain ‘ol html. And now, a disclaimer:

Disclaimer: If you follow these instructions, you will pretty much 
disable the ability to have distinct pages on your blog. I recommend
creating a backup of header.php and saving it in a safe place before
modifying the 'live' copy of header.php. This change does not affect
the ability of Wordpress to do smart things like filtering based on
tags, so you can still have a dynamic page that is comprised of all
your blog posts that, say, have the tag 'technology'.

 Basically, the way the header.php is responsible for rendering a list of links on the top of your blog pages; each link corresponds to a static blog page that you’ve created using the Wordpress administrative interface. The .php file works by dynamically querying a database for a list of pages, and then squirting out HTML code to include a link to each page.

On your server, the header.php file can be found at $BLOG_HOME/wp-content/themes/$THEME_NAME. But you can also access this file by using Wordpress’ supa-sweet admin interface and navigating to Design->Theme Editor, and then choosing the header.php link on the right hand side. There, in the text box, you’ll see the content of the header.php file for the active theme. I don’t know the ins and  outs of Wordpress theme development, but assuming the theme you’ve chosen has some kind of GNB, it probably contains a section that looks something like this:

<!-- start header -->
<div id="logo">
	<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
	<p><?php bloginfo('description'); ?></p>
</div>
<div id="menu">
	<ul>
		<li class="page_item<?php if (is_home()) echo ' current_page_item'; ?>"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
		<?php wp_list_pages('title_li=' ); ?>
	</ul>
</div>
<!-- end header -->

The code in the  ”menu” div is responsible for the aforementioned link squirting. In order so that the global navigation bar contains links to the appropriate pages on your website (sorry … buh-bye blog pages), all you really need to do is gut that section and include in static links, like this:

 <!-- start header -->
<div id="logo">
	<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
	<p><?php bloginfo('description'); ?></p>
</div>
<div id="menu">
	<ul>
		<li><a href="../index.html">Home</a></li>
		<li><a href="../about.html">About</a></li>
		<li><a href="../resume.html">Resume</a></li>
		<li><a href="../portfolio/index.html">Portfolio</a></li>
		<li class="current_page_item"><a href="./">Blog</a></li>
		<li><a href="../contact.html">Contact</a></li>
	</ul>
</div>
<!-- end header -->

This code echoes the code that exists in my Dreamweaver template (and thus all the pages on my site), so that as I navigate from site to blog, and blog to site, these links remain constant. Neato!!!!

***UPDATE 07/08/2008***
I changed the way permalink settings of my blog to go from using the “?p=$POST_NUM” notation to using the more semantically-meaningful “/$YEAR/$MONTH/$DATE/$POST-NAME” syntax. Because pages are no longer at the top level of the blog (but buried down a few subdirectories deep) the relative links I have in this header from the blog to my home page, about page, etc. have all broken. 

There may be a more elegant way to fix this (does anyone know about a Wordpress PHP variable that represents the location of the blog’s top-level?), but I just used the brute force approach and put in absolute links that seem to work ok for now: 

<li><a href="http://www.dangreenblatt.com/index.html">Home</a></li>
<li><a href="http://www.dangreenblatt.com/about.html">About</a></li>
<li><a href="http://www.dangreenblatt.com/resume.html">Resume</a></li>
<li><a href="http://www.dangreenblatt.com/portfolio/index.html">Portfolio</a></li>
<li class="current_page_item"><a href="http://www.dangreenblatt.com/blog/">Blog</a></li>
<li><a href="http://www.dangreenblatt.com/contact.html">Contact</a></li>

---

 I hope you’ve found this tutorial helpful. I realize it’s not very technical, and is missing some details, but I hope it gives you at least a conceptual understanding of how (simply!) this can be done, and also that there are enough links to point you in the right direction  if you get stuck. If you enjoyed reading this (or if you hated it!), or have any feedback on how this can be done more elegantly, please leave a comment!

 

 

 

 

 

 

No related posts.

This entry was posted on Monday, June 30th, 2008 at 11:06 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.