Storefront “Elegance” Theme, how to remove the slider from the homepage.
I have had a couple of people ask how to remove the slider from the homepage of Storefronts Elegance theme. So prepare to venture into some PHP code. This is really easy stuff, just removing a few lines, show no fear and jump in even if you have never done it before.
New to PHP editing? see the Tools note at the end of this post
The line numbers here may change in other versions but I show enough code for you to be able to find the relevant parts, the code probably will not change much. You will need to maintain the PHP file when there are theme updates so keep a copy of it and what changes you made. On to the good stuff, you need to edit tpl-homepage.php which is in your theme folder. First make a backup copy of this file somewhere!
Two lines are highlighted below in the code, select those 2 lines and everything in between, then delete. I told you it was easy.
<?php
/*
Template Name: Homepage
*/
?>
<?php get_header(); ?>
<?php
if ( get_option('storefront_slider_speed') <> "" ) {$sliderspeed= get_option('storefront_slider_speed');} else {$sliderspeed='500';}
if ( get_option('storefront_slider_interval') <> "") {$sliderinterval= get_option('storefront_slider_interval');} else {$sliderinterval='18';}
if ( get_option('storefront_slider_effect') <> "") {$slidereffect= get_option('storefront_slider_effect');} else {$slidereffect='fade';}
if ( get_option('storefront_slider_slices') <> "") {$sliderslices= get_option('storefront_slider_slices');} else {$sliderslices='30';}
if ( get_option('storefront_slider_boxcols') <> "") {$sliderboxcols= get_option('storefront_slider_boxcols');} else {$sliderboxcols='8';}
if ( get_option('storefront_slider_boxrows') <> "") {$sliderboxrows= get_option('storefront_slider_boxrows');} else {$sliderboxrows='4';}
if ( get_option('storefront_slider_keyboard') <> "") {$sliderkeyboard= get_option('storefront_slider_keyboard');} else {$sliderkeyboard='false';}
if ( get_option('storefront_slider_hover') <> "") {$sliderhover= get_option('storefront_slider_hover');} else {$sliderhover='false';}
if ( get_option('storefront_carousel_mouse') <> "") {$carouselmouse= get_option('storefront_carousel_mouse');} else {$carouselmouse='false';}
if ( get_option('storefront_carousel_speed') <> "" ) {$carouselspeed= get_option('storefront_carousel_speed');} else {$carouselspeed='3000';}
if ( get_option('storefront_carousel_bounce_speed') <> "" ) {$carouselbouncespeed= get_option('storefront_carousel_bounce_speed');} else {$carouselbouncespeed='1000';}
?>
<div id="slider-frame">
<div id="slider" class="nivoSlider">
<?php //BEGIN Slider LOOP
$loop = new WP_Query( array( 'post_type' => '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, '', 946, 360, true );
}
?>
<a href="<?php echo $buttonlink; ?>" title="<?php the_title(); ?>"><img alt="<?php the_title(); ?>" title="<?php echo $buttontext; ?>" src="<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" /></a>
<?php endwhile; //END SLIDER LOOP ?>
</div><!-- /#slider -->
<div class="clear"></div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'<?php echo $slidereffect; ?>', //Specify sets like: 'fold,fade,sliceDown,sliceUpDown'
slices:<?php echo $sliderslices; ?>,
boxCols: <?php echo $sliderboxcols; ?>,
boxRows: <?php echo $sliderboxrows; ?>,
animSpeed:<?php echo $sliderspeed; ?>,
pauseTime:<?php echo $sliderinterval; ?>000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false, //Next & Prev
directionNavHide:false, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:<?php echo $sliderkeyboard; ?>, //Use left & right arrows
pauseOnHover:<?php echo $sliderhover; ?>, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<?php if ($storefront_options['storefront_beneath_slider_option'] == 'Show Latest Tweet') { ?>
Close and save the file. You should be done. Remember if you mess up just replace the file with that backup copy you saved. You did save one right!
Tools:
Edit the PHP file with a code editor. You may also edit custom.css outside WordPress and upload it to your server. 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/
