├── .DS_Store
├── README.md
├── css
    ├── normalize.css
    └── variables.css
├── footer.php
├── functions.php
├── header.php
├── img
    ├── error.png
    ├── placeholder.png
    ├── unsplash-1.jpg
    ├── unsplash-2.jpg
    ├── unsplash-3.jpg
    └── unsplash-4.jpg
├── inc
    ├── ajax.php
    ├── post-types.php
    ├── spa.php
    └── theme-image.php
├── index.php
├── js
    ├── ajax.js
    ├── main.js
    └── spa.js
├── screenshot.png
├── style.css
└── templates
    ├── page-ajax.php
    └── page-spa.php


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/.DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Zero WP 3.5
 2 | Ultra-minimal WordPress starter theme. Optimized for converting html-layouts to websites, single page applications, non-standard functionality.
 3 | 
 4 | Features
 5 | ========
 6 | 
 7 | * Based of native WordPress functions and logic
 8 | * Minimal set of theme files
 9 | * Uses JS-fix for screen height on mobile devices
10 | * Includes Custom Post Types & Custom taxonomies
11 | * Handy function for static images
12 | * Selective on/off Gutenberg for different post types
13 | * Basic SPA example with page template
14 | * Basic AJAX example with page template
15 | 


--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 | 	margin: 0;
 7 | }
 8 | 
 9 | img {
10 | 	max-width: 100%;
11 | 	height: auto;
12 | }


--------------------------------------------------------------------------------
/css/variables.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	/* Layout */
 3 | 	--content-width: 992px;
 4 | 	
 5 | 	/* Colors */
 6 | 	--c-main: #2D2D2D;
 7 | 	--c-secondary: #888888;
 8 | 	--c-accent: #FF9800;
 9 | 	--c-footer: #111;
10 | 	--c-text: #111;
11 | 	--c-background: #e6e6e6;
12 | 	--c-link: #cc7a00;
13 | 	--c-link-hover: #ffad33;
14 | 	--c-link-visited: #cc7a00;	
15 | 	
16 | 	/* Font Styles */
17 | 	--font-main: 'Arial', sans-serif;
18 | 	--font-secondary: 'Georgia', serif;
19 | 	--size-h1: 42px;
20 | 	--lh-h1: 1.2;
21 | 	--size-h2: 32px;
22 | 	--lh-h2: 1.4;
23 | 	--size-h3: 28px;
24 | 	--lh-h3: 1.4;
25 | 	--size-h4: 22px;
26 | 	--lh-h4: 1.4;
27 | 	--size-text: 18px;
28 | 	--lh-text: 1.4;
29 | } 


--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
1 |     <?php wp_footer(); ?>
2 |   </body>
3 | </html>


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | //THEME SUPPORTS
 3 | add_action( 'after_setup_theme', function(){
 4 | 	add_theme_support( 'title-tag' );
 5 | 	add_theme_support( 'post-thumbnails' );
 6 | });
 7 | 
 8 | 
 9 | //THEME EXTRAS
10 | //require_once get_template_directory() . '/inc/post-types.php';
11 | //require_once get_template_directory() . '/inc/spa.php';
12 | //require_once get_template_directory() . '/inc/ajax.php';
13 | require_once get_template_directory() . '/inc/theme-image.php';
14 | 
15 | 
16 | 
17 | //THEME MENUS
18 | add_action( 'after_setup_theme', 'theme_register_nav_menu' );
19 | 
20 | function theme_register_nav_menu() {
21 | 	register_nav_menu( 'main', 'Top Menu' );
22 | }
23 | 
24 | 
25 | //THEME STYLES & SCRIPTS
26 | add_action( 'wp_enqueue_scripts', 'theme_styles_and_scripts' );	
27 | 
28 | function theme_styles_and_scripts() {
29 | 	$ver = '0.01';
30 | 	$css_url = get_template_directory_uri() . '/css/';
31 | 	$js_url = get_template_directory_uri() . '/js/';
32 | 	
33 | 	//Enqueue main theme style
34 | 	wp_enqueue_style( 'css-main', get_stylesheet_uri(), array(), $ver);
35 | 	
36 | 	//Enqueue additional .css files
37 | 	wp_enqueue_style( 'css-variables', $css_url . 'variables.css', array(), $ver);
38 | 	wp_enqueue_style( 'css-normalize', $css_url . 'normalize.css', array(), $ver);	
39 | 
40 | 	//Enqueue .js files	
41 |     wp_enqueue_script( 'main-js', $js_url . 'main.js', array('jquery'), $ver);
42 | }
43 | 
44 | 
45 | //ENABLING - DISABLING GUTENBERG FOR CERTAIN POST TYPES
46 | add_filter( 'use_block_editor_for_post_type', 'theme_gutenberg_support_for_post_types', 10, 2 );
47 | 
48 | function theme_gutenberg_support_for_post_types( $use_block_editor, $post_type ){
49 | 	if ($post_type == 'post') { return true;	} else { return false; }
50 | }
51 | 
52 | 
53 | 
54 | 
55 | 


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html <?php language_attributes(); ?>>
3 |   <head>
4 | 	<meta charset="<?php bloginfo( 'charset' ); ?>">
5 | 	<meta name="viewport" content="width=device-width">
6 |     <?php wp_head(); ?>
7 |   </head>
8 |   <body <?php body_class(); ?>> 


