Changing Slider Dimensions In The Classy WordPress Theme

Note: This guide has been updated For Classy Version 1.10+
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.

AJ Clarke
Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.
AJ Clarke
This article has 7 comments
  1. Oliver says:

    Hello, I am attempting to do this. I have edited the ‘functions.php’ and ‘style.css’, but I can not find the ‘includes/sliders/content.php’ and ‘includes/sliders/nivo.php’ files in the wordpress theme editor. Do I have to edit the files and then upload the theme or are am I not looking in the right place?

    1. AJ Clarke says:

      Yes you will have to edit those files outside of WordPress.

      Please use the support site for questions – WPThemeHelp.com – thanks!

      Admin
  2. Mahdi says:

    Hi AJ,
    I try to create highlight in classy them , but can’t.
    please help me , thank you

    1. AJ Clarke | WPExplorer says:

      If you are having issues with a premium theme please open a ticket at wpthemehelp.com which was created specifically for that. Thanks!

      Admin
  3. Melanie Painter says:

    Thank you THANK you for this! Honest to God I have spent so much time trying to figure it out myself <3

  4. Vasco Trindade says:

    Thank you so very much. I was able to change the slideshow on the bodega theme with this tutorial.

Leave a Reply