WordPress

WordPress: Add image sizes without plugins

WordPress: Add image sizes without plugins

If you’re looking to add additional image sizes to WordPress without using a plugin then the code below is a simple way to get the job done with minimal fuss.

Add image sizes to WordPress without plugins

To do this there are a few steps you need to follow, all are pretty straightforward and doable for beginners:

  1. Back up your WordPress website 😏
  2. Open your site in your FTP(SFTP) client
  3. Go to your theme folder
  4. Open your functions.php
  5. Copy your functions.php and paste in a note/text editor
  6. Add the code below and edit image sizes
  7. Upload and save your functions.php via your FTP(SFTP) client
  8. Rebuild your WordPress image thumbnails

Back up your WordPress website

Hopefully, you are regularly backing up your WordPress website, including database and files. If not, before you go any further, I recommend that you organise a back up to be taken of your website. There are plenty of easy to use guides on how to do this online, plus I will write about WordPress back up options in the future.

Open your site in your FTP(SFTP) client

Mostly I use Filezilla and Cyberduck to access my WordPress files on my website host. There are plenty of free options to choose from. It’s recommended that you use SFTP rather than FTP to access your website host files, due to the connection being encrypted. It’s similar to a HTTPS connection versus a HTTP connection, hence the ‘S’.

Go to your theme folder

After you have logged in on your FTP(SFTP) client, head to your current WordPress theme folder which is located: /wp-content/themes/theme-folder-name.

Open your functions.php

Now open your functions.php in your current theme folder. To do this you’ll need a text editor, I use Atom and Sublime Text. Both are simple and easy to use.

Copy your functions.php and paste in a note/text editor

As a quick precaution, I would copy the contents of your functions.php file and paste it in a new tab in your text editor. If something goes wrong, you can quickly paste back the original code.

Add the code below and edit image sizes

The code below should be placed within the php tags of your functions.php file. The code contains 2 examples which are ‘image-name-one’ and ‘image-name-two’.

Let me explain each section of the code for ‘image-name-one’:

  1. add_image_size = this is the action you are taking
  2. image-name-one = this is the name of the new image size, you can change this to something unique
  3. 1000 = width in pixels
  4. 500 = height in pixels
  5. true = true will crop the image and false will not crop the image

/* ********************************
Add Image Sizes
******************************** */
add_image_size( 'image-name-one', 1000, 500, true );
add_image_size( 'image-name-two', 1440, 9999, false );

Upload and save your functions.php via your FTP(SFTP) client

Now save and upload your edited functions.php file.

Rebuild your WordPress image thumbnails

Now, I recommend using the ‘Force Regenerate Thumbnails‘ to delete old, unused and existing thumbnail images and create all your new image sizes as well as existing ones. Once this is done you can deactivate this plugin. All new images you upload to your WordPress media file will now create additional versions in your new image sizes.