Custom URL for Lensa Slider

Hi again!

Yesterday, i got an e-mail from my friend in UK asking about how to modify Lensa theme from ColorLabs theme.

Lensa - Free Photography WordPress Themes - ColorLabs & Company

What he ask maybe is the same as you. He want to have a custom URL at the title of slider that displayed on the ‘home’.

As you can see at a file named index.php, there is nothing there related to the slider. You cannot find a code for example the_title that will generate the post title.

So, where is the file that contain the codes to control the slider? After examine the files available on Lensa theme, the slider is generated through a JavaScript codes. The ColorLabs team is declaring the slider PHP code inside the JavaScript code at a file named theme-functions.php (FTP > wp-content > themes > lensa > includes).

Take a look to the end of the file, you will find this functions declared:

function colabs_background_slideshow(){
	echo '<script type="text/javascript">';

      query_posts(array('post_type' => 'photograph', 'meta_key' => 'colabs_feature_photograph', 'meta_value'=> 'true'));
      $slide='';
      while (have_posts()) : the_post();
        $slide .= "{
          image   :'".colabs_image('link=url&return=true')."',
          title   :'".wptexturize(get_the_title())."',
          url   :'".get_permalink()."',
          caption :'". addslashes( wptexturize(get_the_excerpt()) ). "'
        },";
      endwhile; wp_reset_query();

      if($slide!='') echo 'slides = ['.rtrim($slide, ",").']';
  echo '</script>';
}

That is the code that generate the slider.

To make the modification (custom URL at the slider title), we have to modify 2 files: theme-options.php and theme-functions.php

At the theme-functions.php what we will do is to add conditional code, so when you type a custom URL, the slider title will redirect you to that URL, and if you are not typing anything (left the URL field blank), the default URL will be displayed.

ok, let’s start the modification. This modification will be done in 2 steps. Also, make sure if you are doing this modification via FTP (just to make sure if you are doing it in right way).

And for you who don’t know about coding, etc. don’t be worry because i will add the modified files on this post 🙂

STEP#1

At this first step, i will prepare a new field to type the custom URL.

Custom URL field

Custom URL field

To add this new field, you have to modify a file named theme-options.php. First, open this file and find out this code (around line 558):

if ( ( get_post_type() == 'photograph') || ( !get_post_type() ) ) {

	$colabs_metaboxes[] = array (  "name"  => $shortname."_feature_photograph",
					            "std"  => "",
					            "label" => __("Feature","colabsthemes"),
					            "type" => "checkbox",
					            "desc" => __("","colabsthemes"));
} // End photograph

Modify that code (add a new code), so it will looked like this one:

if ( ( get_post_type() == 'photograph') || ( !get_post_type() ) ) {

	$colabs_metaboxes[] = array (  "name"  => $shortname."_feature_photograph",
					            "std"  => "",
					            "label" => __("Feature","colabsthemes"),
					            "type" => "checkbox",
					            "desc" => __("","colabsthemes"));

	$colabs_metaboxes[] = array (  "name"  => $shortname."_custom_url",
					            "std"  => "",
					            "label" => __("Custom URL","colabsthemes"),
					            "type" => "text",
					            "desc" => __("","colabsthemes"));

} // End photograph

After you done with this, you can check your photograph post (add a new one/edit the existing), a new field should be there.

Note: make sure if you are typing a full URL at this field: http://www.your-site.com

Step#2

Ok, this is the hard part of this modification. At this modification you will need to understand a little about JavaScript to avoid an error (miss a single quote may broke your site).

What you have to do at this steps is modify a file named theme-functions.php. Open that file and find out this code (around line 741):

function colabs_background_slideshow(){
	echo '<script type="text/javascript">';

      query_posts(array('post_type' => 'photograph', 'meta_key' => 'colabs_feature_photograph', 'meta_value'=> 'true'));
      $slide='';
      while (have_posts()) : the_post();
        $slide .= "{
          image   :'".colabs_image('link=url&return=true')."',
          title   :'".wptexturize(get_the_title())."',
          url   :'".get_permalink()."',
          caption :'". addslashes( wptexturize(get_the_excerpt()) ). "'
        },";
      endwhile; wp_reset_query();

      if($slide!='') echo 'slides = ['.rtrim($slide, ",").']';
  echo '</script>';
}

Modify that code become:

function colabs_background_slideshow(){
	echo '<script type="text/javascript">';
      query_posts(array('post_type' => 'photograph', 'meta_key' => 'colabs_feature_photograph', 'meta_value'=> 'true'));
      $slide='';
      while (have_posts()) : the_post();
		if(get_post_meta(get_the_ID(),'colabs_custom_url',true)!='') {
		$test = get_post_meta(get_the_ID(), 'colabs_custom_url', true);	}
		else{$test = get_permalink(); }
        $slide .= "{
          image   :'".colabs_image('link=url&return=true')."',
          title   :'".wptexturize(get_the_title())."',
          url   :'$test',
          caption :'". addslashes( wptexturize(get_the_excerpt()) ). "'
        },";
      endwhile; wp_reset_query();

      if($slide!='') echo 'slides = ['.rtrim($slide, ",").']';
  echo '</script>';
}

And done!

Here is some explanation about the added code:

