February 3rd, 2008 - by Golgotha

Wordpress PluginI’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.

Obama 2008 Ribbon Plugin

It places the above image in the top-right corner of your website like this:
whatasavage-screenshot.gif
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.

[JavaScript]
window.onload=function(){
var bodyTag = document.getElementsByTagName(“body”)[0];
var obamaDiv = document.createElement(‘div’);
obamaDiv.id = ‘obama2008ribbon’;
bodyTag.appendChild(obamaDiv);
}
[/JavaScript]

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.

  1. #obama2008ribbon {
  2. position:absolute;
  3. right:0px; top:0px;
  4. height:155px; width:155px;
  5. z-index:10001;
  6. background:url(/wp-content/plugins/obama2008ribbon/obama2008.png) no-repeat top right;
  7. }
  8. * 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:

  1. add_action('wp_head', 'addHeaderCode');
  2. function addHeaderCode() {
  3.         echo "\n".'<!-- Start Obama2008 -->'."\n";
  4.         echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('wpurl') . '/wp-content/plugins/obama2008ribbon/obama2008ribbon.css" />' . "\n";
  5.         echo '<script type="text/javascript" src="' . get_bloginfo('wpurl') . '/wp-content/plugins/obama2008ribbon/obama2008ribbon.js"></script>' . "\n";  
  6.         echo '<!-- End Of Obama2008 -->'."\n";
  7. }

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.

11 Responses to “My First WordPress Plugin”

1 Ben Partch

Great Job Mark! Looks cool. 🙂

2 Golgotha
3 Helmertz

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.

4 Golgotha

Helmertz – That’s a good point, I will have to change that.

5 Kuldeep

Congrats!

I have also created one plugin of mine. Sadly i dont have an appropriate place to share it 🙁

6 TOMAS

Nice work Mark!

+Dugg

7 Colin Temple

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!

8 Golgotha

Colin, that’s great, be sure to share it with us when you’re done.

9 Alvin Nyau

Woot! It’s kinda cool!
Great job.

10 Abe

with obama now the nominee for the democratic party, this is exactly what i was looking for to add to my site. great work!

11 Jim

Thanks! It works nicely.

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading