Rabat: Adding Collapsed Sidebar

Today i’m gonna share an awesome modification for your Rabat WordPress theme. Rabat is a coupon warehouse theme from Colorlabs.

Untitled

What we are gonna do today is about to add a collapsed sidebar as you can see at the image above. Since by default Rabat doesn’t have any sidebar, this modification is gonna be awesome!

Step #1

At this first step you have to prepare the header section where we will put the burger button and also placing the trigger. To do it you have to modify a file named header.php. This file can be found via FTP at directory: wp-content → themes → rabat.

#1 modification

Open the file and find out this code:

 $is_mobile_disabled_class = ' mobile-enabled ';

Modify it become:

 $is_mobile_disabled_class = ' mobile-enabled fixed-navbar';

#2 modification

Find out this code:

<body <?php body_class($is_mobile_disabled_class); ?>>

<div class="container-wrapper">

Modify it become:

<body <?php body_class($is_mobile_disabled_class); ?>>

<div class="container-wrapper">

	<div class="top-navbar clearfix">
			<button class="btn-navbar-header">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>

And done! If you already reach this step then you already done with the first step.

Step #2

At this second step you are going to add a new sidebar into the theme. To do it you have to modify a file named theme-sidebar-init.php. This file can be found via FTP at directory: wp-content → themes → rabat → includes.

Open the file and find out this code:

if( ! function_exists( 'register_sidebar' ) ) {
			return;
		}

Modify it become:

if( ! function_exists( 'register_sidebar' ) ) {
			return;
		}
		register_sidebar( array( 
			'name' => 'Sidebar Main',
			'id' => 'sidebar-side',
			'description'	=> 'This widgets will appear inside off canvas sidebar',
			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
			'after_widget' => "</aside>\n",
			'before_title' => '<h4 class="widget-title">',
			'after_title' => "</h4>\n"
			)	
		);

And done with the second step. You can check to: WordPress dashboard → appearance → widget, you will have a new sidebar named sidebar main. This is where you can put a widget that will be displayed at the collapsed section.

Step #3

At this third step you have to call the new sidebar you just made. To do it you have to modify a file named footer.php. This file can be found via FTP at directory: wp-content → themes → rabat.

Open the file and find out this code:

<?php wp_footer(); ?>

Modify it become:

<?php get_sidebar( 'side' ); ?>

<?php wp_footer(); ?>

And done with the third step!

Step #4

At this fourth step you have to prepare the CSS for the collapsed section. To do it you have to modify a file named style.css or you can also use your custom css file. Put this code at the very end of the file:

.btn-navbar-header,
.sidebar_main {
  -webkit-transition: left 0.3s ease-in-out;
  -moz-transition: left 0.3s ease-in-out;
  -ms-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}


.btn-navbar-header {
  border: 0;
  float: left;
  display: block;
  cursor: pointer;
  padding: 13px 0;
  background: none;
  position: relative;
}
.btn-navbar-header .icon-bar {
  display: block;
  width: 20px;
  height: 4px;
  background: #fff;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 0 1px rgba(0,0,0,.1);
  -moz-box-shadow: 0 1px rgba(0,0,0,.1);
  box-shadow: 0 1px rgba(0,0,0,.1);
}
.btn-navbar-header .icon-bar + .icon-bar {
  margin-top: 3px;
}

/* Collapsed Sidebar
------------------------------------------------------------------- */
.sidebar-collapsed .top-navbar {
  margin-left: 244px;
  margin-right: -244px;
}
.sidebar_main {
  top: 0;
  bottom: 0;
  left: -270px;
  position: fixed;
  width: 220px;
  padding: 12px;
  /*z-index: 1000;*/
  background: #9BC847;
  overflow: auto;
  z-index: 10001
}
.sidebar_main:focus {
  outline: 0
}
.sidebar-collapsed .sidebar_main {
  left: 0;
}
.top-navbar {
  margin-left: 0;
  -webkit-transition: margin-left, left 0.3s, 0.3s ease-in-out;
  -moz-transition: margin-left, left 0.3s, 0.3s ease-in-out;
  -ms-transition: margin-left, left 0.3s, 0.3s ease-in-out;
  -o-transition: margin-left, left 0.3s, 0.3s ease-in-out;
  transition: margin-left, left 0.3s, 0.3s ease-in-out;

  padding-left: 25px;
  padding-right: 25px;
}
.top-navbar, .btn-navbar-header,
.sidebar_main {
  -webkit-transition: left 0.3s ease-in-out;
  -moz-transition: left 0.3s ease-in-out;
  -ms-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}
