WordCamp Milwaukee 2013

I’ll be at WordCamp Milwaukee this year talking about some of the things I do to ease the process of developing WordPress plugins and themes. Computers are really good at following instructions and carrying out repetitive tasks, so we should use that to our advantage and automate away the “setup”, which will allow us to focus on the task at hand — creating the next hit plugin or theme.

I’ve been to WordCamps in the past and it’s always a good chance to meet other people who use and develop for WordPress on a daily basis. So whether you’re a developer that’s been using it for years or someone who is just thinking about starting your first WordPress blog, WordCamp Milwaukee will have something for everyone. As you may know, the WordPress community is filled with people that want to help and this is your opportunity to talk to them face to face.

If you decide to go, you can use the coupon code “betz” to save $5 at checkout.

P2 Theme

After trying to sort out the best way to facilitate asynchronous communication for a group project, I was reminded of P2. This talk by Pete Davies at WordCamp SF this past year tells a very compelling story about why you should use P2 on your project. You can use it for free on WordPress.com or download it to run on hosted WordPress. It took all of a few minutes to sign up for a free WordPress.com site and switch to the P2 theme. After that it was all work.

Listless Nav Menu in WordPress

Chris Coyier recently posted an article about using lists in navgiation on CSS Tricks. I tend to agree that they’re unnecessary. The first time I built a menu with a nav wrapping a ul wrapping a bunch of li‘s wrapping a bunch of a‘s it felt gross, but I did it because I thought that was easier for screen readers to understand.

I just redesigned my site and decided that I wanted a simpler structure for my menu this time. Since WordPress builds menus in lists, I created a custom walker class for wp_nav_menu that formats the menu the way I want.

That looks like a lot. It’s mostly just a copy of the Walker_Nav_Menu class with a few things changed:

  • Change the default container to ”
  • Change the default wrapping element to nav instead of ul
  • Disable a fallback1
  • Change the sub-menu element to div instead of ul
  • Remove the li wrapping each link
  • Put the id and class‘s that would normally go on the li on the a instead.

Of course, you have to tell your nav menu to use this walker. Since this disables the fallback if you don’t have a menu set, you’ll have to specify a menu.


  1. Unfortunately the fallbacks generally aren’t compatible with custom walkers — at least not the same custom walker that can be used for wp_nav_menu 

Post Format Loops in WordPress

Post formats in WordPress are pretty cool. According to the Codex, “A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post.” In my mind post formats are to present content in a way that makes sense for a given format. For example, video posts should highlight the video. Or maybe link posts should link directly to the site you want your readers to see instead of the permalink for that article.

Here I’m going to take a look at creating different templates for specific formats.

First, I’ll say that a good way to get started with post formats is just to enable the ones you want with the appropriate call to add_theme_support()1 in your theme’s functions.php file and customize them with CSS. If your theme takes advantage of the post_class() function to add classes to posts, each post will get a class in a style like “format-$format”, where $format is the name of the format — “format-gallery”, for example.

If you decide that you need to take it a step further and actually generate different HTML depending on the format, the following is a technique that I’ve used. Let’s start by looking at the loop in index.php of the _s theme, available on Github.

<!--?php /* Start the Loop */ ?-->
<!--?php while ( have_posts() ) : the_post(); ?-->

<!--?php <br ?--> /* Include the Post-Format-specific template for the content.
* If you want to overload this in a child theme then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
?>

 

The most interesting part of this is get_template_part( 'content, get_post_format() ), which will look for a file with a name like “content-$format.php”. If no such file exists, it will fall back to “content.php”, which will be our default for post types that we’re not going to specify special templates for.

If we think ahead a little bit we’ll realize that all of our posts will probably share some common structure. In my case, I want the title to be displayed if one was specified, certain meta information should be displayed, and of course I want to display the content. So I’m going to create a file called “content-base.php” with that basic structure. Then in content.php, I’ll basically just make a call to get_template_part() to include that base stucture.

In my v11 theme, “content.php” looks like:

>

Other Formats

Now we can create the templates for other formats just by adding the correct files. An example of my status format template looks like:

> echo ‘

‘;
the_content();
echo ‘

‘;
?>

In this case, content-meta.php just defines what meta information to display on a post.

Another example that reuses the base layout is my video format template:

>

$video = get_post_meta( $post->ID, ‘_format_video_embed’, true );
if ( !empty( $video ) ) {
$url = esc_url( $video );
if ( $embed = wp_oembed_get( $url ) )
echo $embed;
elseif ( !empty( $url ) ) {
printf( ‘‘, $url );
} else {
echo $video;
}
}

get_template_part( ‘content-base’ );

?>

Again, there is some more complex stuff here — I use a custom field called “_format_video_embed” to define what video to use. But the general idea is that it displays a video and then just grabs the base structure.

#Tips for Links

A common way of implementing link posts is to grab the first link in the post and set that as the reference for the title link. I have a function in v11 that lets you grab the first link in a post. Then you can output that as the href in content-link.php instead of using the permalink.

if ( ! function_exists( ‘v11_url_grabber’ ) ) :
/**
* Grab the first URL in a link post so we can use it as the href
/
function v11_url_grabber( $content ) {
if ( ! preg_match( ‘/<a\s[^>]
?href=\'”[\'”]/is’, $content, $matches ) )
return false;

return esc_url_raw( $matches[1] );
}
endif;

#WP Post Formats

As a final note, I like Crowd Favorite’s WP Post Formats plugin. It gives you some nice looking meta boxes for interacting with custom fields on your post formats.


  1. There’s some good documentation on adding post formats in the Codex.