[andys27]

I’ve just started using bbpress and I like the simplicity of it. I’ve been trying to customize it to my need for the past 2 weeks (yeah, I am slow). This is something that I came up with that I’d like to share with the community since I’ve learned so much from over here. And I am really proud of myself for coming up with this since I usually suck at php and css.

If you want a new topic, or new reply button on top of your topics list ore replies list.
You can just add this code to your functions.php and you are good to go. This way, it will only show a “new topic” link if the user is logged in. If they are not, then it’ll show a text saying “to post a new topic register or login”. Of course, you can change the code to whatever you want. And make sure you change the links to your login and register pages. And you can add class to customize the text with css.

//function to add new topic thread
function bbp_login_thread_link() {
if ( is_user_logged_in() ) { ?>

<a href="#new-post">Create a new thread</a>

<?php }

else { ?>

<p> To create a new thread <a href="http://yourwebsite.com/login">login</a> or <a href="http://yourwebsite.com/register">register</a></p>

<?php }

}

add_action( 'bbp_template_before_single_forum' , 'bbp_login_thread_link' );

//function to add new reply thread
function bbp_post_reply_link() {
if ( is_user_logged_in() ) { ?>

<a href="#new-post">Post a Reply</a>

<?php }

else { ?>

<p> To post a reply <a href="http://yourwebsite/login">login</a> or <a href="http://yourwebsite/register">register</a></p>

<?php }

}

add_action( 'bbp_template_before_single_topic' , 'bbp_post_reply_link' );

I am hoping you guys can add this to this article which has examples of layout and functionality. That article helped me immensely and I will feel honoured to have contributed to it.

[Robkk]

@gogitossj34 this code is what your problem is, it changes the size of all avatars in your site.

.avatar {
width: 60px;
height: 60px;
margin: 0 0 1.5rem;
border: 1px solid;
border-radius: 50%;
}

the distorted avatar image is because there is a function in your templates that is used to call the user avatar , and in the function it is proportioned to be at 14px X 14px. your css code stretches this out 14px avatar to be 60px X 60px causing a distorted avatar image.

to remove the distorted image just add this to custom css

.avatar-14 { display: none !important; }

it should work

i dont know what exactly is causing your double avatars though , i would guess that it is the “started by” avatar like how these forums have.

But i am not for sure.

If you want to keep the avatar next to freshness only tell me

I’m not a programmer or such so I cannot understand what you’re saying

im no programmer i had practice with trial and error, and all this is basically common sense

[peter-hamilton]

Site was offline due to problems at host servers, back online now and made few CSS adjustements.

BBFacelook

[Robkk]

3. My main beef with bbPress is the way categories and forums are shown. Forums are placed under categories like sub-forums which looks un-forum like to me.

bbpress has worked on this , https://bbpress.trac.wordpress.org/ticket/1958

since you commented on my layout topic too, ill tell you which one i used , which is

https://bbpress.trac.wordpress.org/timeline?from=2014-03-04T09%3A51%3A07Z&precision=second

i copied all of his files from pastebin and used it as my own. then i style with css

But another way to the have the layout lets say like phpbb , is download Lynqs starter theme.

https://github.com/EpicWebs/bbPress-starter-theme-epicwebs

3. can you give an example of how you would like it to look? doesn’t need to be a bbpress site

heres an example of what he is talkingn about robin

http://thefastdiet.co.uk/forums/

http://teamoverpowered.com/forums/

[Herophantom]

Thank you.

I would also like to update, so after reading some more last night, I found the documentation on the short codes. I tried making a dedicated page and using the short codes to load the main forum index. Now this works in almost every way, including using the proper sidebar that I want, however, the search option at the top is now off set, with the button below the bar instead of next to it. I have been fiddling with the CSS for awhile to see if I can get it to align properly, but so far no luck. And now, even the page provided by the bbpress plugin is doing the same thing. So maybe I messed something up, or maybe I’m just missing something, but if I can get this solved, I will have a perfect solution.

[Robkk]

Any idea how this forum I sent you a link to has them with these icons,etc?

you can use any icon fonts and css to style these with :before or :after

[Pavle123]

Haha I am not that confused 😀

Joking, I would be totally lost without you man, thanks for everything.

I just had to add !important; thingy to the css of my child theme.

.bbp-stats .bbp_stats li {
    margin: 0;
    display: inline-block <strong>!important;</strong>
    padding: 5px;
}

Now my stats look neat. Any idea how this forum I sent you a link to has them with these icons,etc?

Even now my stats look neat. Will try to move on to the “new thread button” now, and post what I did 🙂

[Robkk]

@pavle123 damn your confused haha

read everything carefully

Look at the code i tell you to put in templates carefully , it is just a snippet of the template with each new code in it. So you have to copy the original template to your child theme. find where the new code on here is placed, compare it to the original and place the new code in your copy of the templates in your child theme.

nothing goes into your child theme functions.php

How to make similar bbpress forum to QuicSprout one?

you copy bbpress templates into your child theme so its okay when bbpress updates, i explain exactly what template to copy and also i show you a snippet of where to put the code by the original code.

you put custom css into anything that can handle custom css

in bbpress.css in your child theme(you copy the original in your child theme)
in your child themes css stylesheet
the jetpack plugin module custom css
a standalone custom css plugin

if your still confused read https://codex.bbpress.org/step-by-step-guide-to-setting-up-a-bbpress-forum-part-2/

[Pavle123]

Oh crap, do you mean I should copy the whole folder content-archive-topic.php inside my theme? Well that makes sense 🙂

Here is what I did :

1) Uploaded content-archive-forum.php to my child theme folder.
2) Added this piece of code at the bottom

<?php do_action( 'bbp_template_after_forums_index' ); ?>

</div>

<?php echo do_shortcode("[bbp-stats]"); ?>

3) Added this CSS in my style.css of child theme (CSS is not working unfortunately, not sure why?)

.bbp-stats .bbp_stats {
    list-style-type: none;
    display: block;
    text-align: center;
    margin-left: 0px;
    float: none;
}

.bbp-stats .bbp_stats li {
    margin: 0;
    display: inline-block;
    padding: 5px;
}

So, now stats are shown at the bottom, but CSS is not targeting the stats.

Okay about “new thread button” I was unable to make it work. Here is what I did.
1) I added content-archive-topic.php folder from my bbPress plugin content-archive-topic.php into my child theme folder.

2)Added this code

<?php do_action( 'bbp_template_before_topics_index' ); ?>

<a class="bbp-new-topic-button" href="#new-post">New Thead</a>

At ABOVE the content-archive-topic.php

<?php

/**
 * Archive Forum Content Part
 *
 * @package bbPress
 * @subpackage Theme
 */

?>

<div id="bbpress-forums">

	<?php if ( bbp_allow_search() ) : ?>

		<div class="bbp-search-form">

			<?php bbp_get_template_part( 'form', 'search' ); ?>

		</div>

	<?php endif; ?>

	<?php bbp_breadcrumb(); ?>

	<?php bbp_forum_subscription_link(); ?>

	<?php do_action( 'bbp_template_before_forums_index' ); ?>

	<?php if ( bbp_has_forums() ) : ?>

		<?php bbp_get_template_part( 'loop',     'forums'    ); ?>

	<?php else : ?>

		<?php bbp_get_template_part( 'feedback', 'no-forums' ); ?>

	<?php endif; ?>

	<?php do_action( 'bbp_template_after_forums_index' ); ?>

</div>

<?php do_action( 'bbp_template_after_forums_index' ); ?>

</div>

<?php echo do_shortcode("[bbp-stats]"); ?>

But its not working for me.

Any ideas?

[Pavle123]

Hm, okay I did not know where elswehere to put it.

<?php

/**
 * Archive Topic Content Part
 *
 * @package bbPress
 * @subpackage Theme
 */

?>

<div id="bbpress-forums">

	<?php if ( bbp_allow_search() ) : ?>

		<div class="bbp-search-form">

			<?php bbp_get_template_part( 'form', 'search' ); ?>

		</div>

	<?php endif; ?>

	<?php bbp_breadcrumb(); ?>

	<?php if ( bbp_is_topic_tag() ) bbp_topic_tag_description(); ?>

	<?php do_action( 'bbp_template_before_topics_index' ); ?>

	<?php if ( bbp_has_topics() ) : ?>

		<?php bbp_get_template_part( 'pagination', 'topics'    ); ?>

		<?php bbp_get_template_part( 'loop',       'topics'    ); ?>

		<?php bbp_get_template_part( 'pagination', 'topics'    ); ?>

	<?php else : ?>

		<?php bbp_get_template_part( 'feedback',   'no-topics' ); ?>

	<?php endif; ?>

	<?php do_action( 'bbp_template_after_topics_index' ); ?>

</div>

So this obviously does not go into css, so do you know where inside my child theme should I put the content-archive-topic.php code?

[gogitossj34]

Hey guys, I’ve been looking everywhere for this
I installed bbpress and made a forum ( just testing ).
I want my forum to be full width and without the side bar. Tried the “1 column full width” layout and some custom css.
The best I’ve got is a no-full-width forum WITHOUT side bar in the /forum/ page.
But further than that like /forum/topic/… the side bar reappear.
My site is http://mmo4teens.netai.net/ and my theme is Stargazer Colloquium.
Any help is appreciated.
Thanks in advance.

[ubicray]

Hi all, I think name of the topic can explain the situation I am in. Everything is updated to its latest.
For those who want to see the an example topic that’s affected(Also comments have this):
http://forum.gamesap.az/forums/topic/csgo-yeni-baslayanlar-ucun-qisa-m%C9%99lumat/

I am not a magician with CSS, but when I view the source of page, I see that in that area, I can’t seem to see the beginning og </p> paragraph (closing tag is there)
So I guess the problem is, bbpress is not giving the paragraph a proper starting point.
Have no idea how to fix this, Would be grateful for any help

[Robin W]

Ok, the code works (just retested it on my site), but the link you supplied is not using it.

are you sure you put

/* =Revisions
————————————————————– */

#bbpress-forums .bbp-topic-content ul.bbp-topic-revision-log,
 #bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log,
 #bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log {
 Display : none !important ;
 }

in

wp-content/themes/divi/style.css

Do you have caching software running?

[kimberlyywp]

I just changed the code and put that in the style.css and I’m still seeing the edits: http://livessoonforgotten.com/members-3/user-groups/in-memorandum/forum/topic/test-memorial/

[Robin W]

try this in your style.css

`/* =Revisions
————————————————————– */

#bbpress-forums .bbp-topic-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log {
Display : none !important ;
}

[Robin W]

yes, you have a choice

1. You could put it in your style.css – that is a file called style.css that you will find in your theme

wp-content/themes/%yourthemename%/stle.css

where %yourthemename% is the name of your theme

Just drop it at the end.

This will then override the code in bbpress.css, and is the easiest way

2. Otherwise you can create a directory called css in your theme

/wp-content/themes/%yourthemename%/css

and copy the existing bbpress.css across to get

/wp-content/themes/%yourthemename%/css/bbpress.css

but here’s the thing, you then need to find and edit the existing display lines, just adding code will give two sets, and your maybe won’t take preference

the lines you are looking start at line 904 and say

/* =Revisions
-------------------------------------------------------------- */

#bbpress-forums .bbp-topic-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log {
	border-top: 1px dotted #ddd;
	width: 100%;
	margin: 0;
	padding: 8px 0 0 0;
	font-size: 11px;
	color: #aaa;
}

#bbpress-forums .bbp-topic-content ul.bbp-topic-revision-log li,
#bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log li,
#bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log li {
	list-style-type: none;
}

you just need to edit that to

`/* =Revisions
————————————————————– */

#bbpress-forums .bbp-topic-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log {
Display : none ;
}

come back if we can help further

[Robkk]

Thanks so much. I am not an expert in this, so I will wait until Sunday.

haha im no expert , im just some guy helping out people on here the best i can

-Login/Register buttons above the forum

quicksprout has ajax login and its also in a popup window

so if you want that install wp-modal-login

after that copy your content-archive-forum.php to your child theme

and make sure that is has this code inside of it , heres a snippet

<?php do_action( 'bbp_template_before_forums_index' ); ?>

	<?php if ( bbp_has_forums() ) : ?>
	
	<?php if ( is_user_logged_in() ) {

} else { ?>

<div class="bbp-modal-login"> 

 <?php add_modal_login_button( $login_text = 'Login', $logout_text = 'Logout', $logout_url = 'http://sitename', $show_admin = true ); ?>
 
 </div>
 
   <?php
};
?>

		<?php bbp_get_template_part( 'loop',     'forums'    ); ?>

	<?php else : ?>

		<?php bbp_get_template_part( 'feedback', 'no-forums' ); ?>

	<?php endif; ?>

style the link to whatever you want with custom css
here is a template

.bbp-modal-login a.login.wpml-btn.login-window {
float: left;
padding:5px;
color:#fff;
background:#333; 
text-decoration:none;
text-transform:uppercase;  
}

and like i said you could also do the shortcode version too

nice round images of members

i saw your site , and see you already have this

images for read/unread posts

if you want the images here

the whole functionality of the unread posts on their forums is like 2 unread posts plugins from the wordpress plugin respository mixed together

https://wordpress.org/plugins/bbpress-mark-as-read/
https://wordpress.org/plugins/bbpress-unread-posts/

i cant really help on this

statistics at the bottom

this should be the bottom of your content-archive-forum.php

	<?php do_action( 'bbp_template_after_forums_index' ); ?>

</div>

<?php echo do_shortcode("[bbp-stats]"); ?>

to style the bbpress statistics shortcode put content-statistics.php into your child theme

this should be your entire content-statistics.php

<?php

/**
 * Statistics Content Part
 *
 * @package bbPress
 * @subpackage Theme
 */

// Get the statistics
$stats = bbp_get_statistics(); ?>

	<?php do_action( 'bbp_before_statistics' ); ?>
	
	<div class="bbp-stats">
	
	<ul class="bbp_stats">

	<li> <?php _e( 'Users', 'bbpress' ); ?></dt>
		<strong><?php echo esc_html( $stats['user_count'] ); ?></strong></li> 

	<li> <?php _e( 'Topics', 'bbpress' ); ?></dt>
		<strong><?php echo esc_html( $stats['topic_count'] ); ?></strong></li> 

	<li> <?php _e( 'Replies', 'bbpress' ); ?></dt>

		<strong><?php echo esc_html( $stats['reply_count'] ); ?></strong></li> 
		
		 </ul>
		 
		 </div>
		
	<?php do_action( 'bbp_after_statistics' ); ?>

</dl>

<?php unset( $stats );

add this for custom css

.bbp-stats .bbp_stats {
    list-style-type: none;
    display: block;
    text-align: center;
    margin-left: 0px;
    float: none;
}

.bbp-stats .bbp_stats li {
    margin: 0;
    display: inline-block;
    padding: 5px;
}

“New Thread button”

this is just a drop link , example of a drop link would be to put #new-post at the end of the url of this topic and you will see that you will end up at the new topic/reply form

copy content-archive-topic.php into your child theme right now then

ILL tell you the rest when im done , because right now im having some trouble

[Robkk]

For login and register you could create individual pages for login and registration , you could use the login and register form short codes by bbpress and put them in your pages or if you use theme my login or something similar that creates custom frontend membership pages use that. And put an HTML link to both pages above loop-forums.php or above the call of loop-forums.php in archive-forum.php

Round avatar images use border-radius:50%; or something like that , you could probably right click inspect element target the avatar image and get the CSS code right off of quick sprout and put that in your custom css

Unread posts you have to wait til its sunday (time I will be home to see my desktop)

Stats at bottom you could use the bbpress stats short code , if you want it in your templates use the php do shortcode function with the bbpress stats short code

I don’t know how the new thread button fuctions , but you could create a page let’s say “new topic” and link to it the same as the login/register buttons

[Robkk]

Definitely a lot of CSS work

Tell me what you like about that forum

