I have been following the following tutorial to try and an upload form to the user profiles.
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.
I have been following the following tutorial to try and an upload form to the user profiles. http://www.scribd/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.
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: