So RSS is pretty sweet. There are lots of feed parsers out there that can do cool stuff with feeds. XML is pretty cool. PHP5 has functions to make decently quick work of parsing XML.

But what if you are working with JavaScript? XML + JavaScript kinda sucks. The JSON format is approximately one million times easier to work with. Fortunately there is a kick-ass plugin for us!

The Plugin…

is by Dan Phiffer who created it for for working with the MoMA (Museum of Modern Art) blog. Apparently it’s some Frankenstein’s monster of Ruby on Rails and WordPress.

WordPress JSON API Plugin

All you need to do is install and activate it, and you’ll have access to a new URL structure that servers up JSON data.

At its most simple:

http://example.com/?json=1

Which will return delicious, delicious JSON:

{
  "status": "ok",
  "count": 1,
  "count_total": 1,
  "pages": 1,
  "posts": [
    {
      "id": 1,
      "slug": "hello-world",
      "url": "http:\/\/localhost\/wordpress\/?p=1",
      "title": "Hello world!",
      "title_plain": "Hello world!",
      "content": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!<\/p>\n",
      "excerpt": "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!\n",
      "date": "2009-11-11 12:50:19",
      "modified": "2009-11-11 12:50:19",
      "categories": [],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "admin",
        "name": "admin",
        "first_name": "",
        "last_name": "",
        "nickname": "",
        "url": "",
        "description": ""
      },
      "comments": [
        {
          "id": 1,
          "name": "Mr WordPress",
          "url": "http:\/\/wordpress.org\/",
          "date": "2009-11-11 12:50:19",
          "content": "<p>Hi, this is a comment.<br \/>To delete a comment, just log in and view the post's comments. There you will have the option to edit or delete them.<\/p>\n",
          "parent": 0
        }
      ],
      "comment_count": 1,
      "comment_status": "open"
    }
  ]
}

The plugin page has comprehensive notes on how you can structure the URLs to get just what you need back.

Of course, the more that you want, the larger the size of the data is, the harder it has to work, and the slower it can be. The plugin allows you to trim down what it returns to speed things up if needed. This is how to get just 10 posts, with a specific custom field, and only a few other things:

http://example.com/?json=1&count=10&custom_fields=PostThumb&include=title,custom_fields,excerpt

What might you use this for?

jQuery UI has recently released a new feature: Autocomplete. I learned that it basically consumes JSON data to populate what it autocompletes with. So I decided to try and connect the two and make an autocomplete search box for this site.

Try typing in like “CSS” or something and you can see some articles autocomplete below the input. You can select one and press return to go to that post. It’s kinda cheezy, probably not something I would roll out live, but it was a fun demo to work on. If you want to see the JavaScript that powers it, check it out.

To be fair, I had to hack the plugin just slightly to get it to work. The autocomplete plugin wants a “value” and “label” data in the JSON, so I added them. It’s a pretty trivial adjustment so if anyone wants that code, let me know.

UPDATE: Demo temporarily removed for security.

© 2010 Digging into WordPress | Permalink | 13 comments | Add to del.icio.us | Post tags: API, JavaScript, JSON, plugin

On Digging Into WordPress, we use JavaScript (jQuery) to solve this problem. One solution could potentially be to use only CSS and expand the width with something like pre:hover, but JavaScript is more elegant:

• Expands only when needed
• Expands only to as wide as needed
• Expands with animation

The CSS

The <pre> tag is naturally block-level, so this is what we’ll use to style our code blocks and hide the overflow.

pre { 
  background: #eee; 
  padding: 10px; 
  border: 2px solid #c94a29; 
  overflow: hidden;
  margin: 0 0 15px 0; 
  width: 563px; 
  font-family: Courier, Monospace;
}

The jQuery

The real trick here is that the code blocks are wrapped not only in <pre> tags but also in <code> tags. The code may ultimately get cut off by the pre block, but that inner code tag still has a natural width that can be measured by JavaScript. Here is the logic:

1. When a pre block is hovered…
2. Measure the internal code blocks width
3. If that width is wider than the pre block…
4. Expand the pre block to be wide enough to accommodate
5. On mouseOut, return the pre block to its original size

$j("pre").hover(function() {
	var codeInnerWidth = $j("code", this).width() + 10;
    if (codeInnerWidth > 563) {
		$j(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: codeInnerWidth + "px"
			});
		}
	}, function() {
			$j(this).stop(true, false).animate({
				width: 563
		});
	});

