WordPress Tutorial: ShortCode for Plugins

WordPress Tutorial: Admin Panel With Image Upload

September 3, 2011 by PremiumCoding - No Comments

In previous tutorial we developed a basic plugin that allowed us to use a shortcode. This tutorial will show you how to make basic administration panel in WordPress admin. We will make two fields, first will hold name of the image and the second will hold the image itself. Image adding will be done via WordPress native image upload interface.
Download source files for WP Easy Admin (2139)


We will use the plugin that we made in previous tutorial and develop from where we left of. First we have to define two variables that will hold name of the image and image itself:

function wp_myCustomPlugin_install () {
     $newoptions = get_option('mycustomplugin_options');
     $newoptions['title'] = '';
     $newoptions['image'] = '';


We will first add the plugin into the menu so we can edit it via WordPress administration. Following function will do just that:

function wp_myCustomPlugin_add_pages() {
     add_options_page('My Custom Plugin', 'My Custom Plugin', 8, __FILE__, 'wp_myCustomPluginOptions');


Now that our plugin has been added to WordPress admin we need a function that we are going to call wp_myCustomPluginOptions. This function will display the content of your plugin custom administration:

Function wp_myCustomPluginOptions(){


We now have to define two input fields that will hold our values. We will use method POST for updating:

$options = $newoptions = get_option('mycustomplugin_options');
    echo '<form method="post"><div id="settings">';
    echo "<div class=\"wrap\"><h2>My custom Admin page</h2>";
    echo '<table class="form-table">';
    // title field
    echo '<tr valign="top"><th scope="row">Title</th>';
    echo '<td><input type="text" name="title" value="'.$options['title'].'" size="5"></input><br />Title</td></tr>';
    //image field
    echo '<tr valign="top"><th scope="row">Image</th>';
    echo '<td><label for="upload_image">
          <input id="upload_image" type="text" size="36" name="upload_image" value="'
.$options['upload_image'].'" />
          <input id="upload_image_button" type="button" value="Upload Image" />
          <br />Enter an URL or upload an image.
    echo '</table>';
    echo '<input type="hidden" name="custom_submit" value="true"></input>';
    echo '<p class="submit"><input type="submit" value="Update Options &raquo;"></input></p>';
    echo '</form>';

[amazon_carousel widget_type="SearchAndAdd" width=600" height="200" title="" market_place="US" shuffle_products="True" show_border="False" keywords="wordpress" browse_node="" search_index="Books" /]
This will display the content of our administration. Now that we have two input fields we also need to save them.  To achieve that we will add following code at the start of our function:

if (!empty($_POST["custom_submit"]) ) {
     $newoptions['upload_image'] = strip_tags(stripslashes($_POST["upload_image"]));
     $newoptions['title'] = strip_tags(stripslashes($_POST["title"]));

If statement will execute only when update button is clicked. In next step we have to write our new values. That will happen only if values of our fields Title or Image have been changed.

if ( $options != $newoptions ) {
     $options = $newoptions;
     update_option('mycustomplugin_options', $options);

Our new values are now saved. If we want to use WordPress native interface for uploading images we have to include it in our plugin. We will need an extra file that will hold javascript code. File will be called script.js. But first we have to include the file into our plugin (along with jQuery addon):

if (isset($_GET['page']) &amp;&amp; $_GET['page'] == 'wp-custom/easy-admin.php'){ // include only for this admin page
     wp_enqueue_script('jquery'); // include jQuery
     wp_register_script('my-upload', plugins_url("wp-custom/script.js"), array('jquery','media-upload','thickbox'));
     wp_enqueue_script('my-upload');  // include script.js

Code that implements the use of WordPress native interface for image uploading is following:

jQuery(document).ready(function() {
     jQuery(document).ready(function() {
     jQuery('#upload_image_button').click(function() {
     formfield = jQuery('#upload_image').attr('name');
     tb_show('', 'media-upload.php?type=image&amp;amp;TB_iframe=true');
     return false;

window.send_to_editor = function(html) {
     imgurl = jQuery('img',html).attr('src');

All we have to do now is add our newly created menu and plugin into WordPress:

add_action('admin_menu', 'wp_myCustomPlugin_add_pages'); //here we add the menu
register_activation_hook( __FILE__, 'wp_myCustomPlugin_install' );  //here we add the plugin

We will once again use shortcode for plugin implementation. How to make a shortcode for WordPress plugin can be seen in our previous tutorial.

function wp_imageShortCode($atts){
     $options = get_option('mycustomplugin_options');
     $string = '&lt;img src = "'.$options['upload_image'].'" alt = "'.$options['title'].'"&gt;' . $name;
     return $string;


This concludes our simple custom admin panel for WordPress plugin. Hopefully you will put it to good use.
Download source files for WP Easy Admin (2139)