--------------------------------------------------------------------------------
/img/error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/img/error.png


--------------------------------------------------------------------------------
/img/placeholder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/img/placeholder.png


--------------------------------------------------------------------------------
/img/unsplash-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/img/unsplash-1.jpg


--------------------------------------------------------------------------------
/img/unsplash-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/img/unsplash-2.jpg


--------------------------------------------------------------------------------
/img/unsplash-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/img/unsplash-3.jpg


--------------------------------------------------------------------------------
/img/unsplash-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/img/unsplash-4.jpg


--------------------------------------------------------------------------------
/inc/ajax.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 
 3 | add_action( 'wp_enqueue_scripts', 'theme_ajax_scripts' );	
 4 | 
 5 | function theme_ajax_scripts() {
 6 | 	
 7 | 	//Enqueuing script for certain page template
 8 | 	if ( is_page_template( 'templates/page-ajax.php' ) ) {		
 9 | 		$ver = '0.01';
10 | 		$js_url = get_template_directory_uri() . '/js/';	
11 | 	
12 | 		wp_enqueue_script( 'ajax-js', $js_url . 'ajax.js', array('jquery'), $ver);
13 | 		
14 | 		//Make admin-ajax.php url available in JS file
15 | 		$ajax_url = admin_url('admin-ajax.php');
16 | 		wp_localize_script( 'ajax-js', 'ajax_url', $ajax_url);	
17 | 	}
18 | }
19 | 
20 | 
21 | //REGISTER AJAX EVENTS HOOK AND CALLBACK
22 | add_action( 'wp_ajax_sample_ajax_action', 'sample_ajax_action_callback' );
23 | add_action( 'wp_ajax_nopriv_sample_ajax_action', 'sample_ajax_action_callback' );
24 | 
25 | function sample_ajax_action_callback() {
26 | 
27 | 	//previously saved timestamp
28 | 	$saved_time = get_option('ajax_button_pressed');
29 | 	
30 | 	//sanitize POST data, retrieving only integer
31 | 	$current_time = (int) $_POST['current_time'];
32 | 	
33 | 	//save current timestamp
34 | 	update_option('ajax_button_pressed', $current_time);
35 | 	
36 | 	//if button pressed for a first time
37 | 	if (!$saved_time) {
38 | 		 update_option('ajax_button_count', 1);
39 | 		 $message = 'Button was never pressed before';		
40 | 	}
41 | 	
42 | 	else {
43 | 		$delta = $current_time - $saved_time;
44 | 		$count = (int) get_option('ajax_button_count');
45 | 		
46 | 		//just a check, that we have stored number of clicks
47 | 		if (!$count) {
48 | 			$count = 1;
49 | 			update_option('ajax_button_count', 1);
50 | 		}
51 | 		
52 | 		//save count+1 asin Options table
53 | 		else {
54 | 			$count++;
55 | 			update_option('ajax_button_count', $count);
56 | 		}
57 | 		
58 | 		$message = 'Button was pressed ' . $count . ' times, last one ' . $delta . ' seconds ago';		
59 | 	}
60 | 	
61 | 	echo json_encode(['message' => $message]);
62 | 	wp_die();	
63 | }


--------------------------------------------------------------------------------
/inc/post-types.php:
--------------------------------------------------------------------------------
  1 | <?php 
  2 | add_action( 'init', 'theme_register_taxonomy' );
  3 | add_action( 'init', 'theme_register_post_types' );
  4 | 
  5 | 
  6 | //Register new Taxonomy
  7 | function theme_register_taxonomy(){
  8 | 	
  9 | 	$labels = array(
 10 | 		'name'              => 'Genres',
 11 | 		'singular_name'     => 'Genre',
 12 | 		'search_items'      => 'Search Genres',
 13 | 		'all_items'         => 'All Genres',
 14 | 		'view_item '        => 'View Genre',
 15 | 		'parent_item'       => 'Parent Genre',
 16 | 		'parent_item_colon' => 'Parent Genre:',
 17 | 		'edit_item'         => 'Edit Genre',
 18 | 		'update_item'       => 'Update Genre',
 19 | 		'add_new_item'      => 'Add New Genre',
 20 | 		'new_item_name'     => 'New Genre Name',
 21 | 		'menu_name'         => 'Genre',
 22 | 		'back_to_items'     => '← Back to Genre',	
 23 | 	);
 24 | 	
 25 | 	$args = array (
 26 | 		'label'                 => 'Genres', 
 27 | 		'labels'                => $labels,
 28 | 		'description'           => '', 
 29 | 		'public'                => true,
 30 | 		'hierarchical'          => true,
 31 | 		'rewrite'               => true,
 32 | 		'capabilities'          => array(),
 33 | 		'show_admin_column'     => true,
 34 | 	);
 35 | 	
 36 | 	/* Additional Parameters for $args
 37 | 		'publicly_queryable'    => null, 
 38 | 		'show_in_nav_menus'     => true, 
 39 | 		'show_ui'               => true, 
 40 | 		'show_in_menu'          => true, 
 41 | 		'show_tagcloud'         => true, 
 42 | 		'show_in_quick_edit'    => null, 
 43 | 		'query_var'             => $taxonomy,
 44 | 		'_builtin'              => false,
 45 | 		'update_count_callback' => '_update_post_term_count',
 46 | 		'meta_box_cb'           => null,
 47 | 		'show_in_rest'          => null, 
 48 | 		'rest_base'             => null, 		
 49 | 	*/
 50 | 	
 51 | 	$post_types = array('post');
 52 | 	
 53 | 	register_taxonomy( 'taxonomy', [ 'post' ], $args );
 54 | }
 55 | 
 56 | 
 57 | //Create new Custom Post Type
 58 | function theme_register_post_types(){
 59 | 
 60 | 	$labels = array(
 61 | 		'name'               => 'Quotes', 
 62 | 		'singular_name'      => 'Quote', 
 63 | 		'add_new'            => 'Add Quote', 
 64 | 		'add_new_item'       => 'Add New Quote', 
 65 | 		'edit_item'          => 'Edit Quote', 
 66 | 		'new_item'           => 'New Quote', 
 67 | 		'view_item'          => 'View Quote', 
 68 | 		'search_items'       => 'Search Quotes', 
 69 | 		'not_found'          => 'Not Found', 
 70 | 		'not_found_in_trash' => 'Not Found in Trash',
 71 | 		'parent_item_colon'  => '',
 72 | 		'menu_name'          => 'Quotes',
 73 | 	);
 74 | 	
 75 | 	$args = array(
 76 | 		'label'               => 'Quote',
 77 | 		'labels' 		      => $labels,
 78 | 		'description'         => '',
 79 | 		'public'              => true,
 80 | 		'show_in_menu'        => true, 
 81 | 		'show_in_admin_bar'   => true, 
 82 | 		'menu_position'       => null,
 83 | 		'menu_icon'           => 'dashicons-format-quote', //https://developer.wordpress.org/resource/dashicons/
 84 | 		'capability_type'     => 'page',
 85 | 		'hierarchical'        => false,
 86 | 		'supports'            => ['title'],
 87 | 		'taxonomies'          => [],
 88 | 		'has_archive'         => false,
 89 | 
 90 | 	);
 91 | 	
 92 | 	/* Additional Parameters for $args
 93 | 		'publicly_queryable'  => null, 
 94 | 		'exclude_from_search' => null, 
 95 | 		'show_ui'             => null, 
 96 | 		'show_in_nav_menus'   => null, 
 97 | 		'show_in_rest'        => null, 
 98 | 		'rest_base'           => null, 
 99 | 		'supports'            => ['title','editor','author','thumbnail','excerpt','trackbacks','custom-fields','comments','revisions','page-attributes','post-formats']
100 | 		'capability_type'   => 'post',
101 | 		'capabilities'      => 'post',
102 | 		'map_meta_cap'      => null, 
103 | 		'rewrite'             => true,
104 | 		'query_var'           => true,		
105 | 	*/
106 | 	
107 | 	register_post_type( 'quote', $args );
108 | 
109 | }


