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

90 Responses to “Integrating zenphoto into WordPress”

< Prev 1 6 7 8 9 Next > Show All

  • 61
    Einar Egilsson Says:

    Excellent tutorial! I’ve just written a blog post on how to do even more based on this, what I’ve added is:

    1. Ability to make inline javascript work correctly
    2. Enable you to edit your zenphoto theme files in the Wordpress Theme Editor
    3. Small plugin to add a ZenPhoto admin link to your WP admin interface
    4. All files packaged up with easy installation instructions.

    I gave you credit and a link in my post and mentioned that you were the one to come up with this method. My post is at:

    http://tech.einaregilsson.com/2007/08/06/integrating-zenphoto-into-wordpress/

  • 62
    B e r t S i m o n s » Blog Archive » zenphoto Says:

    [...] this website is made with zenphoto and wordpress. if you are interested in how I combined these two check out this tutorial. [...]

  • 63
    B e r t S i m o n s » Blog Archive » howto insert your wordpress post in zenphoto Says:

    [...] I integrated zenphoto into wordpress using ruzee’s method. in image php, add this as [...]

  • 64
    bert Says:

    thanks for the tutorial

    This is how to click on a zenpress embedded image in wordpress and get the corresponding wordpress post title and content on your zen image page.

    first I integrated zenphoto into wordpress using ruzee’s method.
    in zenphoto image php, add this as php:

    $url = getFullimageurl() ;
    $url = str_replace(’/albums’,”,$url);
    $sql = “select post_content, ID, guid, post_title from wp_posts WHERE post_content LIKE ‘%”.$url.”%’”;
    $results = $wpdb->get_results($sql );
    foreach( $results as $result )
    {
    $zen_wpID[] = $result->ID;
    }
    for($x=0;$xpost_title;
    $zen_wpcontent = $post_id->post_content;
    $zen_wpguid = $post_id->guid;

    now you can put the wordpress content, title and a backlink to the post on your image page by putting $zen_wptitle etc you want it to appear in your zen image.php

  • 65
    Tracy Says:

    Thanks, great tutorial! I got it to work fine for the index.php page, but like Sandro and Dremeda earlier, I’m having a problem with the album.php page. When I click on the thumbnail to view the album, I only see a blank page.

    I’m testing zenphoto and wordpress locally with MAMP and they both reside in the root folder. I’m using a copy of the default theme and have tried changing the .htaccess file and config file to see if there’s a problem there.

    I wonder if you or someone knows any ideas.

  • 66
    strangerpixel » Integrating Zenphoto with Wordpress part 2 Says:

    [...] with integrating Zenphoto albums into a Wordpress blog. This is for anyone who has implemented Ruzee’s method and found that album and image links randomly trigger a 404 in Internet Explorer 6 and [...]

  • 67
    mtnet-online.de » Zenphoto in Wordpress integrieren Says:

    [...] Da ich ja nun zenphoto nutz, wollt ich das Script auch “nahtlos” in Wordpress integrieren und nach etwas googlen hab ich ein super HowTo gefunden. Link: http://www.ruzee.com/blog/2006/06/integrating-zenphoto-into-wordpress/ [...]

  • 68
    massimo fiorino Says:

    Great! Your tutorial is perfect working. I’ve just modified some CSS line to fit ZP in WP.
    Thanks

  • 69
    Adam Mershon Says:

    Great tutorial, Steffen! Thanks.

    Not sure if ZenPhoto has changed since you wrote this tutorial, but I was running into an issue with the Flash video javascripts not be included. Hence, broken videos. :)

    This should fix it though…

    Instead of using this to add just the css:

    <?php
    // add the zen css to the wordpress header
    function addcss() {
    global $_zp_themeroot;
    echo ”;
    }
    add_action(’wp_head’, ‘addcss’);
    ?>

    Use this to add the css and javascript to the header:

    <?php
    // add the zen css and javascript to the wordpress header
    function addcss() {
    global $_zp_themeroot;
    echo ”;
    printRSSHeaderLink(’Gallery’,'Gallery RSS’);
    zenJavascript();
    }
    add_action(’wp_head’, ‘addcss’);
    ?>

    Thanks again,
    Adam

  • 70
    Marcel Spijker Says:

    When i came across your method of integrating zen and wp i was full of joy.
    But when i tryed it it gaves me only a blank page when i go to the gallery.

    I use WP 3.2.1 and Zenphoto 1.1.3 I also use the standard theme from wordpress and for zp your theme.

    Is there an issue with your method and these versions? Or am i just doing something wrong?

    Although it didnt work for me (yet) i still want to thank you for coming up with this idea and share it with us!

  • < Prev 1 6 7 8 9 Next > Show All

    Leave a Reply

53437