if(get_post_meta(get_the_ID(),'colabs_custom_url',true)!='') {
		$test = get_post_meta(get_the_ID(), 'colabs_custom_url', true);	}
		else{$test = get_permalink(); }

This is the conditional code to check whether you type something on colabs_custom_url field (check step#1). If you left the field empty, then this conditional code will response to display get_permalink (i’m not using the_permalink because of those  code is not echoing a value. What we need is an echo value of permalink since the code is typed inside of a JavaScript code).

Also, if you are examine the code, i’m not using $post->ID, i’m using get_the_ID. The reason is also the same, what i need is an echo value.

Ok, that’s it about the modification, hope it will help you!

Note: you can get the files mentioned on this post from this URL

Advertisements

34 thoughts on “Custom URL for Lensa Slider

  1. Hello!
    I followed your tutorial to insert the custom url in the slideshow, it works perfectly.
    But I have a question for you about the caption.
    In another post you have advised me to use ‘Advanced Excerpt’.

    I have a problem if I write a description in three different lines:
    – If I active the plugin ‘Advanced Excerpt’: the slideshow is no longer visible, perhaps because of a problem with the javascript code in the caption;
    – But if the plugin is not active, I see all the rows next to each other without formatting.

    Would you have a suggestion for me?

    Thank you.

    • HI Robertosalemi,

      it is strange if the slider excerpt cannot working together with advanced excerpt plugin.

      can you tell me more detail about ‘problem with the javascript code in the caption’?

      • Hello,
        one question: the plugin must be active?

        I explain to you the problem:
        – I in the description of the page insert the following text:
        line 1
        line 2
        line 3
        therefore, three different rows.

        – I see in the script that is generated:
        slides = [{
                   image: ‘http://localhost/aaa/wp-content/uploads/2013/08/foto-slide-1.jpg’,
                   title: ‘Sample Title 1’,
                   url: ‘#’,
                   caption: ‘line 1 line 2 line 3’
                 }]

        The formatting is not respected.

  2. Hi tandamerah,

    I’ve followed your instructions to point. I’ve managed to get step 1 working – the Custom URL field on ne photograph post is there. Though the step 2 does not have any effect at all.

    Does it have something to do with my Lensa Theme version? I’m using Lensa 1.0.7
    It might be an updated version since you’ve posted this.

    Any help?

    George

    • Hi Kyllyan,

      You can change this code:

      $test = get_post_meta(get_the_ID(), 'colabs_custom_url', true); }
              else{$test = get_permalink(); }
      

      become:

      $test = get_post_meta(get_the_ID(), 'colabs_custom_url', true); }
              else{$test = ' '; }
      
  3. Hello Tandamerah,

    I hope you could help me with the code since it has changed in the newest version of Lensa.

    The code looks like this:

    function colabs_background_slideshow(){
      $slide_number = get_option( 'colabs_slides_number' ) ? get_option( 'colabs_slides_number' ) : get_option('posts_per_page');
    
      echo '<script type="text/javascript">';
     
          $bigslider_query = new WP_Query( array(
            'post_type' => 'photograph', 
            'meta_key' => 'colabs_feature_photograph', 
            'meta_value'=> 'true',
            'posts_per_page' => $slide_number
          ));
          $slide='';          
          while ($bigslider_query->have_posts()) : $bigslider_query->the_post();
            $large_image_url = wp_get_attachment_url( get_post_thumbnail_id( $bigslider_query->ID ) );
            $slide .= "{                  
              image   :'".$large_image_url."',                
              title   :'".wptexturize(get_the_title())."',
              url   :'".get_permalink()."',               
              caption :'". addslashes( wptexturize(get_the_excerpt()) ). "'
            },";          
          endwhile; wp_reset_postdata();   
    
          if($slide!='') echo 'slides = ['.rtrim($slide, ",").']'; 
      echo '</script>';
    }
    
    • Hi,

      You can modify it become:

      function colabs_background_slideshow(){
        $slide_number = get_option( 'colabs_slides_number' ) ? get_option( 'colabs_slides_number' ) : get_option('posts_per_page');
       
        echo '<script type="text/javascript">';
            
            $bigslider_query = new WP_Query( array(
              'post_type' => 'photograph', 
              'meta_key' => 'colabs_feature_photograph', 
              'meta_value'=> 'true',
              'posts_per_page' => $slide_number
            ));
            $slide='';          
            while ($bigslider_query->have_posts()) : $bigslider_query->the_post();
              if(get_post_meta(get_the_ID(),'colabs_custom_url',true)!='') {
              $test = get_post_meta(get_the_ID(), 'colabs_custom_url', true); }
              else{$test = get_permalink(); }
              $large_image_url = wp_get_attachment_url( get_post_thumbnail_id( $bigslider_query->ID ) );
              $slide .= "{                  
                image   :'".$large_image_url."',                
                title   :'".wptexturize(get_the_title())."',
                url   :'".$test."',               
                caption :'". addslashes( wptexturize(get_the_excerpt()) ). "'
              },";          
            endwhile; wp_reset_postdata();   
       
            if($slide!='') echo 'slides = ['.rtrim($slide, ",").']'; 
        echo '</script>';
      }
      

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