.top-navbar {
  -webkit-transition: right 0.3s ease-in-out;
     -moz-transition: right 0.3s ease-in-out;
      -ms-transition: right 0.3s ease-in-out;
       -o-transition: right 0.3s ease-in-out;
          transition: right 0.3s ease-in-out;
}
.admin-bar .sidebar_main {
  top: 28px;
}




/* =================================================================== 
  TOP NAVBAR
=================================================================== */
.top-navbar {
  color: #fff;
  padding-left: 25px;
  background: #9bc847;
  text-shadow: 0 1px rgba(0,0,0,.2);
  -webkit-font-smoothing: antialiased;
}
.top-navbar a {
  color: #fff;
  padding: 13px;
  display: block;
}
.top-navbar a:hover {
  text-decoration: none
}
.top-navbar ul {
  list-style: none;
  margin-left: 0;
}
.fixed-navbar .top-navbar {
  z-index: 10000; 
  /*position: fixed;*/
  left: 0;
  right: 0;
  top: 0;
}
.admin-bar.fixed-navbar .top-navbar {
  top: 28px;
}
.sidebar-collapsed.fixed-navbar .btn-navbar {
  left: 244px;
}
.sidebar-collapsed.fixed-navbar .top-navbar {
  right: -244px;
}
.fixed-navbar .content-wrapper {
  margin-top: 90px;
}
.single .content-inner,
.page .content-inner {
  /*margin-right: 0;*/
}

If you want to modify your style.css file, it is located at: FTP → wp-content → themes → rabat.

Untitled2

If you already done with this step, you should have a layout like the image above (burger button already displayed at top left).

Step #5

At this step you have to add a JavaScript code to make sure if the collapsed feature is working. To do it you have to modify a file named script.js. This file can be found via FTP at directory: wp-content → themes → rabat → includes → js.

Open the file and find out this code:

  $('.btn-navbar').on('click', function(e){
    $('#main-menu-slide').trigger('toggle.mm');
  });

Modify it become:

  $('.btn-navbar').on('click', function(e){
    $('#main-menu-slide').trigger('toggle.mm');
  });
  
if( $('.sidebar_main').length > 0 ) {
	$('body').on('click', '.btn-navbar-header', function(event){
		event.preventDefault();
		var $body = $('body');
		$body.toggleClass('sidebar-collapsed');
	});
}

And done! The javascript already added, now you can test the collapsed sidebar.

Step #6

Even though the collapsed sidebar already working fine, the custom color option that available within this theme still not affecting it. At this step you need to modify 2 files in order to make the custom color option work: theme-customizr.js and theme-functions.php.

#1 modification

First you have to modify a file named theme-customizr.js. This file can be found via FTP at directory: wp-content → themes → rabat → includes → js.

Open the file and find out this code:

 wp.customize( 'colabs_primary_color', function( value ) {
    value.bind( function( newVal ) {
      $('.header-wrapper, .button-primary, .pagination .current, .pagination a:hover').css('background-color', newVal);
    });
  });

Then modify it become:

 wp.customize( 'colabs_primary_color', function( value ) {
    value.bind( function( newVal ) {
      $('.top-navbar, .sidebar_main, .header-wrapper, .button-primary, .pagination .current, .pagination a:hover').css('background-color', newVal);
    });
  });

#2 modification

At this step you have to modify a file named theme-functions.php. This file can be found via FTP at directory: wp-content → themes → rabat → includes.

Open the file and find out this code:

 <style>
    /* Primary Color */
    .header-wrapper,
    .button-primary,
    .pagination .current,
    .pagination a:hover,
		#main-menu-slide .current-menu-item{
      background: <?php echo $primary_color; ?>;
    }

Then modify it become:

 <style>
    /* Primary Color */
	.top-navbar,
	.sidebar_main,
    .header-wrapper,
    .button-primary,
    .pagination .current,
    .pagination a:hover,
		#main-menu-slide .current-menu-item{
      background: <?php echo $primary_color; ?>;
    }

And that’s it!

That’s Too Much For Me!

Don’t be worried if you are not a programmer, you can download the source codes from here.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s