WordPress Tutorial: Make Your Thematic Category Pages Look Like Normal Post Pages

Andrei Marks · August 16, 2012

(WordPress v3.4.1, Thematic v1.0.2.1)

On my main page I have several different categories of content, including Games, Experiments, and Tutorials. For the Tutorials category in particular, I wanted to have a page that simply pulls out the posts from a particular category and displays them.

The default Thematic Category page looks like so:

Initially, I was going to do this by creating a custom page template and altering the post query, but then I decided it would probably just be easier to tweak the built-in category page to be more post-like.

Step 1: Use Full Posts, Not Excerpts

Filters are extremely useful functions that reach into existing Thematic functions and allow you to modify or replace certain parameters. These sorts of functions are called “hooks,” because they allow you to hook into existing functions and inject or modify your own code. Here’s a Thematic reference of available filters. Here I hook into the thematic_content_init() function. The default function can be found in the “/library/extensions/content-extensions.php” file, and I’ve reproduced the relevant part of the function below:

[php] function thematic_content_init() { global $thematic_content_length;

	$content = '';
	$thematic_content_length = '';

	if (is_home() || is_front_page()) {
		$content = 'full';
	} elseif (is_single()) {
		$content = 'full';
	} elseif (is_tag()) {
		$content = 'excerpt';
	} elseif (is_search()) {
		$content = 'excerpt';
	} elseif (is_category()) {
		$content = 'excerpt';
	} elseif (is_author()) {
		$content = 'excerpt';
	} elseif (is_archive()) {
		$content = 'excerpt';
	}

	$thematic_content_length = apply_filters('thematic_content', $content);

} [/php]

What normally happens is that this function checks to see what type of page is being loaded, and returns a string that tells Wordpress to load full content up, or just an excerpt. So if the page is a category page (is_category() returns true), then the string ‘excerpt’ is returned.

In order to make category pages return full posts, we just have to change that, and we do it with filters:

[php] //—————Categories should show full posts————– function category_show_full_post() { if (is_category()) { return ‘full’; } }

add_filter(‘thematic_content’, ‘category_show_full_post’); [/php]

This is added to your child themes functions.php file. All it does is add a filter to the returned parameter indicated in thematic_content_init(). The second parameter, the string $content, is what we want.

My category_show_full_post() function will simply replace the original $content with the ‘full’ string, and Wordpress will display category pages like full post pages.

Step 2: Hide the Category Title

At the top of all the category pages is the header “Category Archive: Category-name.” For my category pages I wanted to get rid of that. And once again, I use add_filter(), in addition to a custom css class.

I defined a css class called “no-title” in my child theme’s style.css file:

[css] .no-title { display:none; } [/css]

I’m really just hiding the content, because I’d like the plain-text to be available for search engines. So all I have to do is add that tag to the category pages, and I do so by modifying the thematic_page_title() function through my own filter function:

[php] //————–Categories should be no-title————– function display_no_title(){ $content = "\t\t\t\t"; if (is_category()) { $content .= ‘<h1 class="page-title no-title">’; $content .= __(‘Category Archives:’, ‘thematic’); $content .= ‘ <span>’; $content .= single_cat_title(‘’, FALSE); $content .= ‘</span></h1>’ . "\n"; $content .= "\n\t\t\t\t" . ‘<div class="archive-meta">’; if ( !(‘’== category_description()) ) : $content .= apply_filters(‘archive_meta’, category_description()); endif; $content .= ‘</div>’; return $content; } }

add_filter(‘thematic_page_title’,’display_no_title’); [/php]

Just like Step 1, this filter returns a string. Here I simply make sure that when is_category() returns true, my custom css class tag “no-title” gets added.

Step 3: Hack Current_Page_Parent

Finally, as you might have noticed in the image up top, when you’re on the “Tutorials” tab the “News” tab is active as well. Because this is a custom menu, where Tutorials is set as a category link and the News tab is actually the blog, there’s some oddness where the News tab is set as current_page_parent.

Exactly why is a little more down the rabbit hole than I feel like going, so I’m just going to hack around it. Other people have had some issues with it, and have come up with other roundabout solutions, usually involving jQuery replacements. I’ll look into this when it looks absolutely necessary for the page. In the meantime, I’ve added the following to style.css.

[css] .current_page_parent a { border-bottom-color: #CCC !important; } [/css]

And finally:



Saved Links:

Twitter, Facebook