Designer theme by Storefront Themes: add links to slider images
Another short post on a very specific topic. If you are a user of the Designer theme by Storefront Themes read on.
I am often asked can I make the images in the slider clickable links just like the buttons
The answer is yes. You will need to do one simple PHP edit. If you have not done this before see the note “Tools” at the bottom of this post.
Locate the slider-posts.php file which is in sub folder includes/templates/homepage in the theme folder,
Make a safe copy somewhere in case you have problems.
Open it and find this block of code and add the highlighted line to make the images go to the same link as the button when clicked.
<?php //BEGIN Slider LOOP
$loop = new WP_Query( array( 'post_type' => 'sft-slide' ) );
while ( $loop->have_posts() ) : $loop->the_post();
$buttontext = get_post_meta($post->ID, "text", true);
$buttonlink = get_post_meta($post->ID, "link", true);
if(has_post_thumbnail()) {
$thumb = get_post_thumbnail_id();
$image = vt_resize( $thumb, '', 260, 200, true );
}
?>
<li>
<a href="<?php echo $buttonlink; ?>" </a>
<img alt="<?php the_title(); ?>" title="<?php the_title(); ?>" class="roundedCorners" src="<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />
<p class="carousel-product-title" style="margin-bottom:8px; margin-top:3px;"><?php the_title(); ?></p>
<!--<p><span>(0)</span></p>-->
<p><a href="<?php echo $buttonlink; ?>" class="wht-btn-sml"><?php echo $buttontext; ?> »</a></p>
</li>
<?php endwhile; //END PRODUCT LOOP ?>
Or just delete everything and copy and paste the whole block from above as that 18 lines is the whole file.
Tools:
You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
