Hi Brajesh,
I wanted to share some code I cooked up for one of my sites. I’m not a professional coder like you are, but I’ve found this code works very well for my website.

It’s 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.

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

https://img.iwebnow.net/screenshots/popup.jpg

/*
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();
        });
        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.4);
    }
    .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();
        });
        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.4);
    }
    .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');

/* 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;
}

• This topic was modified 1 year, 9 months ago by Erich199.