How do I fetch the static front page using the REST API?

Question

I would like to create an Angular 2 SPA that uses the WordPress REST API as a back-end. How can I use the API to fetch the page the user has set as their front page?

Answer 1

We could implement our own endpoint:

https://example.tld/wpse/v1/frontpage

Here's a simple demo (PHP 5.4+):

<?php
/** 
 * Plugin Name: WPSE - Static Frontpage Rest Endpoint
 */
namespace WPSE\RestAPI\Frontpage;

\add_action( 'rest_api_init', function()
{
    \register_rest_route( 'wpse/v1', '/frontpage/', 
        [
            'methods'   => 'GET',
            'callback'  => __NAMESPACE__.'\rest_results'
        ] 
    );
} );

function rest_results( $request )
{
    // Get the ID of the static frontpage. If not set it's 0
    $pid  = (int) \get_option( 'page_on_front' );    

    // Get the corresponding post object (let's show our intention explicitly)
    $post = ( $pid > 0 ) ? \get_post( $pid ) : null;  

    // No static frontpage is set
    if( ! is_a( $post, '\WP_Post' ) )
        return new \WP_Error( 'wpse-error', 
           \esc_html__( 'No Static Frontpage', 'wpse' ), [ 'status' => 404 ] );

    // Response setup
    $data = [
        'ID'      => $post->ID,
        'content' => [ 'raw' => $post->post_content ]
    ];

    return new \WP_REST_Response( $data, 200 );     
}

A successful response is like:

{"ID":123,"content":{"raw":"Some content"}}

and an error response is like:

{"code":"wpse-error","message":"No Static Frontpage","data":{"status":404}}

Then we can extend it to support other fields or rendered content by applying the the_content filter.

Answer 2

Because I build several Polymer & Angular SPA's for the frontend with WordPress backends I've created a plugin for this purpose https://wordpress.org/plugins/wp-rest-api-frontpage/

I hope this helps...

Basically it extends the native REST API with a new route:

wp-json/wp/v2/frontpage

Cheers!

Answer 3

I have just got this working using the plugin 'WP API Options' plugin. You can find the plugin here: https://en-gb.wordpress.org/plugins/wp-rest-api-options/

It allows you to see which page has been configured as the front page. Below is a TypeScript code snippet that uses the 'wp-api-angular' package.

getFrontPage(): Promise<any> {
    return this.wpApiPages
      .httpGet('/options/page_on_front')
      .toPromise()
      .then(response => response.json())
      .then(body => body.page_on_front)
      .then(frontPageId => this.wpApiPages
        .get(frontPageId)
        .toPromise()
        .then(response => response.json()))
      .catch(error => {});
}

Answer 4

This happens to be very simple. WordPress doesn't have frontpage endpoint by default but you can create one like this.

// Register Front Page route.
// URL will be: domainname.ext/wp-json/my-namespace/v1/frontpage/
register_rest_route(
  'my-namespace/v1', '/frontpage',
  array(
      'methods'  => 'GET',
      'callback' => [ $this, 'get_frontpage' ],
  )
);


// Callback function.
function get_frontpage( $object ) {

  // Get WP options front page from settings > reading.
  $frontpage_id = get_option('page_on_front');

  // Handle if error.
  if ( empty( $frontpage_id ) ) {
    // return error
    return 'error';
  }

  // Create request from pages endpoint by frontpage id.
  $request  = new \WP_REST_Request( 'GET', '/wp/v2/pages/' . $frontpage_id );

  // Parse request to get data.
  $response = rest_do_request( $request );

  // Handle if error.
  if ( $response->is_error() ) {
     return 'error';
  }

  return $response->get_data();
}