--------------------------------------------------------------------------------
/inc/spa.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 
 3 | add_action( 'wp_enqueue_scripts', 'theme_spa_scripts' );	
 4 | 
 5 | function theme_spa_scripts() {
 6 | 	
 7 | 	if ( is_page_template( 'templates/page-spa.php' ) ) {
 8 | 		//Enqueuing script for certain page template
 9 | 		$ver = '0.01';
10 | 		$js_url = get_template_directory_uri() . '/js/';	
11 | 		wp_enqueue_script( 'spa-js', $js_url . 'spa.js', array('jquery'), $ver);
12 | 		
13 | 		//Getting site data (posts and pages information)
14 | 		$site_data = theme_get_spa_data();
15 | 		$ajax_url = admin_url('admin-ajax.php');
16 | 		
17 | 		//Make dynamic data available in spa.js
18 | 		wp_localize_script( 'spa-js', 'site_data', $site_data);
19 | 		wp_localize_script( 'spa-js', 'ajax_url', $ajax_url);	
20 | 	}
21 | }
22 | 
23 | 
24 | 
25 | //GETTING SAMPLE DATA FROM POSTS AND PAGES
26 | function theme_get_spa_data() {
27 | 
28 | 	$site_data = array();
29 | 	
30 | 	//Gethering posts and pages previews in one array
31 | 	$args = array(
32 | 		'post_type' => array( 'post', 'page'),
33 | 		'posts_per_page' => 99,	
34 | 	);
35 | 	
36 | 	$query = new WP_Query( $args );
37 | 	
38 | 	//WP_Query Loop
39 | 	while ( $query->have_posts() ) {
40 | 		$query->the_post();
41 | 		global $post;
42 | 		$title = get_the_title();
43 | 		$content = get_the_excerpt();
44 | 		$photo = get_the_post_thumbnail_url($post->ID, 'large');
45 | 		if (!$photo) {
46 | 			$i = random_int(1,4);
47 | 			$photo = theme_image('unsplash-' . $i . '.jpg', false);
48 | 		}
49 | 		
50 | 		$site_data[] = array('id' => $post->ID, 'post_type' => $post->post_type, 'title' => $title, 'content' => $content, 'photo' => $photo);
51 | 	}
52 | 	
53 | 	wp_reset_postdata();
54 | 		
55 | 	return $site_data;
56 | }


--------------------------------------------------------------------------------
/inc/theme-image.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 
 3 | //Utility function for static images inside theme
 4 | function theme_image($image_name = 'placeholder.png', $print = true, $dir = '/img/') {
 5 | 	$image_path = get_template_directory() . $dir . $image_name;
 6 | 	$image_url = get_template_directory_uri() . $dir . $image_name;
 7 | 	
 8 | 	//If  got wrong URL -- show error placeholder instead
 9 | 	if ( !file_exists($image_path) ) $image_url = get_template_directory_uri() . '/img/error.png';
10 | 	
11 | 	if ($print) {
12 | 		echo $image_url;
13 | 	}
14 | 	
15 | 	else {
16 | 		return $image_url;
17 | 	}
18 | }


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php get_header(); ?>
 2 | 
 3 | <?php while(have_posts()): the_post(); ?>
 4 | 	<img src="<?php theme_image('placeholder.png'); ?>" style="width: 320px;">
 5 |    	<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
 6 |    	<div><?php the_content(); ?></div>
 7 | <?php endwhile; ?>
 8 | 
 9 | <?php get_footer(); ?>
