This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
Adding an after-post line of information on the categories, tags, and comments encourages participation and provides organized site-level navigation to your site visitors.
With the category — or categories — tags, and comments all one quick click away, your readers are more likely to read more of your posts and pages, dive deeper into your content, and add their voices to the community feedback in the form of new comments.
Because time on-site and page views are good for your site and your visitors, let’s explore two variations on a custom “meta byline” function, which we’ll presume you want at the end of your posts (the hook used determines the general placement).
The difference will be primarily one of CSS — the formatting and presentation of the function’s output. In short, we’ll learn how similar functions can be styled and tweaked to make either of these two examples:
Summary Line of Categories, Tags, and Comment Count
To create the output, add the following to custom_functions.php:
function show_cats_tags_comments_one() {
?>
<div class="my-post-endings">
<p class="cats-in-posts"><?php echo get_the_category_list(', '); ?> | </p>
<?php the_tags('<p class="tags-in-posts"><span class="my-tag-image"></span>',', ','</p>'); ?>
<p class="comments-in-posts"> | <a href="<?php the_permalink(); ?>#comments" rel="nofollow"><?php comments_number(__('<span class="number-of-comments">0</span> comments', 'thesis'), __('<span class="number-of-comments">1</span> comment', 'thesis'), __('<span class="number-of-comments">%</span> comments', 'thesis')); ?></a></p>
</div>
<?php
}
add_action('thesis_hook_after_post', 'show_cats_tags_comments_one');
remove_action('thesis_hook_after_post', 'thesis_comments_link');
Note the final line. This removes the usual { comments } text — see image below — which is presumed to be a desired omission. If not, you can safely delete that remove_action line from the function above, leaving your site’s posts looking like this:
Adding basic styles to place these three sections (category, tag, comment) on one horizontal line — presuming you don’t assign dozens of categories and/or tags to each post, that is — add this to custom.css:
.custom .my-post-endings { display:block; clear:both; height:3em; }
.custom .my-post-endings .cats-in-posts { float:left; }
.custom .my-post-endings .tags-in-posts { float:left; margin-left:10px; }
.custom .my-post-endings .comments-in-posts { float:left; margin-left:10px; }
The pipe | delimiters offer non-image separation, but are optional, and will appear even if a given post is not assigned tags — removing the pipes can help reduce the visual impact of this if you have some posts with tags, and some without tags.
This is what you should see on featured posts on multi-post pages, and on single post permalinks after your content:
The CSS was simple, and the hover action is similarly simple; Category B below is shown in its “hover” state:
For this example, the font is Georgia, but this can be changed in your custom.css entry, even if your content is rendered using another font family.
Alternate Edition: Category, Tagging, and Comments Counts
At this point, we understand the basic idea — create a function that displays the associated categories, tags, and current number of comments at the end of our posts. Now it’s time to make this line of information more likely to catch the eye.
Too much, and various calls to action and other important page components may be compromised. A subdued monochromatic palette should fit the bill:
To get the look above, first prepare the PHP function much as before — adding a span that prefaces each of our items: categories, tags, comments. This example will demonstrate the use of a single image for all three using the spans created, but the output method provides clear CSS targeting. With simple CSS edits, different images or icons can be used for each of the three, if desired.
Here’s our modified “fancy edition” PHP — add this to custom_functions.php:
function show_cats_tags_comments_two() {
?>
<div class="my-post-stuff">
<p class="cats-in-posts"><span class="my-icon"></span><?php echo get_the_category_list(', '); ?></p>
<?php the_tags('<p class="tags-in-posts"><span class="my-icon"></span>',', ','</p>'); ?>
<p class="comments-in-posts"><span class="my-icon"></span><a href="<?php the_permalink(); ?>#comments" rel="nofollow"><?php comments_number(__('<span class="number-of-comments">0</span> comments', 'thesis'), __('<span class="number-of-comments">1</span> comment', 'thesis'), __('<span class="number-of-comments">%</span> comments', 'thesis')); ?></a></p>
</div>
<?php
}
add_action('thesis_hook_after_post', 'show_cats_tags_comments_two');
remove_action('thesis_hook_after_post', 'thesis_comments_link');
No more pipes — instead, we’ll be using images replacing those no-content spans to pave the way to visual indicators such as icons. The following CSS presumes you have an image named “my-test-icon.gif” uploaded to your custom area’s /images folder.
For a dash of additional eye appeal, the hover action turns the dark gray links to black on yellow, as shown below on Category B:
Remembering to add your own image path URI, add this to custom.css:
.custom .my-post-stuff { display:block; font-family:arial; line-height:16px; clear:both; height:3em; }
.custom .my-post-stuff a { color:#666; padding:2px 0 2px 2px; text-decoration:none; }
.custom .my-post-stuff a:hover { color:#000; background-color:#fff000; }
.custom .my-post-stuff span.my-icon { display:block; height:16px; width:16px; float:left; background:transparent url('images/my-test-icon.gif') 50% 50% no-repeat; padding-right:10px; }
.custom .my-post-stuff .cats-in-posts { float:left; padding-right:10px; }
.custom .my-post-stuff .tags-in-posts { float:left; padding-right:10px; }
.custom .my-post-stuff .comments-in-posts { float:left; }
Looking good. This function can be expanded or modified to include other actions you or your visitors may want, in addition to the comments, tags, and comments. The CSS can also be modified as much as you like, giving you a strong band of color for a background or anything else you can imagine.
Note that if you have tags displaying in your single posts, a feature in the Thesis admin interface, you may want to “uncheck” that box to avoid duplication of the same information.
Enjoy your new line of “categories, tags, comments” — and be sure to experiment with additional functionality and design choices!