Merge pull request #96 from stef-k/vertical-one-page

add vertical layout template - Great @stef-k ! Thx will try it by myself for understrap.com!

README.md

@@ -149,6 +149,7 @@ http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
 - WooCommerce support.
 - [Child Theme](https://github.com/holger1411/understrap-child) ready.
 - Translation ready.
+- Multiple Page Templates
 
 ## Starter Theme + HTML Framework = WordPress Theme Framework
 
@@ -211,6 +212,34 @@ The front-page slider is widget driven. Simply add more than one widget to widge
 - Add two, or more, widgets of any kind to widget area “Hero”.
 - That’s it.
 
+## Page Templates
+
+### Blank Template
+
+The `blank.php` template is useful when working with various page builders and can be used as a starting blank canvas.
+
+### Empty Template
+
+The `empty.php` template displays a header and a footer only. A good starting point for landing pages.
+
+### Full Width Template
+
+The `fullwidthpage.php` template has full width layout without a sidebar.
+
+### Vertical One Page Template
+
+The `vertical-one-page.php` template displays all pages (except the one showing the posts) in a single vertical layout with a sliding navigation.
+Additionally enables the user to control the order of each page by using the order page attribute field.
+
+#### One Page Template How to
+
+ 1. Assuming that you have the following pages: Home, About and Contact
+ 2. Go to Appearance → Menus and add one **custom link** for each page
+ 3. On the URL field type a hash `#` and the name of the page in **lower case** so for example the link for Home becomes `#home`
+ 4. Edit the Home page and set as template the **Vertical One Page** (you only need to do this for the first page)
+ 5. Set the order of each page using the **Order** field from **Page Attributes** so for example if you want to display Home,
+ Contact, About set the Home page to 1, the Contact to 2 and About to 3
+
 [1] Visit [http://browsersync.io](http://browsersync.io) for more information on Browser Sync
 
 Licenses & Credits

inc/enqueue.php

@@ -6,34 +6,49 @@
  */
 
 function understrap_scripts() {
-    wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), '0.4.7');
+	wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), '0.4.7' );
-    wp_enqueue_script('jquery'); 
+	wp_enqueue_script( 'jquery' );
-    wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), '0.4.7', true );
+	wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), '0.4.7', true );
 
-    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
+	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
-        wp_enqueue_script( 'comment-reply' );
+		wp_enqueue_script( 'comment-reply' );
-    }
+	}
+
+	// menu - vertical page association
+	if ( is_page_template( 'page-templates/vertical-one-page.php' ) || is_home() || is_single() ) {
+		wp_enqueue_script( 'vertical-one-page', get_template_directory_uri() . '/js/vertical-one-page.js', array( 'jquery' ), '0.4.8', true );
+		$page_for_posts = strtolower( get_the_title( get_option( 'page_for_posts' ) ) );
+		$home_url       = home_url();
+		$is_single      = is_single();
+		$vars           = array(
+			'pageForPosts' => $page_for_posts,
+			'homeUrl'      => $home_url,
+			'isSingle'     => $is_single
+		);
+		wp_localize_script( 'vertical-one-page', 'vars', $vars );
+	}
+	// menu - vertical page association end
 }
 
 add_action( 'wp_enqueue_scripts', 'understrap_scripts' );
 
 /**
-*Loading slider script conditionally
+ *Loading slider script conditionally
-**/
+ **/
 
 if ( is_active_sidebar( 'hero' ) ):
-add_action("wp_enqueue_scripts","understrap_slider");
+	add_action( "wp_enqueue_scripts", "understrap_slider" );
 
-function understrap_slider(){
+	function understrap_slider() {
-    if ( is_front_page() ) {    
+		if ( is_front_page() ) {
-    $data = array(
+			$data = array(
-        "timeout"=> intval( get_theme_mod( 'understrap_theme_slider_time_setting', 5000 )),
+				"timeout" => intval( get_theme_mod( 'understrap_theme_slider_time_setting', 5000 ) ),
-        "items"=> intval( get_theme_mod( 'understrap_theme_slider_count_setting', 1 ))
+				"items"   => intval( get_theme_mod( 'understrap_theme_slider_count_setting', 1 ) )
-    	);
+			);
 
-    wp_enqueue_script("understrap-slider-script", get_stylesheet_directory_uri() . '/js/slider_settings.js', array(), '0.4.7');
+			wp_enqueue_script( "understrap-slider-script", get_stylesheet_directory_uri() . '/js/slider_settings.js', array(), '0.4.7' );
-    wp_localize_script( "understrap-slider-script", "understrap_slider_variables", $data );
+			wp_localize_script( "understrap-slider-script", "understrap_slider_variables", $data );
-    }
+		}
-}
+	}
 endif;
 

