Storefront Elegance theme. Change the size of the homepage slider

Posted by on Nov 26, 2012 in Blog, Elegance, Storefront Themes | One Comment

I have had a couple of people ask how to change the size of the slider on the homepage of Storefronts Elegance theme. So prepare to venture into some PHP code. This is really easy stuff, just changing a couple of numbers, 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. The example code is from Elegance version 1.4.5.
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!

There are 2 numbers in the line of code highlighted below which are width and height in pixels. Change them to the values you want.

<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>

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! Now you need to add some CSS.

Make it all fit with CSS

Now you just need a little CSS to make the slider fit. If you only changed the height the second slider margin: 0 auto rule is not required. See the notes below for where to put this code.

#slider img, #slider a, #slider a img, #slider {
height: 360px;
width: 946px;
/* center slider on page */
#slider {
margin: 0 auto;


You may edit your PHP 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,
Notepad++ for the PC

Custom CSS:

This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.

1 Comment

  1. Kim
    January 14, 2013


    I’m having issues editing the width of the slider. I can’t seem to remove the padding from around the slider, and it doesn’t seem to make the image larger. What am I doing wrong?



Leave a Reply