How to Mark Topics as Read in BBPress Plugin for WordPress
BBPress is forums software, initially created as a standalone installation which could be integrated with WordPress, it is now a full on WP plugin that uses custom post types, the same user database, and comes with all of the tools that we can use on any other custom post type in WordPress. A highly requested feature that seems to have tons of folks stumped is how to have some type of visual indicator as to whether or not a particular thread has been read by a user or not.
Read the explanation below if you’re not sure what I’m talking about, or jump right to the code/how to.
In other words, say a forum has three topics in it:
- Topic Thread #1
- Another Topic Thread
- Our Final Topic Thread!
When a user comes to the site and reads Topic Thread #1, we want to let them know (the next time they come back) if there have been any new posts since then. And we want to do it easily, visually and quickly (ie, don’t make them remember how many replies were in the post previously.)
So the next time they come back they’ll see something like this:
- You Read This: Topic Thread #1
- Another Topic Thread
- Our Final Topic Thread!
Except we won’t use text, we’ll just change some colors. Here’s how.
Visually Mark Threads as Read in BBPress
- In Your BBPress Theme, find the file that controls the loop of topics in your forums list. For my particular theme, it’s a file called loop-single-topic.php
- Find this bit of code:
<a class="bbp-topic-permalink" href="<?php bbp_topic_permalink(); ?>" title="<?php bbp_topic_title(); ?>"><?php bbp_topic_title(); ?></a>This is on line 48 of the file (as of BBPress 2.2.2).
- Replace that line with this:
<a class="bbp-topic-permalink" href="<?php echo bbp_get_topic_last_reply_url( $topic_id ); ?>" title="<?php bbp_topic_title(); ?>"><?php bbp_topic_title(); ?></a> - Now open up your theme’s style.css file and add in this line:
a.bbp-topic-permalink:visited {color:#bbb}
That’s it!
How about an Explanation?
What we do here is first replace the standard link to the topic with a link to the most recent reply (which is more useful anyway, in my opinion, especially for dedicated users who are reading lots of replies). That means that the URL changes every time. In our example list of posts above, the Topic Thread #1 post would have a basic URL of something like this:
http://myforum.com/topic/topic-thread-1/
And any replies to that would have a URL of something like this:
http://myforum.com/topic/topic-thread-1/#postid-1
Every time a new topic gets posted, that #postid-1 increments by 1. That is, it becomes postid-2, postid-3, and so on.
bbp_get_topic_last_reply_url( $topic_id ); generates the link to the most recent reply.
So every time a new post is added, the URL on the topics list gets changed, and we can then simply use CSS to tell the browser to display that content differently. In this case we tell it to make the link the color #bbb, which is a shade of gray. You could use fancy CSS3 tricks like content and before to get even more creative, or just background images, whatever your brain can dream up!
Up Next: How to Reverse the Order of Shipping Options in Woocommerce