How to add drop down categories to Automattic’s P2 Theme

You know I love P2. I always have, and I always will. It’s the perfect theme that turns my WordPress installation into a notebook site.

Many users – me included – have often wished for the addition of categories to P2, so that when you write a post, you can add it to the category from the front page, perhaps via a convenient drop down menu.

Here’s how to do it with P2 Version 1.5.1.

And if you don’t want to hack the code yourself, I’ve got a full working project on GitHub that’s ready to rock.

Prerequisites

We’ll need to tweak the following P2 core files to make this work. You’ll find them all in the theme’s main directory (i.e. wp-content/themes/p2)

• post-form.php
• inc/ajax.php
• js/p2.js

post-form.php

Let’s start by building the drop down menu. We need to make sure that we place this code in between the FORM tags, otherwise the browser won’t be able to submit our new values.

I’m putting this right underneath the FORM tag near line 45:

This will read which categories we have and display them as a drop down menu. Empty categories will be shown too. If you want to show how many posts are in each category, uncomment the line category_count line (third from the bottom).

With the drop down built, let’s make sure P2 can see the values we’re selecting.

p2.js

Near line 1020 you’ll find code that starts with

var args = {action: 'new_post'...

Comment it out and add these lines instead:

var drop_cat = $('#drop_cat').val();
var args = {action: 'new_post', _ajax_post:nonce, posttext: posttext, tags: tags, post_format: post_format, drop_cat: drop_cat, post_title: post_title, post_citation: post_citation, post_subscribe: post_subscribe };

This will make sure that when we submit a new value via the drop down it is read in properly. Without it, new values are ignored. We’ve simply added them to the array via drop_cat: drop_cat.

With those things done, let’s make sure that new posts go into a category (because by default, the don’t).

ajax.php

This is probably the most complex bit of code. You need to place it towards the very bottom, just before a block that begins with “if ( empty( $post_id ) )”.

// this will give us the category slug
$drop_cat = $_POST['drop_cat'];

// if nothing was selected, use the default category
if ($drop_cat == '') {
	
	$drop_cat = get_option('default_category');
	// in this case we already have the category ID
	$tag = array( $drop_cat );
	$taxonomy = 'category';
	wp_set_post_terms( $post_id, $tag, $taxonomy );

} else {
	// otherwise, let's convert the slug into an ID
	$post_cat_object = get_category_by_slug( $drop_cat );
	$post_cat_ID = $post_cat_object -> term_id;
	
	// now we define the category ID
	$tag = array( $post_cat_ID );
	$taxonomy = 'category';
	wp_set_post_terms( $post_id, $tag, $taxonomy );
}

What we do here is to set the new post’s category. If no category is selected, we want our post to go in the default category – otherwise we’ll grab the correct category and add it to that.

Full Working Example

I’ve created a full working theme called P2 Categories on GitHub:
https://github.com/versluis/P2-Categories

Feel free to fork and examine how it all fits together. The project also displays the categories inside the post meta (just like tags). It also adds a Category Archives page with full description – without it P2 displays categories with the headline “Posts from date”.

I’ve included other bug fixes that users have mentioned on forums which have not yet made it into the P2 Core.

Have fun 😉