Curtis Henson

Creating a Chart on Your WordPress Archives Page

Curtis Henson — Tue, 07 Jul 2009 16:00:29 +0000

One part of WordPress that I’ve never been overly impressed with is archives. This isn’t so much a WordPress problem as it an archive problem, archives are inherently boring. As a result of this revelation I’ve spent some time thinking up new ways to present the information. My latest idea was adding charts to represent some of the data from the archives. This is a fairly simple function to output the info and style it as a chart.

If you want to use a flash or javascript chart, scroll to the bottom for a different function.

The Chart

After looking for a lightweight flash or javascript charting solution, I decided for an archives page just plain CSS charts would be the way to go at first. So the output we are going for is something like this:


	Jun
	6

	Jul
	2

	Aug
	3

	Sep
	4

	Oct
	5

	Nov
	3

	Dec
	2

The Code

The code in the function is essentially a Frankenstein of the wp_get_archives function from the WordPress core, and this tutorial on creating vertical bar graphs. It pulls the year, month and number of posts out of the database, then formats them into a list suitable for styling into a CSS chart.

 '2007',
		'limit' => '13',
		'graphHeight' => '200',
		'xIncrement' => '55'
	);

	$maxHeight = 1;
	$scale = 1;

	$r = wp_parse_args( $args, $defaults );
	extract( $r, EXTR_SKIP );

	if ( '' != $limit ) {
		$limit = absint($limit + 1);
		$limit = ' LIMIT '.$limit;
	}

	$where = apply_filters('getarchives_where', "WHERE post_type = 'post' AND post_status = 'publish'", $r );

	$query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM $wpdb->posts $where GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC $limit";
	$key = md5($query);
	$cache = wp_cache_get( 'ch_archive_graph' , 'general');

	$output = '';

	if ( !isset( $cache[ $key ] ) ) {
		$arcresults = $wpdb->get_results($query);
		$cache[ $key ] = $arcresults;
		wp_cache_add( 'ch_archive_graph', $cache, 'general' );
	} else {
		$arcresults = $cache[ $key ];
	}
	if ( $arcresults ) {

		//Loop through to find the highest number of posts
		foreach ( (array) $arcresults as $arcresult ) {
			//number of posts in a month
			$total = $arcresult->posts;
			if($maxHeight < $total) $maxHeight = $total;
		}

		//Reverse the months
		$arcresults = array_reverse($arcresults);
		foreach ( (array) $arcresults as $arcresult ) {
			//Limit to one year
			if($arcresult->year == $graphYear){
				//Get month name, then appreviate, delete the second line if you want full month names
				$month = sprintf(__('%1$s'), $wp_locale->get_month($arcresult->month));
				$month = sprintf(__('%1$s'), $wp_locale->get_month_abbrev($month));
				//Get archive link
				$url = get_month_link( $arcresult->year, $arcresult->month );
				//Number of posts in the month
				$num_posts = $arcresult->posts;

				//Determine the scale and the height of the bar
				$scale = $graphHeight / $maxHeight;
				$height = ($arcresult->posts * $scale);

				//Put it all together
				$output .= "".$month."";
				$output .= "".$num_posts."";

				//Increase the offset for the next bar
				$xOffset = $xOffset + $xIncrement;
			}
		}
	}	

	$output .= "";
	echo $output;

}

Styling the Chart with CSS

Styling the chart is made easier by the definition list.

.barGraph {
	height: 200px;
	margin: 0;
	padding: 0;
	position: relative;
	}

.barGraph dt {
	bottom: 0;
	list-style:none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 54px;
	}

.barGraph dd {
	border: 1px solid #005559;
	bottom: 0;
	list-style:none;
	margin: 0 0 1.5em 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 50px;
	background-color: #00868B;
	border-right: 5px solid #005559;
	color: #fff;
	font-weight: bold;
	}

	.barGraph dd:hover {
		border: 1px solid #FA8000;
		background-color: #F5BA52;
		border-right: 5px solid #FA8000;
		color: #000;
		}

How to use the Graph

The function works just like any other template tag. Add the above function to your functions.php file and the CSS to style.css. Then call the chart in your template like so:

The template tag also includes a few options to make customizing it easier:

‘graphYear‘ this is the year of the archive you want to display
‘xIncrement‘ this is the width of the bars in the chart
‘graphHeight‘ this is the height in pixels of the chart
‘limit‘ this is number of posts you want to display

Example:

Bonus: For Javascript Charts

If you need the output for a javascript based chart, you only need to alter things a bit to get a javascript array or months and number of posts, then plug them into whatever charting you want to use.

function ch_count_months_js_output($args = ''){
	global $wpdb, $wp_locale;

	$defaults = array(
		'limit' => '',
		'before' => ''
	);

	$r = wp_parse_args( $args, $defaults );
	extract( $r, EXTR_SKIP );


	$where = apply_filters('getarchives_where', "WHERE post_type = 'post' AND post_status = 'publish'", $r );
	$join = apply_filters('getarchives_join', "", $r);

	$query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM $wpdb->posts $join $where GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC $limit";
	$key = md5($query);
	$cache = wp_cache_get( 'ch_count_months_js_output' , 'general');

	if ( !isset( $cache[ $key ] ) ) {
		$arcresults = $wpdb->get_results($query);
		$cache[ $key ] = $arcresults;
		wp_cache_add( 'ch_count_months_js_output', $cache, 'general' );
	} else {
		$arcresults = $cache[ $key ];
	}
	if ( $arcresults ) {
		$arcresults = array_reverse($arcresults);
		$posts = array();
		$months = array();
		foreach ( (array) $arcresults as $arcresult ) {
			$month = sprintf(__('%1$s'), $wp_locale->get_month($arcresult->month));
			array_push($months, $month);
			array_push($posts, $arcresult->posts);
		}
	}	
	print_r($months);
	print_r($posts); 

	echo ''; 
	echo 'var months = ["', join($months,'","'), '"];'; 
	echo 'var posts = [', join($posts,','), ']';
	echo '';
}

Let me know if you use it or improve it!

