Clear all

Script [Solved] Sidebar left on mobile

3 Posts
3 Users
Posts: 977
Topic starter
Noble Member
Joined: 4 years ago

I have asked this before and cant find the thread..... But on mobile, I would like the side bar to show before the main forum. So my recent posts. 

I would be good if i could just add one widget like "recent post" on top of the forum on mobile. So the members can see recent posts and not the whole side bar. It is a pain to scroll passed the whole forum to get to the widgets....


Any idea how to fix this?

2 Replies
Posts: 9912
Support Team
Joined: 7 years ago

Hi @percysgrowroom,

I think you should use this plugin, put the widget before the [wpforo] shortcode in the forum page editor:

You should contact this plugin developers and ask them to help you to only show this widget on mobile pages.


Or you can put this code into the functions.php of your current active WordPress theme. This will add new sidebar in Dashboard > Appearance > Widgets admin page, so the widgets in this sidebar will be only displayed on the forum top area on mobile devices:

function wpforo_custom_sidebar() {
register_sidebar( array(
'name' => __( 'Forum Top Mobile Sidebar', 'textdomain' ),
'id' => 'mobile-sidebar',
'description' => __( 'Widgets in this area will be shown on forum top for mobile only.', 'wpforo' ),
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
add_action( 'widgets_init', 'wpforo_custom_sidebar' );

function wpforo_custom_sidebar_area() {
if( function_exists('is_wpforo_page') && is_wpforo_page() ){
if ( !is_active_sidebar( 'mobile-sidebar' ) || !wp_is_mobile() ) return;
echo '<div class="wpforo-top-sidebar">';
dynamic_sidebar( 'mobile-sidebar' );
echo '</div>';
add_action( 'wpforo_top_hook', 'wpforo_custom_sidebar_area' );

BTW, you can use Code Snippets plugin to add custom codes.

Posts: 393
Honorable Member
Joined: 5 years ago

This is fantastic @robert. Only small change I would make is H2 class the same as the normal sidebars (widget-title) so that any styling css that we may have done is uniform.