10 | 


--------------------------------------------------------------------------------
/js/ajax.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 |    $(document).ready( function() {
 3 | 	$('.js-ajax').click( function() {
 4 | 		
 5 | 		let current_time = Math.floor(Date.now() / 1000);
 6 | 
 7 | 		$.ajax( { type:"post", url:ajax_url, dataType:"json", data:{ action:'sample_ajax_action', current_time:current_time }
 8 | 		}).always( function( out ){
 9 | 			console.log(out);
10 | 			$( ".ajax-message" ).text( out.message );
11 | 		});
12 | 		return false;
13 | 		
14 | 	});
15 |   });	
16 | })( jQuery );
17 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | //This snippet allows to have DIVs 100% screen height on mobile devices, use height: calc(100% * var(--vh)); in CSS
2 | 
3 | let vh = window.innerHeight * 0.01;
4 | document.documentElement.style.setProperty('--vh', `${vh}px`);
5 | 
6 | window.addEventListener('resize', () => {
7 | 	vh = window.innerHeight * 0.01;
8 | 	document.documentElement.style.setProperty('--vh', `${vh}px`);
9 | });


--------------------------------------------------------------------------------
/js/spa.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 |    
 3 | 	$(document).ready( function() {
 4 | 		let current_item = 0;
 5 | 
 6 | 		$('.js-action').click( function() {
 7 | 			if (typeof site_data !== 'undefined') {
 8 | 				let posts_count = site_data.length - 1;
 9 | 
10 | 				$('.js-title').addClass("animate");
11 | 				$('.js-title').html(site_data[current_item]['title']);
12 | 				$('.js-text').addClass("animate");
13 | 				$('.js-text').html(site_data[current_item]['content']);
14 | 				$('.js-photo').attr('src', site_data[current_item]['photo']);
15 | 
16 | 				setTimeout(()=> {
17 | 					$('.js-title').removeClass("animate");
18 | 					$('.js-text').removeClass("animate");
19 | 				}, 500);
20 | 
21 | 				current_item++
22 | 
23 | 				if (current_item > posts_count) {
24 | 					current_item = 0;
25 | 				}	
26 | 				
27 | 				$('.spa-message').text( site_data[current_item]['post_type'] + ' ID: ' + site_data[current_item]['id'] + ' is shown');
28 | 			}
29 | 
30 | 			else {
31 | 				alert('Error! Site Data is Undefined.');
32 | 			}
33 | 		});
34 | 	});
35 | 	
36 | })( jQuery );
37 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidcreature/zero_wp/919bb79737af0b3176983723e6c87cf69f33a851/screenshot.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /*
2 |  * Theme Name: Zero WP 3.0
3 |  * Description: Ultra-minimal WordPress starter theme. Optimized for converting html-layouts to websites. Also is a good start for SPA, creating unique projects.
4 |  * Theme URI:   https://github.com/solidcreature/zero_wp
5 |  * Author:      Nikolay Mironov
6 |  * Author URI:  http://wpfolio.ru
7 | */
8 | 
9 | 


