Introduction & The Problem
The Jupiter theme from Artbees is one of the best themes I’ve ever used, and I love using it as a framework for most of the websites I build. Like any theme though, it doesn’t come with every feature and function you need, and requires some customization and tweaking to get things just right.
When building a recent website for Paddle Monster, the awesome online training community for Standup Paddleboarders, we needed nested comments enabled in their bbPress forum, because it was too difficult to understand the context for replies in really long threads, and Jupiter did not support these out of the box.
The Solution
The solution was fortunately pretty simple. Since Jupiter uses it’s own bbPress template overrides, I just needed to override a few of those templates in my child theme, and reconfigure some CSS. Hopefully Artbees will incorporate these changes or similar to support nested bbPress replies. Until then, here’s all you need to do:
*** Also make sure you have nested comments enabled in Settings > Forums. ***
Add in Child Theme Override for loop-replies.php – place the following code into a new file in yourchildtheme/bbpress/loop-replies.php
<?php /** * Replies Loop * * @package bbPress * @subpackage Theme */ ?>
<?php do_action( 'bbp_template_before_replies_loop' ); ?>
<ul id="topic-<?php bbp_topic_id(); ?>-replies" class="forums bbp-replies">
<li class="bbp-header"> <?php bbp_get_template_part('meta', 'single-topic'); ?></li><!-- .bbp-header -->
<li class="bbp-body">
<?php if ( bbp_thread_replies() ) : ?>
<?php bbp_list_replies(); ?>
<?php else : ?>
<?php while ( bbp_replies() ) : bbp_the_reply(); ?>
<?php bbp_get_template_part( 'loop', 'single-reply' ); ?>
<?php endwhile; ?>
<?php endif; ?>
</li><!-- .bbp-body -->
<li class="bbp-footer">
<div class="bbp-topic-action">
<?php bbp_user_subscribe_link( array('before' => '') ); ?> | <?php bbp_user_favorites_link(); ?>
</div>
</li>
</ul><!-- #topic-<?php bbp_topic_id(); ?>-replies -->
<?php do_action( 'bbp_template_after_replies_loop' ); ?>
Apply the necessary CSS styling – feel free to adjust as necessary:
#bbpress-forums .bbp-replies li:not([class]) .bbp-reply-content { margin-left: 90px; text-align: left; position: relative; padding: 5px 70px 5px 20px; min-height: 60px; border: 1px solid #eee; background-color: #fff; border-radius: 3px; margin-bottom: 15px; } #bbpress-forums .bbp-replies li:not([class]) .bbp-reply-content:before { position: absolute; top: 32px; left: -7px; width: 14px; height: 14px; border: 1px solid #eee; border-right: none; border-top: none; background-color: #fff; content: ""; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } #bbpress-forums .bbp-threaded-replies { margin-left: 50px !important; }
That’s it! You should now have nicely styled and functional nested replies in bbPress using the Jupiter theme. I hope that was helpful for you. If you have any questions or comments, do let me know!