Print Friendly

Featured Image

Attachments

None at this time

Show Extras

It’s finally time to build our Zenphoto theme. With the WordPress theme styled and basic pages working, we can now make the Zenphoto theme thus completing the basic integration. Just like with the WordPress files this post will go fast. I encourage you to research each section on your own if you want to know more. As a side not Zenphoto.org has a large forum with active developers answering forum posts. However from what I have seen most of the time the developers just refer all inquiries to consult their manual and guide. Their manual and guide is a little dry and I hope this part of the tutorial is easier to understand for the laity.


Files

Navigate to your Zenphoto/themes/ folder. Once there copy the default theme folder. Name the new folder the name of your custom Zenphoto theme. We will be building our theme off the default theme because it is a simple call to the albums and images. In essence we are going to keep the content of each file and just incorporate our WordPress header, sidebar, and footer into each file. For this tutorial we will only focus on the pages that will display photos. I will not detail any additional functions of Zenphoto because I am just using it as a photo gallery and not as a full CMS to run other functions.

To get started we will be editing 5 basic files in your custom theme folder. The way Zenphoto works is the Gallery is displayed on the index page. This shows all the albums in that gallery. Once you click on an album you view the album.php page. On this page you see a predetermined number of thumbnail images of the pictures within that album. Once you click on a thumbnail you are taken to the image.php page that displays just one picture at a time. Open the following files in your text editor and delete all the code from them.

  • theme_description.php
  • dummy.css
  • index.php
  • album.php
  • image.php

Theme Description

The theme_description.php file identifies the folder as a theme to the Zenphoto CMS. Change the appropriate fields in this file. Change MyZenTheme to the name of your theme. Replace all other content and make sure to give your theme a version number.

CSS

This is just a dummy file. Since we included all the CSS style in our main WordPress theme, we will not need to include a separate css file for the Zenphoto theme. You can delete all the files in the CSS folder. Create a new file in your text editor and save it. For this tutorial I used Dummy.css because it is just a dummy file. Paste the following line into your dummy file.

Index

Similar to the WordPress theme we are building each page. But for Zenphoto we want the WordPress header, sidebar, and footer but only wish to change the content. So the Zenphoto index.php file will connect to the Zenphoto tables in the database, then connect to the WordPress tables, and then run the page specific loops. Here if we used a separate database for Zenphoto and WordPress it would be more complicated. This is the main reason I suggested a single database for all CMS’s. Paste the following code in your index.php file, change DUMMY to the name of your CSS file created above, and then read through the rest of the code so you have a general idea of what is happening.

Album

The album.php page is very similar to the Zenphoto index page except it will display thumbnails of the images in the selected album. Paste the following code in your album.php file, change DUMMY to the name of your CSS file created above, and then read through the rest of the code so you have a general idea of what is happening.

Image

The image.php page displays each image individually. Paste the following code in your image.php file, change DUMMY to the name of your CSS file created above, and then read through the rest of the code so you have a general idea of what is happening.

Note: I am calling image info and google maps in my files. In order for these to work you need to navigate to Plugins in your Zenphoto dashboard (www.yoursite.com/zenphoto/zp-core/admin.php) and activate the Google Maps and Colorbox plugins.

Conclusion

Make sure you clean up the files with all the spaces that may have been added from word wrap in his post. Once your files are complete navigate to the Themes tab on your Zenphoto Dashboard and activate your new theme. Now you will have to edit the WordPress CSS file of the custom theme for the Zenphoto section. Just like with the WordPress theme it could take some time to get things just the way you want. I hope this post has helped explain the Zenphoto theme files. The main integration is now done. At this point the only part we have left is to discuss the remaining WordPress files and touch on the Analytics we mentioned at the beginning of the tutorial.

I want to point out that you can merge Zenphoto with any WordPress theme out there. Maybe you downloaded a generic theme off the internet and want to use Zenphoto with it. Use the template above just make sure to paste my Zenphoto section of the WordPress Theme’s CSS file. I renamed the DIV’s and some classes in my Zenphoto template so that certain elements in Zenphoto and WordPress that might have the same name can be different.

Series Navigation<< WordPress Site Design – CSS FileWordPress Site Design – Remaining Files >>

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*


One thought on “WordPress Site Design – Zenphoto Integration

  1. Reply Becca Rasmussen December 24, 2011 at 5:35 pm

    Thank you!
    One small tweak (you probably mentioned it and I just missed it) … in the files where it shows require($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-blog-header.php');, one should update that to show their own path to the wp-blog-header.php based on their installation.

    i.e. your snippet shows it in root/wordpress/ directory, but if WP is installed to root/ it would be require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php'); instead.

Copyright © 2013 DannyEckes.com. All rights reserved. | Site design by Daniel J. Eckes | Privacy