How to Change the Size of Nivo and Content Sliders in Classy WordPress Theme
If you’re using the Classy WordPress theme and want to change the size of your Nivo and Content sliders, you’ve come to the right place. In this tutorial, we’ll show you how to change 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 step is to change the size of your slider image as defined in functions.php. This will ensure that it crops correctly when uploaded to your media library. Here’s how to do it:
1. Open functions.php and change line 122.
2. Look for the code “add_image_size(‘nivo-slider’, 980, 400, true);”
3. The first value (980) is the width of your slider image, and the second value (400) is the height of the slider image.
4. Change these values to match your needs.
Step 2: Edit Your CSS
The next step is to edit your CSS to change the container height of your slider. Note that you only need to do this for the NivoSlider because the content slider will change height based on its content automatically.
1. Open style.css and look for the code “#slider_nivo”.
2. Change the height value between lines 1132-1140.
3. The first value (980) is the width of your slider image, and the second value (400) is the height of the slider image.
4. Change these values to match your needs.
Step 3: Edit Your Template Files
The next step is to edit your template files so that the code matches the new dimensions.
a. Change Nivo Image Slider
1. Open includes/sliders/nivo.php.
2. Look for the code between lines (32-36).
3. Change your image values to reflect your new dimensions.
4. The width and height values should match the values you set in Step 1.
b. Change Content Slider for Image Slides
1. Open includes/sliders/content.php.
2. Look for the code between lines (29-36).
3. Change your image values to reflect your new dimensions.
4. The width and height values should match the values you set in Step 1.
Step 4: Regenerate Your Images (Only if You Need to Re-Crop Your Images)
If you need to re-crop your images, you’ll need to regenerate them to reflect your changes. Here’s how to do it:
1. Download the “Regenerate Thumbnails” plugin.
2. Run the plugin one time.
3. After you run the plugin, any new images will be cropped using the values set in Step 1 in your functions.php.
Conclusion
Changing the size of your Nivo and Content sliders in Classy WordPress theme is easy if you follow these steps. By changing the featured image size, CSS, and template files, you can define your own slider size and make your website look even better.
