Would you like to know how to add custom size on thumbnails?
Uploading images to WordPress creates different sizes of the original image, but sadly, it's not a solution that might work for everyone. The default sizes created are: thumbnail, medium, large, and original size. But, if you need a different size, like the products in an online store, you can make your own custom size according to your needs.
In this tutorial, we'll show you how to create custom image formats by saving them to your theme with code.
I'm going to assume for this tutorial that you know how to develop (HTML/CSS & PHP). This tutorial also applies if you know how to create WordPress plugins.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
How to save custom sizes on WordPress
Start by opening or create the functions.php file of your theme, then configure it as in the example below which is an excerpt from the default Twenty Seventeen theme:
<?php
if ( version_compare( $GLOBALS['wp_version'], '4.7-alpha', '<' ) ) {
require get_template_directory() . '/inc/back-compat.php';
return;
}
/**
* Default theme configuration + added new features.
*
* Note that this code is added after the "after_setup_theme hook", which
* runs before the init hook.
*/
function twentyseventeen_setup() {
As the comment explains, you can add compatibilities with the WordPress features you want to use in your theme, such as featured images, post formats, custom header, and other similar options.
See also our list of 5 WordPress plugins to edit images on your blog
There is a feature that you absolutely must add in order to be able to create images with custom sizes and thumbnail previews:
Add_theme_support ('post-thumbnails');
After WordPress version 2.9, the post images were renamed to “featured images”, but it is (confusedly) still mentioned by its original name in the file code. These terms can be used interchangeably, however, depending on your audience this may be confusing for some.
Also read our tutorial on How to have advanced user control on WordPress
Then you can add your custom image sizes to the " add_image_size ". This is the basic structure you need:
add_image_size ('new-custom-size', width, height, crop mode);
Make sure to change " themename By the name of your theme. Replace " new-custom-size With a descriptive name for your image size. Although you can use almost any name, these are prohibited because they are reserved by the default image sizes mentioned above: thumb, thumbnail, medium, large, post-thumbnail.
Besides, you can set custom image sizes width, height and for cropping.
See also How to compress and resize images on WordPress
You can change the dimensions " width " and " height For those you will need. Although it's quite self explanatory, the crop mode is not.
There are a few options for cropping your images:
- Forced crop - To do this, set the value " Crop mode " at " true ". It cuts a larger image to the exact width and height that is set so that it fits perfectly with your design, but it may not necessarily crop the image proportionally.
- Gentle cropping - This is the default setting and is enabled by removing the crop mode. It proportionally produces an image, but image heights may vary if they were originally of different sizes.
- Unlimited height - By deleting the value " height », The crop mode of your custom image can have unlimited height. This is especially useful for infographics.
You can repeat the line in the above snippet to save as many image sizes as you need. Don't forget to edit it so that it meets the specifics you need.
How to share your articles as PDF on WordPress? Find out by consulting this article.
You can continue to add support for the features you need and when you're done, include it in the hook " after_setup_theme ":
Add_action ('after_setup_theme', 'themename_setup');
Keep in mind that " themename Should be changed to the actual name of your WordPress theme. Make sure to use this name consistently throughout this file.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. QT Places
QT Places is a WordPress extension elegant and versatile to display maps from Google Maps on your website. After installation, a new post type called “Places” will appear in your WordPress menu, and you can immediately start adding new places to maps.
This extension is super responsive, and works on mobile (iPhone, Android). You can add map functionality to any standard publication type (like articles or pages), or personalized (like portfolios).
Download | Demo | Web hosting
2. Calendarista
Calendarista is a premium WordPress plugin designed to provide an experience of online booking –Booking- faster and more efficient to your customers. Its objective is to make services very quick and easy to add for companies that offer the booking of sessions or appointments on the internet.
So if you are looking for a complete reservation system for a hotel, car rental company, apartment rental, travel agency, beauty salon, restaurant, etc.…, this plugin will be perfect for you.
Read this article on How to display all your WordPress publications on a single page
As features it offers among other things: 10 ready-to-use reservation system models, support for 3 payment gateways, WooCommerce support, the integration of a customizable form builder, Google Map support, an excellent calendar template for displaying your appointments, and much more.
Download | Demo | Web hosting
3. EventOn
The premium EventOn WordPress plugin is the best-selling calendar plugin on CodeCanyon, with over 7000 sales. It has a ton of useful features like featured images for events, shortcodes, unlimited creation of event calendars, customizable metadata fields and event characteristics.
Its main extensions are among others: the possibility of selling tickets, the import / export of events in CSV format, free integration with Google Map, sorting and filtering on the event list, fully responsive layout, Multilingual support, and easy customization of the calendar.
So much to see... 9 WordPress plugins to create a travel website
Some features are already available for free in other plugins, but the value is an effective compromise.
Download | Demo | Web hosting
Other recommended resources
We also invite you to consult the resources below to go further in the grip and control of your website and blog.
- How to design an online login form for a custom global header in Divi
- 7 WordPress plugins to create an FAQ on your website
- A few plugins to choose from to create tables on WordPress
- How to fix the login error with the WordPress database
Conclusion
Here is ! That's it for this guide. We hope it will allow you to add custom sizes for the images.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
If you have some Comments or suggestions, do not hesitate to let us know in the reserved section But in the meantime, share this article on your different social networks.
...
