What the WordPress REST API Means for Javascript Developers

Pumped to be speaking at the OpenWest about WordPress, and specifically the REST API. I actually spoke at this same event 7 years ago, when it was the Utah Open Source conference. Glad to be back, and thanks to Victor Villa and Steve Myers for the work they did in organizing the event.

Building Javascript Apps with the WordPress JSON API

WIRED Building Javascript Apps with the WordPress JSON API

I had the great fortune to speak at LoopConf this last weekend among a fantastic group of people about the WordPress JSON API, and how we are using it to build new apps at WIRED.

Slides can also be downloaded here Building Javascript Apps with the WordPress JSON API.

Create a list of categories and tags in WordPress

This is more for personal use I suppose. Once upon a time, I needed to create a unified list of categories and tags for a post. I went about it the wrong way, getting all of the terms  for both, merging them using array_merge() and then looping through the list to get generate an unordered list. There is a simpler way…

[php title=”Create combined list of tags and categories”]
<?php
$terms = get_the_terms( $sched_post->ID, array( ‘category’, ‘post_tag’ ) );
if (!empty($terms)) {
$output .= ‘<li>Topics: ‘;
$the_terms = ”;
foreach ($terms as $idx => $term) {
$the_terms .= ‘, <a href="’ . get_term_link( $term ) . ‘">’ . $term->name . ‘</a>’;
}
$output .= substr( $the_terms, 2 );
$output .= ‘</li>’;
}
[/php]

The documentation for get_the_terms() used to say that you could only pass in a string of the taxonomy name. It is possible to pass in an array, and get an ordered list of terms back from all taxonomies. I’ve updated the documentation in the WordPress.org Codex to reflect this. Kinda neat. You don’t always need to have categories and tags together, but this saves merging/sorting and so forth.

You can see this in action on Maker Faire profile pages, like Todd Blatt.

Another related trick that I found the other day was using strip_tags() along with get_the_term_list(). I needed to output the names of a taxonomy without links. Rather then using get_the_term, and then looping through the names, like in the function above, I just ran strip_tags() and got the HTML that I was looking for. Boom!

[php title=”Strip tags from taxonomy list”]
echo strip_tags( get_the_term_list( get_the_ID(), ‘location’ ) );
[/php]

Any other taxonomy tricks?

WordCamp Salt Lake 2012

Gave a talk at WordCamp Salt Lake a few months ago, and thought I would link to the slides. I created them using the slide framework that was developed for Google I/O. My talk was titled Bootstrap, Responsive Theme Development. I talked a lot about generic HTML/CSS things, with a few WordPress specific tricks. Turned out pretty well, I hope to do it again someday.

Bootstrap, Responsive Theme Development

Use wp_trim_words to limit words in WordPress

Using wp_trim_words allows us to limit the title and excerpt, and anything else really, to a particular number of words. How practical a name. You can define the number of words to limit them to, and also define what you’d like the “more” text to be.

via Use wp_trim_words to limit words in WordPress.

YouTube Embederrator

Needed a simple WordPress function to provide a way to build a YouTube video embed. This is a nice little trick. All you need to do is add a custom field that has a key of Big_Video and the value of the ID of the YouTube video.

[php]
function js_youtube_embed($width,$height) {
global $wp_query;
$big_video = get_post_custom_values(‘Big_Video’);
?>
<iframe width="<?php echo $width; ?>" height="<?php echo $height; ?>" src="http://www.youtube.com/embed/<?php echo $big_video[0]; ?>?showinfo=0&hd=1" frameborder="0" allowfullscreen></iframe>
<?php } ?>
[/php]

Example, if this is your YouTube video: http://www.youtube.com/watch?v=C1p6A7X64Qg, you would use C1p6A7X64Qg as the value.

In you template, the function would look like this:

[php]
js_youtube_embed(‘940’, ‘528’);
[/php]

The two values are the size of the video that you want embedded. So, in this case 940×528.

The CMS

One of my favorite things about WordPress is its extensibility. We’re on the same platform today as yesterday, but have built new tools for writers and editors. Featured and pinned articles get expiration dates, so editors don’t have to go back and manually un-feature things. Selecting a post layout is as simple as clicking a button. Automated resizing of images means faster load times and fewer distorted photos. And choosing which articles go on the home page is a single-click affair.

Really loving the new design of TechCrunch. It is getting a lot of heat, but I like the change. Looks nice. Would love to steer Make in a similar direction.

via: Redesigning TechCrunch: We Picked This Logo Just to Piss You Off

Raptorize This

An awesome jQuery plugin that unleahes a Raptor of Jurassic proportions… Well, technically it’s Cretaceous proportions, but we’ll let that slide for now.

WE’VE ALL BEEN HERE BEFORE…

You’re sitting at your desk, coding up a 500 page site, knee-deep in Extreme Cheddar Doritos sipping on a liter of Code Red Mountain Dew when you realize…this page would be som much more awesome with a VELOCIRAPTOR. You immediately scramble home to grab your Jurassic Park DVDs so can screencap a Velociraptor attack, but then you realize how hard it would be to make an awesome raptor run across the site you were coding. Plus, how are you going to get that trademark velociraptor screech? How about we let you in on a little secret?

We already did it.

Well, the guys at Zurb.com did it. And I made it into a WordPress plugin.

The Options

What’s that? You want to be able to control the entrance handler? You can! Raptorize can be activated on a click event (that is the default and what we have hooked up above), a timer which just fires after the page is loaded, or the legendary Konami-Code. Our personal favorite is the Konami-Code (but it only works once per page load).

Go ahead, try the Konami Code (↑ ↑ ↓ ↓ ← → ← → B A)

Works when you give a class of button to anything that can be clicked. i.e. <a href=”#” class=”button”>Button</a>

Download here

Try me…