Posted by
Under 
Tags: «PREVIOUS 1 2 3 4 View All NEXT»
Step 2. Adding Functionality
In this step, we will cover the following:
- 1. Meta Box Function
- 2. Fetching all the Images from the Uploads Directory and Displaying them in Select Box
- 3. Preview Functionality (Preview Selected Icon)
- 4. If Content Icon Exist for the Post, Show it.
Within the content-icons.php file, right after the cicons_init() function, copy/paste the following block.
-
/**
-
** Function: Meta Box Function
-
**/
-
function cicons_metabox_admin() {
-
global $wpdb, $post;
-
$currentPID = $post->ID;
-
echo '
-
<h3 class="dbx-handle"> Selection </h3>
-
<h4 class="dbx-handle">Select Icon to Associate With This Post — ID '.$currentPID.'</h4>
-
<div class="dbx-content">
-
<p>
-
<select id="select_icon" name="select_icon" onChange="icon_preview.src=(\''.cicons_url().''.get_upload_path().'/\'+this.options[this.selectedIndex].value);">';
-
-
//let's proceed only if the post id exist — this ensures that we don't make unneccessary queries to our database
-
if($currentPID != null){
-
//echo 'not null';
-
$chkIfExist = $wpdb->get_results("SELECT icon_name FROM `$wpdb->cicons` WHERE `post_id` = $currentPID AND `icon_name` != ''");
-
}
-
-
//if we have already associated a content icon to the post, let's display
-
//that image's name first (instead of the non-sensical "Select Icon…" text)
-
if($chkIfExist){
-
$imagename = $chkIfExist[0]->icon_name;
-
//we are going to padd the select box with some blank spaces… just so it doesn't look all crammed up!
-
echo '<option value="'.$imagename.'">'.$imagename.' </option>';
-
//if have yet to associate a content icon to the post, we will
-
//let the author select know to select one…
-
}else{
-
echo '<option value="">Select Icon … </option>';
-
}
-
//let's display the rest of the icons that we find in our upload directory
-
if ($dir = opendir(CICONS)) {
-
while(false !== ($file = readdir($dir))) {
-
if ($file != '.' && $file != '..') {
-
$extension = strtolower(substr($file, strrpos($file, '.')+1));
-
if ($extension === 'jpg' || $extension === 'jpeg' || $extension === 'gif' || $extension === 'png') {
-
echo '<option value="' . $file . '">' . $file . ' </option>' . "\n";
-
}
-
}
-
}
-
closedir($dir);
-
}
-
-
echo '
-
</select>
-
</p>
-
</div>
-
-
<h3 class="dbx-handle"> Preview </h3>
-
<div class="dbx-content">
-
<br />
-
<center><img id="icon_preview" src="'. cicons_url().''.$icon.'" /></center>
-
<br />
-
</div>';
-
-
//Adding functionality: Displaying current selected content icon for the post at hand (i.e., for the current post)
-
if ($chkIfExist) {
-
//echo 'found a match…<br />';
-
echo '<h3 class="dbx-handle"> Current Selection</h3>
-
<div class="dbx-content">
-
<br />
-
<center><img id="curr_icon_preview" src="'. cicons_url().''.get_upload_path().'/'.$chkIfExist[0]->icon_name.'" /></center>
-
<br />
-
</div>';
-
}
-
}
-
-
/**
-
** Function: Get the site's url
-
**/
-
function cicons_url() {
-
$url = trailingslashit(get_option('siteurl')) . $def_path;
-
return $url;
-
}
-
-
/**
-
** Function: Get the Upload Path
-
**/
-
function get_upload_path(){
-
$path = str_replace(ABSPATH, '', get_option('upload_path')."/cicons");
-
return $path;
-
}
Explanation:
Lines 86 - 148, overall, is our meta-box function. This block of code is responsible for showing everything that appears on the write post page. I will briefly point out the highlights of this code block: we first check to see if the post already has associated an icon with itself (line 99). If it has, then we will use this information to drive our design/display of the select box (lines 104 - 109). Next, we display all our icons (jpg, jpeg, gif, or png files) that are located within the uploads directory (lines 114 - 124). As we mentioned above, the check we make to see if the icon already exist for the given post, we use the same check to base our “Current Selection” block on. If the author has yet to assign an icon, we don’t even bother with showing the Current Selection div/block.
The last two function, cicons_url() and get_upload_path() are pretty self-explanatory. The former deals with getting the site’s URL and the latter function fetches the upload directory path.
At this point, what you have is
- a plugin that can be activated/deactivated
- if activated, you have a dropdown select box in the post page that fetches all the icons from the uploads directory
- dynamically preview selected icon
- display current icon associated with the post (if it exist)
We are almost there! 85% done!
Next, we put on some finishing touches for our FIRST version of the plugin…beta version that is :p
Popularity: 100% [?]
5 Comments Received
January 22nd, 2009 @5:38 am
Hi! A good forum, glad to join you
October 22nd, 2009 @2:29 am
Hi i read your code. It is very understandable way. But am getting error after activating this plugin.
Error: we cannot change the headers……
April 4th, 2010 @8:21 am
Hi Madhu,
Please provide more information. What version of WP are you running? Which file is it mentioning? Can you quote the error (Copy & Paste) ?
Pingback & Trackback
Leave A Reply