Dynamic Multi-level Page Menus in WordPress Something I often see while trolling boards (and engaging in...
WordPress Posts Navigation Quick Tip Say you want to use the next_posts_link() and previous_posts_link()...
New WordPress 2.7 Functions WordPress 2.7 includes a few new exciting features and functions...

Tender Quietly Adds Killer Little Feature

Curtis Henson — Tue, 16 Jun 2009 23:07:30 +0000

Tender just rolled out a new javascript widget which allows you to insert a form into your site which will post straight to Tender. The widget even provides links to documentation, and the creation of a user account for the person. All this without the user having to leave your site, I’ll be integrating it here soon. So right now you probably have two questions: What is Tender? and Why Do I Care?

What is Tender?

It’s a support web app, I know sounds boring, and it is to be honest. But some of us have to deal with supporting things. Tender makes this incredibly easy and painless. Tender has some features which set it apart for me. Numeral uno is I can manage support requests from email, I hardly ever have to actually log into the website. Second is the integration with Lighthouse, my ticket tracking app of choice. When I first released Checkmate I encouraged people to post tickets to my lighthouse, it was a massive failure. However my Tender has been a success and has made responding to support requests much less painful.

Why Do I Care?

If you don’t support any software or services you don’t care, you shouldn’t care, and you should be happy you don’t deal with it. If you do, OR you SHOULD be supporting something(*cough* your WordPress themes *cough*) then you should care. Tender is an efficient, user friendly way to offer quality support. And this new widget is just an example of their commitment to making things easy for the users, who are the most important part of your software/service.

Checkmate 2.0: A Free Premium WordPress Theme Checkmate 2.0 is a popular premium WordPress theme used by...
Checkmate 2.0 Feature Set The feature set for Checkmate 2.0 has been set, and...

Quick Tip: Delay Page Loading with jQuery

Curtis Henson — Wed, 08 Apr 2009 01:15:07 +0000

On a site I recently worked on I wanted to have an animation before the next page loaded. What I wanted to happen was: user clicks a link, animation plays out, page is loaded normally. It is a nice little effect, but this is probably a trick you want to use sparingly…please…use it sparingly.

This uses the delay, and easing plugins for jquery. The below example includes the animation just as an example.

$('#link').click(function(){
        // Get the url of the link
		var toLoad = $(this).attr('href');

			// Do some stuff
			$(this).animate({
				marginRight: '50px',
				marginLeft: '-175px'
			}, 300, 'easeOutSine').animate({
				marginRight: '-38px',
				marginLeft: '-120px'
			}, 500, 'easeOutBounce');
			// Stop doing stuff

        // Wait 700ms before loading the url
		$(this).delay(700, function(){
			window.location = toLoad;
		});

        // Don't let the link do its natural thing
		return false;
});

WordPress Posts Navigation Quick Tip Say you want to use the next_posts_link() and previous_posts_link()...
Separating and Hiding Trackbacks with Jquery in WordPress 2.7 If you're designing and coding themes for WordPress, please, I...
Dynamic Multi-level Page Menus in WordPress Something I often see while trolling boards (and engaging in...

Press75 Releases Two New Plugins

Curtis Henson — Wed, 01 Apr 2009 22:27:07 +0000

There are a few things that have been the realm of premium themes and some rare free themes: post thumbnails, and easy video embedding(that doesn’t suck). Press75 just released two simple yet powerful and incredibly useful plugins: Simple Post Thumbnails and Simple Video Encoder. Go check them out, and let Jason know how awesome they are.

Simple Post Thumbnails

Easily add thumbnail capability to your theme. Previously most people used timthumb, but Simple Post Thumbnails is a bit cleaner. The killer feature is the ability to upload from a URL to your own server.

With the Simple Post Thumbnails plugin, adding thumbnail images to your posts is as easy as uploading any image (no editing required) and clicking the Update Post button. Upon upload, the plugin will re-size and crop the selected image according to whatever parameters you specify within the plugin configuration. To view this process in action, check out the Simple Post Thumbnails screencast.

Simple Video Encoder

There are a few video embed plugins for WordPress, but I don’t like most of them, they are heavy weighted and often add unnecessary headaches for theme developers and users. The Simple Video Encoder is a simple and effective way to add video embedding to your theme.

With the Simple Video Embedder plugin, adding video to your post is as easy as pasting the URL for the video you want to add within a field, and then click submit. You can even provide simple width and height parameters to size your video to match your theme. Currently, this URL embed method works perfectly with several services including Vimeo.com, YouTube.com, MetaCafe.com, Revver.com, Google Video and Seesmic.com. Or, of you want to host your own video, the plugin is also compatible with FLV (Flash Video) and Quicktime formats.

Checkmate 2.0: A Free Premium WordPress Theme Checkmate 2.0 is a popular premium WordPress theme used by...
New WordPress 2.7 Functions WordPress 2.7 includes a few new exciting features and functions...
DRY WordPress Theme Coding Don't Repeat Yourself is the rule, the name of the...

DRY WordPress Theme Coding

Curtis Henson — Mon, 30 Mar 2009 23:33:28 +0000

Don’t Repeat Yourself is the rule, the name of the game, and what you should apply to just about everything you code. It is a simple principle which seems to be totally ignored when it comes to WordPress themes. So what is DRY? In it’s simplest form it means don’t write the same code over and over again.

WordPress themes seem prone to this sort of repeating your code. I believe this mostly has to do with WordPress theme developers not being “developers” in a traditional sense, more designers who can code. This habit of repeating code also comes from introductory tutorials and the like which have you creating templates which are mostly the same thing over and over.

Themes are getting more and more advanced, WordPress itself is getting more flexible. As these themes get more complex they need to be simpler. I learned this with my Checkmate theme. It was quickly getting out of hand with the numerous files, lack of organization, and changing code took entirely too long.

K.I.S.S.

I want to rock and roll all night, and party every day too, but I’m busy changing one line of code…in ten different template files. That shouldn’t happen, my new goal is now to create the lightest template files I can, and be heavy on other tools. I also like to cut down on the number of templates I have. The simpler the file structure and code the easier to change or update.

HTML and CSS strive to separate style from content, so you should also try to separate logic from your views. Essentially separate your php from your html as much as possible. This is much more apparent on really complex themes requiring more than your basic template tags.

The Tools

So what tools are there to help in the endeavor to not repeat ourselves? There are quite a few stupidly useful ones.

Template Hierarchy

The first step is understanding what files WordPress looks for at any given time. This can help you strategically use files and save yourself a lot of copying and pasting. The best place to learn about hierarchy is the WordPress Codex Template Hierarchy page.

A quick example of how I use the hierarchy is by using archive.php to display category, tag and author pages. Often these pages are the exact same with minimal changes. Using conditional statements you can serve parts of the page depending on what is requested. Checkmate’s archive file uses this type of system to dynamically display information for tags, categories, or author information.

Conditional Statements

After you know the template hierarchy, you’ll need to understand the use of conditional statements to make the most of your template files. I’ve written twice about conditional statements: Write Less Code, and Complex WordPress Conditional Tags. The WordPress codex page on Conditional Tags will explain everything in great detail.

Conditional tags are just ways to create powerful PHP if else statements very easily. You can use them to dynamically display select parts of a template only in certain specific circumstances.

The Functions File

The functions file is your friend, a powerful friend, a good friend, a wing man of sorts. I use the functions file to call all my other goodies, allowing me to keep a nice clean structured theme folder. Pearsonified has a great article on how to use the functions file. Toxane also has a good article with some examples for WordPress’ function file. The function file can be used

PHP Itself

Some basic PHP can go a long way coupled with some of WordPress’ functions. Learning to read the API and knowing the lingo can go a long way in accomplishing whatever you want.

Helper Functions

In the near future I’ll be releasing my WordPress Tools Project, which is a bunch of functions all ready to be included into themes to help do some mundane things. But you don’t have to wait for me, make up your own, go back into old themes and abstract out some of the advanced things you do. Always using the same HTML code around a template tag? Put it into a function and make your own template tag.

I’ve started posting some of these functions to serve as examples: WordPress Navigation Helper, and Dynamic Multi-Level Page Menus.

Some Tips

Try to keep things organized, for instance put all your javascript in one folder, all your php functions in another, css in another.

Develop a solid framework. I find myself working off Checkmate a lot, I know it very well and know what can be stripped out immediately. Developing a solid theme and releasing is a great way to find errors in your code, essentially it is like having thousands of testers in all sorts of different scenarios.

Learn from other themes. There are a few themes that do this extremely well. Thematic is one of my favorites.

WordPress Theme Tools Project Announcement A new project for WordPress theme developers which will make...
WordPress Navigation Helper Function, Comments and Posts A quick tip on only displaying navigation blocks when there...
Dynamic Multi-level Page Menus in WordPress Something I often see while trolling boards (and engaging in...

Dynamic Multi-level Page Menus in WordPress

Curtis Henson — Tue, 24 Feb 2009 00:15:08 +0000

Something I often see while trolling boards (and engaging in flame wars) is the question: “How do I display a menu with a parent level and child level, but only if the current page actually has child pages?” or something similar, but better phrased. The gist is, all the basic WordPress template functions don’t really do this, at least not very well. You can use a few functions to get something close, but it often is a compromise with the end result not quite what the designer had envisioned. I say no more!

What it actually does

The purpose of this article is to give you a function you can pop into a theme just like a regular template tag (wp_list_pages) but with some changed functionality. What you’ll get is a top level menu, nothing fancy, basic use of wp_list_pages really, but this top level is always there. You also get child menus, as many as you need. The child menus only display if the page actually has children, and it only displays one level of children instead of all of them.

The beginning of a beast

I’m not gonna lie, this is gonna get thick and fast, in fact the code barely makes sense to me and I wrote it. Here’s the short: we display a top level menu(easy), we check if a page is a child(easy), we check if the page has children itself(weird hack), we count the page’s parents and display the menu accordingly(huh?).

The top level

We’ll start with the top level menu, this is just a call to the wp_list_pages function, nothing fancy here. Output is generated with an unordered list with a few class names for styling.

//Multi-level pages menu
function wptt_multilevel_menu() {
	global $post;
	// Top level menu is always displayed
	$top_level = wp_list_pages('title_li=&depth=1&sort_column=menu_order&echo=0');

	// Put it all together
	$menu = '';
	$menu .= $top_level;
	$menu .= '';

	print $menu;
}

Displaying the children

The meat of this example is this next part, displaying the children is in thought a very simple process, in practice it takes a bit of pounding a square peg into a round hole. We are still using the wp_list_pages function, and most of this code has one purpose, to determine the right depth to pass to wp_list_pages.

Initially we’ll check if a page has any parent pages using $post->ancestors and count the ancestors. I count the ancestors to determine the depth used later. Then check if a page has any more children. We’ll then separate those pages with children and those without.

ancestors) {

		// How many ancestors does this page have? Then subtract by 1 to adjust for top level
		$n = count($post->ancestors);
		$n = $n - 1;

		// Get the page's children, if it has any
		$pages = get_pages();
		$page_children = get_page_children($post->ID, $pages);

		// Checks if a page has children
		if (!empty($page_children)) {
			$children = wp_list_pages("title_li=&child_of=". $post->ancestors[$n] ."&echo=0&sort_column=menu_order&depth=" . ($n + 2));
		} else { // If the page doesn't have children
			$children = wp_list_pages("title_li=&child_of=". $post->ancestors[$n] ."&echo=0&sort_column=menu_order&depth=" . ($n + 1));
		}

	} else {
		$children = wp_list_pages("title_li=&child_of=". $post->ID ."&echo=0&sort_column=menu_order&depth=1");
	}
?>

All of the counting done above($n, depth, ancestors, blah blah) is all done in order to display only the first child level. This way you are not showing all the children of the top level page.

The whole function

In the final function I’ve added some output for the children and combined everything above.

Updated 4/20/09 – the function has changed slightly since the explanation above.

//Multi-level pages menu
function wptt_multilevel_menu() {
	global $post;
	// Top level menu is always displayed
	$top_level = wp_list_pages('title_li=&depth=1&sort_column=menu_order&echo=0');

	// Get post ancestors 
	$post_ancestors = get_post_ancestors($post);

	// Check if a page has any parent pages
	if ($post_ancestors) {

		//get the top page id
		$top_page = $post_ancestors ? end($post_ancestors) : $post->ID;

		// How many ancestors does this page have? Counts the array adds one.
		$n = count($post_ancestors) + 1;

		// Get the pages children, if it has any
		$pages = get_pages();
		$page_children = get_page_children($post->ID, $pages);

		// Checks if a page has children
		if (!empty($page_children)) {
			$children = wp_list_pages("title_li=&child_of=". $top_page ."&echo=0&sort_column=menu_order&depth=" . $n);
		} else { // If the page doesn't have children
			$children = wp_list_pages("title_li=&child_of=". $top_page ."&echo=0&sort_column=menu_order&depth=" . ($n - 1));
		}

	} else {
		$children = wp_list_pages("title_li=&child_of=". $post->ID ."&echo=0&sort_column=menu_order&depth=1");
	}

	// Put it all together
	$menu = '';
	$menu .= $top_level;
	$menu .= '';
	// Only show child navigation if there are children
	if ( $children ) {
		$menu .= '';
		$menu .= $children;
		$menu .= '';
	}
	print $menu;
}

The future and spaceships

That is one way to do multiple level menus in wordpress, right now this function is only using pages, but I will be expanding it to use categories as well. There are actually quite a few ways I want to expand this in order to make it truly useful. This function is part of the larger WordPress Theme Tools project that I’m starting. If you have any suggestions for this, find a bug, or know a better way, let me know!

Note: I’ve updated the code on 4/20/09 but the function still works the same. As it is right now the sub pages are displayed in the default nested way that WordPress naturally does it. The benefit of the function is that it only shows one level under the parent page instead of hard coding the depth or showing all the children.

Creating a Chart on Your WordPress Archives Page One part of WordPress that I've never been overly impressed...
WordPress Navigation Helper Function, Comments and Posts A quick tip on only displaying navigation blocks when there...
New WordPress 2.7 Functions WordPress 2.7 includes a few new exciting features and functions...

WordPress Navigation Helper Function, Comments and Posts

Curtis Henson — Fri, 06 Feb 2009 23:26:25 +0000

This post started as a quick little tip on how to hide navigation blocks when there weren’t any pages to actually link to. That was a good post, it was intelligent, well thought out, and helpful. But like all things intelligent, well thought out, and helpful, it was quickly scrapped.

While coding the new theme for curtishenson.com I had a problem, pagination blocks would show even when there were no pages to link to(not technically wordpress’ fault), turns out it is a pretty easy fix. For post pagination blocks wrap the navigation in this:

max_num_pages;
		if ( $total_pages > 1 ) {
			//Your navigation goes here
		}
?>

This grabs the total amount pages, checks if it is greater than one, then shows the navigation if there is more than one page. For comment pagination in WordPress 2.7+ do it like this:

$total_pages = get_comment_pages_count();
	if ( $total_pages > 1 ) {
		//Your navigation goes here
	}
?>

The subtle difference is the use of the get_comment_pages_count function. Otherwise you’re just checking to see if there is more than one page.

A Helper Function

The first time I saw a helper it was in a ruby on rails program. Seemed like a good idea, don’t know why I hadn’t used this most basic implementation of DRY (Don’t Repeat Yourself) theory in WordPress themes. So while I was copy and pasting this code I decided it would be much easier to lump it into one function. The benefits: lighter template files, change the function once and the whole site changes.

This HTML bits will probably need to be changed to your liking, but this little diddy should help anyone with their themes. Just copy and paste the function in your functions.php file, then call it in your theme in place of the navigation like so:

I have some ideas to extend this into a truly helpful …helper. I’ll be including it in my new WP Theme Tools Project for sure. If you extend it let me know!

Note: This function only works with WordPress 2.7.1

max_num_pages;
			if ( $total_pages > 1 ) { 
			$s = '';
			$s .= '';
			$s .= '' . get_next_posts_link('Previous Entries') . '';
			$s .= '' . get_previous_posts_link('Newer Entries') . '';
			$s .= '';
			echo $s;
		}
	}

	// For paginated comments in WP 2.7+
	if ( is_singular() && get_option('page_comments') ) {
		$total_pages = get_comment_pages_count();
		if ( $total_pages > 1 ) { 
			$s = '';
			$s .= '';
			$s .= '';
			$s .= get_previous_comments_link('Older Comments');
			$s .= '';
			$s .= '';
			$s .= get_next_comments_link('Newer Comments');
			$s .= '';
			echo $s;
		} 
	}
}

?>

WordPress Posts Navigation Quick Tip Say you want to use the next_posts_link() and previous_posts_link()...
Get More Design Control Over WordPress 2.7 Comments So you got this awesome design all ready for WordPress...
DRY WordPress Theme Coding Don't Repeat Yourself is the rule, the name of the...

WordPress Theme Tools Project Announcement

Curtis Henson — Wed, 04 Feb 2009 20:44:02 +0000

An “announcement” of a project, sounds exciting doesn’t it? Well if you develop WordPress themes you should be excited, or at least somewhat amused. I’m planning on developing a set of what I call “tools” for you WordPress themers out there. It is still in it’s planning stage at the moment but I’m going to list what it is going to have so far because I want your input on what you want, and how you think it should work.

The Basic Idea

When I develop themes I spend a lot of time doing the same things, or copy and pasting code from my other themes and tweaking. Things like theme options, basic functions, filters, widgets. I also have had some trouble keeping things like widgets up to date(thank God WordPress is so forgiving).

I want to build a library that can be dropped into any theme, and be easily customized to suit the needs of that theme. This is the basic idea behind the tools project.

Theme Options

I think theme options are an integral part of modern WordPress themes. Themes are more complex than ever and I can’t imagine developing a theme without options. Theme options can be a pain, but they don’t have to be. The tools project’s first feature (and already almost done) is a library which makes creating theme options as easy as creating a few arrays. Drop in the files, customize a file and you are good to go. No more searching through long files of code.

Basic Functions and Filters

Custom functions can greatly help a theme designer, whether it is doing complex things or just helping clean up the source code. I have a few functions and filters planned already, but this could definitely use some input as I’m sure other people could add to this part.

Widgets

Custom widgets are nice…especially when they work right. Custom widgets are also a huge selling point (or give away point??) for themes. And custom widgets are also usually a huge pain in my ass. It is a lot of code, and a lot of my code is now outdated due to WordPress 2.7. I’m not sure how easily customizable the widgets will be though, any ideas on how that could work are welcome.

Widget Areas

So far this is just a bunch of arrays premade for the theme. Not sure if there is anything else that can make this basic feature better.

Your Input

That is what I currently have in mind for the project, however I’d like to extend that further. l’ll need the input of people who build themes. What do you want? How do you think it should work? Any ideas for more features?

I’m going to upload this on github once I have a good, functioning base so people will be able to branch it and commit changes and updates.

DRY WordPress Theme Coding Don't Repeat Yourself is the rule, the name of the...
WordPress Navigation Helper Function, Comments and Posts A quick tip on only displaying navigation blocks when there...
Checkmate 2.0: A Free Premium WordPress Theme Checkmate 2.0 is a popular premium WordPress theme used by...

Get More Design Control Over WordPress 2.7 Comments

Curtis Henson — Thu, 15 Jan 2009 00:43:05 +0000

So you got this awesome design all ready for WordPress 2.7, you even got how those pesky threaded comments planned out perfect! Oops, didn’t you know? WordPress’ comment function well, not lacking for a better term, sucks…a lot. It’ll probably get better in the future, but what to do right now? Bend them to your will, no mercy. That is what Chad Coleman has done, and thank God it was him and not me.

Go read his article Comment Design For WordPress 2.7

WordPress Navigation Helper Function, Comments and Posts A quick tip on only displaying navigation blocks when there...
Separating and Hiding Trackbacks with Jquery in WordPress 2.7 If you're designing and coding themes for WordPress, please, I...
DRY WordPress Theme Coding Don't Repeat Yourself is the rule, the name of the...

Separating and Hiding Trackbacks with Jquery in WordPress 2.7

Curtis Henson — Mon, 12 Jan 2009 16:00:33 +0000

If you’re designing and coding themes for WordPress, please, I beg you, for love of all that is digitized and Tron like, separate your trackbacks and pingbacks from your comment threads. There is nothing more frustrating than having to navigate through a horde of unholy spam links to see the next comment in a thread. I also personally believe(ie I have no proof whatsoever) that a comment threat mucked with trackbacks correlates directly with less commenting. But trackbacks aren’t all bad, some people (not me) use them to find out more about the blog post, theme, story, whatever…so I wouldn’t just toss them aside like fruit cake.