Couple of things of note here. The “codeInnerWidth” is calculated on every hover, because different blocks will have different inner widths. The width of the pre blocks are hard-coded though. Calculating that on every hover leads to problems like fast mouse-in-mouse-outs expanding the box and re-calculating it’s size to be larger than it was originally. The stop function prevents queuing up of animations. Also note the $j being used is just because we are using jQuery in noConflict mode:

var $j = jQuery.noConflict(); 

Demo

None of the code blocks so far have been long enough for you to see it in action, so here is a demo block (RSS readers, obviously you need to see this on our site to see it work).

This is a really long line of code that is even longer than the world super-cala-frag-alistic-espee-ala-dosis

© 2009 Digging into WordPress | Permalink | 25 comments | Add to del.icio.us | Post tags: JavaScript, jquery, tricks

Random post-display functionality with lightbox-style popup image and title post link

The key to setting this up involves creating a set of custom fields for each post and then displaying the information randomly before the main post loop. Let’s begin with the custom fields.

Setting up the custom fields

If you have already been taking advantage of WordPress custom fields, then you already understand the basic idea here. For each post that you would like to have appear randomly in the header of your theme, create the following custom fields:

Custom-field data associated with each randomly displayed post

Notice that we are using relative file paths for the images. This trick ensures maximum flexibility and portability for our custom-field data. Also note the two different images we are using for each post: a full-size image that will be displayed in the lightbox popup, and a cropped or resized version of that same image for display in the random header.

Once you have associated these custom fields with a few of your posts, it is time for a little get_posts() action to display the random content in your active theme.

Editing your WordPress theme files

One of the great things about WordPress custom fields is that they enable you to display your content in just about any way imaginable. In this tutorial, we are going to display our custom-field data in the header area for every page on the site. Thus, we open our theme’s header.php file and add the following code:

<?php $random = get_posts('showposts=1&orderby=rand'); foreach($random as $post) : setup_postdata($post); ?>

<p>
	<a href="http://domain.tld<?php echo get_post_meta($post->ID, 'randomImage', true); ?>" title="<?php echo get_post_meta($post->ID, 'randomCaption', true); ?>" class="thickbox">
		<img src="http://domain.tld<?php echo get_post_meta($post->ID, 'randomBanner', true); ?>" alt="" />
	</a>
	<small><a href="http://domain.tld<?php echo get_post_meta($post->ID, 'randomLink', true); ?>"><?php echo get_post_meta($post->ID, 'randomTitle', true); ?></a></small>
</p>

<?php endforeach; ?>

As mentioned, this code goes before the normal WordPress loop and calls data from each of the five custom fields that have been added to your posts. Instead of using the more powerful query_posts() for this random post display, we use the simpler get_posts() function instead. It does everything we need while eliminating unnecessary variables and potential complications.

A few other points of interest for this WordPress snippet; notice we are setting the randomness and limiting the post display to one ( 1 ) via two parameters in the get_posts() function. Once the query has been setup, we are using the get_post_meta() tag to populate the following markup with their respective custom-field values:

<p>
	<a href="[randomImage]" title="[randomCaption]" class="thickbox">
		<img src="[randomBanner]" alt="" />
	</a>
	<small><a href="[randomLink]">[randomTitle]</a></small>
<p>

This demonstrates the incredible design flexibility enabled by WordPress custom fields. Once this code is in place, it is time to wrap things up by implementing the JavaScript-powered lightbox functionality.

Adding the JavaScript

To finish things off, let’s make that random-banner image really “pop” by implementing some JavaScript-powered lightbox functionality. As you probably know, there are many lightbox clones from which to choose, but for this tutorial we turn to Cody Lindley’s excellent Thickbox script:

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Using Thickbox is so easy, it almost feels like I’m just being lazy for using it. In fact, we have already setup our WordPress code for use with Thickbox by simply adding the class="thickbox" attribute to the random-banner anchor element. The only other thing that really needs to be done is to upload the Thickbox script and accompanying CSS file to your server and link to them from the <head> section of your header.php file:

<link rel="stylesheet" href="http://domain.tld/wp-content/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://domain.tld/wp-content/javascript/thickbox-compressed.js"></script>

Putting it all together

Once everything is in place, your random-post gallery should be working great. To see a working example of this technique, check out the header area of Thane Champie’s Graphics Portfolio site. That particular implementation of this method features a few more bells and whistles, but the basic functionality is the same.

© 2009 Digging into WordPress | Permalink | 15 comments | Add to del.icio.us | Post tags: custom-fields, header, JavaScript, layout, lightbox, loop