Steffen Hi, the name's Steffen and I'm writing about the Web, programming and all those things coming to my mind. Enjoy your stay.

I'm currently working on fabidoo.com - 3D Printing for everyone!

Integrating zenphoto into WordPress

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: , ,

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.

« A Tutorial for rounded corners with drop shadows
Illusions, Dreams - Don’t care… »

90 Responses to “Integrating zenphoto into WordPress”

1 2 3 … 9 Next > Show All

  • 1
    Sebastian Says:
    June 10th, 2006 at 16:21

    HI Steffen, thanks for sharing this :-)
    I am going to try this out as soon as possible …. BTW have you thought of doing this the other way round ?? I am thinking about a wordpress plugin that includes the zenphoto pages instead of having a zenphoto skin importing all the Worpress stuff.

  • 2
    Steffen Says:
    June 10th, 2006 at 16:37

    Yeah, guess that’s also possible. But zenphoto includes it’s own URLs into the HTML and does some modrewrite stuff. Guess that’ll make things a bit complicated…

  • 3
    Photo Gallery Coming Soon » hwanch.com Says:
    June 28th, 2006 at 5:38

    [...] I decided on ZenPhoto for my picture album.  The only problem is intergrating it into WordPress so that it has the same look and feel.  I tried the advice written here, but it doesn’t work as nicely as I had hoped.  I’m working on tweaking the coding around to make it work better.  I should be done soon, and then i’ll upload pics, including the latest ones from Vegas.   « Open Source Rocks |   [...]

  • 4
    Dimiter Says:
    June 29th, 2006 at 11:38

    Useful article. Do you know how to add a zenphoto identifier? Some sort of variable or better, a conditional tag (like is_zenphoto() ) This is would give better control on the gallery template via the stadard wordpress includes.

  • 5
    Steffen Says:
    July 1st, 2006 at 13:59

    Dimiter, just check for the existence of a ZenPhoto global variable, e.g.

    global $_zp_gallery;
if (isset($_zp_gallery)) {
  echo "zenphoto";
} else {
  echo "WordPress";
}
  • 6
    hip Says:
    July 14th, 2006 at 13:56

    Hi,

    Thanx for the ‘tutorial’. Nice & clear, and really usefull.

    Now my question. It may be beyond this post intention, but it’s 100% related to this post title:

    Does any one know a way of integrating EACH picture and even EACH gallery in a single different WP post, so that each could get commented, RSS’d, rated,…

    I mean, as you can see, more of REAL integration rather than cosmetic (what’s not bad at all, for a start).

    Thanx and have a good day,
    hip

    (I’ll keep on searching around)

    BTW, you could add to the ’spam prevention failure comment’ the following:
    “Sorry, it seems you didn’t pass math!! OR you’ve cookies disabled”

    I’ve been feeling really stupid for a while, doublechecking a 4 + 6 addition. :-D

  • 7
    Jeremy Says:
    July 16th, 2006 at 22:13

    Seems like a great tutorial, but when I try this The page doesn’t load anything… According to w3c html validator the server closes without giving any information back. I’m sure I probably just missed something small. I’m very new to PHP and and just mediocre at CSS. Any help is appreciated. Here are the contents of my index.php:

    getCurrentTheme();
    $_zp_themeroot = WEBPATH . “/$themepath/$theme”;
    if (in_context(ZP_IMAGE)) {
    include(”$themepath/$theme/image.php”);
    } else if (in_context(ZP_ALBUM)) {
    include(”$themepath/$theme/album.php”);
    } else if (in_context(ZP_INDEX)) {
    include(”$themepath/$theme/index.php”);
    }
    ?>

    ‘, ”, ‘ ‘); ?>

    “>XHTML’); ?>
    Valid CSS
    XFN
    “>WordPress

    ” title=”View album: “>

    ” title=”View album: “>

    select(DB_NAME); // reconnect wordpress db ?>

  • 8
    Steffen Says:
    July 16th, 2006 at 22:56

    @hip: zenpress has some of the features you are missing… Oh, and I\’ve added that cookie warning - cheers for the hint!

    @Jeremy: No idea why this happens… How does your page look? Is it ok? Is just the validator borked? Strange is: On my page (e.g. http://www.ruzee.com/photos/) the W3C validator says \”404 not found\” - no clue what\’s causing that… Anyone else having similar problems?

  • 9
    Jeremy Says:
    July 17th, 2006 at 3:29

    Well I got it to load the page after much fiddling and checking another site with info on this. Now I just have to figure out why only works from template-functions.php and not from my themes index.php.

  • 10
    Steffen Says:
    July 17th, 2006 at 17:04

    Hmm. Is it right that you added the DB reconnection stuff into the zenphoto theme? The code looks pretty much mixed up. Maybe starting from the beginning might help… Sorry, can’t do much more based on the info I got…

    • 1 2 3 … 9 Next > Show All

    Leave a Reply

53188