I created a simple plugin available at https://github.com/dbspringer/wp-frontend-media to demonstrate what you’ll need to do to get it working. There are some important caveats!
- You need to decide how you want to handle how it’ll work for users that aren’t logged in.
- You’ll also have to decide what to do about users without ‘upload_files’ permissions.
That said, let’s take a look!
- I’m calling
wp_enqueue_media()to load the media interface libraries.
- I’m filtering
filter_media()to retrieve only the images belonging to the user. If you don’t care about restricting the images just remove the filter.
- I’m checking
current_user_can( 'upload_files' )in the shortcode to restrict access to the interface, you’ll need a similar check somewhere in your own code.
This is the meat of what you’ll need to use the media interface on the front-end. It’s actually pretty simple to summon the interface and then do something with the file that was retrieved. It’s all handled in these three easy steps:
- Create the file_frame object using
- Attach a
'select'listener to the
file_frameobject to handle what you want to do when a file is selected. The
attachmentvariable will have an object containing all the metadata for the selected item. Just do a
console.log()to figure out what you’re getting.
- Tell the
file_frameto pop open the interface based on a click (or whatever) on an element somewhere.
There you have it! I’ll leave it up to you to do something non-trivial with it, but this should get you started. happy coding!