If you look at most new well thought out themes, trackbacks are separated into another tab, or somehow minimized/hidden from the user that doesn’t want them. WordPress 2.7 changed the commenting code quite a bit, and now separating everything is even easier. Add a little jQuery magic and you can hide and show those trackbacks on demand. Enough with this banter, lets rock out with our text-editor out.

First a little catchup

So things are a wee bit different in the ol’ comment file in Wordpress 2.7. I highly suggest taking a peek at Otto’s WordPress 2.7 Comments Enhancements if you haven’t already. He outlines how the new comment loop works, and all the spiffy javascript for threaded comments.

Once you got a grasp on the comment changes in 2.7, checkout Matt’s article on separating pings from comments. I’m not going to go into too much detail so if you find yourself not understanding a part of the code, try checking out those articles.

Separation makes the heart grow fonder of pings

I think that is the saying. Lets start with the comment loop, first the whole thing,

if ( have_comments() ) : ?>
	
		
			48, 'reply_text'=>'Reply', 'type'=>'comment')); ?>
		

	Trackbacks / Pingbacks
	show trackbacks
		
			
		

	
		
		
	
 

	comment_status) :
		// If comments are open, but there are no comments.
	else : 
		// comments are closed 
	endif;
endif;

There is the comment loop with the trackbacks already separated. The only trick to the separation is setting the ‘type‘ option for the wp_list_comments function. Set the ‘type’ to ‘comment’, for comments, and pings for …well pings(trackbacks). Simple enough right? Let’s take a closer look at the HTML.


		
			48, 'reply_text'=>'Reply', 'type'=>'comment')); ?>
		

	Trackbacks / Pingbacks
	show trackbacks

This is really the meat of the code, you can see the two blocks of code, one for comments and one for pings. The only real differences are setting the ‘type’ for wp_list_comments and changing the id and class names for styling. There is also one addition for the pings, a link to show them(it has a class of ’show_trackbacks’). You can either put this link in the actual code, or inject it using javascript.

The jQuery

There’s a few ways to do this but I’m going to go with a simple slide up and slide down. First we’ll hide the trackbacks by calling slideUp() then add a function to detect the click on our show_trackbacks link which will call slideDown().

$('ol.trackback').slideUp();
$('.show_trackbacks').click(function(){
	$('ol.trackback').slideDown();
});

That’s it?? Yeah, pretty simple actually, so I’ll leave you with something else useful. A full comment file ready for wordpress 2.7.

The whole thing


	This post is password protected. Enter the password to view comments.
comment_date);
}
add_filter('get_comment_date','change_comment_date',10,2);

// show the comments
if ( have_comments() ) : ?>
	
		
			48, 'reply_text'=>'Reply', 'type'=>'comment')); ?>
		

	Trackbacks / Pingbacks
	show trackbacks
		
			
		

	
		
		
	
 

	comment_status) :
		// If comments are open, but there are no comments.
	else : 
		// comments are closed 
	endif;
endif; 

if ('open' == $post-> comment_status) : 

// show the form
?>



	




You must be logged in to post a comment.





	
	
	" />

	XHTML: You can use these tags: 

	

	
	 Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.
	




Logged in as .
Logout »



Name 

Email 

Website





ID); ?>







Related posts:
WordPress Navigation Helper Function, Comments and Posts A quick tip on only displaying navigation blocks when there...
Get More Design Control Over WordPress 2.7 Comments So you got this awesome design all ready for WordPress...
Creating a Chart on Your WordPress Archives Page One part of WordPress that I've never been overly impressed...