Lensa Theme Custom Gallery Template

Hi again! Since i post the Lensa theme tutorial to this blog, a tons, maybe millions of emails sent to my email address asking about how to create a gallery from a post.

Ok! I heard your request, but sorry if i’m not able to reply all e-mails sent to me. So, to pay my fault, i will share to you how to make the gallery page template here.

The final result of gallery i want to create is look like this one:

test - ColorLabs Demo - Just another WordPress site

Yes, that is what i want to make. The concept is simple, i will create a new panel at the theme dashboard in order to help me decide which category should be displayed at the gallery page template. But, you can also displaying more than one category at the gallery page!

What you need in order to complete this new page template is just 2 files:

  1. theme-options.php (wp-content > themes > lensa > includes)
  2. template-test.php (this is what you have to create, you have to put this file at: wp-content > themes > lensa)

Step#1

At this first step, what you have to do is prepare the theme panel first. Then, you have to modify a file named theme-options.php.

Make sure if you are editing any files mentioned on this tutorial via FTP. In case you make some mistakes, you can redo it quickly

After opening the file, go to line 80 (this line should be an empty line) and put this code:

// Posts FrontPage Options
$options[] = array( "name" => "Custom Gallery  Settings",
					"type" => "heading",
					"icon" => "home");

$options[] = array( "name" => __( "Category ID", "colabsthemes" ),
					"desc" => __( "at this box you have to put the category ID you want to display", "colabsthemes" ),
					"id" => $shortname."_cat_number",
					"class" => "",
					"type" => "text");

After you put those code, you can go to the theme dashboard. You will find a new panel named ‘custom gallery settings‘.

Here some explanation about the codes:

  1. “name” => “Custom Gallery  Settings”: this code is declaring the label of the new theme panel. So, since it just a label, you can freely change the name
  2. “id” => $shortname.”_cat_number”: This code is declaring the ID of this new option. The ID should be colabs_cat_number
  3. “type” => “text”: This code is declaring what option will be displayed. At this case, the option that will be displayed is text

At this box, you have to put the category ID of your post category. To check the ID of your post category, you can check this video:

Step#2

The next step is to create the page template. The name of the file is up to you since the default name i create is kind of strange (isn’t it?)

Ok, first create a new PHP file and named it template-test.php (if you need to change the name, just change the test only) then put this code inside the file:

<?php
/*
Template Name: Test
*/
?>
<?php get_header(); ?>
 <style type="text/css" >
	.col3.float {
		margin: 20px 10px;
		text-align: center;
		display: inline-table;
		position: relative;
	}

	h4.galtitle{
	  left: 0;
	  bottom: 0;
	  color: #fff;
	  width: 70%;
	  padding: 2.8%;
	  position: absolute;
	  line-height: 18px;
	  background: rgba(0,0,0,.83);
	  text-align: left;
	}

	h4.galtitle a{
		color: #fff;
	}

	h4.galtitle a:hover {
		color: #fff;
		text-decoration: none;
	}

	@media (max-width: 977px) {
		.col3.float {
			margin: 20px 10px;
			float: left;
			width: 40%;
		}
		.block:after {
		   content: ".";
		   visibility: hidden;
		   display: block;
		   height: 0;
		   clear: both;
		}
	}
</style>
<?php
		$kat =get_option('colabs_cat_number');
		$samplepost = new WP_Query();
		$samplepost->query('ignore_sticky_posts=1&post_type=post&cat='.$kat);
?>
<div class="block">
<ul>
<?php while ($samplepost->have_posts()) : $samplepost->the_post(); ?>
		<div class="col3 float">
			<?php colabs_image('width=273&height=273&play=true');?>
			<h4 class="galtitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		</div>
<?php endwhile; ?>
</ul>
</div>
<?php get_footer(); ?>

If you take a look inside the code, you will found a CSS code inside the PHP file. Yes, this code is controlling only the layer which declared on this page template only.

Since at this code i write post_type, it doesn’t mean that you can freely change it become photograph.

Why? Because photograph is a custom post type, it have its own custom taxonomy. Because of that, custom taxonomy and custom post type have its own way to be called, the code above is not able to call the custom post type

Ok, that’s it the code, below is the explanation of the codes:

  1. Template Name: Test: This is the name (label) that will be displayed when you choose what page template you want to use when you create a new page. So, you can freely change the name
  2. @media (max-width: 977px): This code means the responsive design is active for this page template. The responsive design will be triggered when the screen which used to access your site is smaller than 977px (tablet or smart phone)
  3. $kat =get_option(‘colabs_cat_number’): This code is calling the the option we create at step#1. This code is only to retrieve the value you type
  4. ignore_sticky_posts=1&post_type=post&cat=’.$kat: This is the looping condition. ignore sticky post means that this page template will ignore the sticky post. post type=post means that this page template will only displaying the default post type by WordPress. cat=$kat means that this page will only displaying a post from specific category

Ok that’s it. Simple isn’t?

Advertisements

10 thoughts on “Lensa Theme Custom Gallery Template

  1. Hi there. Thanks for this post. Tried it and I like what it does, but the content it’s displaying is my blog posts. How can I modify it so that it displays images uploaded to a specific page. For example, one thing that seems to be missing from Lensa — an otherwise excellent theme (one of the nicest I’ve seen) — is the ability to set up a gallery of specific images uploaded to a specific page (rather than just take all of the images uploaded to the blog section).

    For example, I’m a photographer and would like to have individual galleries from images I choose to upload to the site. How can I do that? At the moment I am limited to just having them display altogther (see: http://onnik-krikorian.com/photography/psychiatric-institutions-armenia/)

    Cheers and thanks in advance.
    Onnik

    • Hi,

      About your question, seems it cannot be done. Because the options you have:

      1. Displaying the first image from post
      2. Displaying featured image of a post

      And from the WordPress it self, there is no option to pull specific image from a post/page

    • Hi Juanjo,

      You can edit the query code:
      $samplepost->query(‘ignore_sticky_posts=1&post_type=post&cat=’.$kat);

      become:
      $samplepost->query(‘ignore_sticky_posts=1&post_type=photograph&cat=’.$kat);

  2. Thanks, Tandamerah!
    I already did that change, but do not displayed photograph categories. If write a number of photograph categories the page leave blank.
    You advert in the article that it have its own custom taxonomy
    Without number of categoy only appears last 10 pictures posted without paging

  3. I have a quick question. I have just installed lensa theme. but the gallery part is not showing as it shows in demo site. i can see the home screen transition when i click on the gallery. can you please help me.

    • hi rohit,

      please check for your static page settings. seems you are using a static page. go to: WordPress dashboard > Settings > Reading.

      at an option named ‘Front page displays’ you have to set the value as ‘your latest posts’

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s