Few days ago a friend of mine, a good photographer, asked me to help her building her website. I told her the fast and dirty way to do that was to buy a theme on theme-forest.com and mount it on a wordpress on my hosting. We looked together for a good looking theme and we ended up with Keres .
After buying it, we discovered it was missing one of the most natural feature you would like to find on a galleries website:
the galleries index
or a page where there are all your galleries with a skin picture and the gallery name.
I decided to help her and after a lot of headaches understanding the theme structure and 4 hours I ended up writing some code.
This code is nothing more than a template, which will display your galleries in a simple grid of 4 columns. It will only works for galleries with masonry template, because I didn’t have the time to make it universal.
If you use a different theme for galleries edit line 207 with your template name. It will not work if you use different themes for each gallery (cpt. Obvious).
Create Categories for Galleries:
Use a plugin to enable categories on pages. Like “Ninja Pages, Categories, and Tags“.
Set categories as children of the main category ‘Gallery’, like in this picture:
List all the galleries (display just one pic each):
Create a file called “template-archive-gallery-4.php” (just a name) in the folder of your theme.
Copy inside the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 |
<?php /** * The main template file for display galleries index. * * Template Name: Gallery Archive Index * @package WordPress */ /** * Get Current page object **/ $page = get_page($post->ID); $current_page_id = ''; if(isset($page->ID)) { $current_page_id = $page->ID; } //Check if password protected $portfolio_password = get_post_meta($current_page_id, 'portfolio_password', true); if(!empty($portfolio_password)) { session_start(); if(!isset($_SESSION['gallery_page_'.$current_page_id]) OR empty($_SESSION['gallery_page_'.$current_page_id])) { get_template_part("/templates/template-password"); exit; } } //Get content gallery $gallery_id = get_post_meta($current_page_id, 'page_gallery_id', true); $args = array( 'post_type' => 'gallery', 'numberposts' => -1, 'post_status' => null, // 'post_parent' => $gallery_id, 'order' => 'ASC', 'orderby' => 'menu_order', ); //Get gallery images $all_photo_arr = get_posts( $args ); get_header(); ?> <br class="clear"/> </div> <?php //Get Page background style $bg_style = get_post_meta($current_page_id, 'page_bg_style', true); if($bg_style == 'Static Image') { if(has_post_thumbnail($current_page_id, 'full')) { $image_id = get_post_thumbnail_id($current_page_id); $image_thumb = wp_get_attachment_image_src($image_id, 'full', true); $pp_page_bg = $image_thumb[0]; } else { $pp_page_bg = get_stylesheet_directory_uri().'/example/bg.jpg'; } wp_enqueue_script("script-static-bg", get_stylesheet_directory_uri()."/templates/script-static-bg.php?bg_url=".$pp_page_bg, false, THEMEVERSION, true); } // end if static image else { $page_bg_gallery_id = get_post_meta($current_page_id, 'page_bg_gallery_id', true); wp_enqueue_script("script-supersized-gallery", get_stylesheet_directory_uri()."/templates/script-supersized-gallery.php?gallery_id=".$page_bg_gallery_id, false, THEMEVERSION, true); ?> <div id="thumb-tray" class="load-item"> <div id="thumb-back"></div> <div id="thumb-forward"></div> <a id="prevslide" class="load-item"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/arrow_back.png" alt=""/></a> <a id="nextslide" class="load-item"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/arrow_forward.png" alt=""/></a> </div> <input type="hidden" id="pp_image_path" name="pp_image_path" value="<?php echo get_stylesheet_directory_uri(); ?>/images/"/> <?php } ?> <?php //Display main gallery contents if(!empty($all_photo_arr)) { ?> <?php if($bg_style == 'Static Image') { ?> <div class="page_control_static"> <a id="page_minimize" href="#"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_zoom.png" alt=""/> </a> <a id="page_maximize" href="#"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_plus.png" alt=""/> </a> </div> <?php } else { ?> <div class="page_control"> <a id="page_minimize" href="#"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_minus.png" alt=""/> </a> <a id="page_maximize" href="#"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon_plus.png" alt=""/> </a> </div> <?php } ?> <?php $page_audio = get_post_meta($current_page_id, 'page_audio', true); if(!empty($page_audio)) { ?> <div class="page_audio"> <?php echo do_shortcode('[audio width="120" height="30" src="'.$page_audio.'"]'); ?> </div> <?php } ?> <!-- Begin content --> <div id="page_content_wrapper"> <div class="inner"> <div class="inner_wrapper"> <div id="page_caption"> <h1 class="cufon"><?php echo $post->post_title; ?></h1> </div> <div id="page_main_content" class="sidebar_content full_width"> <?php if(!empty($post->post_content)) { ?> <?php echo pp_apply_content($post->post_content); ?><br/> <?php } ?> <?php //Get social media sharing option $pp_social_sharing = get_option('pp_social_sharing'); if(!empty($pp_social_sharing)) { ?> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ppulpipatnan"></script> <!-- AddThis Button END --> <br class="clear"/> <?php } ?> <?php $pp_portfolio_enable_slideshow_title = get_option('pp_portfolio_enable_slideshow_title'); foreach($all_photo_arr as $photo => $key) { global $wpdb; //OLD: (missin argument 2 error) //$pid = $wpdb->get_var( $wpdb->prepare("SELECT post_id FROM $wpdb->postmeta WHERE meta_value = '$key->ID' AND meta_key = 'page_gallery_id' ORDER BY post_id DESC") ); //Solution proposed by Baba to "Warning: Missing argument 2 for wpdb::prepare(), called..." $pid = $wpdb->get_var( $wpdb->prepare(“SELECT post_id FROM $wpdb->postmeta WHERE meta_value = ‘$key->ID’ AND meta_key = ‘page_gallery_id’ ORDER BY post_id DESC”, $id, $name) ); //(Note that meta_query expects nested arrays, even if you only have one query.) $args99 = array( 'post_type'=>'page', 'meta_query' => array( array( 'key' =>'page_gallery_id', 'value' => $key->ID , ), array( 'key' => '_wp_page_template', 'value' => 'template-gallery-mansory.php' ) ) ); $loop = new WP_Query($args99); wp_reset_postdata(); // $query1 = new WP_Query( array( 'meta_key' => 'page_gallery_id', 'meta_value' => mysql_real_escape_string($key->ID ), ) ); // var_dump($query1); $small_image_url = get_stylesheet_directory_uri().'/images/000_70.png'; $hyperlink_url = get_permalink($key->ID); $args1 = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $key->ID, 'order' => 'ASC', 'orderby' => 'menu_order', ); //Get gallery images $photo_arr = get_posts( $args1 ); foreach ($photo_arr as $key0 => $value0) { if(!empty($value0->ID)) { $image_url[0] = $value0->guid; $small_image_url = wp_get_attachment_image_src($value0->ID, 'gallery_4', true); } $last_class = ''; if(($key+1)%4==0) { $last_class = 'last'; } ?> <div class="one_fourth <?php echo $last_class; ?> gallery4"> <?php if(!empty($small_image_url)) { ?> <img src="<?php echo $small_image_url[0]; ?>" alt="" class="one_fourth_img"/> <a <?php if(!empty($pp_portfolio_enable_slideshow_title)) { ?>title="<?php echo get_the_title($pid); ?>"<?php } ?> class="fancy-gallery" data-fancybox-group="fancybox-thumb" href="<?php echo get_permalink( $loop->post->ID );?>"> <div class="mask"> <?php if(!empty($pp_portfolio_enable_slideshow_title)) { ?> <h6><?php echo get_the_title($pid); ?></h6> <?php } ?> </div> </a> <?php } ?> </div> <?php break; } } ?> </div> </div> </div> <?php get_footer(); ?> <?php } ?> |
Create a page called Galleries (check the permalink, make it nice), and assign the template we’ve just created.
List galleries of one category
To list galleries of one category we have to add a shortcode:
[lenotta_catlist lenotta_cat_name=”fashion”]
Then we create a page with this shortcode for each gallery. Be sure the name check the slug.
Add this code to functions.php to create the shortcode:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
function lenotta_list_categories($atts, $content = null ){ extract( shortcode_atts( array( 'lenotta_cat_name' => '-1' ), $atts ) ); $args89 = array( 'post_type'=>'page', 'category_name' => $lenotta_cat_name, 'post_status'=>'publish', ); $loop = new WP_Query($args89); if(!empty($post->post_content)) { ?> <?php echo pp_apply_content($post->post_content); ?><br/> <?php } ?> <?php //Get social media sharing option $pp_social_sharing = get_option('pp_social_sharing'); if(!empty($pp_social_sharing)) { ?> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ppulpipatnan"></script> <!-- AddThis Button END --> <br class="clear"/> <?php } ?> <?php $pp_portfolio_enable_slideshow_title = get_option('pp_portfolio_enable_slideshow_title'); while ( $loop->have_posts() ) : $loop->the_post(); $small_image_url = get_the_post_thumbnail($post->ID, 'gallery_4', false); ?> <div class="one_fourth <?php echo $last_class; ?> gallery4"> <?php ?> <?php echo get_the_post_thumbnail($post->ID, 'gallery_4', array('class' => "one_fourth_img")); ?> <a <?php if(!empty($pp_portfolio_enable_slideshow_title)) { ?>title="<?php echo get_the_title($post->ID); ?>"<?php } ?> class="fancy-gallery" data-fancybox-group="fancybox-thumb" href="<?php echo get_permalink( $post->ID );?>"> <div class="mask"> <?php if(!empty($pp_portfolio_enable_slideshow_title)) { ?> <h6><?php echo get_the_title($post->ID); ?></h6> <?php } ?> </div> </a> <?php ?> </div> <?php endwhile; } add_shortcode( 'lenotta_catlist', 'lenotta_list_categories' ); |
It’s far away to be super efficient, but it works.
And here is the result:
I also edited a line of css because (don’t ask me why) it was not showing correctly:
On file css/screen.css line 1256 the orginal is : “margin-right: 15px;” and the modified is “margin-right: 10px;”.
Hope the author don’t mind if I publish this, and feel free to use my lines of code however you want.
Happy coding!
I can do this without code just through the theme options. I had to use a similar hack to yours at first,then through raw gumption I found a way around it, it’s a bit long winded but I think its the way the theme works or was just a non code hack that my perseverance discovered.
With practice you can add anew gallery to the page in 5 mins. If anyone needs this let meknow I will write a detailed account on hoe I went about it.
When the article was written it wasn’t possible to do it. If things have changed, could you share it with me so I can point the readers in the right direction? Thank you very much.
Hi edu!
do you know how to add a video background but NOT from youtube or vimeo? i mean, a video from host-server.
Hi! It’s pretty easy using video tags (html5) http://www.html5rocks.com/en/tutorials/video/basics/
Have a nice day!
But, it works for Keres Theme? and if it works, where i should insert? i’m stuck in that, cuz sometimes vimeo doesn’t run as well, and YT have ads, and is a really nice theme, i like it.
Hi Edoardo!
Thank you for posting this hack. I, too, am using the theme and am far from being a developer, to be sure–but I do have WP experience and some good friends who are both very conversant in WP and they write code.
They are all stumped by this template. And you are correct, you can’t mix the gallery types among pages, and, for some reason, the image titles and captions have stopped showing. I’ve figured out the extent of everything you mentioned, but this is now at issue. Well, that, and I changed all of the photos have been scaled back to 1024 px as recommended by the author, and no change. What is the key, here?
I think I found the solution for the line 191 error.
Replace in template-archive-gallery-4.php:
$pid = $wpdb->get_var( $wpdb->prepare(“SELECT post_id FROM $wpdb->postmeta WHERE meta_value = ‘$key->ID’ AND meta_key = ‘page_gallery_id’ ORDER BY post_id DESC”) );
with this:
$pid = $wpdb->get_var( $wpdb->prepare(“SELECT post_id FROM $wpdb->postmeta WHERE meta_value = ‘$key->ID’ AND meta_key = ‘page_gallery_id’ ORDER BY post_id DESC”, $id, $name) );
And the error is solved!
Now I still need help myself with pulling in all the galleries when it should just pull in two. Can you help me?
I’m sending you an email. If you would suggest the changes you made which differ from the article, I could publish them, quoting you for the help of course!
I’ve just edited the code with your solution, thank you so much!
Hey, thank you for this hack. Im having problems with it however. Im receiving this Warning on the page.
Warning: Missing argument 2 for wpdb::prepare(), called in /home/kayradph/public_html/wp-content/themes/keres/template-archive-gallery-4.php on line 191 and defined in /home/kayradph/public_html/wp-includes/wp-db.php on line 992
Can you send us what’s on line 191 of template-archive-gallery-4.php? Thank you.
Hi Edoardo!
I have the same problem!
Here is the content of line line 191 of template-archive-gallery-4.php:
$pid = $wpdb->get_var( $wpdb->prepare(“SELECT post_id FROM $wpdb->postmeta WHERE meta_value = ‘$key->ID’ AND meta_key = ‘page_gallery_id’ ORDER BY post_id DESC”) );
I also seem to have the same initial problem as caleb, it pulls in all the galleries when it should just pull in two.
I have read that you had a solution for this which you could not post here, could you mail it maybe to me?
Already many thanks! You have done a great job!
Hi Edoardo,
We got it to work! Thank you for your help. You’re were 10 time more helpful than the author. I really appreciate it.
As an FYI, we had to remove the following DIV below from the original template-gallery-4.php get it to work:
<div class="one_fourth gallery4″>
<img src="” alt=”” class=”one_fourth_img”/>
<a title=”” class=”fancy-gallery” data-fancybox-group=”fancybox-thumb” href=”post->ID );?>”>
Great! Thank you for sharing!
Hi Edoardo,
Thanks for updating your post with the additional information. We’re closer, but still having issues. The gallery index page now shows the correct galleries that it should pull in (Honduras and Turks & Caicos), but still pulls in every one of the remaining galleries.
I sent you and email of screenshots to show how we’ve set everything up. Can please take a look to see what we are missing?
Thanks again for all the help.
Caleb
Hi Edoardo,
Thanks so much for posting your hack. I too have the Keres theme and have say I totally agree with you that this was a complete miss to leave this feature out. I have contacted the author tons of times and he is never responsive and thus I am stuck trying to create a gallery index on my one.
My friend is a web developer and has been helping me out, but we can’t seem to get the pages to load correctly.
For example, http://www.calebwolper.com/galleries/urban/ pulls in all the galleries when it should just pull in two.
Can you make recommendation on how to fix this?
Your help is VERY appreciated.
Thanks from San Francisco,
Caleb
Hi Caleb!
I’m glad the post was helpful to you. The structure of this theme is a little bit complicated ( the kind of complication that comes out from a not clear base project or an evolution of an older one I think).
I don’t have really clear what is your problem. I’ve applied the modified theme to martinagiachi.com do if you find that it matches your needs then I can send it to you.
A little bit of knowledge about the theme (made with reverse engineering):
Actually each gallery is indeed a custom post. For each gallery, as you’ve probably seen, you need to create a page. Then you assign the gallery to a page with the custom field (on the page) ‘Content Gallery’.
I’ve used categories to distinguish different type of galleries (assigning a category to page with “Ninja Pages, Categories, and Tags” plugin) and “List category posts” plugin to list them.
Let me know if you need other infos.
Good luck.
Hi Edoardo,
Thanks for the quick reply. You’re super helpful. I really appreciate it.
Yes I would be very happy just replicating the modified theme you used for martinagiachi.com.
If you can send that to it would be great. I believe my friend can get everything sorted out from there.
Thanks again!
Caleb
Hi Caleb,
just sent you the modified theme by mail. Obviously I can’t publish it, because of copyright… If you need more help or find a solution contact us.
Keep us update!
Hello,
My name is Randy, I am helping out Caleb with his site.
thanks for helping us out.
I believe I understand what you have said above:
I’ve used categories to distinguish different type of galleries (assigning a category to page with “Ninja Pages, Categories, and Tags” plugin) and “List category posts” plugin to list them.
My question is how did you assign categories to the individual galleries in order to separate them? They are all listed as uncategorized and there is no place to edit them.
If these can be labeled with a category, and then call these categories within one of the gallery landing pages with the use of one of the plugins above, seems to be how you accomplished your separation so that all your galleries do not display.
Thanks, Randy
Hi Randy,
actually I do not assign categories to galleries, but to the page linked with the gallery. That’s why I needed the “Ninja Pages, Categories, and Tags” plugin, because usually pages haven’t categories.
Hope it helps.
Hi Edoardo,
I think we’re closer, but still not there. We created a bunch of categories for the site, but can’t seem to get the landing page to populate correctly.
Here is the landing page I have been testing: http://www.calebwolper.com/under-water/
If it worked correctly it should pull two galleries into it: Honduras & Turks & Caicos. Instead, it pulls in a bunch of the other galleries randomly.
My guess is that this has to do with how to properly categorize each page. I’ve tried many different combinations, but nothing seems to work.
Here are the pages it should be pulling in: http://www.calebwolper.com/turks-caicos/ http://www.calebwolper.com/honduras/
For example, I created the Under Water,Turks & Caicos and the Honduras categories and played with checking all as Under Water or both Under Water & Turks & Cacios, etc. and nothing seems to work.
Can you send me screen shots of how you categorize the landing page, and pages that you want pulled in?
This would be super helpful.
Thank you so much!
Caleb
Hi Caleb,
just updated the post, check if it’s more clear now. I think I’ve made some wrong assumption because of bad memory, sorry for that.
Let me know.