--------------------------------------------------------------------------------
/templates/page-ajax.php:
--------------------------------------------------------------------------------
  1 | <?php //Template Name: Ajax Powered Page ?>
  2 | 
  3 | <?php get_header(); ?>
  4 | 
  5 | <style>
  6 | @keyframes reveal {   
  7 |   0% {     
  8 |     opacity: 0;   
  9 |   }    
 10 | 
 11 |   100% {
 12 |      opacity: 1; 
 13 |   }
 14 | }
 15 | 	
 16 | .ajax-wrapper {
 17 | 	width: 100%;
 18 | 	height: calc(100 * var(--vh));
 19 | 	background: linear-gradient(165.69deg, #00034D 10.16%, #77006B 96.17%);	
 20 | 	display: flex;
 21 | 	flex-direction: column;
 22 | 	justify-content: center;
 23 | 	align-items: center;
 24 | 	padding: 40px 20px;
 25 | }
 26 | 
 27 | .logged-in.admin-bar .ajax-wrapper {
 28 | 	height: calc((100 * var(--vh)) - 32px);	
 29 | }	
 30 | 
 31 | .ajax-card {
 32 | 	max-width: 420px;
 33 | 	background: #fff;
 34 | 	border-radius: 12px;
 35 | 	overflow: hidden;
 36 | }
 37 | 
 38 | .ajax-card__content {
 39 | 	padding: 12px 24px 32px 24px;
 40 | }
 41 | 
 42 | .ajax-card__title {
 43 | 	margin: 0 0 0.3em 0;
 44 | 	padding: 0;
 45 | 	color: var(--c-accent);
 46 | 	font-family: var(--font-main);
 47 | 	font-size: var(--size-h1);
 48 | 	line-height: var(--lh-h1);
 49 | }
 50 | 
 51 | .ajax-card__title.animate {
 52 | 	animation: reveal 1 0.5s ease;
 53 | }	
 54 | 
 55 | .ajax-card__subtitle {
 56 | 	margin: 0 0 1em 0;
 57 | 	padding: 0;
 58 | 	color: var(--c-secondary);	
 59 | 	font-family: var(--font-secondary);
 60 | 	font-size: var(--size-text);
 61 | 	line-height: var(--lh-text);
 62 | }
 63 | 
 64 | .ajax-card__subtitle.animate {
 65 | 	animation: reveal 1 0.5s ease;
 66 | }
 67 | 
 68 | .ajax-card__button {
 69 | 	font-family: var(--font-main);
 70 | 	font-size: var(--size-text);
 71 | 	font-weight: bold;
 72 | 	background-color: var(--c-main);
 73 | 	border: 0;
 74 | 	display: flex;
 75 | 	height: 42px;
 76 | 	width: 160px;
 77 | 	justify-content: center;
 78 | 	align-items: center;
 79 | 	border-radius: 4px;
 80 | 	color: #fff;
 81 | 	cursor: pointer;
 82 | }
 83 | 
 84 | .ajax-card__button:hover {
 85 | 	background-color: var(--c-accent);	
 86 | }		
 87 | 	
 88 | .ajax-message {	
 89 | 	max-width: 420px;
 90 | 	color: #fff;
 91 | 	font-family: Arial, sans-serif;
 92 | 	font-size: 13px;
 93 | 	padding: 12px 0;
 94 | }	
 95 | </style>
 96 | 
 97 | <div class="ajax-wrapper">
 98 | 
 99 | 	<?php if ( function_exists('sample_ajax_action_callback') ): ?>
100 | 	
101 | 		<div class="ajax-card">
102 | 			<img class="ajax-card__photo js-photo" src="<?php theme_image('unsplash-' . random_int(1,4) . '.jpg'); ?>">
103 | 			<div class="ajax-card__content">
104 | 				<h1 class="ajax-card__title js-title">AJAX Example</h1>
105 | 				<h3 class="ajax-card__subtitle js-text">Just press a button</h3>
106 | 				<button class="js-ajax ajax-card__button">Click me</button>
107 | 			</div>
108 | 		</div> 
109 | 		<div class="ajax-message"></div>
110 | 	
111 | 	<?php else: ?>
112 | 
113 | 		<div class="ajax-card">
114 | 			
115 | 			<img class="ajax-card__photo js-photo" src="<?php theme_image('unsplash-' . random_int(1,4) . '.jpg'); ?>">
116 | 			<div class="ajax-card__content">
117 | 				<h1 class="ajax-card__title">Error!</h1>
118 | 				<h3 class="ajax-card__subtitle">Remove <code>//</code> in <code>functions.php</code> on line 12<br>To make AJAX template works</h3>
119 | 			</div>
120 | 				
121 | 		</div> 
122 | 	
123 | 	
124 | 	<?php endif; ?>
125 | 	
126 | </div>	
127 | 
128 | <?php get_footer(); ?>
129 | 


--------------------------------------------------------------------------------
/templates/page-spa.php:
--------------------------------------------------------------------------------
  1 | <?php //Template Name: Single Page Application ?>
  2 | 
  3 | <?php get_header(); ?>
  4 | 
  5 | <style>
  6 | @keyframes reveal {   
  7 |   0% {     
  8 |     opacity: 0;   
  9 |   }    
 10 | 
 11 |   100% {
 12 |      opacity: 1; 
 13 |   }
 14 | }
 15 | 	
 16 | .spa-wrapper {
 17 | 	width: 100%;
 18 | 	height: calc(100 * var(--vh));
 19 | 	background: linear-gradient(165.69deg, #00034D 10.16%, #77006B 96.17%);	
 20 | 	display: flex;
 21 | 	flex-direction: column;
 22 | 	justify-content: center;
 23 | 	align-items: center;
 24 | 	padding: 40px 20px;
 25 | }
 26 | 
 27 | .logged-in.admin-bar .spa-wrapper {
 28 | 	height: calc((100 * var(--vh)) - 32px);	
 29 | }	
 30 | 
 31 | .spa-card {
 32 | 	max-width: 420px;
 33 | 	background: #fff;
 34 | 	border-radius: 12px;
 35 | 	overflow: hidden;
 36 | }
 37 | 
 38 | .spa-card__content {
 39 | 	padding: 12px 24px 32px 24px;
 40 | }
 41 | 
 42 | .spa-card__title {
 43 | 	margin: 0 0 0.3em 0;
 44 | 	padding: 0;
 45 | 	color: var(--c-accent);
 46 | 	font-family: var(--font-main);
 47 | 	font-size: var(--size-h1);
 48 | 	line-height: var(--lh-h1);
 49 | }
 50 | 
 51 | .spa-card__title.animate {
 52 | 	animation: reveal 1 0.5s ease;
 53 | }	
 54 | 
 55 | .spa-card__subtitle {
 56 | 	margin: 0 0 1em 0;
 57 | 	padding: 0;
 58 | 	color: var(--c-secondary);	
 59 | 	font-family: var(--font-secondary);
 60 | 	font-size: var(--size-text);
 61 | 	line-height: var(--lh-text);
 62 | }
 63 | 
 64 | .spa-card__subtitle.animate {
 65 | 	animation: reveal 1 0.5s ease;
 66 | }
 67 | 
 68 | .spa-card__button {
 69 | 	font-family: var(--font-main);
 70 | 	font-size: var(--size-text);
 71 | 	font-weight: bold;
 72 | 	background-color: var(--c-main);
 73 | 	border: 0;
 74 | 	display: flex;
 75 | 	height: 42px;
 76 | 	width: 160px;
 77 | 	justify-content: center;
 78 | 	align-items: center;
 79 | 	border-radius: 4px;
 80 | 	color: #fff;
 81 | 	cursor: pointer;
 82 | }
 83 | 
 84 | .spa-card__button:hover {
 85 | 	background-color: var(--c-accent);	
 86 | }			
 87 | 	
 88 | .spa-message {	
 89 | 	max-width: 420px;
 90 | 	color: #fff;
 91 | 	font-family: Arial, sans-serif;
 92 | 	font-size: 13px;
 93 | 	padding: 12px 0;
 94 | }		
 95 | </style>
 96 | 
 97 | <div class="spa-wrapper">
 98 | 
 99 | 	<?php if ( function_exists('theme_get_spa_data') ): ?>
100 | 	
101 | 		<div class="spa-card">
102 | 			<img class="spa-card__photo js-photo" src="<?php theme_image('unsplash-' . random_int(1,4) . '.jpg'); ?>">
103 | 			<div class="spa-card__content">
104 | 				<h1 class="spa-card__title js-title">SPA Example</h1>
105 | 				<h3 class="spa-card__subtitle js-text">All Site Data is available in <code>site_data</code> variable in JS</h3>
106 | 				<button class="js-action spa-card__button">Click Me!</button>
107 | 			</div>
108 | 		</div> 	
109 | 		<div class="spa-message"></div>
110 | 	
111 | 	<?php else: ?>
112 | 
113 | 		<div class="spa-card">
114 | 			
115 | 			<img class="spa-card__photo js-photo" src="<?php theme_image('unsplash-' . random_int(1,4) . '.jpg'); ?>">
116 | 			<div class="spa-card__content">
117 | 				<h1 class="spa-card__title">Error!</h1>
118 | 				<h3 class="spa-card__subtitle">Remove <code>//</code> in <code>functions.php</code> on line 11<br>To make SPA template works</h3>
119 | 			</div>
120 | 				
121 | 		</div> 
122 | 	
123 | 	
124 | 	<?php endif; ?>
125 | 	
126 | </div>	
127 | 
128 | <?php get_footer(); ?>
129 | 


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