«PREVIOUS 1 2 3 4  View All  NEXT»

Hello and welcome all!

In this Guide, I will show you how you can develop plugins for the brand-spankin’-new latest version of WordPress 2.7.

What are we going to develop?
     A Plugin, that will add “Topic Icons” inside the content of each post.

Hasn’t this already been done before?
     Yes… yes it has been. It’s called “WP Post Icon” and you can find that plugin here at Linewbie’s WordPress Plugins Page

Then why re-invent the wheel?

• To have it compatible with WordPress 2.7.
• For added functionality.
• For learning to make plugins (you gotta start somewhere!)

So, let’s begin!

Step 0. Bare-Minimum Plugin Skeleton

In this step, we will cover the following:

• 1. Creating Commented Info Block
• 2. Creating Commented License Block

First, create a blank PHP file, name it content-icons.php, with the following content:

Please make sure that there are no blank spaces before: <?php and after ?>. If there are any spaces, the WordPress will break, complaining that headers have already been sent.

Now, create a folder (preferably with the same name: content-icons) and place the newly-created php file inside it.

Next, upload the folder into the plugins directory:

Go to the admin area, and select “Plugins” menu option. Once there, you should see the following:

The comment block reflects what shows up in the plugins admin area

As you can see from the above snapshot, what we wrote for the comment block reflects here, in the Plugins Admin Area.

So, with our ‘bare-minimum’ skeleton out of the way, let’s make this functional, by adding key functionalities!

Step 1. Activating the Plugin

In this step, we will cover the following:

• 1. Creating Required Tables
• 2. Creating (recursively) Directory Structure to Hold our Content Icons
• 3. Adding a menu entry to the Admin Menu
• 4. Adding a “Meta Box” on the Post Page for Associating/Selecting Icons

Before we begin though, add the following block of code, right after the Warranty comment block:

Explanation:

The first two lines define a variable that is globally accessible for help with plugin development. As you will see, we make extensive use of this variable through out our plugin development. The next two lines deal with defining a term that points to our uploads folder–where all our images will reside.

With the content-icons.php file open, add the following code block. I am leaving the comments inside for your study.

Explanation:

Lines 38 - 41, overall, we are adding meta box to the write post page. More specifically though: On line 40, we are using the add_meta_box WordPress Function–which was introduced in WordPress v2.5–to add a section to the Write Post page.
Lines 46 - 51, achieve the task of adding a menu entry of Content Icons. However, as mentioned in the code, we are going to comment it out for now as we really don’t need a menu entry for this Plugin just yet…. I have kept this code as-is in the above code block for two reasons:

• 1. Show you how to add menu entries and
• 2. Save me some typing for future version

In the next block, we are using dbDelta function of WordPress in order to create the required table where we will store our information.

Lastly, On line 80, we are using yet another WordPress built-in function to create our upload directory structure. This is a very useful function as it simply takes the desired path and recursively creates the structure.

Well, there you have it. We are all done with Step 1. However, do not try and activate the plugin just yet… as WordPress would throw a fit (and rightfully so, as we have yet to define a function cicons_metabox_admin() that we have called when we created the meta box!… that is saved for the next step.)

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.

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

Step 3. Finishing Touches…

In this step, we will cover the following:

• 1. SAVE: Saving the Information to the Database
• 2. DELETE: Delete Record, Upon Deletion of Post
• 3. DISPLAY: Display the Icon for Each Post Content

Within our content-icons.php file, at the end of the last code block that we entered, copy and paste the following code block:

Explanation:

On line 170, we are telling wordpress, “Look brother, whenever a user of this system tries to save/update the post, include my function as well…. please“. That being said, The function that follows, is the one that will be invoked when wordpress is saving a post (lines 171 - 187).

The most important line in this block, or so I feel that way, is line 173: This line basically employs WordPress’s built in function to get the ACTUAL PostID as oppose to the ridiculous and unimportant RevisionID. This is important because otherwise, we would be making absurd number of database inserts/updates queries (especially if the author is like me, who writes a long post, and in the background WordPress keeps creating auto-save entries…)

Similarly, On line 192, we are telling wordpress to call our function when a user tries to delete a post. The function that follows (lines 193 - 205) basically checks to see if we have a database table entry containing the current post’s ID (ID of the post that is to be deleted) as one of the records. If it does, the function deletes the record. We don’t need it, once the post is deleted… so why keep the record around?

Finally, On line 223, we are telling wordpress that whenever it is showing content, pass the whole content through our function (lines 210 - 221), so that we can add the icon that is associated with a particular post.

And there you have it! Save the file, upload/overwrite existing content-icons.php file, activate it and start playing around with it. Remeber, upload all your icons inside the “ROOT/wp-content/uploads/cicons/” folder! (this folder should be created for you once you activated the Plugin from the Admin area)

Furthermore, I have not walked-through each line of code in this Guide, as I feel that I have done enough explanation after each code block AS WELL AS in-line commenting. However, if you are unsure of something, please do ask.

Questions? Comments? Critiques? Features Request
Please direct all your questions/comments/critiques/feature requests at the CodingRush.com site–which is the official site for this Plugin, as also the official site of all my future works. GuidesForge is simply just that: a site that hosts (mainly) my tutorials, how-tos, and step-by-step guides (among other services).

Suggestions etc. For This Step-by-Step Guide
However, if you have any suggestions/improvements/ or would like to add to the explanation of the code or this guide in general, than please use the comments section below.

Finally:

I hope you enjoyed this step-by-step guide as much as I did writing it! (Not to mention all the frustration that I went through in order to make this Plugin). Really though, you must write one yourself in order to get the true joy! So, if you believe in assignments, your next assignment is to write a plugin (even if its something that has already been done before)… it could be a simple one, or you can just go wild and run with an idea… whatever the case maybe, have fun doing it, as that’s all it matters.

Credits:

No work would be properly “complete” until/unless the credits are given where they are due. So here we go–

First and Foremost, the Author of WP Post-Icon, Linewbie. Next to the Author of WP-Sticky, Mr. Lester Chan and finally to the Author of Category Icons, Mr. Sadish Bala for help with coding. (I used their plugins’ code as a reference from point-to-point)

Enjoy!

Popularity: 100% [?]

«PREVIOUS 1 2 3 4  View All  NEXT»