Preventing output of empty entry footer markup

In WordPress themes, single posts typically have the following information in the entry footer:

• The category list (if there are more than one categories sitewide)
• The tag list (if there are tags assigned)
• The edit link (if logged in)

In a lot of themes, even if all of the above are not true, an empty entry-footer div is still output in the markup, like this:

<div class="entry-footer">
	<!-- blank space -->
</div>

If styles, like padding and borders, are applied to entry-footer div, with the expectation that stuff will be inside of it, things could look weird.

Even if not, to keep HTML code as clean as possible, it should only be output on the page when absolutely necessary.

Step 1: Do you have a “categorized blog” conditional function?

If you built your theme off of Underscores, you already do.

If not, take a moment to copy the following functions in your theme’s functions.php file:

/**
 * Returns true if a blog has more than 1 category.
 *
 * @return bool
 */
function themeslug_categorized_blog() {
	if ( false === ( $all_the_cool_cats = get_transient( 'themeslug_categories' ) ) ) {
		// Create an array of all the categories that are attached to posts.
		$all_the_cool_cats = get_categories( array(
			'fields'     => 'ids',
			'hide_empty' => 1,
			// We only need to know if there is more than one category.
			'number'     => 2,
		) );
		// Count the number of categories that are attached to the posts.
		$all_the_cool_cats = count( $all_the_cool_cats );
		set_transient( 'themeslug_categories', $all_the_cool_cats );
	}
	if ( $all_the_cool_cats > 1 ) {
		// This blog has more than 1 category so themeslug_categorized_blog should return true.
		return true;
	} else {
		// This blog has only 1 category so themeslug_categorized_blog should return false.
		return false;
	}
}
/**
 * Flush out the transients used in themeslug_categorized_blog.
 */
function themeslug_category_transient_flusher() {
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}
	// Like, beat it. Dig?
	delete_transient( 'themeslug_categories' );
}
add_action( 'edit_category', 'themeslug_category_transient_flusher' );
add_action( 'save_post',     'themeslug_category_transient_flusher' );

Be sure to replace themeslug with your own theme slug.

These will make it easy for your blog to not display categories when there’s only one (by default, “Uncategorized”) available, and efficiently display them when there’s more than that.

It wouldn’t be a good experience if a blog only had one category, yet still had “Category: Uncategorized” underneath every blog post.

In that case, the blog would not be categorized, therefore making “Category: Uncategorized” pointless to display.

Anyway, we’ll use this conditional function along with a couple others in Step 2.

Step 2: Wrap the entry-footer markup in conditional tags

It should look like this:

<?php if ( themeslug_categorized_blog() || get_the_tag_list() || get_edit_post_link() ) : ?>
	<footer class="entry-footer">
		<?php themeslug_entry_footer(); ?>
	</footer><!-- .entry-footer -->
<?php endif; ?>

Again, be sure to replace themeslug with your own theme slug.

Walking through the conditional, we’ll find that it’s very similar to the list outlined at the very top of this article:

• themeslug_categorized_blog() – Is there more than one category sitewide? (Remember, each post is required to have at least one category, so we don’t need to check if categories are present with get_the_category_list() too)
• get_the_tag_list() – Are there any tags? Unlike categories, no tags are required.
• get_edit_post_link() – Is the user logged in, and if so, do they have permission to edit this post?

If any of the above conditions are true, the entry-footer markup will display. If not, an empty div will not be output, you don’t have to worry about styles applying to that empty div, and your code will be slightly cleaner.

Feel free to base your own themeslug_entry_footer() function on what you find in Underscores.