2

I have been following the following tutorial to try and an upload form to the user profiles. http://www.scribd.com/doc/81666407/Add-and-Remove-WordPress-User-Profile-Fields-and-Display-Them-Within-Your-Theme-

I'd like to be able to make this a little more simple and just have an upload button and text box that allows the user to upload one file at a time rather than multiple files.

I was going to use Cimy Plugin which allows file uploads, however it doesn't seem to be possible to add sub headings for some fields.

If any of you have any recommendations that would be brilliant.

1

PHP CODE

/*
* Load style & scripts
*/
function itclanbd_admin_load_scripts( $hook ) {
    $allowed = ['profile.php', 'user-new.php', 'user-edit.php'];
    if ( ! in_array( $hook, $allowed ) ) {
        return;
    }
    wp_enqueue_media();
    wp_enqueue_style('finance2sell', plugins_url('css/style.css', __FILE__), array(), null);
    wp_enqueue_script('finance2sell', plugins_url('js/scripts.js', __FILE__), array(), '1.3', true);
}
add_action( 'admin_enqueue_scripts', 'itclanbd_admin_load_scripts' );

/**
 * Create custom fields
 * @param $user
 */
function itclanbd_add_custom_user_profile_fields($user) {
    $itclanbd_attachment_id = (int)get_user_meta( (int)$user->ID, 'itclanbd_attachment_id', true );
    ?>
    <table class="form-table">
        <tbody>
            <tr>
                <th>
                    <label for="itclanbd-add-media"><?php _e('Avatar', 'finance2sell'); ?></label>
                </th>
                <td>
                    <input type="number" name="itclanbd_attachment_id" class="itclanbd-attachment-id" value="<?php echo $itclanbd_attachment_id; ?>" />
                    <div class="itclanbd-attachment-image">
                        <?php echo get_avatar($user->ID); ?>
                    </div>
                    <div class="wp-media-buttons">
                        <button class="button itclanbd-add-media" id="itclanbd-add-media"><?php _e('Select', 'finance2sell'); ?></button>
                        <button class="button itclanbd-remove-media"><?php _e('Remove', 'finance2sell'); ?></button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <?php
}
add_action( 'show_user_profile', 'itclanbd_add_custom_user_profile_fields' );
add_action( 'edit_user_profile', 'itclanbd_add_custom_user_profile_fields' );
add_action( 'user_new_form', 'itclanbd_add_custom_user_profile_fields' );

/** 
 * Update custom fields
 * @param $user_id
 * @return bool
 */
function itclanbd_update_custom_user_profile_fields($user_id) {
    if( !current_user_can('edit_user', (int)$user_id) ) return false;

    delete_user_meta( (int)$user_id, 'itclanbd_attachment_id') ; //delete meta

    if( //validate POST data
        isset($_POST['itclanbd_attachment_id'])
        && is_numeric($_POST['itclanbd_attachment_id'])
        && $_POST['itclanbd_attachment_id'] > 0
    ) {
        add_user_meta( (int)$user_id, 'itclanbd_attachment_id', (int)$_POST['itclanbd_attachment_id'] ); //add user meta
    } else {
        return false;
    }

    return true;
}
add_action('user_register', 'itclanbd_update_custom_user_profile_fields');
add_action('profile_update', 'itclanbd_update_custom_user_profile_fields');


// Get custom field value
$attachment_id = get_user_meta( (int)$user_id, 'itclanbd_attachment_id', true );
$image = wp_get_attachment_image_src((int)$attachment_id, 'thumbnail');
echo $image[0]; // image url

JavaScript CODE i create and place all code into a file name scripts.js

function wpMediaEditor() {
    wp.media.editor.open();
    wp.media.editor.send.attachment = function(props, attachment) {
        jQuery('input.itclanbd-attachment-id').val(attachment.id);
        jQuery('div.itclanbd-attachment-image img').remove();
        jQuery('div.itclanbd-attachment-image').append(
            jQuery('<img>').attr({
                'src': attachment.sizes.thumbnail.url,
                'class': 'itclanbd-attachment-thumb',
                'alt': attachment.title
            })
        );
        jQuery('button.itclanbd-remove-media').fadeIn(250);
    };
}

function simpleUserAvatar() {
    var buttonAdd = jQuery('button.itclanbd-add-media');
    var buttonRemove = jQuery('button.itclanbd-remove-media');

    buttonAdd.on('click', function(event) {
        event.preventDefault();
        wpMediaEditor();
    });

    buttonRemove.on('click', function(event) {
        event.preventDefault();
        jQuery('input.itclanbd-attachment-id').val(0);
        jQuery('div.itclanbd-attachment-image img').remove();
        jQuery(this).fadeOut(250);
    });

    jQuery(document).on('click', 'div.itclanbd-attachment-image img', function() {
        wpMediaEditor();
    });

    if(
        jQuery('input.itclanbd-attachment-id').val() === 0
        || !jQuery('div.itclanbd-attachment-image img').length
    ) buttonRemove.css( 'display', 'none' );
}

jQuery(document).ready(function() {
    simpleUserAvatar();

    jQuery('table.form-table tr.user-profile-picture').remove();
});

CSS CODE i create and place all code into a file name style.css

@charset "UTF-8";

table.form-table tr.user-profile-picture,
input.itclanbd-attachment-id {
    display: none;
}

div.itclanbd-attachment-image img {
    background-color: white;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    cursor: pointer;
    height: auto;
    margin-bottom: 10px;
    padding: 3px;
    width: 96px;
}

button.button.itclanbd-remove-media:hover,
button.button.itclanbd-remove-media {
    background-color: #990000;
    border-color: #560303;
    box-shadow: 0 1px 0 #560303;
    color: white;
}

button.button.itclanbd-remove-media:hover {
    background-color: #b40000;
}

It should look like:

result for this whole code

Your Answer

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

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