neilgee
6/17/2015 - 5:21 AM

Slidebars in Genesis

Slidebars in Genesis

<?php

//Register the 2 widgets used for the right and left slideout bars
function slidebars_widgets_init() {
	register_sidebar( array(
	'name'          => __( 'Right Slidebar', 'theme-slug' ),
	'id'            => 'slidebar-right',
	'description'   => __( 'Right SlideBar', 'theme-slug' ),
	'before_widget' => '<div class="widget">',
	'after_widget'  => '</div>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>',
	) );
	register_sidebar( array(
	'name'          => __( 'Left Slidebar', 'theme-slug' ),
	'id'            => 'slidebar-left',
	'description'   => __( 'Left SlideBar', 'theme-slug' ),
	'before_widget' => '<div class="">',
	'after_widget'  => '</div>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'slidebars_widgets_init' );


//Position the 2 widgets outside of the normal layout
function slidebars_page_position() {
	echo '<div class="sb-slidebar sb-right">';
	dynamic_sidebar( 'slidebar-right' );
	echo '</div>'; 
	echo '<div class="sb-slidebar sb-left">';
	dynamic_sidebar( 'slidebar-left' );
	echo '</div>'; 
}
add_action('genesis_after','slidebars_page_position');
<?php //<~ DOn't copy me

//Script-tac-ulous -> All the Sidr JS and CSS files
function themeprefix_scripts_styles_slidebars() {
	wp_enqueue_script ( 'slidebarsjs' , get_stylesheet_directory_uri() . '/js/slidebars.min.js', array( 'jquery' ), '1', true );
	wp_enqueue_script ( 'slidebarsinit' , get_stylesheet_directory_uri() . '/js/slidebar-init.js', array( 'slidebarsjs' ), '1', true );

	wp_enqueue_style ( 'slidebarscss' , get_stylesheet_directory_uri() . '/css/slidebars.min.css', '', '1', 'all' );

}
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_styles_slidebars' );  


//Add in the required ID attribute for the page
function themeprefix_site_container_id( $attributes ) { 
 $attributes['id'] = 'sb-site';
 return $attributes;
}
add_filter( 'genesis_attr_site-container', 'themeprefix_site_container_id' );


//Register the 2 widgets used for the right and left slideout bars
function slidebars_widgets_init() {
	register_sidebar( array(
	'name'          => __( 'Right Slidebar', 'theme-slug' ),
	'id'            => 'slidebar-right',
	'description'   => __( 'Right SlideBar', 'theme-slug' ),
	'before_widget' => '<div class="widget">',
	'after_widget'  => '</div>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>',
	) );
	register_sidebar( array(
	'name'          => __( 'Left Slidebar', 'theme-slug' ),
	'id'            => 'slidebar-left',
	'description'   => __( 'Left SlideBar', 'theme-slug' ),
	'before_widget' => '<div class="">',
	'after_widget'  => '</div>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'slidebars_widgets_init' );


//Position the 2 widgets outside of the normal layout
function slidebars_page_position() {
	echo '<div class="sb-slidebar sb-right">';
	dynamic_sidebar( 'slidebar-right' );
	echo '</div>'; 
	echo '<div class="sb-slidebar sb-left">';
	dynamic_sidebar( 'slidebar-left' );
	echo '</div>'; 
}
add_action('genesis_after','slidebars_page_position');
jQuery("document").ready(function($) {
      $.slidebars();
    });
//Add in new Widget areas

function themeprefix_hello_bar() {
	genesis_register_sidebar( array(
	'id'          => 'preheader',
	'name'        => __( 'preHeader', 'themename' ),
	'description' => __( 'This is the preheader', 'themename' ),
	) );
}
add_action( 'widgets_init', 'themeprefix_hello_bar' );

//Position the preHeader Area
function themeprefix_hello_bar_position() {
	echo '<div class="preheadercontainer hello-bar "><div class="wrap">';
    	genesis_widget_area ('preheader');
    echo '</div></div>';
}
add_action('genesis_before','themeprefix_hello_bar_position');
/* # SliderBar Menu
---------------------------------------------------------------------------------------------------- */

.hello-bar{
	background-color: #333;
	box-shadow: 0 0 5px #ddd;
	display: block;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 10px;
	position: fixed;
	text-align: left;
	width: 100%;
	z-index: 9999;
	color: #fff;
}

.hello-bar a:hover {
	color: #fff;
}
 
.sb-toggle-right {
	float: right;
}
 
body .sb-slidebar {
	padding: 80px 20px;
	color: #fff;
}
<?php

//Script-tac-ulous -> All the Slidebar JS and CSS files
function themeprefix_scripts_styles_slidebars() {
	wp_enqueue_script ( 'slidebarsjs' , get_stylesheet_directory_uri() . '/js/slidebars.min.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script ( 'slidebarsinit' , get_stylesheet_directory_uri() . '/js/slidebar-init.js', array( 'slidebarsjs' ), '1.0.0', true );
	wp_enqueue_style ( 'slidebarscss' , get_stylesheet_directory_uri() . '/css/slidebars.min.css', '', '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_styles_slidebars' ); 
<?php

//Add in the required ID attribute for the page
function themeprefix_site_container_id( $attributes ) { 
 $attributes['id'] = 'sb-site';
 return $attributes;
}
add_filter( 'genesis_attr_site-container', 'themeprefix_site_container_id' );