WordPress 3.5 custom media upload for your theme options

📸 WordPress 3.5 Custom Media Upload for Your Theme Options 🎨

Hey there WordPress developers! 👋 Are you struggling to integrate the new Media Manager in WordPress 3.5 with your custom theme options? Have no fear, because we've got a solution for you! 💡 In this blog post, we'll walk you through a step-by-step guide on how to achieve the desired result. 🚀

The Problem 😫

With the release of WordPress 3.5, the Media Upload system underwent major changes. If you've been using the old method via thickbox and window.send_to_editor for your theme options, you might be scratching your head on how to make it work with the new Media Manager. 😵

The Solution 💡

After some digging, we found a nifty solution that will save you time and frustration. 👏 Here's what you need to do:

1. First, make sure you have the necessary HTML structure in place. Here's a sample code:

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="" />
<input class="custom_media_id" type="text" name="attachment_id" value="" />

1. Next, you'll need some jQuery magic to make the upload functionality work. Here's the code:

$('.custom_media_upload').click(function() {

    // Backup the original send.attachment function
    var send_attachment_bkp = wp.media.editor.send.attachment;

    // Override the send.attachment function
    wp.media.editor.send.attachment = function(props, attachment) {

        // Update the image source, URL, and ID fields
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        // Restore the original send.attachment function
        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    // Open the Media Manager
    wp.media.editor.open();

    return false;
});

That's it! With these codes in place, you'll be able to integrate the new Media Manager seamlessly into your theme options. 🙌

Troubleshooting Tips 🛠️

If you want to see the full range of settings contained in the attachment variable, you can use console.log(attachment) or alert(attachment). This will help you debug any issues you encounter along the way. 🐞

Share Your Thoughts! 💬

We hope this guide has helped you overcome the challenge of implementing custom media upload in WordPress 3.5. If you have any feedback on the code or any improvements in mind, we'd love to hear from you! Drop us a comment below and let's start a conversation. 🎉

Now go ahead and upgrade your theme options with the new Media Manager. Your users will thank you for it! Happy coding! 😊✨