Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php
add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
wp_register_script( 'handlebarsjs', '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js' );
wp_enqueue_script( 'theme', get_stylesheet_directory_uri() . '/theme.js', array( 'jquery','handlebarsjs' ) );
$post_data = example_rest_theme_get_posts( get_query_var( 'page', 1 ) );
wp_localize_script( 'theme', 'EX_THEME', $post_data );
});
<?php
/**
* Get REST API response for posts
*
* @param int $page
*
* @return array
*/
function example_rest_theme_get_posts( $page = 1 ){
$controller = new WP_REST_Posts_Controller( 'post' );
$request = new WP_REST_Request('', '', array(
'page' => 1
));
$items = $controller->get_items($request );
return array(
'posts' => rest_ensure_response( $items )->get_data()
);
}
<?php
/**
* Get REST API response for posts with pagination info
*
* @param int $page
*
* @return array
*/
function example_rest_theme_get_posts( $page = 1 ){
$controller = new WP_REST_Posts_Controller( 'post' );
$request = new WP_REST_Request('', '', array(
'page' => 1
));
$items = $controller->get_items($request );
$response = rest_ensure_response( $items );
$headers = $response->get_headers();
return array(
'api' => rest_url( 'wp/v2/posts' ),
'page' => $page,
'pages' => $headers[ 'X-WP-TotalPages' ],
'posts' => $response->get_data()
);
}
<script id="pagination-template" type="text/x-handlebars-template">
<nav class="navigation " role="navigation" id="post-pagination">
{{#if hasMore }}
<a href="#main" id="nav-next">Next</a>
{{/if}}
{{#if hasLess }}
<a href="#main" id="nav-previous">Previous</a>
{{/if}}
</nav>
</script>
<script id="entry-template" type="text/x-handlebars-template">
<article id="post-{{id}}" class="post-{{id}} post type-post status-publish ">
<header class="entry-header">
<h2 class="entry-title"><a href="{{link}}" rel="bookmark">{{title.rendered}}</a></h2>
</header>
<div class="entry-content">
{{{content.rendered}}}
</div>
</article>
</script>
jQuery(function($) {
if( 'object' == typeof EX_THEME && 'undefined' != EX_THEME.posts ){
var posts = EX_THEME.posts,
template = Handlebars.compile($('#entry-template').html()),
$main = $( '#main' );
$.each( posts, function( i, post ){
$main.append( template(post) );
});
}
});
jQuery(function($) {
if( 'object' == typeof EX_THEME && 'undefined' != EX_THEME.posts ){
var posts = EX_THEME.posts,
template = Handlebars.compile($('#entry-template').html()),
paginationTemplate = Handlebars.compile($('#pagination-template').html()),
$main = $( '#main' ),
pages = parseInt( EX_THEME.pages ),
page = parseInt( EX_THEME.page );
$.each( posts, function( i, post ){
$main.append( template(post) );
});
pagination( pages );
function pagination( pages) {
var hasMore, hasLess;
if( page > 1 ){
hasLess = true;
}
if( pages > page ){
hasMore = true;
}
var pagination = {
hasMore: hasMore,
hasLess: hasLess
};
$main.append(paginationTemplate(pagination));
$( '#nav-next' ).on( 'click', function(){
page++;
getPosts();
});
$( '#nav-previous' ).on( 'click', function(){
page--;
getPosts();
});
}
}
});
jQuery(function($) {
if( 'object' == typeof EX_THEME && 'undefined' != EX_THEME.posts ){
var posts = EX_THEME.posts,
template = Handlebars.compile($('#entry-template').html()),
paginationTemplate = Handlebars.compile($('#pagination-template').html()),
$main = $( '#main' ),
pages = parseInt( EX_THEME.pages ),
page = parseInt( EX_THEME.page );
$.each( posts, function( i, post ){
$main.append( template(post) );
});
pagination( pages );
function pagination( pages) {
var hasMore, hasLess;
if( page > 1 ){
hasLess = true;
}
if( pages > page ){
hasMore = true;
}
var pagination = {
hasMore: hasMore,
hasLess: hasLess
};
$main.append(paginationTemplate(pagination));
$( '#nav-next' ).on( 'click', function(){
page++;
getPosts();
});
$( '#nav-previous' ).on( 'click', function(){
page--;
getPosts();
});
}
function getPosts(){
$.get( EX_THEME.api + '?page='+ page ).done( function(posts,status,xhr ){
var pages = xhr.getResponseHeader( 'X-WP-TotalPages' );
$main.empty();
$.each( posts, function( i, post ){
$main.append( template(post) );
});
pagination( pages );
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.