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.
Hi, the name's Steffen and I'm writing about the Web, programming
and all those things coming to my mind. Enjoy your stay.
August 6th, 2007 at 2:39
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/
August 20th, 2007 at 18:21
[...] this website is made with zenphoto and wordpress. if you are interested in how I combined these two check out this tutorial. [...]
August 25th, 2007 at 14:57
[...] I integrated zenphoto into wordpress using ruzee’s method. in image php, add this as [...]
August 25th, 2007 at 14:59
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
September 19th, 2007 at 0:33
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.
October 13th, 2007 at 13:26
[...] 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 [...]
October 18th, 2007 at 20:15
[...] 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/ [...]
November 19th, 2007 at 2:14
Great! Your tutorial is perfect working. I’ve just modified some CSS line to fit ZP in WP.
Thanks
December 13th, 2007 at 18:14
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
January 2nd, 2008 at 20:45
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