Changing Slider Dimensions In The Classy WordPress Theme

I have been getting quite a few requests asking me how to change the size of the Nivo and Content Sliders in the Classy WordPress Theme, so I decided to make a tutorial here showing you all the steps involved in changing the featured image size, CSS and template files so you can define your own slider size.

Step 1: Change Featured Image Size In Functions.php

The first thing you’ll want to do is change the size of your slider image as it’s defined in functions.php so that it crops correctly when uploaded to your media library.

* Open functions.php and change line 122

add_image_size( 'nivo-slider',  [highlight]980[/highlight], [highlight]400[/highlight], true );

* The first value 980 is the width of your slider image and the 400 is the height of the slider image. Change these to match your needs.

Step 2: Edit your CSS

Next is to edit your CSS to change the container height of your slider.

Note: You only have to do this for the “NivoSlider” because the content slider will change height based on it’s content automatically.

* Open style.css and change the height value between lines 1132-1140

#slider_nivo {
    position: relative;
    [highlight]width: 980px;[/highlight]
    margin-top: -30px;
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: 30px;
    [highlight]height: 400px;[/highlight]
    overflow: hidden;
}

Step 3: Edit Your Template Files

Next step is to edit your template files so the code matches the new dimensions.

a. Change Nivo Image Slider: Open includes/sliders/nivo.php and between lines (32-36) change your image values to reflect your new dimensions.

<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>"><img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" <?php if($options['disable_caption'] != 'disable') { ?>title="<?php the_title(); ?>"<?php } ?> [highlight]width="980" height="400"[/highlight] /></a>
<?php
// no meta link defined, show plain img
} else { ?>
<img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" <?php if($options['disable_caption'] != 'disable') { ?>title="<?php the_title(); ?>"<?php } ?> [highlight]width="980" height="400"[/highlight] />

b. Change Content Slider For Image Slides: Open includes/sliders/content.php and between lines (29-36) change your image values to reflect your new dimensions.

<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>"><img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" [highlight]width="980" height="400"[/highlight] /></a>
</div>
<!-- END .slide-image -->
<?php
// no meta link defined, show plain img
} else { ?>
<div>
<img src="<?php echo $featured_image[0]; ?>" alt="<?php the_title(); ?>" [highlight]width="980" height="400"[/highlight] />

Step 4: Regenerate Your Images (only if you need to re-crop your images)

Remember on step 1 we changed the slider image size in functions.php? Well this is the value that WordPress uses to crop your images when they are uploaded so if you have any images already in your media Library you will need to “regenerate” them to reflect your changes.

To do this you can download the “Regenerate Thumbnails” plugin and run it 1 time.

After you run the plugin (under tools in your dashboard) you won’t have to do it anymore because any new images will be cropped using the values set in step 1 in your functions.php.