Attachments

In this tutorial I will show you step by step how to add a file uploader field to WooCommerce checkout page without any plugins.

Usually when I publish something on my blog I never use SVG images in my posts and in theory you would never need them too in your site content.

But the thing is that we’re not always using WordPress publishing tools (The Block Editor, Elementor etc) for content editing, sometimes we create landing pages with them. My decision to create a tutorial like this came to me when some of my customers who use my Simple WordPress Crossposting plugin tried to upload SVG images in Elementor and then to crosspost such articles to another site (which obviously didn’t have SVG support) using REST API.

When you try to upload an SVG icon to a WordPress website, you’re going to have an error like this in Media Upload:

Or if you try to upload it via REST API, then it will return 500 Server Error with the following response body:

In this tutorial we are going to talk about image sizes in WordPress. Well, but what image sizes are exactly?

All right, if you open your WordPress /wp-content/uploads directory, you might find something like this there:

As you can see, an image you’ve uploaded once was duplicated multiple times with different image sizes. And in this case I am just using default WordPress theme with no plugins installed.

Users who don’t know what is the thing – image sizes in WordPress could be terrified by what they see in uploads directory.

The key idea is that when you upload an original image (especially unoptimized, up to 10MB) it would stupid to use this exact file everywhere on the website. Maybe you have a list of recent posts displayed somewhere with 100×100px thumbnails and what about srcset and sizes attributes of course?

A great example is the list of products in WooCommerce in admin area:

Needless to say that using image resizing software is also not a great idea because it will create huge performance issues on your server.

That’s why WordPress creates so many image copies and in this tutorial we are going to learn to manage them.

In this tutorial I am going to show you how you can easily create your own WordPress image carousels or sliders without overloading your website with tons of plugins.

A quick disclaimer though – in case you’re using Block Editor (Gutenberg), then probably a better idea would be to create a block for that purpose or to install Simple Carousel Block created by me.

But in this tutorial we are going to use just custom fields (or options) and an external carousel JavaScript library.

Every once in a while I am receiving questions about my Simple Multisite Crossposting plugin whether it works with shared media library plugins or not (yes – it works). And when I decided to test it I figured it out that there are multiple shared media library plugins out there and every one of them works a little bit differently.

The key idea of most of these plugins is to store all the media on one “main” blog and not necessarily it should be the blog with ID = 1. Then some of them use switch_to_blog() function every time you’re working with attachments on subsites, the other ones even create attachments in database linked to original files on all subsites (I assume it could lead to issues by the way).

Most of all I like a switch_to_blog() approach because it seems unharmful, you can even stop using network media library any time, just deactivate the plugin and continue to use your websites as usual.

In this tutorial I am going to dive deep in WordPress media uploader functionality. By the way it is possible to implement not for only images but for any supported file types.

This is how it looks in WordPress admin area:

In this tutorial I am going to show you how to do two things at the same time:

1. Add an admin column for WordPress featured images of any post type.
2. Add a quick edit option for featured images.