Following the upgrade of the site, I’ve successfully integrated gallery2 with wordpress 2.8, able to call wordpress functions within gallery itself and maintain your wordpress sidebar. This was not previously achievable with gallery1 considering that some wordpress and gallery share some variables which needs to be redefined to avoid conflict, with this new setup I am glad to say that problem do not exist now.
True there are other plugins for wordpress such as WPG2. WPG2 looked promising, as it allows you to call and display photos in your posts as well, but it’s too evasive for just the simple need to integrate gallery into your wordpress theme. What’s more WPG2 requires users to disable URL rewrite which messed up my permalinks and my old gallery URL structure, too much of a hassle.
All what needs to be done is just the ability to call any wordpress function within gallery and maintain the same layout as your blog through all gallery’s pages. Though this is a simple mod, surprisingly, there had not been any well documentation on the internet integrating them together, so I will just write one here for anyone looking to do the same.
Step 1- Including the wordpress header
For starters, we need to include the wordpress header in all of gallery’s pages, we do so by including it in main.php found in your gallery’s root folder. You can include it anywhere by lets do it at the top of the file.
In main.php find:
include(dirname(__FILE__) . ‘/bootstrap.inc’);
Then add at the bottom add the path to your blog header file, you can omit “wordpress/” or otherwise in the require path if your blog is on your site’s root:
include(dirname(__FILE__) . ‘/bootstrap.inc’);
require($_SERVER[‘DOCUMENT_ROOT’] .”/wordpress/wp-blog-header.php”);
Step 2- Including your wordpress template
Next with your chosen gallery template to modify, (I will recommend one which you can choose from the gallery’s website which reassembles closely your current theme, then you might only need minimal tweaks to suit the stylesheet your site’s layout) open the theme.tpl file and you will notice that the file follows the typical layout of a html file with html, body and their respective closing tags as well.
Unless you have custom headers and footers, wordpress header and footer files by default however, do have their own <head> and <html> tags as well, so you simply just can’t include them into the gallery template file as that will result in html errors.
A way around this to create another duplicate of header.php and footer.php in the same folder and deleting all the duplicate code, keeping the code after the <body> tag for the header.php and before the </body> tag for the footer.php. You might want to call these new files subheader.php and subfooter.php.
So effectively what code remains is the html code for your template itself. Do not worry about your blog stylesheet as it will be integrated on the third step. Your sidebar.php can be left as it is as it’s simply just encased in <div> which can be included without messing your code format.
So assuming you are using the wordpress “default” theme, for subheader.php, deleting everything before the <body> tag, we have:
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
<div class="description"><?php bloginfo(‘description’); ?></div>
</div>
</div>
Likewise, deleting everything after </body> for subheader.php, we have:
<div id="footer">
<!– If you’d like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it’s our only promotion or advertising. –>
<p>
<?php bloginfo(‘name’); ?> is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="<?php bloginfo(‘rss2_url’); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo(‘comments_rss2_url’); ?>">Comments (RSS)</a>.
<!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –>
</p>
</div>
</div>
With that done, now is time to include these new files into your gallery template, use smarty tags to include your blog header, sidebar and footer into the theme file.
Simply just add this code, after the <body> tag in theme.tpl
And before the </body> tag in theme.tpl, the sidebar and your modified wordpress footer to complete the wrap:
{include_php file=’/www/var/public_html/wordpress/wp-content/themes/default/subheader.php’}
Step 3- Adding blog your stylesheet
With that done, this last step is to simply re-introduce your wordpress stylesheet in the gallery template itself. In theme.tpl, between the <head> tags, simply call you wordpress CSS file by adding the code:
Likewise, you might want to modify the path /wordpress/ if you blog nests in a different folder or on the root directory.
Adding conditional CSS in gallery’s theme.tpl
I thought this was a simple affair, but it’s not so straightforward. If your site features conditional CSS, which uses conditional tags to call out a specific targeted browser stylesheet, file etc.. simply adding the conditions in your theme.tpl will throw your gallery into a white blank page due to gallery itself trying to phase the conditional tags themselves, that should not be the case as the tags should be printed out in clear and not phased. A way around this is to print them out using the php phaser, which effectively by-pass the phaser itself:
Within your head tags, you can add as many conditional statements, here is an illustration for include additional stylesheets for IE6 and IE7:
echo ‘<link href="/wp-content/themes/default/style.css" rel="stylesheet" type="text/css" />’."\n";
echo ‘<!–[if gte IE 6]>’."\n";
echo ‘<link href="/wp-content/themes/default/ie.css" rel="stylesheet" type="text/css" />’."\n";
echo ‘< ![endif]–>’."\n";
echo ‘<script type="text/javascript" src="/js/lightbox.js"></script>’."\n";
echo ‘<!–[if lt IE 7]>’."\n";
echo ‘<link href="/wp-content/themes/default/ie6.css" rel="stylesheet" type="text/css" />’."\n";
echo ‘<style type="text/css">’."\n";
echo ‘style1 { color: #FFFFFF; } ‘."\n";
echo ‘</style>’."\n";
echo ‘< ![endif]–>’."\n";
{/php}
With that and you are done. The gallery on this site was coded in a similar manner, so you can check that out as well.
Shaun:
Is Gallery the main container in this setup, Shaun? Thank you for sharing your coding skills with the rest of us! We appreciate it!
Hi Tim,
This setup have gallery2 and wordpress in their own respective folders, none of them are on any upper levels or the main container. The code simply just call to each of them by urls through includes.
If the gallery main container page is what you are referring to, all you need to do is to edit your gallery templates and put them in whatever page you require the main to show. This fix very much allows you to integrate the whole of gallery with wordpress, so this means technically you can have any feature of gallery within any file which includes the WP function includes too.
Also, nice icon!