How to Display WordPress Sidebar on Non-WordPress Websites
While working on my latest project, DevGrow Discussions, I came across the need to embed my entire WordPress sidebar on a non-WordPress site – specifically a bbPress forum. Since I make use of various widgets to display popular posts and other dynamic content, simply copying and pasting the HTML would not suffice. In the end, there are really only two ways of going about this:
- Include your wp-load.php file in your application and in effect load the entirety of WordPress to get access to the plugin functions
- Use simple caching to store the sidebar in HTML format and include it in any other application, then rebuild it as necessary when new content is published
If it’s not obvious enough, the first option is very costly in terms of database queries and can significantly slow your site down. The second option requires a little effort in implementation but performance wise there is no competition.
Caching Your WordPress Sidebar
Before we can write our function, we need to understand exactly what we’re trying to do. Our goal is to cache our sidebar to a text file and update that cache whenever we publish a post, change our theme or make changes to the sidebar widgets. Since we’re planning on using our cache to display the sidebar on a different application, we need to be able to easily delete the cache without any ill-effects (we don’t want our sidebar broken at any time).
To accomplish this efficiently, we’ll also create a log of our cached files and use that to determine whether the cache should be cleared. If so, the actual cache file will be overwritten the next time someone visits the WordPress site, ensuring a proper sidebar is always rendered on both applications.
Creating the Functions
To get started, open up your theme’s functions.php file and add the following functions to it:
function cache($task, $cacheFile, $cacheTime = 21600){
global $cache;
// Configure files and directories:
$cacheDir = TEMPLATEPATH."/cache";
$cacheFileName = $cacheDir."/cache-$cacheFile.txt";
$cacheLogFile = $cacheDir."/cache-log.txt";
// Make cache directory if it doesn't exist
if(!is_dir($cacheDir)) mkdir($cacheDir, 0755);
// Make a log of the cache files with their current status
if(file_exists($cacheLogFile))
$cacheLog = unserialize(file_get_contents($cacheLogFile));
else
$cacheLog = array();
if($task == 'start'){
// If cache exists, is less than 6 hours old and is not in deletion queue, keep it - otherwise rebuild cache
if(file_exists($cacheFileName) && (time() - filemtime($cacheFileName)) < $cacheTime && $cacheLog[$cacheFile] == 1){
$cache = false;
} else {
$cache = true;
ob_start();
}
}elseif($task == 'end' && $cache){
// If caching, save file contents and update log
file_put_contents($cacheFileName,ob_get_contents());
ob_end_flush();
$cacheLog[$cacheFile] = 1;
file_put_contents($cacheLogFile,serialize($cacheLog));
}elseif($task == 'purge'){
// Set cache to delete and update log
$cacheLog[$cacheFile] = 0;
file_put_contents($cacheLogFile,serialize($cacheLog));
}
}
function cache_purge(){
$cacheDir = TEMPLATEPATH."/cache";
$cacheLogFile = $cacheDir."/cache-log.txt";
if(file_exists($cacheLogFile))
$cacheLog = unserialize(file_get_contents($cacheLogFile));
else
$cacheLog = array();
foreach($cacheLog as $key=>$value)
$cacheLog[$key] = 0;
file_put_contents($cacheLogFile,serialize($cacheLog));
}
These first function, cache, is the key to getting our cache to work. Depending on where in your file you call it, the function will set up the correct files and directories, verify a cache needs to be built and if so, will save the output and update the cache log. The function uses PHP’s output buffering to save any HTML generated into a text file.
The second function is used to purge all cache files and is useful for adding to existing WordPress hooks. With it, we can make it so our cache is cleared every time our theme is updated, a post is saved or our sidebar widgets are updated by adding the following at the end of functions.php:
add_action('switch_theme','cache_purge', 10);
add_action('publish_post','cache_purge', 10);
add_filter('widget_update_callback','cache_purge', 10);
For a full list of hooks, check out the WordPress Plugin API Reference.
Configuring Your Sidebar
Now that you have the functions ready, you can begin caching your sidebar. Open up your sidebar.php and add this line to the beginning of the file:
<?php cache('start', 'sidebar'); ?>
This function will start caching the sidebar it needs to, otherwise it will do nothing. Because of the way the PHP output buffering function works, we also need to close off the buffer at the end of the file as well. Add this line to the very bottom of the same file:
<?php cache('end', 'sidebar'); ?>
After you’ve added those two lines, refresh your blog. You won’t see anything in your browser but check the /cache directory in your theme folder and you should see two files starting with cache-.
Using Your Cache
Now that you’ve created your cache file, you can use it in any application that has access to it. You can easily do this using the include_once function but I also like making sure the file exists, just to be safe:
<?php $myCachedFile = "/path/to/cache-sidebar.txt"; if(file_exists($myCachedFile)) include_once($myCachedFile); else echo "Cache doesn't exist."; ?>
Just be sure to double-check your file path is correct. If you want to set your cache to delete from an external application, you’ll have to include the cache_purge function in your script somewhere and simply call that whenever necessary. After that it’s simply a matter of calling the function:
<?php purge_cache(); ?>
Conclusion
This technique is really useful for any PHP application, especially when you want to display dynamic content without having to sacrifice performance. Use it to speed up your WordPress install or be able to use useful bits (like the sidebar) on any other website or application.
