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.