Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to make similar bbpress forum to QuicSprout one?

Viewing 25 replies - 1 through 25 (of 29 total)

  • Robkk
    Moderator

    @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


    Pavle123
    Participant

    @pavle123

    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

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

    @robkk

    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

    @pavle123

    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

    @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


    Stephen Edgar
    Keymaster

    @netweb

    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

    @robkk

    @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

    @pavle123

    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

    @robkk

    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

    @pavle123

    @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

    @pavle123

    @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

    @robkk

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


    Pavle123
    Participant

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


    Pavle123
    Participant

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


    Robkk
    Moderator

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

    @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 πŸ™‚


    Pavle123
    Participant

    @pavle123

    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
    content.php

    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

    @robkk

    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

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

    @pavle123

    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

    @robkk

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

    Stephen Edgar
    Keymaster

    @netweb

    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

    @robkk

    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

    @pavle123

    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.

Viewing 25 replies - 1 through 25 (of 29 total)
  • You must be logged in to reply to this topic.