And I might give you some pointers on how to do what , but you gotta wait awhile til I get on my desktop CPU right now I’m on my cell

[Leonyipa]

yes, but it doesn’t work 🙁

I also found the code is in
/public_html/wp-content/plugins/bbpress/templates/default/css/bbpress.css

I directly change the number of

#bbpress-forums div.bbp-topic-content img,
#bbpress-forums div.bbp-reply-content img {
max-width: 100%;
}
However, no matter what number I change to, it still doesn’t work.
The width of the image still remain 100%

[Robkk]

change the numbers to whatever you want

#bbpress-forums div.bbp-reply-content img, #bbpress-forums div.bbp-topic-content img {
max-width: 500px;
max-height:250px;
height: auto;
}

you add this into anywhere where you can have custom css

in bbpress.css in your child theme(you copy the original in your child theme)
in your child themes css stylesheet
the jetpack plugin module custom css
a standalone custom css plugin

[Robkk]

i also forgot that buddypress uses a nav id of #subnav but thats easy to fix just change subnav to bbnav

so all the code would be

to register the menu

function register_menu() {
	register_nav_menu('bbmenu', __('bbpress Forum Menu'));
}
add_action('init', 'register_menu');

place this below <?php do_action( 'bbp_template_before_forums_loop' ); ?>

<nav id="bbnav" role="navigation">

<?php
if ( has_nav_menu( 'bbmenu' ) ) { /* if menu location 'bbmenu' exists then use custom menu */
      wp_nav_menu( array( 'theme_location' => 'bbmenu') ); 
}
?>

</nav>

now add custom css

#bbnav ul {
	font-size: 13px;
	list-style: none;
	margin: 0;
}

#bbnav li {
list-style-type: none;
display: inline-block;
margin: 6px 4px;
}

#bbnav a {
text-decoration: none;
color: #555;
background: #ddd;
padding: 2px 8px;
border: 1px solid #e4e4e4;
}

#bbnav li a:hover {
background: #333;
color: #fff;
border-color: transparent;
text-shadow: none;
}

ok i found a css way of showing the menu only on the forum archive page

create a page called forums that leads to the forum archive

now make sure to grab the page id

heres how to get the page id

now add this css , replace (#) with the page number id for the forum archive page

.post-# #bbnav {
	background: none;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}

#bbnav {
	display: none;  
}

now it should only show on the forum archive page only

not in subscribed forums anymore

if you dont see the menu , you probably need a special way to register menus for your theme

[Robkk]

@leonyipa ok great on the youtube video width , at least the code is doing something

there is probably another function on the web that i can direct you to if i find something that works on both height and width, so wait til i come back with a function that works for both

if i give you a new function delete the old one

paste codes into a child themes functions.php and style.css so that the code wont disappear during theme upgrades

and dont edit the core files inside of bbpress
copy those files into your child theme so you can be safe on bbpress plugin upgrades

so copy bbpress.css to your child theme, if you dont have a child theme , make one they are great for customizing your bbpress install

for more about customizing bbpress with css , plugins, and functions read this

Step by step guide to setting up a bbPress forum – part 2

[Leonyipa]

I also found the code is in
/public_html/wp-content/plugins/bbpress/templates/default/css/bbpress.css

I directly change the number of

#bbpress-forums div.bbp-topic-content img,
#bbpress-forums div.bbp-reply-content img {
max-width: 100%;
}

However, no matter what number I change to, it still doesn’t work.
The width of the image still remain 100%

[Leonyipa]

Thanks very much @Robkk!!

The youtube video worked!!! I have been looking for the solution for a long time, thanks!
The maximum width of youtube video works really well!!

However, when I change the code to height, it doesn’t work 🙁

Also for the image, I edited the css
because I am using BBPress Default Theme, it doesn’t have a .css and tell me to edit function.php instead
And I paste the code into: /public_html/wp-content/themes/bp-default/functions.php

#bbpress-forums div.bbp-reply-content img, #bbpress-forums div.bbp-topic-content img {
max-width: 100%;
height: auto;
}

but no matter what I change the number, it is still set to 100%.
Did I add the code to the wrong place? or it’s not working?