Hi guys,

Anyone has a clue on how to make a forum similar to this one http://www.quicksprout.com/forum/

My current forum is http://www.cardzreview.com/forums/ and it sucks.

Any help is highly appreciated.

[@robkk Moderator 10 years, 5 months ago]

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

[@pavle123 Participant 10 years, 5 months ago]

Hey there @Robkk

Thanks so much.

Here are some key things I like about that Forum :

-Login/Register buttons above the forum
-Layout of the forum with nice round images of members and the images for read/unread posts
-Really like statistics at the bottom
-Especially like “New Thread button”

Any ideas? Thanks for your time Robkk.

[@robkk Moderator 10 years, 5 months ago]

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 Moderator 10 years, 5 months ago]

If this confuses you wait til Sunday or if anyone knows what I ment and wants to properly describe every detail and post code

[@pavle123 Participant 10 years, 5 months ago]

Hey Robkk,

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

In the meanwhile I might experiment with the insightful instructions above.

Appreciate your time and patience.

[@robkk Moderator 10 years, 5 months ago]

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

[@netweb Keymaster 10 years, 5 months ago]

Nice work @robkk, looks really good and thanks for helping out, much appreciated 🙂

One thing, I did remove the link to the direct link to quicksprout envelope/mail images, more than happy to take inspiration of sites design and write awesome code as you have above. We should not be grabbing the sites image assets (or any assets actually) as they may not be open source and/or royalty free. There are plenty of resources on the net for open source/royalty free icons/images 😉

I’ll tell you the rest when im done , because right now im having some trouble

What are you having trouble with? Anything I can help out here to get you sorted?

[@robkk Moderator 10 years, 5 months ago]

@netweb no problem

ok i understand , idk why i posted the link to their images haha

and i got it figured out , just wasnt showing up for some reason on my local site after i just changed the word new topic to new thread …was kind of weird.

the last thing is just paste this code above
<?php do_action( 'bbp_template_before_topics_index' ); ?>

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

it should show the droplink

[@pavle123 Participant 10 years, 5 months ago]

Wow @Robkk

Amazing work man, thanks so much. I will need few days to set everything up.

I need to figure out where to post each code in my theme,etc.

Should I also put codes in bbPress plugin, or not? Since it might get deleted once updated, right?

[@robkk Moderator 10 years, 5 months ago]

Amazing work man, thanks so much.

your welcome 😀

I need to figure out where to post each code in my theme,etc.

Should I also put codes in bbPress plugin, or not? Since it might get deleted once updated, right?

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

[@pavle123 Participant 10 years, 5 months ago]

@Robkk

Thanks so much. I will do that tonight.
I was ready to give up on this idea of improving my forum, but I got fired up by your knowledge that I will start implementing what you shared with me here.

I will be posting updates and what I did shortly.

[@pavle123 Participant 10 years, 5 months ago]

@Robkk

Hey Robkk,

Okay I started customizing ,and I started with new thread button.
I did this as you suggested

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

And I copied it into my child theme functions.php, but it all looked messed up, is the functions.php the place to copy this code or not?

Thanks again, you are amazing.

[@robkk Moderator 10 years, 5 months ago]

What are you doing in functions.php ?? I don’t think I mention anything about function.PhP in thread button

[@pavle123 Participant 10 years, 5 months ago]

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?

[@pavle123 Participant 10 years, 5 months ago]

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?

[@robkk Moderator 10 years, 5 months ago]

@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 Participant 10 years, 5 months ago]

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 🙂

[@pavle123 Participant 10 years, 5 months ago]

Okay I am here with “New Thread button”

1)Downloaded folder content-archive-topic.php from my bbPress plugin folder.
2)Uploaded whole folder to my child theme
here is how it looks now

On top of the code in that folder I added this code :

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

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

So now my folder looks like this

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

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

<?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>

Unfortunatlelly I am unable to see new thread link anywhere, what am I doing wrong guys? @netweb @robkk ?

[@robkk Moderator 10 years, 5 months ago]

what am I doing wrong guys?

reading carefully

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

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

like this

<?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(); ?>

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

	<?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>

tell me if you got it to work now

[@robkk Moderator 10 years, 5 months ago]

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 Participant 10 years, 5 months ago]

Thanks for all the help @Robbk.

Unfortunately I pasted the code correctly, but I still do not see a link anywhere, will try to figure out why. Any other ideas perhaps? Sorry for bothering you man.

[@robkk Moderator 10 years, 5 months ago]

Unfortunately I pasted the code correctly, but I still do not see a link anywhere

well like is said i had trouble with it too i had the code in my content-archive-topic.php and then it disappeared for some reason.

But before i had the code there i just threw it into loop-topics.php so it should work.

But if your a style freak like me you will get annoyed whenever you look at your favorited topics and subscribed topics and also see the new thread link there too.

Any other ideas perhaps?

No idea, flush cache?

Sorry for bothering you man

nah your not bothering

ok delete the new thread code from content-archive-topic.php

and now copy loop-topics.php into your child theme

the entire code of loop-topics.php should look like this

<?php

/**
 * Topics Loop
 *
 * @package bbPress
 * @subpackage Theme
 */

?>

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

<ul id="bbp-forum-<?php bbp_forum_id(); ?>" class="bbp-topics">

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

	<li class="bbp-header">

		<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-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>

	</li>

	<li class="bbp-body">

		<?php while ( bbp_topics() ) : bbp_the_topic(); ?>

			<?php bbp_get_template_part( 'loop', 'single-topic' ); ?>

		<?php endwhile; ?>

	</li>

	<li class="bbp-footer">

		<div class="tr">
			<p>
				<span class="td colspan<?php echo ( bbp_is_user_home() && ( bbp_is_favorites() || bbp_is_subscriptions() ) ) ? '5' : '4'; ?>">&nbsp;</span>
			</p>
		</div><!-- .tr -->

	</li>

</ul><!-- #bbp-forum-<?php bbp_forum_id(); ?> -->

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

[@netweb Keymaster 10 years, 5 months ago]

Things are getting tricky and or difficult following the actual code here 😉

I just made a GitHub gist containing the original bbPress files and then progressing through each of the above posts revising the code in each file.

You can see it here https://gist.github.com/ntwb/695bc26b44d6458040c7

Scroll to the very bottom and you will see the descriptions of the revisions and links to each change 🙂

If you have a GitHub account you can ‘fork’ my Gist, edit and revise your own versions, it makes sharing code so much simpler to follow, but is only a suggestion of course, don’t feel obliged to have to create a GitHub account and continue as you are here if you like. Showing revisions, green code is new code and red is removed code along with line numbers is what makes version control so awesome, you are able to clearly see what has changed and where exactly 🙂

Here all the revisions listed in one hit https://gist.github.com/ntwb/695bc26b44d6458040c7/revisions

[@robkk Moderator 10 years, 5 months ago]

Things are getting tricky and or difficult following the actual code here

XD haha did not know you were tracking this

i created a github account, was gonna end up with one anyway, so ehh why not now.

[@pavle123 Participant 10 years, 5 months ago]

Thanks guys, you were really helpful.

I do have a new thread link which as @Robkk suggested looks a bit messy in this location. I´ll try to either find it a new location, or stylize it so that it looks better.

Thanks a lot! You can check out how it looks on my forum.