WordPress custom posts archive with REST API and ajax

Register custom REST API field for the featured image (register_rest_field) #

Go to workflow

If you check the JSON data from the API url that we are using, there is no direct way we can fetch the post’s featured media directly. I mean no direct url is available. But the featured media ID featured_media: 34 is available which can be used for a new API request to get the featured image from. That is not what we want.

If we can get the direct image url in JSON, we can easily implement that in our code. So it is time to know how we can add our custom REST API field to the posts. WordPress offers us to do it very efficiently with register_rest_field() function and rest_api_init hook. Let’s add the following code in your functions.php –

add_action('rest_api_init', 'Post_Thumbnail');
function Post_Thumbnail(){
    register_rest_field('post', 'featuredImage', array(
        'get_callback'	=> function(){
            return esc_url( get_the_post_thumbnail_url(null, 'medium_large') );
        }
    ));
}

More on register_rest_field() can be found in WordPress developers guide. Beside this, if you want to register your own REST API route with your selected data, you can do it too. I have written about this in one of my previous article here. How to create a custom rest API route in WordPress.

Localize script for the base url of the site #

Go to workflow

In our jQuery script, if you check, you shall find hard coded base URL is used for the REST API.

//site url
let siteurl = encodeURI('https://demo.wp-api.org/wp-json')

But this is not the best way and it is not dynamic also. So if you want to switch the URL, you have to do it in JS manually. But there is a way to do it dynamically. That’s where we can use the localize script function and make it available for JS use.

If you remember when we have enqueued our JS file in functions.php with this tartist_enqueue_scripts() function, we can localize our script there itself. You may add the following code for the same.

function tartist_enqueue_scripts() {

    //main js file for the json based archive
    wp_enqueue_script('api-posts-archive', trailingslashit( get_stylesheet_directory_uri() ) . 'js/api-posts-archive.js', array('jquery'), '', true );

    //localizing script for the base api url
    wp_localize_script( 'api-posts-archive', 'site_info',
        array( 'siteurl' => esc_url(home_url('/wp-json') ) )
    );

}
add_action( 'wp_enqueue_scripts', 'tartist_enqueue_scripts', 10 );

If you save and refresh your archive page and “view source” in your browser, you will find the CDATA like so –

/* <![CDATA[ */
var site_info = {"siteurl":"http:\/\/example.com\/wp-json"};
/* ]]> */

Magical thing is, you can directly access this in your JS file. So you can now replace the site url like this –

let siteurl = encodeURI('https://demo.wp-api.org/wp-json') to let siteurl = site_info.siteurl

Now the API url is dynamic.

Conclusion

This entire tutorial is dedicated for innovative ideas of coding in WordPress. If you have understand the basic approaches that we have used here, you can see the possibilities with the JSON data in WordPress. You can make literally anything you want. For example, you can make dynamic live searches, integrate your site to mobile app for live interaction etc.