├── .gitignore
├── assets
    └── js
    │   ├── script.min.js
    │   ├── script.min.js.map
    │   └── src
    │       └── script.js
├── README.md
├── functions.php
└── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | config.codekit
2 | 


--------------------------------------------------------------------------------
/assets/js/script.min.js:
--------------------------------------------------------------------------------
1 | !function($){function n(){$("a").each(function(){-1===this.href.indexOf("/wp-admin/")&&-1===this.href.indexOf("/wp-login.php")||$(this).addClass("wp-link")})}$(function(){n();var t={anchors:"a",blacklist:".wp-link",onStart:{duration:280,render:function(n){n.addClass("slide-out")}},onAfter:function(t){n();var o=$(window.location.hash);if(0!==o.length){var i=o.offset().top;$("body, html").animate({scrollTop:i-60},{duration:280})}t.removeClass("slide-out")}};$("#page").smoothState(t)})}(jQuery);
2 | //# sourceMappingURL=./script.min.js.map


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | ### Envato Tuts+ Tutorial: [How to Integrate SmoothState.js Into a WordPress Theme](http://webdesign.tutsplus.com/tutorials/how-to-integrate-smoothstatejs-into-a-wordpress-theme--cms-26610)
4 | #### Instructor: Thoriq Firdaus
5 | 
6 | In our previous tutorial, we used the History Web API within a static site to serve smooth page transitions. In this tutorial we’re going to take things to the next level, by applying what we learned in a WordPress website. There’ll be one crucial difference; we’ll leverage SmoothState.js instead of building our own from scratch. 
7 | 


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	/**
 3 | 	 * Enqueue required scripts.
 4 | 	 */
 5 | 	add_action( 'wp_enqueue_scripts', function() {
 6 | 		
 7 | 		wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
 8 | 		wp_enqueue_script( 'smootstate-js', 'https://cdnjs.cloudflare.com/ajax/libs/smoothState.js/0.7.2/jquery.smoothState.min.js', array( 'jquery' ), '0.7.2' );
 9 | 		wp_enqueue_script( 'script-js', trailingslashit( get_stylesheet_directory_uri() ) . 'assets/js/script.min.js' , array( 'jquery', 'smootstate-js' ), '1.0.0', true );
10 | 		
11 | 	} );
12 | 


--------------------------------------------------------------------------------
/assets/js/script.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["src/script.js"],"names":["$","addBlacklistClass","each","this","href","indexOf","addClass","settings","anchors","blacklist","onStart","duration","render","$container","onAfter","$hash","window","location","hash","length","offsetTop","offset","top","animate","scrollTop","removeClass","smoothState","jQuery"],"mappings":"CAAA,SAAYA,GAEX,QAASC,KACRD,EAAG,KAAME,KAAM,WAC2B,KAApCC,KAAKC,KAAKC,QAAQ,eACkB,KAAvCF,KAAKC,KAAKC,QAAQ,kBACnBL,EAAGG,MAAOG,SAAU,aAKvBN,EAAG,WAEFC,GAEA,IAAIM,IACHC,QAAS,IACTC,UAAW,WACXC,SACCC,SAAU,IACVC,OAAQ,SAAWC,GAClBA,EAAWP,SAAU,eAGvBQ,QAAS,SAAUD,GAElBZ,GAEA,IAAIc,GAAQf,EAAGgB,OAAOC,SAASC,KAE/B,IAAsB,IAAjBH,EAAMI,OAAe,CAEzB,GAAIC,GAAYL,EAAMM,SAASC,GAE/BtB,GAAG,cAAeuB,SAChBC,UAAaJ,EAAY,KAEzBT,SAAU,MAIbE,EAAWY,YAAa,cAI1BzB,GAAG,SAAU0B,YAAanB,MAGxBoB","file":"script.min.js"}


--------------------------------------------------------------------------------
/assets/js/src/script.js:
--------------------------------------------------------------------------------
 1 | ( function( $ ) {
 2 | 
 3 | 	function addBlacklistClass() {
 4 | 		$( 'a' ).each( function() {
 5 | 			if ( this.href.indexOf('/wp-admin/') !== -1 || 
 6 | 				 this.href.indexOf('/wp-login.php') !== -1 ) {
 7 | 				$( this ).addClass( 'wp-link' );
 8 | 			}
 9 | 		});
10 | 	}
11 | 
12 | 	$( function() {
13 | 
14 | 		addBlacklistClass();
15 | 
16 | 		var settings = { 
17 | 			anchors: 'a',
18 | 			blacklist: '.wp-link',
19 | 			onStart: {
20 | 				duration: 280,
21 | 				render: function ( $container ) {
22 | 					$container.addClass( 'slide-out' );
23 | 				}
24 | 			},
25 | 			onAfter: function( $container ) {
26 | 
27 | 				addBlacklistClass();
28 | 
29 | 				var $hash = $( window.location.hash );
30 | 
31 | 				if ( $hash.length !== 0 ) {
32 | 
33 | 					var offsetTop = $hash.offset().top;
34 | 
35 | 					$( 'body, html' ).animate( {
36 | 							scrollTop: ( offsetTop - 60 ),
37 | 						}, {
38 | 							duration: 280
39 | 					} );
40 | 				}
41 | 
42 | 				$container.removeClass( 'slide-out' );
43 | 			}
44 | 		};
45 | 
46 | 		$( '#page' ).smoothState( settings );
47 | 	} );
48 | 
49 | })( jQuery );


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Theme Name: Twenty Sixteen (Child)
 3 | Theme URI: https://wordpress.org/themes/twentysixteen/
 4 | Author: the WordPress team
 5 | Author URI: https://wordpress.org/
 6 | Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
 7 | Version: 1.2
 8 | License: GNU General Public License v2 or later
 9 | License URI: http://www.gnu.org/licenses/gpl-2.0.html
10 | Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
11 | Text Domain: twentysixteen
12 | Template: twentysixteen
13 | 
14 | This theme, like WordPress, is licensed under the GPL.
15 | Use it to make something cool, have fun, and share what you've learned with others.
16 | */
17 |  
18 | .site-content {
19 | 	-webkit-transition: -webkit-transform .28s, opacity .28s;
20 | 	-ms-transition: -o-transform .28s, opacity .28s;
21 | 	-o-transition: -o-transform .28s, opacity .28s;
22 | 	transition: transform .28s, opacity .28s;
23 | }
24 | .slide-out .site-content {
25 | 	-webkit-transform: translate3d( 0, 100px, 0 );
26 | 	-ms-transform: translate3d( 0, 100px, 0 );
27 | 	-o-transform: translate3d( 0, 100px, 0 );
28 | 	transform: translate3d( 0, 100px, 0 );
29 | 	opacity: 0;
30 | }


--------------------------------------------------------------------------------