js/vertical-one-page.js

@@ -0,0 +1,36 @@
+/**
+ * Vertical page navigation
+ * A temporary source file providing smooth scrolling navigation to Pages
+ */
+(function( $ ) {
+	var currentPage = location.href;
+	var adjustedHeight = $( 'body' ).hasClass( 'admin-bar' ) ? 36 : 0;
+	var blogPage = vars.homeUrl + '/' + vars.pageForPosts;
+	if ( currentPage.substr( -1 ) === '/' ) {
+		currentPage = currentPage.substr( 0, currentPage.length - 1 );
+	}
+
+	$( document ).ready(function() {
+		// smoothly scroll to an ID
+		$( 'a[href*="#"]:not([href="#"])' ).click( function ( e ) {
+			var target;
+			// if not on root URL
+			if ( currentPage === blogPage || vars.isSingle ) {
+				target = $(this);
+				target = vars.homeUrl + '/' + target[0].hash;
+				location = target;
+			}
+			target = $( this.hash );
+			target = target.length ? target : $( '[name=' + this.hash.slice(1) + ']' );
+			if ( target.length ) {
+
+				$( 'html, body' ).delay( 100 ).animate({
+					scrollTop: target.offset().top - adjustedHeight
+				}, 800);
+				// put the hash  in  location bar
+				window.history.pushState( null, null, e.delegateTarget.href );
+				return false;
+			}
+		});
+	});
+})( jQuery );

loop-templates/content-verticalpage.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * The template used for displaying page content in a vertical layout
+ * The template modifies Article's ID by using post's slug to lower case as anchor point.
+ * @package understrap
+ */
+?>
+
+<?php global $post ?>
+
+<article id="<?php echo strtolower( $post->post_title ); ?>" <?php post_class(); ?>>
+
+	<header class="entry-header">
+
+		<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
+
+	</header><!-- .entry-header -->
+
+	<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
+
+	<div class="entry-content">
+
+		<?php the_content(); ?>
+
+		<?php
+		wp_link_pages( array(
+			'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
+			'after'  => '</div>',
+		) );
+		?>
+
+	</div><!-- .entry-content -->
+
+	<footer class="entry-footer">
+
+		<?php edit_post_link( __( 'Edit', 'understrap' ), '<span class="edit-link">', '</span>' ); ?>
+
+	</footer><!-- .entry-footer -->
+
+</article><!-- #post-## -->

page-templates/vertical-one-page.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * Template Name: Vertical One Page
+ *
+ * Template for displaying a page without sidebar even if a sidebar widget is published
+ *
+ * @package understrap
+ */
+
+get_header(); ?>
+
+<?php
+/*
+ * Exclude the posts page from being shown in this layout.
+ * Order pages by their order number.
+ */
+$exclude = get_option( 'page_for_posts' );
+$args    = array(
+	'post_type'    => 'page',
+	'post__not_in' => array( $exclude ),
+	'orderby'      => 'menu_order',
+	'order'        => 'ASC'
+);
+
+$qry = new WP_Query( $args );
+
+?>
+
+<div class="wrapper" id="full-width-page-wrapper">
+
+	<div id="content" class="container">
+
+		<div id="primary" class="col-md-12 content-area">
+
+			<main id="main" class="site-main" role="main">
+
+				<?php if ( have_posts() ): while ( $qry->have_posts() ): $qry->the_post() ?>
+					<div class="page">
+						<?php get_template_part( 'loop-templates/content', 'verticalpage' ); ?>
+					</div>
+
+					<?php wp_reset_postdata(); //reset custom query?>
+				<?php endwhile; endif; ?>
+
+			</main><!-- #main -->
+
+		</div><!-- #primary -->
+
+	</div><!-- Container end -->
+
+</div><!-- Wrapper end -->
+
+<?php get_footer(); ?>