Merge pull request #117 from stef-k/master

Global layout settings

inc/customizer.php

@@ -10,7 +10,7 @@
  *
  * @param WP_Customize_Manager $wp_customize Theme Customizer object.
  */
-if ( ! function_exists ( 'understrap_customize_register' ) ) {
+if ( ! function_exists( 'understrap_customize_register' ) ) {
 	function understrap_customize_register( $wp_customize ) {
 		$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
 		$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
@@ -20,7 +20,7 @@ if ( ! function_exists ( 'understrap_customize_register' ) ) {
 }
 add_action( 'customize_register', 'understrap_customize_register' );
 
-if ( ! function_exists ( 'understrap_theme_customize_register' ) ) {
+if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 	function understrap_theme_customize_register( $wp_customize ) {
 
 		$wp_customize->add_section( 'understrap_theme_slider_options', array(
@@ -67,16 +67,71 @@ if ( ! function_exists ( 'understrap_theme_customize_register' ) ) {
 			'settings' => 'understrap_theme_slider_loop_setting'
 		) );
 
+		// Theme layout settings
+		$wp_customize->add_section( 'understrap_theme_layout_options', array(
+			'title'       => __( 'Theme Layout Settings', 'understrap' ),
+			'capability'  => 'edit_theme_options',
+			'description' => __( 'Container width and sidebar defaults', 'understrap' ),
+			'priority'    => 160,
+		) );
+
+		$wp_customize->add_setting( 'understrap_container_type', array(
+			'default'    => 'container',
+			'type'       => 'theme_mod',
+			'capability' => 'edit_theme_options',
+		) );
+
+		$wp_customize->add_control(
+			new WP_Customize_Control(
+				$wp_customize,
+				'container_type', array(
+					'label'       => __( 'Container Width', 'understrap' ),
+					'description' => __( "Choose between Bootstrap's container and container-fluid", 'understrap' ),
+					'section'     => 'understrap_theme_layout_options',
+					'settings'    => 'understrap_container_type',
+					'type'        => 'select',
+					'choices'     => array(
+						'container'       => __( 'Fixed width container', 'understrap' ),
+						'container-fluid' => __( 'Full width container', 'understrap' ),
+					),
+					'priotiry'    => '10',
+				)
+			) );
+
+		$wp_customize->add_setting( 'understrap_sidebar_position', array(
+			'default'    => 'right',
+			'type'       => 'theme_mod',
+			'capability' => 'edit_theme_options',
+		) );
+
+		$wp_customize->add_control(
+			new WP_Customize_Control(
+				$wp_customize,
+				'understrap_sidebar_position', array(
+					'label'       => __( 'Sidebar Positioning', 'understrap' ),
+					'description' => __( "Set sidebar's position. Can either be: right, left, both or none", 'understrap' ),
+					'section'     => 'understrap_theme_layout_options',
+					'settings'    => 'understrap_sidebar_position',
+					'type'        => 'select',
+					'choices'     => array(
+						'right' => __( 'Right sidebar', 'understrap' ),
+						'left'  => __( 'Left sidebar', 'understrap' ),
+						'both'  => __( 'Left & Right sidebars', 'understrap' ),
+						'none'  => __( 'No sidebar', 'understrap' ),
+					),
+					'priotiry'    => '20',
+				)
+			) );
+
 	}
 }
 add_action( 'customize_register', 'understrap_theme_customize_register' );
 
 
-
 /**
  * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
  */
-if ( ! function_exists ( 'understrap_customize_preview_js' ) ) {
+if ( ! function_exists( 'understrap_customize_preview_js' ) ) {
 	function understrap_customize_preview_js() {
 		wp_enqueue_script( 'understrap_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20130508', true );
 	}

inc/widgets.php

@@ -5,12 +5,22 @@
  *
  * @package understrap
  */
-if ( ! function_exists ( 'understrap_widgets_init' ) ) {
+if ( ! function_exists( 'understrap_widgets_init' ) ) {
 	function understrap_widgets_init() {
 		register_sidebar( array(
-    		'name'          => __( 'Sidebar', 'understrap' ),
+			'name'          => __( 'Right Sidebar', 'understrap' ),
-    		'id'            => 'sidebar-1',
+			'id'            => 'right-sidebar',
-    		'description'   => 'Sidebar widget area',
+			'description'   => 'Right sidebar widget area',
+			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
+			'after_widget'  => '</aside>',
+			'before_title'  => '<h3 class="widget-title">',
+			'after_title'   => '</h3>',
+		) );
+
+		register_sidebar( array(
+			'name'          => __( 'Left Sidebar', 'understrap' ),
+			'id'            => 'left-sidebar',
+			'description'   => 'Left sidebar widget area',
 			'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 			'after_widget'  => '</aside>',
 			'before_title'  => '<h3 class="widget-title">',

page-templates/both-sidebarspage.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Template Name: Left and Right Sidebar Layout
+ *
+ * This template can be used to override the default template and sidebar setup
+ *
+ * @package understrap
+ */
+
+ get_header();
+$container = get_theme_mod('understrap_container_type');
+?>
+
+<div class="wrapper" id="page-wrapper">
+
+
+  <div class="wrapper" id="page-wrapper">
+
+    <div class="<?php echo $container; ?>" id="content">
+
+      <div class="row">
+
+        <?php get_sidebar('left'); ?>
+
+        <div class="<?php if ( is_active_sidebar( 'left-sidebar' ) ||  is_active_sidebar( 'right-sidebar' ) ) : ?>col-md-4<?php else : ?>col-md-12<?php endif; ?> content-area" id="primary">
+
+          <main class="site-main" id="main" role="main">
+
+            <?php while ( have_posts() ) : the_post(); ?>
+
+              <?php get_template_part( 'loop-templates/content', 'page' ); ?>
+
+              <?php
+              // If comments are open or we have at least one comment, load up the comment template
+              if ( comments_open() || get_comments_number() ) :
+                comments_template();
+              endif;
+              ?>
+
+            <?php endwhile; // end of the loop. ?>
+
+          </main><!-- #main -->
+
+        </div><!-- #primary -->
+        <?php get_sidebar( 'right' ); ?>
+      </div><!-- .row -->
+
+    </div><!-- Container end -->
+
+  </div><!-- Wrapper end -->
+
+  <?php get_footer(); ?>

page-templates/left-sidebarpage.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Template Name: Left Sidebar Layout
+ *
+ * This template can be used to override the default template and sidebar setup
+ *
+ * @package understrap
+ */
+
+ get_header();
+$container = get_theme_mod('understrap_container_type');
+?>
+
+<div class="wrapper" id="page-wrapper">
+
+
+  <div class="wrapper" id="page-wrapper">
+
+    <div class="<?php echo $container; ?>" id="content">
+
+      <div class="row">
+
+        <?php get_sidebar('left'); ?>
+
+        <div class="<?php if ( is_active_sidebar( 'left-sidebar' ) ) : ?>col-md-8<?php else : ?>col-md-12<?php endif; ?> content-area" id="primary">
+
+          <main class="site-main" id="main" role="main">
+
+            <?php while ( have_posts() ) : the_post(); ?>
+
+              <?php get_template_part( 'loop-templates/content', 'page' ); ?>
+
+              <?php
+              // If comments are open or we have at least one comment, load up the comment template
+              if ( comments_open() || get_comments_number() ) :
+                comments_template();
+              endif;
+              ?>
+
+            <?php endwhile; // end of the loop. ?>
+
+          </main><!-- #main -->
+
+        </div><!-- #primary -->
+
+      </div><!-- .row -->
+
+    </div><!-- Container end -->
+
+  </div><!-- Wrapper end -->
+
+  <?php get_footer(); ?>

page.php

@@ -13,13 +13,28 @@
  get_header();
 ?>
 
+<?php
+$container = get_theme_mod('understrap_container_type');
+$sidebar_pos = get_theme_mod('understrap_sidebar_position');
+?>
+
 <div class="wrapper" id="page-wrapper">
 
-  <div class="container" id="content">
+  <div class="<?php echo $container?>" id="content">
 
     <div class="row">
+	    <?php if ( 'left' === $sidebar_pos || 'both' === $sidebar_pos ): ?>
+		    <?php get_sidebar( 'left' ); ?>
+	    <?php endif; ?>
+
+	    <?php if ( 'right' === $sidebar_pos || 'left' === $sidebar_pos ): ?>
+      <div class="<?php if ( is_active_sidebar( 'right-sidebar' ) || is_active_sidebar( 'left-sidebar' )) : ?>col-md-8<?php else : ?>col-md-12<?php endif; ?> content-area" id="primary">
+
+		<?php elseif ( is_active_sidebar( 'right-sidebar' ) && is_active_sidebar( 'left-sidebar' ) ): ?>
+        <div class="<?php if ( 'both' === $sidebar_pos ) : ?>col-md-6<?php else : ?>col-md-12<?php endif; ?> content-area" id="primary">
+	      <?php endif; ?>
+
 
-      <div class="<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>col-md-8<?php else : ?>col-md-12<?php endif; ?> content-area" id="primary">
 
         <main class="site-main" id="main" role="main">
 
@@ -39,8 +54,9 @@
         </main><!-- #main -->
 
       </div><!-- #primary -->
-
+      <?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ): ?>
-      <?php get_sidebar(); ?>
+	      <?php get_sidebar( 'right' ); ?>
+    <?php endif; ?>
 
     </div><!-- .row -->
 

sidebar-left.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * The sidebar containing the main widget area.
+ *
+ * @package understrap
+ */
+
+if ( ! is_active_sidebar( 'left-sidebar' ) ) {
+	return;
+}
+
+// when both sidebars turned on reduce col size to 3 from 4.
+$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
+?>
+
+<?php if ( 'both' === $sidebar_pos ): ?>
+<div class="col-md-3 widget-area" id="'left-sidebar'" role="complementary">
+	<?php else: ?>
+<div class="col-md-4 widget-area" id="'left-sidebar'" role="complementary">
+	<?php endif; ?>
+<?php dynamic_sidebar( 'left-sidebar' ); ?>
+
+</div><!-- #secondary -->

sidebar-right.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * The right sidebar containing the main widget area.
+ *
+ * @package understrap
+ */
+
+if ( ! is_active_sidebar( 'right-sidebar' ) ) {
+	return;
+}
+
+// when both sidebars turned on reduce col size to 3 from 4.
+$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
+?>
+
+<?php if ( 'both' === $sidebar_pos ): ?>
+<div class="col-md-3 widget-area" id="right-sidebar" role="complementary">
+	<?php else: ?>
+<div class="col-md-4 widget-area" id="right-sidebar" role="complementary">
+	<?php endif; ?>
+<?php dynamic_sidebar( 'right-sidebar' ); ?>
+
+</div><!-- #secondary -->