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?

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?

• media
• front-end
• library

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() {
    wp_enqueue_media();
    wp_enqueue_script(
        'some-script',
        get_template_directory_uri() . '/js/media-uploader.js',
        // if you are building a plugin
        // plugins_url( '/', __FILE__ ) . '/js/media-uploader.js',
        array( 'jquery' ),
        null
    );
}
/**
 * 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 ) {
            event.preventDefault();

            // if the file_frame has already been created, just reuse it
            if ( file_frame ) {
                file_frame.open();
                return;
            }

            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);
            });

            file_frame.open();
        });
    });

})(jQuery);

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