How to add WordPress Media Uploader in Plugin or Theme ?

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.
WordPress Media Uploader in Plugin or Theme


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.

b).Enqueue required javascript libraries for our profile example.

c).Add custom settings menu option to the admin page to enter profile details.

d). Register the custom setting group and set the field to be displayed in the setting template

e). Add custom setting fields for the group

f). Create a short code named as “display_profile” to display profile in front end.

Custom user profile with Settings API and media uploader
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.

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

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.

Custom User Profile with settings API and media Uploader
3. Short Code Usage in Post/Page or Text Widget and Display Front End.
Custom User Profile with settings API and media Uploader

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.

Leave a Reply

Your email address will not be published. Required fields are marked *