Plugin | Code is poetry

Code snipped: Image uploading inside your plugin using wordpress file uploader

I was recently working on a wordpress plugin and need a very small image upload feature just to upload company logo. I was thinking to use the original wordpress file uploader, as it is really very cool and easy to use as well. So after checking few code snipped’s I found the below solution:

Here is the html code for browse button,

<input id="company_logo" type="text" name="company_logo" size="36" />
<input id="upload_button" type="button" value="Upload Image" />

You are required to add these javascript libraries to achieve the lightbox effect and uploader screen

add_action('init', 'call_init');
function call_init()
{
wp_enqueue_script("jquery");
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
}

and now the actual javascript code, which will do the magic

jQuery('#upload_image_button').click(function() {
formfield = jQuery('#company_logo').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('#company_logo').val(imgurl);
tb_remove();
}

Above code will open a thikbox and allow user to upload image or select from the uploaded one like one we can while adding thumnails or post images on post page. Once image gets uploaded and user presses “insert into post”, the “send to editor” function gets activated and it will copy the image url to input box you had created in the html.

This will look exactly like wordpress image uploader screen.

So upload functionality done here, but what I required was to get the image id or say attachment id once image uploaded successfully and url comes in input box, and for that there is a hook in the wordpress api which we can use while user click “insert into post” button, it is “image_send_to_editor”

add_filter('image_send_to_editor', 'image_to_editor', 20, 8);

“image_send_to_editor” hook get’s called in the background when user press ‘insert into post’ button and provides various parameter, like html, attachment id, caption of the image, title of the image, alignment of the image, url, size and alt tag of the image.
As I only need attachment id from that function to save in db and latter can use it for thumbnail generation, so I just updated a option in the database to save it.

function image_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt)
{
update_option('company_logo_id', $id);
return $html;
}

Hope this will help in image upload features of wordpress plugins. Feedback and questions are welcome here.

Search engine friendly URL for WordPress plugin

While working on one of my client’s plugin I needed to provide search engine friendly url’s for some custom functionality that was needed and existing plugin was not supporting such urls

       www.example.com/?param1=var1&param2=var2&param3=var3

but for search engine freindly url’s I want it to be like

      www.example.com/var1/var2/var3

So here I am sharing small code snippet which works perfectly for my plguin and showing nice url’s.

We need to update the theme function.php file, just add the below code in function.php file and modify variables according to your need.

<?php

add_filter('rewrite_rules_array','wp_insertRewriteRules');
add_filter('query_vars','wp_insertQueryVars');
add_filter('init','flushRules');

// Remember to flush_rules() when adding rules
function flushRules()
{
  global $wp_rewrite;
  $wp_rewrite->flush_rules();
}

// Adding a new rule
function wp_insertRewriteRules($rules)
{
  $newrules = array();
  $newrules['(mytestpage)/([a-zA-Z0-9_\-]*)/([a-zA-Z0-9_\-]*)$'] =
'index.php?pagename=$matches[1]&var1=$matches[2]&var2=$matches[3]';
  $allrules = $newrules + $rules;
  return $allrules;
}

// Adding the variables  so that WP recognizes it
function wp_insertQueryVars($vars)
{
 array_push($vars, 'id');
 array_push($vars, 'var1');
 array_push($vars, 'var2');
 return $vars;
}
?>

To access these variables from plugin file use following code:

 $var1 = $wp_query->query_vars['var1'];
 $var2 = $wp_query->query_vars['var2'];

Now this will solve your plugins search engine friendly issues.

Code is poetry

Tag Archives: plugin

Code snipped: Image uploading inside your plugin using wordpress file uploader

Search engine friendly URL for WordPress plugin

Links

Categories

Twitter

Pages