In this article, I explained how to use WordPress Media Uploader with plugins and themes. It provides an easy way to upload images and other graphic files to pages and posts. You can easily implement such functions under themes and plugins follow the example below.
I have created a profile example here. Here we display the fields using the settings API and store the data. The media uploader uploads the files and the short code displays the front end profile in the post / page or text widget.
Please follow the code snippet below. To perform profile example, enter this code in the current theme function.php, add it to a new plugin, or click on the github button below to get the complete source code.
Note: Please make a note below all the code snippet is self explanatory, if you have any questions please comment on us.
1. If you want to use the code in plugin, please create “wp_custom_profile_picture” directory and add the file “wp_custom_profile_picture.php” to the plugin directory and add below code snippet on it otherwise simple add in themes functions.php. Ex: /wp-content/plugins/wp_custom_profile_picture/wp_custom_profile_picture.php
a).Add plugin header if you want to use the code in plugin otherwise ignore this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php /** * @package Wp_Custom_Profile_Picture * @version 1.0 */ /* Plugin Name: ScriptHere's Simple Custom Profile. Plugin URI: https://github.com/blogscripthere/simple-wordpress-custom-profile-picture Description: Simple Custom Profile to WordPress with wordpress built in media uploader and settings api. Author: Narendra Padala Author URI: https://in.linkedin.com/in/narendrapadala Text Domain: shcp Version: 1.0 Last Updated: 17/03/2018 */ |
b).Enqueue required javascript libraries for our profile example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * Enqueue required javascript libraries callback */ function sh_load_custom_settings_scripts(){ //enqueue media js library to use wordpress media library in our plugin / theme. wp_enqueue_media(); // if your using code in theme then add js url path like below //$url = get_template_directory_uri() . '/assets/js/sh.media.js'; //include plugin js file path $url = plugin_dir_url( __FILE__ ).'/assets/js/sh.media.js'; wp_register_script( 'sh-custom-settings-script', $url, array('jquery'), '1.0.0', true ); wp_enqueue_script( 'sh-custom-settings-script' ); } /** * Enqueue required javascript libraries hook */ add_action( 'admin_enqueue_scripts', 'sh_load_custom_settings_scripts' ); |
c).Add custom settings menu option to the admin page to enter profile details.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * Add custom settings menu option to the admin page callback */ function sh_add_admin_page_callback(){ //Generate custom settings admin page add_menu_page( 'Custom Options', 'Custom Settings', 'manage_options', 'custom_settings', 'sh_create_custom_settings_page' ); } /** * Add custom configuration page templates in the administration page */ function sh_create_custom_settings_page() { //Includes settings for the html template //require_once( get_template_directory() . '/templates/admin_custom_settings.php' ); require_once( plugin_dir_path(__FILE__) . '/templates/admin_custom_settings.php' ); } /** * Add custom setting option menu option on hook of admin page. */ add_action( 'admin_menu', 'sh_add_admin_page_callback' ); |
d). Register the custom setting group and set the field to be displayed in the setting template
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * Register the custom setting group and set the field to be displayed in the setting template callback */ function sh_custom_settings_callback() { //register the user picture field in the custom settings group register_setting( 'sh-custom-settings-group', 'user_picture'); //register the user name field in the custom settings group register_setting( 'sh-custom-settings-group', 'user_name' ); //register the user description field in the custom settings group register_setting( 'sh-custom-settings-group', 'user_description' ); //add settings section add_settings_section( 'sh-custom-settings-options', 'Custom Options', 'sh_custom_settings_options_callback', 'custom_settings'); //add the user name field to the hooked group of custom settings add_settings_field( 'sh-user-name', 'User Name', 'sh_custom_user_name_callback', 'custom_settings', 'sh-custom-settings-options'); //add the user description field to the hooked group of custom settings add_settings_field( 'sh-user-description', 'User Description', 'sh_custom_user_description_callback', 'custom_settings', 'sh-custom-settings-options'); //add the user picture field to the hooked group of custom settings add_settings_field( 'sh-user-picture', 'User Picture', 'sh_custom_user_picture_callback', 'custom_settings', 'sh-custom-settings-options'); } /** * Start a custom setting group and set the fields to display in the settings template hook */ add_action( 'admin_init', 'sh_custom_settings_callback' ); |
e). Add custom setting fields for the group
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** * Add a user name field to the custom configuration for the group callback request */ function sh_custom_user_name_callback() { $userName = esc_attr( get_option( 'user_name' ) ); echo '<input type="text" name="user_name" value="'.$userName.'" placeholder="Full Name" />'; } /** * Add a user description field to the custom configuration for the group callback request */ function sh_custom_user_description_callback() { $userDescription = esc_attr( get_option( 'user_description' ) ); echo '<input type="text" name="user_description" value="'.$userDescription.'" placeholder="Description" /><p><i>Write something clever here..!</i></p>'; } /** * Add a user picture field to the custom configuration for the group callback request */ function sh_custom_user_picture_callback(){ $userPicture = esc_attr( get_option( 'user_picture' ) ); echo '<input type="button" value="Upload Picture" id="upload-picture-button"> <input type="hidden" id="user-picture" name="user_picture" value="'.$userPicture.'" />'; } |
f). Create a short code named as “display_profile” to display profile in front end.
1 2 3 4 5 6 7 8 9 10 |
/** * Display user profile with custom fields short code callback */ function sh_display_custom_settings_callback(){ require_once( plugin_dir_path(__FILE__) . '/templates/display_custom_settings.php' ); } /** * Display user profile with custom fields add shortcode hook */ add_shortcode('display_profile', 'sh_display_custom_settings_callback'); |
2.Create necessary template and JS files what we used above code snippets.
a). If you want to use the code in the plugin, please create a file at “/plugins/wp_custom_profile_picture/templates/admin_custom_settings.php” directory or you’re using in theme create an active theme directory at /themes/yourtheme/templates/admin_custom_settings.php. and following code on it.
1 2 3 4 5 6 7 8 9 |
<?php settings_errors(); require_once "display_custom_settings.php"; ?> <form method="post" action="options.php" style="display: inline-block; float: left;"> <?php settings_fields( 'sh-custom-settings-group' ); ?> <?php do_settings_sections( 'custom_settings' ); ?> <?php submit_button(); ?> </form> |
b. If you want to use the code in the plugin, please create a file at “/plugins/wp_custom_profile_picture/templates/display_custom_settings.php” directory or you’re using in theme create an active theme directory at /themes/yourtheme/templates/display_custom_settings.php. and following code on it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php //get user user_picture $userPicture = esc_attr( get_option( 'user_picture' ) ); //get user user name $userName = esc_attr( get_option( 'user_name' ) ); //get user user description $userDescription = esc_attr( get_option( 'user_description' ) ); ?> <div style="width:300px;background-color:#0A246A;padding:20px;text-align:center;margin-right:20px;display:inline-block;float:left;"> <div class="user-details"> <div style="display:block;width:100%; overflow:hidden; text-align:center;"> <div id="user-picture-preview" style="background-image: url(<?php echo $userPicture;?>);width:150px; height:150px;overflow:hidden;border-radius:50%;margin:20px auto;background-position:center center;background-repeat:no-repeat;background-size:cover;"></div> </div> <h1 style="font-size:22px; margin: 0 0 10px;color:#ffffff"><?php echo $userName; ?></h1> <h2 style="font-size:12px; margin: 0 0 20px;color:yellow"; ><?php echo $userDescription; ?></h2> </div> </div>'; |
c).If you want to use the code in the plugin, please create a file at “/plugins/wp_custom_profile_picture/assets/js/sh.media.js” directory or you’re using in theme create an active theme directory at /themes/yourtheme//assets/js/sh.media.js. and following code on it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
jQuery(document).ready( function($){ var mediaUploader; $('#upload-picture-button').on('click',function(e) { e.preventDefault(); if( mediaUploader ){ mediaUploader.open(); return; } mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Select a Picture', button: { text: 'Select Picture' }, multiple: false }); mediaUploader.on('select', function(){ attachment = mediaUploader.state().get('selection').first().toJSON(); $('#user-picture').val(attachment.url); $('#user-picture-preview').css('background-image','url(' + attachment.url + ')'); }); mediaUploader.open(); }); }); |
3. Short Code Usage in Post/Page or Text Widget and Display Front End.
I hope it is useful to create media uploader in your on WordPress themes and plug-ins, then please Subscribe to ScriptHere.Com by Email. You can also find us on Facebook and Twitter. If you have any comments or queries, please do the following in the comments section.