jQuery to the Rescue!

Posted on

By Michael Fields

I was asking around on Twitter the other day if anyone knew if wordpress.org offered a service of sorts that plugins could use to create automatic links to documentation. A few people responded with a link to the Function_Reference. While this is great resource for people, I was really looking for something that my new plugin would be able to understand.

New Plugin?

I’ve been working on creating a plugin that will list all queries at the bottom of each public-facing html document created by WordPress . I know there are a couple of solutions available, but I wanted to see if I could improve upon what was already out there. One of these improvements would be to link each function in the backtrace produced by $wpdb->caller() to the appropriate documentation page in the Codex. The best way that I could think of was to create an array that contains all known functions and then only link to these pages.

My Solution

If you view the html source of The Function_Reference, you will notice that each link to a documented function is enclosed in <tt> tags. This made me think that it might be really easy to extract all of the functions via jQuery and craft a php array from them.

  1. I copied the source of the page.
  2. Pasted it into a new document + saved to my machine.
  3. Deleted all external script and style links.
  4. Added the following lines to the head tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready( function( $ ) {
	var links = [];
	$( 'tt' ).each( function( i, e ) {
		var a = $( e ).find( 'a' );
		if( undefined !== a.attr( 'href' ) ) {
			links.push( "'" + a.text() + "'" );
		}
	} );
	if( 0 < links.length ) {
		$( 'body' ).prepend( '$codex = array( ' + links.join( ', ' ) + ' );' );
	}
} );
</script>

This code will add something very similar to the following at the beginning of your document:

$codex = array( 'get_adjacent_post', 'get_children', 'get_extended', 'get_next_post', 'get_permalink', 'get_post', 'get_post_ancestors' 'a little over 600 more functions would be here...' );

The Perfect Solution?

Not by far, but it was rather easy to implement. Of course it will not reflect when changes have been made to the Codex, but that’s something I can live with for the time being.

5 Comments Leave a comment

  1. Ozh November 11, 2010 at 10:10 am

    Simpler syntax:

    $('tt').each(function( i, e) {
      // i is index, e is element
    });
    
  2. Michael Fields November 11, 2010 at 10:28 am

    I can roll with that… Thanks!

  3. Brady Nord November 11, 2010 at 5:47 pm

    Some good work here. Thanks Michael for referring me to this via twitter.

  4. Nathaniel Taintor November 14, 2010 at 11:34 pm

    Very nice, look forward to seeing the plugin.

    Another way of doing this in PHP alone, which might allow for real-time scheduled updates for your plugin:

    http://simplehtmldom.sourceforge.net/

    $html = file_get_html('http://codex.wordpress.org/Function_Reference');
    $codex = array();
    
    // Find all functions
    foreach($html->find('tt') as $element)
           $codex[] = $element->plaintext;
    
  5. Michael Fields November 17, 2010 at 7:18 pm

    Thanks for the info. I’ll have to check out that library when I get a spare minute. I initially tried to parse the document with DOMDocument but couldn’t get it working right away.

Share your thoughts

*

Fork me on GitHub