Mar 2

Writing a Wordpress Plugin

Category: JavaScript, PHP

As an experiment I wrote a WordPress plugin that turns [wikipedia]c++[/wikipedia] into c++.


The full code is available here

This is not that exotic and the WordPress site itself has a pretty good tutorial but it never hurts to have another example.

Finding the tag


The first step is to find all the [wikipedia] tags in a loaded document. The we can replace them with the HTML for wikipedia. The following code registers wp_wikipedia_excerpt_filter to run on content, excerpts, and comments. The code applies a Regular Expression that matches any text of the form [wikipedia]Whatever[/wikipedia]

/*
Plugin Name: Wp-Wikipedia-Excerpt
Plugin Uri: http://4thmouse.com
Description: Allows the addition of [wikipedia]name[/wikipedia]
Description: tags which turn into a link to the wikipedia page
Description: for that word.
Author: Michael Smit
Version: 0.1
Author URI: http://4thmouse.com/
*/
 
function wp_wikipedia_excerpt_substitute($match){
    //put replacement code here
    ...
}
 
function wp_wikipedia_excerpt_filter($content){
    return preg_replace_callback(
        "/\[wikipedia\]([^\[]*)\[\/wikipedia\]/",
        "wp_wikipedia_excerpt_substitute",
        $content);
}
 
add_filter('the_content','wp_wikipedia_excerpt_filter');
add_filter('the_excerpt','wp_wikipedia_excerpt_filter');
add_filter('comment_text', 'wp_wikipedia_excerpt_filter');

Creating the link


The second step is to create the link to wikipedia. Basically what we want to do is submit a search form to http://en.wikipedia.org/wiki/Special:Search with searchInput=value.
So we replace [wikipedia]Whatever[/wikipedia] with the following HTML:

<span>
<form style="display:inline" action="http://en.wikipedia.org/wiki/Special:Search">
    <a href="#" onclick="parentNode.submit();event.returnValue=false;return false;">
        Whatever [wikipedia.com]
    </a>
    <input type="hidden" name="search" value="Whatever"/>
</form>
</span>

Allow me to briefly complain about how long it took to get this working. I started with just a plain form, but that is a block-level HTML elemet so you get a line break before and after your link (which isn’t so good). So there is a CSS style property called display which can be set to inline which is supposed to put the table inline in the text instead of putting the line breaks. This almost worked except I still got a line break before the form.

Eventually I finally discovered that the <p> tag doesn’t require the </p> tag to complete a paragraph in HTML. It will automatically end the paragraph whenever it hits a block-type tag such as form. Even if it now has an inline style. The only reason I managed to figure this out is that the firefox DOM inspector put the form after the paragraph rather than in it.

This is exactly the sort of crap that, on top of browser incompatibility, makes writing web pages such a huge pain in the ass. Anyway the span tag is inline and apparently can contain a block element without ending the paragraph so there you have it.

The following php does the trick:

function wp_wikipedia_excerpt_substitute($match){
    return
        "<span>" .
        "<form style=\"display: inline;\" action=\"http://en.wikipedia.org/wiki/Special:Search\">".
        "<a href=\"#\" onclick=\"parentNode.submit();event.returnValue = false; return false;\">"
            . "$match[1]  [wikipedia.com]".
        "</a>" .
        "<input type=\"hidden\" name=\"search\" value=\"$match[1]\"/>" .
        "</form>" .
        "</span>";
}

Installing the Plugin

So now all you have to do is put the script in wp-content/plugins and go the plugins page via the wordpress admin page. You should now see Wp-Wikipedia-Excerpt listed as one of the plugins. Activate it and you are done.

The Author

Michael Smit is a software engineer in Seattle, Washington who works for amazon

1 comment

1 Comment so far

  1. Capavaind October 1st, 2008 7:57 am

    Hi
    Nice site!

    Bye