Hello
I’m trying to create a website which is only a forum. Therefore most recent topics posted will be on the homepage. It’s not being used yet, so there are just a couple of test topics.

I wanted to add a column called ‘Views’, so that there are the headings: Topic + Posts + Views +Voices + Freshness

Can anyone help me to do this? As you’ll see from my website (http://psychiatryadvice.com/), I’ve got the ‘Views’ heading in every topic, and not in the grey box where all the other headings are. This is skewing all the info.

I’ve added the Views information by editing loop-single-topic.php and using the plugin WP-PostViews.

I’m presuming it is a CSS issue I’m not addressing?

using:
WordPress 4.5.2 running twentysixteen-child theme
bbPress 2.5.9-6017

Many thanks.

[@robkk Moderator 8 years, 6 months ago]

Yes you would need to adjust some CSS styles from the forum.

The styles specifically are these, although these will change when you reach a specific device width. You will need to adjust the width taking some out of the title section most likely. You might want to also look into adding another column heading for views, by copying the loop-topics.php template into your child theme.

li.bbp-forum-info,
li.bbp-topic-title {
	float: left;
	text-align: left;
	width: 55%;
}
li.bbp-forum-topic-count,
li.bbp-topic-voice-count,
li.bbp-forum-reply-count,
li.bbp-topic-reply-count {
	float: left;
	text-align: center;
	width: 10%;
}

li.bbp-forum-freshness,
li.bbp-topic-freshness {
	text-align: center;
	float: left;
	width: 22%;
}

[@kkpb8084 Participant 8 years, 6 months ago]

Thanks Robkk, but I’m still struggling a little. Are you able to offer any further guidance to help me neaten things up.
I’ve changed my CSS to:

li.bbp-forum-info,
li.bbp-topic-title {
float: left;
text-align: left;
width: 40%;
}
li.bbp-forum-topic-count,
li.bbp-topic-voice-count,
li.bbp-topic-views-count,
li.bbp-topic-reply-count {
float: left;
text-align: center;
width: 8%;
}

li.bbp-topic-freshness {
text-align: center;
float: left;
width: 18%;
}

And I’ve created a loop-topics.php in my child theme which I’ve edited as:

<li class=”bbp-header”>

<ul class=”forum-titles”>
<li class=”bbp-topic-title”><?php _e( ‘Topic’, ‘bbpress’ ); ?>
<li class=”bbp-topic-reply-count”><?php bbp_show_lead_topic() ? _e( ‘Replies’, ‘bbpress’ ) : _e( ‘Posts’, ‘bbpress’ ); ?>
<li class=”bbp-topic-views-count”><?php _e( ‘Views’, ‘bbpress’ ); ?>
<?php if(function_exists(‘the_views’)) { the_views(); } ?>
<li class=”bbp-topic-voice-count”><?php _e( ‘Voices’, ‘bbpress’ ); ?>

<li class=”bbp-topic-freshness”><?php _e( ‘Freshness’, ‘bbpress’ ); ?>

I’ve also edited loop-single-topic.php in my child theme (to get views on topics, rather than the forum as a whole), which I’ve edited as (from about line 86):

<li class=”bbp-topic-reply-count”><?php bbp_show_lead_topic() ? bbp_topic_reply_count() : bbp_topic_post_count(); ?>

<li class=”bbp-topic-views-count”>
<?php _e( ‘Views’, ‘bbpress’ ); ?>
<?php if(function_exists(‘the_views’)) { the_views(); } ?>

<li class=”bbp-topic-voice-count”><?php bbp_topic_voice_count(); ?>

[@robkk Moderator 8 years, 6 months ago]

Something like this might work. In the post views plugin you will need to edit how it displays so it does not show “views” at the end of the number. If you do not want to mess with anymore files, or change the template view, just use the function in this post I created in this kind of similar topic.

https://bbpress.org/forums/topic/new-feature-viewhit-counts/#post-161937
loop-topics.php snippet

<ul class="forum-titles">
	<li class="bbp-topic-title"><?php _e( 'Topic', 'bbpress' ); ?></li>
	<li class="bbp-topic-voice-count"><?php _e( 'Voices', 'bbpress' ); ?></li>
	<li class="bbp-topic-views-count"><?php _e( 'Views', 'bbpress' ); ?></li>
	<li class="bbp-topic-reply-count"><?php bbp_show_lead_topic() ? _e( 'Replies', 'bbpress' ) : _e( 'Posts', 'bbpress' ); ?></li>
	<li class="bbp-topic-freshness"><?php _e( 'Freshness', 'bbpress' ); ?></li>
</ul>

loop-single-topic.php

<li class="bbp-topic-voice-count"><?php bbp_topic_voice_count(); ?></li>

<li class="bbp-topic-views-count"><?php if(function_exists('the_views')) { the_views(); } ?></li>

<li class="bbp-topic-reply-count"><?php bbp_show_lead_topic() ? bbp_topic_reply_count() : bbp_topic_post_count(); ?></li>

CSS

#bbpress-forums li.bbp-topic-views-count {
  float: left;
  width: 15%;
  text-align: center;
}

#bbpress-forums li.bbp-topic-title {
  float: left;
  text-align: left;
  width: 43%;
}

Also make sure to surround your code with the backticks from the code button in the toolbar.

These-> '' <-these

[@kkpb8084 Participant 8 years, 6 months ago]

Thanks so much again for your help. All you’ve suggested has helped neaten things up. I’ve been trying now to adjust the CSS to get the headings and numbers under them to line up, but as you can see, I still can’t figure out how to do that (http://psychiatryadvice.com).

I didn’t want to have to ask for more help, but I’m going to have to! Do you know how to line it all up properly? It’d be nice to widen that grey/yellow/white box with the topics in if that is possible too.

[@robkk Moderator 8 years, 6 months ago]

Did you use the CSS I gave you, it should fix it up if you use it.

Just put the custom css in a child themes style.css file or add it to a custom css plugin.

[@kkpb8084 Participant 8 years, 5 months ago]

Ah yes! I changed the CSS in bbpress.css originally.
Silly me!
Thanks so muck Robkk, I really appreciate it. It looks perfect now 🙂

[@robkk Moderator 8 years, 5 months ago]

See it looks a lot better now. 🙂