Lensa Theme Modification: Gallery Shortcode

Lensa - Free Photography WordPress Themes - ColorLabs & Company

Since yesterday i post a way to create gallery page template, there are a tons of email asking about:

How if i want to have more than 1 gallery page to be displayed?

Yes, with the modification i did yesterday you cannot made more than 1 gallery page. So, right now i will tell you how to create a shortcode.

Edit Post ‹ ColorLabs Demo — WordPress

With this shortcode, you can displaying as many gallery as you want since this shortcode can be put at post/page you create. Just with 1 line of code, you can made a tons of gallery, how great is it?

What you need to do is editing a file named functions.php. It is highly recommend if you edit this file via FTP, you can find this file at directory: wp-content > themes > lensa

Step#1

Open a file named ‘functions.php’ and go to line 113 and you will find out this code:
CaptureYes, there is a sign like this on line 113, give a break on that line:

Capture

Now is the code. What you have to do is put the code on line 114:

The Loop

function custom_gallery($atts){
   extract(shortcode_atts(array(
      'posts' => 1,
	  'cat' => 1,
   ), $atts));

   query_posts(array('orderby' => 'date', 'order' => 'DESC', 'cat' => $cat , 'showposts' => $posts));
   if (have_posts()) :
   ?>
    <style type="text/css" >
		pre {
			display: none;
		}
		.col5.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;
		  margin-bottom: 19px;
		}

		h4.galtitle a{
			color: #fff;
		}

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

		@media (max-width: 977px) {
			.col5.float {
				margin: 20px 10px;
				float: left;
				width: 40%;
			}
			.block:after {
			   content: ".";
			   visibility: hidden;
			   display: block;
			   height: 0;
			   clear: both;
			}
		}
	</style>
	<?php while (have_posts()) : the_post(); ?>

		<div class="col5 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;
   endif;
   wp_reset_query();
}

This is the loop, this code will generate the gallery. But this code still nothing, you need more codes to make the shortcode works (check the next chapter).

Also here is some explanation about the code:

  • CSS code: if you take a look the code i just write, you will find a CSS code written. This code will working only if the shortcode is called. So, the custom CSS code will not ruin the default CSS by Lensa theme
  • ‘post’=>1, ‘cat’=>1: This is the default code declared in case you forget to type the full shortcode. post=>1 means by default it will only displaying 1 post. cat=>1 means by default it will displaying category ID number 1

Declare The Shortcode

This code below is declaring the shortcode, with this code below you can call the code we write before (check section ‘the loop’).

Put this code next after the loop code:

function register_shortcodes(){
   add_shortcode('post-gallery', 'custom_gallery');
}

Still the same, with this code you cannot make the shortcode to run. You will need the last code to make the shortcode running 100% (check the next chapter).

Register The Shortcode

Before the shortcode can be used, you will need to ‘tell’ WordPress if you just create a shortcode.

You will need to put this code below next after the declaration code (check section declare the shortcode):

add_action( 'init', 'register_shortcodes');

Using The Shortcode

Using the shortcode is very simple, you just have to put this code at your post/page:

[post-gallery posts=”xx” cat=”xx”]

Currently there are just 2 options available for my custom shortcode:

  • posts: declare how many posts you want to display
  • cat: set what category you want to display. You have to put only the ID of the category you want to display

Here is some real example when you use the shortcode:

[post-gallery posts=”5″ cat=”603″]

If you need to check what is your category ID, you can check out this video:

At the code above, i displaying 5 posts and also i call a posts from category ID number 603. The result of the shortcode will be:
1

Ok, done!

Note: if you are too lazy to do this stuff, you can check out this file

Advertisements

8 thoughts on “Lensa Theme Modification: Gallery Shortcode

  1. Hi Tandamerah,

    Question about LENSA theme HOME page.

    Home page shows fullscreen slideshow of pictures posted as “Photograph” post. The name of the post is shown in the box. When you click on the box the link directs you to the post of the picture it self.

    Is it possible to change this link to custom one? For example to the blog page or other web page or even to other website?

    Any help appreciated.

    George

    • Hi Sean,

      As i know, the custom file editor on all ColorLabs themes is not working perfectly. so you have to avoid those things (the css and php editor).

      if you need to modify your css, you’d better to download a plugin such as: ‘pc custom css’

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