I'm building a community site where users can post short blogs similar to Twitter.

I've created a widget that has the ability for the user to make a post, regardless of where they are on the site (So long as the Widget is used on that page).

In addition, I have a button that loads the media library for users to add images to their post.

It seemed to be working.. at least if I'm simply selecting an image from the library. However, if I'm trying to upload an image, regardless of user level, I'm getting an error, but no error code (Just says dismiss error). In addition, it also logs the user out.

Thinking it was because of user roles (Although for now I have everyone set to Author for debugging reasons anyway), I added this code...

    function allow_contributor_uploads() {
        $contributor = get_role('contributor');

    if ( current_user_can('contributor'))
        add_action('init', 'allow_contributor_uploads');

In addition, while trying to fix the error, someone suggested I include these files, which I added to my functions.php file

    require_once( ABSPATH.'/wp-admin/includes/image.php' );
    require_once( ABSPATH.'/wp-admin/includes/file.php' );
    require_once( ABSPATH.'/wp-admin/includes/media.php' );

I know my code for loading the library is working, as is getting the URL for the selected image... but just in case, I'm using this code to call wp.media()

( function( $) {
    $.wpMediaUploader = function( options ) {

        var settings = $.extend({

            target : '.al-uploader', // The class wrapping the textbox
            uploaderTitle : 'SELECT OR UPLOAD AN IMAGE', // The title of the media upload popup
            uploaderButton : 'SET IMAGE', // the text of the button in the media upload popup
            multiple : false, // Allow the user to select multiple images
            buttonText : '', // The text of the upload button
            buttonClass : '.al-upload', // the class of the upload button
            previewSize : '100px', // The preview image size
            modal : true, // is the upload button within a bootstrap modal ?
            buttonStyle : { // style the button
                border : 'none',
                background : 'none',                
                padding : '0',   
                float : 'right',
                display : 'block'  

        }, options );

  //      $( settings.target ).append( '<a href="#" class="' + settings.buttonClass.replace('.','') + '">' + settings.buttonText + '</a>' );
       $( settings.target ).append('<div><br><img src="#" style="display: none; width: ' + settings.previewSize + '"/></div>')

        $( settings.buttonClass ).css( settings.buttonStyle );

        $('body').on('click', settings.buttonClass, function(e) {

            var selector = $(this).parent( settings.target );
            var al_media_uploader = wp.media({
                title: settings.uploaderTitle,
                button: {
                    text: settings.uploaderButton
                multiple: settings.multiple
            .on('select', function() {
                var attachment = al_media_uploader.state().get('selection').first().toJSON();
                $('.al-img-preview' ).attr('src', attachment.url);
                $('.al-img-input' ).attr('value', attachment.url);
                if( settings.modal ) {
                    $('.modal').css( 'overflowY', 'auto');

  • Adjusting somebodies role updates the database, you only need to do it once, not on every page load. Otherwise you'll encounter issues, the same way publishing a post only need to happens once, and doing it one very page load will cause problems – Tom J Nowell Jul 19 at 17:40
  • Also, where's the PHP code to handle the uploaded files? – Tom J Nowell Jul 19 at 17:41
  • Also, with regards to the action hook, will it be ok if I use the 'after_switch_theme' hook then? (Still really, really new to Wordpress development and not sure on all the action hooks) – ElCodes Jul 19 at 17:53
  • Yeah that's it. Need to create a file that will upload on the front end... as upload.php only works in admin pages.... Not really sure where to begin with this, but I guess I could copy and paste the upload.php and try to create my own front-end compatible version... – ElCodes Jul 19 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.