Posts Tagged ‘tutorial’

Integrating WordPress into a Kohana application (or any other framework)

Friday, December 9th, 2011

I recently tried to integrate a WordPress blog into a Kohana application, and it turned out to be relatively easy. The method that follows was implemented with Kohana but the same principles can be applied to any other PHP frameworks.

When integrating WordPress, what you really need most of the time is to style the blog so that it fits within your current website. You usually also want the same header and footer as in the rest of the website.

To do so, the idea is to create some API that will allow WordPress to retrieve the header and footer from your application. Then you use the PHP function file_get_contents to import and display this content.

1. Create an API controller in Kohana

First create a new controller in Kohana that will allow getting the header and footer, and output them as HTML. In my case, I simply created an “API” controller:

class Controller_Api extends Controller {
	
	public function action_header() {
		$view = View::factory('header');
		echo $view->render();
	}	
	
	public function action_footer() {
		$view = View::factory('footer');
		echo $view->render();	
	}

}

Once this is done, you can call “http://yourdomain.com/api/header” to get the header or “http://yourdomain.com/api/footer” to get the footer.

2. Install WordPress

Just install WordPress as you would normally do, in any folder at the root of your website (let’s call it “blog” in this example).

3. Create a new WordPress theme

Go to “/blog/wp-content/themes” and copy and paste the default WordPress theme (twentyeleven for 3.x) into a new folder. Rename the folder to the name of your website.

Then go into WordPress’s admin panel and select your new theme.

4. Load your own header and footer

Now you need to modify the footer and header files of the WordPress theme so that they load your own files. Something like that should work:

header.php:

<?php
$url = "http://yourdomain.com/api/header";
echo file_get_contents($url);
?>

<div class="wrapper-box">
	<div id="blog">

footer.php

<div class="clear"></div>
	</div><!-- #blog -->
		</div><!-- #wrapper-box -->

<?php echo file_get_contents("http://yourdomain.com/api/footer"); ?>

“wrapper-box” is the box where you would normally put the main content in your website. “#blog” will be the div containing WordPress’ content.

So just by doing that you should have a working WordPress blog. The main problem however is that by replacing the header you are going to lose WordPress styling. So the next section will explain how to get it back.

5. Bring back WordPress’s styling

In Kohana, modify the header template to load a style file specific for the blog (maybe disable or enable the style depending on the current URL). Don’t directly link to the theme’s style.css but rather create a new empty file (let’s call it “blog.css”). The best way is to start with an empty file and progressively add to it.

Add back WordPress’s style to “blog.css” by copying and pasting from the original theme’s “style.css”. There are some sections of the CSS file that are safe to copy and paste completely – Menu, Content, Images, Images Border, etc. Usually it’s clear from the name that the style is not going to cause any problem. Avoid the section titled “Global” or “Header” as they may change things site-wide and thus break the header, footer or other elements.

If some CSS rules conflict with your current style, just prefix them with #blog. For example, I changed the “a” styling to the following so that it doesn’t change the links in the header and footer:

#blog a {
	color: #1982D1;
	text-decoration: none;
}

#blog a:hover {
	color: #1982D1;
	text-decoration: underline;
}

Your might want to customize the CSS further to either remove some elements or change the margins to make it matches your website.

Copyright © Pogopixels Ltd, 2008-2018