bbPress.org

Re-posting this. For some reason my original post got marked as spam. So, this time I took out the screenshot link.

I wanted to share some code I cooked up for one of my sites. I want to disclaimer that I’m not a professional coder but through lots of trail, error, and zero hair left I’ve found this code works very well for my website.

There are two functions. The first one creates a “New Topic” button and uses a template hook to display it above the forum list. The second function does the same thing, but just uses a hook to display the button over the single topic display to create a “New Reply” button. The second function is basically the first function but renamed and uses a different template hook.

These buttons, when clicked, open a modal that has the shortcode for a new topic/new reply. The code also passes the current forum id into the shortcode, so there is no need for the user to select a forum from the drop down menu. In my screenshot, I’ve enabled the WYSWYG TinyMCE editor and all buttons on it work properly. In addition, I’ve fixed it so that the user can’t accidentally close the modal. They have to physically click on the “Close” button in order to close it. I decided to do this for simplicity sake and so my users won’t accidentally click off the screen and close the modal.

I made it because I was tired of users getting confused about the new topic/new reply topic area of bbpress. So, in order to bring it more in line with other forum software I made this code (through many trial and errors). I hope that it can help anyone in the community who’s using bbpress for their forums. Oh, I also made sure it displays nicely in mobile size screens. I added a screenshot to show people what it looks like.

/*
This function adds the New Topic button to bbpress above the forum list template
*/

function add_new_topic_button() {
    $forum_id = bbp_get_forum_id();
    ?>
    <button id="new-topic-button">New Topic</button>
    <div id="new-topic-modal">
        <button id="close-modal-button">Close</button>
        <div class="modal-content">
            <?php echo do_shortcode('[bbp-topic-form forum_id=' . $forum_id . ']'); ?>
        </div>
    </div>
    <script>
    jQuery(document).ready(function($) {
        var newTopicButton = $('#new-topic-button');
        var modal = $('#new-topic-modal');
        var close = $('#close-modal-button');
        newTopicButton.click(function() {
            modal.show();
            setTimeout(function() {
                if (typeof bp !== 'undefined' && typeof bp.mentions !== 'undefined') {
                    bp.mentions.tinyMCEinit();
                }
            }, 1000);
        });
        close.click(function() {
            modal.hide();
        });
        $('textarea#bbp_topic_content').addClass('bbp_topic_content');
    });
    </script>
    <style>
    #new-topic-modal {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.6);
    }
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
        max-width: 600px;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #close-modal-button {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        margin-right: 10px;
        margin-top: 40px;
    }
    #close-modal-button:hover,
    #close-modal-button:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    @media only screen and (max-width: 600px) {
        .modal-content {
            width: 90%;
            max-width: 90%;
        }
    }
    </style>
    <?php
}
add_action('bbp_template_before_single_forum', 'add_new_topic_button');

/*
This function adds the New Reply button to bbpress above the single topic template
*/

function add_new_reply_button() {
    $forum_id = bbp_get_forum_id();
    ?>
    <button id="new-topic-button">New Topic</button>
    <div id="new-topic-modal">
        <button id="close-modal-button">Close</button>
        <div class="modal-content">
            <?php echo do_shortcode('[bbp-reply-form forum_id=' . $forum_id . ']'); ?>
        </div>
    </div>
    <script>
    jQuery(document).ready(function($) {
        var newTopicButton = $('#new-topic-button');
        var modal = $('#new-topic-modal');
        var close = $('#close-modal-button');
        newTopicButton.click(function() {
            modal.show();
            setTimeout(function() {
                if (typeof bp !== 'undefined' && typeof bp.mentions !== 'undefined') {
                    bp.mentions.tinyMCEinit();
                }
            }, 1000);
        });
        close.click(function() {
            modal.hide();
        });
        $('textarea#bbp_topic_content').addClass('bbp_topic_content');
    });
    </script>
    <style>
    #new-topic-modal {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.6);
    }
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
        max-width: 600px;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #close-modal-button {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        margin-right: 10px;
        margin-top: 40px;
    }
    #close-modal-button:hover,
    #close-modal-button:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    @media only screen and (max-width: 600px) {
        .modal-content {
            width: 90%;
            max-width: 90%;
        }
    }
    </style>
    <?php
}
add_action('bbp_template_before_single_topic', 'add_new_reply_button');

/*
This function calls the Buddypress js file to bbpress pages only so that @mentions can work in the modal
*/

function enqueue_buddypress_js() {
    if ( function_exists( 'bp_is_active' ) && bp_is_active( 'mentions' ) ) {
        wp_enqueue_script( 'bp-mentions-js' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_buddypress_js' );

/* Additional Custom Forum Modal CSS This will hide the default new topic/reply form boxes but shouldn't hide the ones inside of the modal */ 

.modal-content .bbp-topic-form, .modal-content .bbp-reply-form {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.bbpress-wrapper > .bbp-topic-form {
  display: none;
}

.modal-content .bbp-topic-form legend {
	display: none;
}

#new-topic-button {
  float: right;
  margin-right: 10px;
}

#bbpress-forums > .bbp-reply-form {
	display: none;
}