WordPress Media Uploader is a great way for users to add new files to their media library or when creating or editing any custom post type, post or page. In this series of tutorials, I will introduce you into extending the WordPress Media Uploader by adding new fields for data, embed options, sending HTML to the editor and also adding a new tab.
In this article, I will just give you a small preview of what we will do and how to do it.
The Custom Fields are fields that we can use as custom metadata to save more information about an attachment. This can be done by using the hooks:
attachment_fields_to_edit– filtering the fields
attachment_fields_to_save– saving the data in fields
In our first hook, we can add new fields to it by using the
array to define them. WordPress will build the markup for those fields on its own.
The second hook is used to save the data in those fields and it is called on each change when used in WordPress Media Uploader.
Embed options are used when we click on Insert into post button when an attachment is selected. They can define the HTML that is placed in our editor when adding the attachment.
We will use the hooks:
wp_prepare_attachment_for_js– adding new data to our attachments
wp.media.view.Settings.AttachmentDisplay– To render our new template
wp.media.editor.send.attachment– To add new data which will be sent to our editor
This is where the magic happens when we click the Insert into post button. I will show you how you can easily manipulate the HTML for it and even create shortcodes instead of plain HTML.
If we would use the embed option as shown in the previous image, we could have a shortcode instead of the image HTML such as:
Here is the whole list of tutorials:
Have you already worked with WordPress Media Uploader/Library? Did you extend it or use it in some other way? Please do share in the comments below:)
Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.