When you install a fresh theme on WordPress, the slider almost never fits your content dimensions. You have 16:9 screenshots, product covers, square images, and the theme crops them to its own proportions. Half the frame gets cut off, and the main showcase of your site looks like it was assembled with your eyes closed.

But this isn't a theme bug. These are hard-coded settings that live in three places: thumbnail size registration in functions.php, the slider's CSS container, and output templates. The fourth layer is regenerating already-uploaded images to the new size. Fix all four, and the slider aligns perfectly.

Below is a step-by-step breakdown using the Classy theme by WPExplorer as an example. But the logic is universal: any classic theme with a Nivo slider or custom slider using add_image_size edits the same files.

💡 Quick overview:

• Change add_image_size in functions.php, this controls cropping on upload
• Edit width and height of the container in style.css so the layout doesn't collapse
• Update width and height attributes in the nivo.php and content.php templates so the browser doesn't stretch the img
• Run Regenerate Thumbnails on your media library, old images get recreated to the new size

The entire process is shown in this video:

Step 1. Change the thumbnail size in functions.php

When WordPress uploads an image, it processes it through all registered sizes. Registration happens via the add_image_size function. The theme declares a 980×400 slider, but you need 1200×500, so you need to edit here.

Open the theme's functions.php. Path: Appearance → Theme File Editor in the admin panel, or via FTP at /wp-content/themes/theme-name/. In Classy, the add_image_size line for the slider is around line 122:

1
add_image_size( 'nivo-slider', 980, 400, true );

First parameter is width, second is height, third (true) is hard cropping. If you set false, WordPress will fit the image along the smaller side without cropping. Sounds tempting, but the slider can "float" in height from image to image.

Substitute your values and save:

1
add_image_size( 'nivo-slider', 1200, 500, true );

From this point on, all new uploads are cropped to your size. Old ones aren't yet, we'll get to them in step 4.

Step 2. Fix the CSS container

You've changed the thumbnail size. But the slider container in the layout still lives with the old values from CSS. The image loads correctly, but the block either crops it or leaves empty space around the edges.

In Classy, the Nivo slider container is described in style.css, lines 1132-1140:

1
#slider_nivo {
2
    position: relative;
3
    width: 980px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 400px;
9
    overflow: hidden;
10
}

Change width and height to your values:

1
#slider_nivo {
2
    position: relative;
3
    width: 1200px;
4
    margin-top: -30px;
5
    margin-left: -25px;
6
    margin-right: -25px;
7
    margin-bottom: 30px;
8
    height: 500px;
9
    overflow: hidden;
10
}

Important nuance: this edits specifically the Nivo slider. The Content Slider in Classy adjusts height automatically based on content, you don't need to touch it. In other themes the logic is the same: find the selector for the specific slider you're changing, and don't mess with neighboring ones.

Step 3. Update attributes in templates

add_image_size returns the URL of the correct thumbnail. But the slider's HTML markup contains hard-coded width="980" height="400". Leave the old values, and the browser will stretch or compress the image to match them. Result: blurry or squashed image, even though the source is correct.

In Classy, two files need editing.

Nivo Image Slider, file includes/sliders/nivo.php, lines 32-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Content Slider for image slides, file includes/sliders/content.php, lines 29-36:

1
<a href="<?php echo $slidelink ?>" title="<?php the_title(); ?>">
2
  <img src="<?php echo $featured_image[0]; ?>" 
3
       alt="<?php the_title(); ?>" 
4
       width="1200" height="500" />
5
</a>

Edit both, save. If the theme uses background-image in CSS instead of <img>, don't touch the templates, step 2 is enough.

Step 4. Regenerate old images

In step 1 we changed add_image_size. New uploads go with correct cropping. But all images in the media library uploaded before the edit are stored at the old size. The slider looks at them and gets the wrong proportions.

Solution: the Regenerate Thumbnails plugin. It goes through the entire media library and recreates thumbnails to the current registered sizes. Standard installation: Plugins → Add New → search "Regenerate Thumbnails" → Install → Activate.

After activation: Tools → Regenerate Thumbnails → "Regenerate All Thumbnails". For a large library, the process takes a couple of minutes, the plugin triggers regeneration of all declared sizes on each image.

The plugin can also delete unused thumbnail sizes, freeing up server space. After running once, you won't need it anymore: all future uploads will go through the new add_image_size value.

If you have console access to the server, WP-CLI is faster:

1
wp media regenerate --yes

No HTTP request overhead, and it doesn't hit timeouts on large libraries.

What to do if the slider still breaks

Sometimes you've completed all four steps, but the slider behaves oddly. Go through this checklist:

• CSS specificity: your new width/height is being overridden by a more specific selector in the theme. Open the browser inspector and see which rule is actually being applied to the element.
• Cache: clear browser cache (Ctrl+F5). If you have a server caching plugin like WP Rocket or LiteSpeed Cache, clear that too.
• Child theme: editing the parent theme directly means changes get wiped on the next update. Create a child theme and move your edits there.
• Responsive: is the container width larger than the site width? On mobile, the slider overflows the edge. Add max-width: 100% and height: auto in a media query for mobile.

Theme update broke everything: how to protect yourself

The main pain of editing the parent theme: updates overwrite files, and your changes disappear. The slider silently returns to factory settings.

The correct approach is a child theme. Move three things there:

• Override add_image_size in the child theme's functions.php via the after_setup_theme hook;
• Override CSS, the child style.css loads after the parent, your rules win by cascade;
• Slider templates, copy nivo.php and content.php into the child theme with the same folder structure (includes/sliders/). WordPress automatically picks up the version from the child.

After this, parent theme updates pose no threat to your sizes.

⁉️🤔 Frequently asked questions

Do I have to edit all three files: functions.php, style.css and templates?

Yes, otherwise the result will be incomplete. Changed only add_image_size without CSS, and the container crops the new image. Without templates, the browser stretches the image to the old width/height, and it becomes blurry. Three edits give consistent sizing across all layers: thumbnail registration → container → HTML attributes.

Do I need to touch content.php if I only use the Nivo slider?

No. content.php is for the content slider, the one that pulls text and images from posts. If the content slider isn't used on the site, you can skip the file. But when in doubt, the edit takes a minute, better to do both.

Will the Regenerate Thumbnails plugin delete my originals?

No. The original, full-size image remains untouched. The plugin only recreates thumbnails: the sizes registered via add_image_size and Settings → Media. The option to delete unused sizes also doesn't touch the original, it cleans up "orphan" thumbnails not declared in the theme or plugins.

What if add_image_size isn't in the theme and the slider works differently?

Some modern themes don't use add_image_size for the slider. Instead, they load the original image and control size through CSS: object-fit: cover or background-size: cover. In this case, step 2 is enough, edit only the CSS container. Check in the browser inspector what URL is actually loading in the slider: if it's image.jpg without a -980x400 suffix, you don't need steps 1 and 4.

Do I need a backup before editing functions.php?

Absolutely. One typo in functions.php, and the site crashes to a White Screen of Death. Before editing, download the file via FTP or copy the contents to a text editor. If the site crashes, upload the original functions.php back, the site revives instantly.

Custom slider: final breakdown

The algorithm is universal for any classic WordPress theme: size registration → CSS container → HTML templates → regenerate old images. Four steps, and the slider works in your proportions without cropping or blur.

The main thing is not to edit the parent theme directly. Move changes to a child theme right after you confirm the sizes fit. Then no update will roll the slider back to factory settings.