How do I change sidebar position on individual post/page without BB Plugin

Change Sidebar Position

I am using Beaver Builder child theme. By default my sidebar is coming at right side. But I want the sidebar at left side for some post/page. So I did following steps.

Creating Custom Meta Box using ACF Plugin

I am creating a custom metabox using Advanced Custom Fields (ACF) Plugin. Therefore I can control the sidebar position from my Dashboard. If you have not ACF Pro version, install and activate the free one from WordPress plugin’s repository.

Now navigate to Dashboard -> Custom Fields, click on “Add New” button and create a custom field like the screenshot.

Sidebar Position Metabox for Post/Page

Sidebar Position Metabox for Post/Page

Overwrite Default Sidebar Position

Next open the functions.php file and add the following PHP codes at end of the file. Before editing the file you will keep a backup of your child theme.

//* Reposition sidebar on specific page/single post page
add_filter( 'fl_theme_mods', 'wpbw_filter_theme_mods' );
function wpbw_filter_theme_mods( $mods ) {

  if( ! is_page() && ! is_singular( 'post' )  )
    return $mods;

  global $post;

  $sidebar_position = get_post_meta(  $post->ID, 'sidebar_position', true );
  if( empty( $sidebar_position ) || ( esc_attr( $sidebar_position ) === "default" ) )
    return $mods;
  $mods['fl-blog-layout'] = esc_attr( $sidebar_position );
  return $mods;

All theme customizer data is saving in database as theme mods. If you look the get_mods function in bb-theme/classes/clas-fl-customizer.php file, you will get fl_theme_mods filter. Targeting this filter we can easily overwrite the default settings.

Explaining the above code:

05-06: Returning early if user is not on single post or page
08: Assign post object as a global variable
10: Fetching the custom metadata which is controlling by ACF metabox. WordPress get_post_meta() function is retrieving the custom metadata from database. It is accepting there parameters: post/page ID, custom field name and Boolean (true/false)
11-12: Unchanging mods value If metadata is empty or select default value
14: Overwrite the fl-blog-layout mods value
16: Returning the update $mods array

Select Sidebar Position

Changing the Sidebar Position from Dashboard

  1. Login to Dashboard
  2. Navigate to Pages -> All Pages or Posts -> All Posts
  3. Click on “Edit” link
  4. Select a position from Sidebar Position drop down list (see the screenshot)
  5. Update the page and view it on browser
  6. Now sidebar will show at left side


Sidebar Left and Right Side

Sidebar Left and Right Side

Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials