One of the important things you need to decide is which
Wordpress Theme to use. There are many many themes available out there so you're very likely to find a theme of your liking.
Once you've downloaded and installed the theme of your choice, you'll most likely need to modify it a bit so it works well with your integrated WPG2 site.
I've optimized a few popular themes and made them available for download on my
dev site. There are also some on the
WPG2 forums.
If there's no optimized version of the theme of your choice, you can always make the necessary modifications yourself. I've written some instructions how to do that.
Wordpress theme optimization guide for WPG2 Before you begin
- if you need to modify the header.php file of the Wordpress theme to suite your needs, try to do this before proceeding
- it's recommended that you use a Gallery2 theme which is optimized for Wordpress integration, like the
WordpressEmbedded Gallery2 Theme for Gallery 2.1.
Create wpg2header.php
- make a copy of your Wordpress theme's header.php file and name it wpg2header.php
- open wpg2header.php and look for:
Code:
<head profile="http://gmpg.org/xfn/11">
- below this line, add:
Code:
<?php if (isset($g2data['headHtml'])) {
list($g2_title, $g2_css, $g2_javascript) = GalleryEmbed::parseHead($g2data['headHtml']);
foreach ($g2_css as $css) { echo "$css \r\n"; }
foreach ($g2_javascript as $javascript) { echo "$javascript \r\n"; }
} ?>
- look for a line like:
Code:
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
- in the line, replace
Code:
<?php wp_title(); ?>
with
Code:
» <?php echo $g2_title; ?>
- at the end of the file look for something like:
If the code doesn't exist, no problem. It's probably in the index.php file.
- replace it with or add:
Code:
<div id="wpg2content">
Update the style.css file
- open style.css and look for something like the example below:
Code:
#content {
width:510px;
float:left;
padding:5px;
margin:0;
overflow:hidden;
display:inline;
}
- create a copy of this block and name it #wpg2content:
Code:
#content {
width:510px;
float:left;
padding:5px;
margin:0;
overflow:hidden;
display:inline;
}
#wpg2content {
width:510px;
float:left;
padding:5px;
margin:0;
overflow:hidden;
display:inline;
}
- in most cases, the width of #content is the width of your theme minus the sidebar. Usually, we don't include the WP sidebar in the embedded gallery to have more space for the photos. So, we can make #wpg2content as wide as the theme. Example:
Code:
#wpg2content {
width:740px;
float:left;
padding:0px;
margin:0;
overflow:hidden;
display:inline;
}
Note: The above code for #content and #wpgcontent are just examples. The actual code will depend on your particular theme. Also, other parameters (like padding or margin) may need to be tweaked.
Add the WPG2 alignment classes
- at the end of style.css, add:
Code:
/* WPG2 alignment classes */
.g2image_normal {
margin: 4px;
}
.g2image_float_left {
float: left;
clear: left;
margin: 4px;
}
.g2image_float_right {
float: right;
clear: right;
margin: 4px;
}
.g2image_centered {
display: block;
margin-left: auto;
margin-right: auto;
}
Revalidate
- go to Wordpress Site Admin and click on the WPG2 menu