ruzee.com - Steffen Rusitschka

If you have a blog based on WordPress and you want to integrate zenphoto into that, you do that by creating a zenphoto theme that is based on your WordPress theme. I did that with my gallery and here’s a description on how I did that.

In the zenphoto installation directory, there’s a themes folder. Use one of these themes as a basis for your WordPress-like zenphoto theme by simply copying and renaming it and then activating it in zenphoto. A theme basically consists of its CSS, and the files index.php (the albumbs overview), album.php (an album with thumbnails), and image.php (for one single image). All these php files need to be touched in a similar way. I’ll explain it for index.php.

The first line in index.php is

<?php if (!defined('WEBPATH')) die(); ?>

Keep that one - never remove it. After that line, add the following one to import all WordPress functions (and replace “/blog/” in the URL with the installation directory of WordPress in your web root):

<?php require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php'); ?>

After this line, we tell the WordPress theme to include the CSS of the zenphoto theme:

<?php
// add the zen css to the wordpress header
function addcss() {
  global $_zp_themeroot;
  echo '<link rel="stylesheet" href="'.$_zp_themeroot.'/zen.css" type="text/css" />';
}
add_action('wp_head', 'addcss');
?>

Now, remove all stuff from DOCTYPE to the “main” DIV and replace it by the header code of your blog:

<?php get_header(); ?>
...

Simply copy&paste all necessary code from your existing WordPress theme up to the beginning of the “content” DIV. Don’t include the “main-loop” part of the WordPress theme - but leave the “main” DIV of the zenphoto theme as it is.
After the “main” DIV is closed, close the WordPress “content” DIV and add the sidebar and the footer from your existing WordPress theme:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

If you have WordPress and zenphoto use the same database on your machine, then your done. If not, you have to add two more lines to switch between the two databases you use. You do that by putting

<?php db_connect(); // reconnect to zenphoto db ?>

right before the beginning of the “main” DIV and

<?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>

right after the end of the “main” DIV.

The final index.php of your new zenphoto theme will then look like:

<?php if (!defined('WEBPATH')) die(); ?>
<?php require($_SERVER['DOCUMENT_ROOT'].'/blog/wp-blog-header.php'); ?>

<?php
// add the zen css to the wordpress header
function addcss() {
  global $_zp_themeroot;
  echo '<link rel="stylesheet" href="'.$_zp_themeroot.'/zen.css" type="text/css" />';
}
add_action('wp_head', 'addcss');
?>

<?php get_header(); ?>
<?php db_connect(); // reconnect to zenphoto db ?>

<div id="content" class="narrowcolumn">
  <div id="main">
    put everything from the original zenphoto
    index.php "main" DIV here ...
  </div>
</div>

<?php $wpdb->select(DB_NAME); // reconnect wordpress db ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Follow the same steps for album.php and image.php and you are done.

Tags: zenphoto, wordpress, theme

This entry was posted on Saturday, June 10th, 2006 at 14:53 and is filed under Web Design, Wordpress. 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.