WordPress Tutorial: Admin Panel With Image Upload

Tutorials 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 id=”84″]

STEP 1: VARIABLES DEFINITION

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’] = ”;
}

STEP 2: ADDING YOUR PLUGIN INTO WORDPRESS ADMIN

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’);
}

STEP 3: DISPLAYING OUR CONTENT

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 ‘

‘;
echo “

My custom Admin page

“;
echo ‘

‘;
// title field
echo ‘

‘;
echo ‘

‘;
//image field
echo ‘

‘;
echo ‘

‘;
echo ‘

Title
Title
Image

‘;
echo ‘‘;
echo ‘

‘;
echo ‘

‘;


[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’]) && $_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&TB_iframe=true’);
return false;
});

window.send_to_editor = function(html) {
imgurl = jQuery(‘img’,html).attr(‘src’);
jQuery(‘#upload_image’).val(imgurl);
tb_remove();
}
});


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 = ‘<img src = “‘.$options[‘upload_image’].'” alt = “‘.$options[‘title’].'”>’ . $name;
return $string;
}

CONCLUSION

This concludes our simple custom admin panel for WordPress plugin. Hopefully you will put it to good use.
 
[download id=”84″]

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.
, , ,