Is there is any php code to display the media library section in the frontend?

The code should display the full backend media library section to the frontend,like I have the image filter according to the categories and tags upload, edit,delete functions in the backend also needed to show all those section in the frontend.

Is there is any to do it in php or WordPress?

1 Answer 1


As far I've understood with those I've written a simple system for you. Please put the below codes in your functions.php-

add_action( 'wp_enqueue_scripts', 'the_dramatist_enqueue_scripts' );
add_filter( 'ajax_query_attachments_args', 'the_dramatist_filter_media' );
add_shortcode( 'the_dramatist_front_upload', 'the_dramatist_front_upload' );

 * Call wp_enqueue_media() to load up all the scripts we need for media uploader
function the_dramatist_enqueue_scripts() {
        get_template_directory_uri() . '/js/media-uploader.js',
        // if you are building a plugin
        // plugins_url( '/', __FILE__ ) . '/js/media-uploader.js',
        array( 'jquery' ),
 * This filter insures users only see their own media
function the_dramatist_filter_media( $query ) {
    // admins get to see everything
    if ( ! current_user_can( 'manage_options' ) )
        $query['author'] = get_current_user_id();
    return $query;
function the_dramatist_front_upload( $args ) {
    // check if user can upload files
    if ( current_user_can( 'upload_files' ) ) {
        $str = __( 'Select File', 'text-domain' );
        return '<input id="frontend-button" type="button" value="' . $str . '" class="button" style="position: relative; z-index: 1;"><img id="frontend-image" />';
    return __( 'Please Login To Upload', 'text-domain' );

And inside your theme folder create a folder called js and inside the folder create a file called media-uploader.js. Inside the media-uploader.js file place the below code-

(function($) {
    // When the DOM is ready.
    $(function() {
        var file_frame; // variable for the wp.media file_frame

        // attach a click event (or whatever you want) to some element on your page
        $( '#frontend-button' ).on( 'click', function( event ) {

            // if the file_frame has already been created, just reuse it
            if ( file_frame ) {

            file_frame = wp.media.frames.file_frame = wp.media({
                title: $( this ).data( 'uploader_title' ),
                button: {
                    text: $( this ).data( 'uploader_button_text' ),
                multiple: false // set this to true for multiple file selection

            file_frame.on( 'select', function() {
                attachment = file_frame.state().get('selection').first().toJSON();

                // do something with the file here
                $( '#frontend-button' ).hide();
                $( '#frontend-image' ).attr('src', attachment.url);



Actually the whole above thing is ultimately giving you a shortcode called the_dramatist_front_upload. Place this shortcode there, where you want to see your media manager. And it will show the media manager only to the logged in user. Hope that thing helps you. I borrowed the scripts from here

  • i tested it but doesn't work for me :/
    – user165577
    Apr 22, 2019 at 20:09
  • How do I integrate it to any of the buttons of TinyMCE editor?
    – Sanu_012
    Jul 11, 2021 at 5:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.