I've finally done it. I've created my first WordPress Plugin. This is something I've been wanting to do for awhile now. And for no other reason than because I wanted to learn how it's done.
In typical WordPress fashion, they've made it as easy as pie to create plugins. The plugin I've created is real simple; there's no admin panel so that part I have yet to learn how to do. But now that I've got my feet wet I think I will start thinking of what other plugins could be handy.
Let me show you the plugin I created and how I created it...
So what is my first plugin? The Obama 2008 Ribbon plugin.
It places the above image in the top-right corner of your website like this:
You can visit my personal blog to see exactly what it looks like.
How it's Done
First I use some JavaScript to create a div and give it an id of 'obama2008ribbon'. Then I just append it to the body tag since every web page has one.
-
window.onload=function(){
-
var bodyTag = document.getElementsByTagName("body")[0];
-
var obamaDiv = document.createElement('div');
-
obamaDiv.id = 'obama2008ribbon';
-
bodyTag.appendChild(obamaDiv);
-
}
Next we use some CSS. This simply takes our newly created div and absolutely positions it in the top right corner. We give it a z-index of 10001 to keep it on top of everything else. If you're not in IE6 then you will use the transparent PNG image. If you are in IE6 you will use a transparent GIF.
-
#obama2008ribbon {
-
position:absolute;
-
right:0px; top:0px;
-
height:155px; width:155px;
-
z-index:10001;
-
background:url(/wp-content/plugins/obama2008ribbon/obama2008.png) no-repeat top right;
-
}
-
* html #obama2008ribbon {background:url(/wp-content/plugins/obama2008ribbon/obama2008.gif) no-repeat top right;}
Lastly we need to use a PHP file to tell WordPress to add our JavaScript and CSS to the head section. Once again, this is made easy thanks to WordPress' built-in function add_action. The add_action hooks a function on to a specific action. In this case our action is 'wp_head'. wp_head() is triggered within the <head></head> section of the user's template by the wp_head() function. Here's the code:
-
add_action('wp_head', 'addHeaderCode');
-
function addHeaderCode() {
-
echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/obama2008ribbon/obama2008ribbon.css" />' . "\n";
-
echo '<script type="text/javascript" src="' . get_bloginfo('wpurl') . '/wp-content/plugins/obama2008ribbon/obama2008ribbon.js"></script>' . "\n";
-
}
That's it, my first WordPress plugin. Nothing fancy, but it was fun. Maybe this will encourage you to make a plugin?
If you wish to use my plugin you can download it here.
February 3rd, 2008 at 7:03 pm
Great Job Mark! Looks cool.
February 4th, 2008 at 9:52 am
Would appreciate a digg here: http://digg.com/2008_us_elections/Obama_2008_Ribbon_Plugin
February 4th, 2008 at 1:59 pm
Since every element can have only one function, your’s would overwrite any other (or be overwritten by any other) function that is applied to window.onload. An addEvent-function could be used.
February 4th, 2008 at 2:05 pm
Helmertz – That’s a good point, I will have to change that.
February 5th, 2008 at 4:18 am
Congrats!
I have also created one plugin of mine. Sadly i dont have an appropriate place to share it
February 6th, 2008 at 1:48 am
Nice work Mark!
+Dugg
February 8th, 2008 at 1:32 pm
Well done. If I were American I might use it.
Saw this when you posted it on TBE… it did encourage me to turn one of my own recent mods into a real plugin, though!
February 9th, 2008 at 8:57 am
Colin, that’s great, be sure to share it with us when you’re done.
April 3rd, 2008 at 11:16 am
Woot! It’s kinda cool!
Great job.
June 4th, 2008 at 10:49 am
with obama now the nominee for the democratic party, this is exactly what i was looking for to add to my site. great work!
July 27th, 2008 at 7:48 pm
Thanks! It works nicely.