bbpress menu for mobile

Hi
As with a lot of questions this one involves more of my bbpress questions and I believe this one will take some extra thinking, as I have for weeks so I am turning to you. I cant see what I want being impossible and in fact should in reality be simple but hey what do I know!
Here is the question:

bbpress as no way to edit its pages directly as there not created with shortcodes etc.... All I want to do is place some buttons or a menu above the forum so I can reduce the drop down in the main menu. The buttons would be Latest replies, new top, and latest topics. I do have them in the side bar of the site if you take a look but these show below the forum on a mobile.

http://ohbother.forumite.co.uk/forums/

Any help would be appriciated.

  • Patrick
    • Support Monkey

    Hi there Lee

    I hope you're having a great day!

    Yes, any sidebars on your page will drop beneath the main content area on smaller screens. That is default WordPress behavior.

    Likely the best solution overall would be to create custom templates for your bbPress pages, and include your links in those templates, wrapped in a div container with a specific ID. That div could then be styled with a media query to only display on smaller screens.

    Or, if your active theme has a widget area in the header, you could add those links there, and style that widget with the same media query.

    To get started on customizing bbPress templates, see the bbPress codex here:
    https://codex.bbpress.org/themes/theme-compatibility/template-hierarchy-in-detail/
    https://codex.bbpress.org/themes/theme-compatibility/getting-started-in-modifying-the-main-bbpress-template/

  • Lee
    • Site Builder, Child of Zeus

    Ok this is already going south. Is there a way I can simply put some code in the page.php that will display the three buttons I want, is there an example you can show me. Or should I just pay some one to do what I want as I dont think your support will help this time and if so how much do you think I should budget for? I am not advanced enough yet to be fiddling with this code.

  • Patrick
    • Support Monkey

    Hi again Lee

    Yes, you can do it! :slight_smile:

    Depending on your theme though, you might need to add it to more than just page.php, as bbPress uses various templates from your theme to output its content, as seen in the bbPress template hierarchy:
    https://codex.bbpress.org/themes/theme-compatibility/template-hierarchy-in-detail/

    To help you find exactly which theme template(s) need to be edited, this super-handy little plugin will tell you exactly which template is being used on whatever page you're looking at on your site:
    https://wordpress.org/plugins/what-the-file/

    The following code will work in your templates. It checks if the template is actually outputting any bbPress content and, if so, displays a custom div container with your buttons in it. You'll probably want to add it between the php calls for the post title and the post content.

    <?php if ( is_bbpress() ) : ?>
    <div class="my-bb-mobile">
    <a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-inverse" href="https://forumite.co.uk/forums/" title="Latest Replies" target="_blank">Latest Replies</a> <a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-black" href="https://forumite.co.uk/new-forum-topic/" title="New Topic" target="_blank">New Topic</a> <a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-inverse" href="https://forumite.co.uk/forums/view/latest-topics/" title="Latest Topics" target="_blank">Latest Topics</a>
    </div>
    <?php endif; ?>

    I see on your site that the breakpoint when the sidebar slips beneath the main content area is set at 991px. So this CSS would hide the div container with your buttons by default, and only show it if the screen size is 991px or less:

    .bbpress .my-bb-mobile {display:none;}
    
    @media only screen and (max-width:991px) {
    .bbpress .my-bb-mobile {display:block;}
    }

    You can add the CSS to any custom CSS area in your theme, or to the WordPress Customizer, or use a handy plugin like this one for all your custom CSS needs:
    https://wordpress.org/plugins/simple-custom-css/

    Here's an example of the above code & CSS in action: http://pcwriter.net/forums/

    You'll see that the buttons only display on bbPress pages in my example, and only if the screen size is 991px or less (I've made the background red so it stands out). The CSS will likely need some tweaking to get the buttons looking just right, but let's get them showing on your forum pages first, shall we?

  • Lee
    • Site Builder, Child of Zeus

    That worked a charm, just the last button over laps in mobile view, any ideas? Also I have an other question that seems to havebeen ignored in an other ticket regarding bbpress post sinks.

    Thanks again.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.