New layout, and tinkering with WordPress categories

I’ve been working on and off on this new layout for a while, but today I’ve doubled down to get it all coded and running. Nothing was wrong with the older layout, of course, but I just felt it was a little cluttered, and I felt somewhat pressured to write longer posts just to fill up all that space in line with the contents on the sidebar. Ergh. I also wanted a more obvious division between different categories, but not so much that moving from one category to the next would be a jarring experience.

So I came up with this :D I am rather pleased with it, especially for the coding that’s gone behind it. The layout has a lot of specific handling depending on which category the currently-visible post is in:

  1. Cartoon head background and post “icon” obviously depend on the post’s category; click on each of the categories to see them all.
  2. Where possible, I use the category’s “color” to indicate categories, such as the footer background, and the most recent category posts on the top right of the header.
  3. The top right header obviously shows the most recent post from each category–except, of course, when you’re already viewing that post!
  4. Post title color will also mirror the category the post belongs to.
  5. The next and back links found at the post’s meta area will also mirror the type of posts you’re scrolling through. A brown arrow means you’re not in a category!
  6. The contents of the footer will also vary slightly depending on the “active” category.

To pull most of the styling changes off, I needed the category of the post on the page itself, as well as on various areas of the blog to get the proper information. This wasn’t a problem for category pages, but for all the rest? I ended up doing a small bit of hackery (note this will only work on pages that contain just one post), and crossing my fingers that my blog won’t break in future WP versions:

function get_current_top_category() {
	$CATEGORIES = array(
		3 => 'girl',
		4 => 'geek',
		5 => 'reader',
		6 => 'writer',
		7 => 'gamer'
	);
	$current_top_category = 0;

	global $post;
	$post_id = $post->ID;
	$categories = get_the_category( $post_id );
	foreach( $categories as $c ) {
		if( in_array( $c->slug, $CATEGORIES ) ) {
			$current_top_category = $c->cat_ID;
			break;
		}
	}
	return $current_top_category;
}

The function works well both with just getting the current category for content manipulation, as well as adding an extra class to the body tag, as mentioned in this post via the body_class function.

All that said, I still need to get a couple of things working. I haven’t checked on IE browsers yet (and I don’t have any more plans of checking IE6… *shakes fist at it*), and I need to optimize the PNGs I used; I also want comments to show on each page, even if it’s not the single post page; and a couple more meta stuff couldn’t hurt, probably! They will all need to be done at a later date, though; I’m bushed!

Let me know if you see anything glaringly wrong :D

Next Page »