0

I'm building a theme from scratch that will use vue.js under the hood. I'm now using the standard wordpress endpoint to fetch pages and posts, I would really create my custom endpoint to pass as a response, a custom set of data instead of the default one provided by the REST API. I've already registered a custom endpoint for the menu and it's working fine. I want now to register two more endpoints to get pages and posts, but I'm not able to make the things work. I will get a 404 or a 500 error from the endpoint and I need to fix this. To get evary page or post I'm using the slug, this mean that the GET or POST requests needs to have that parameters as querystring. I don't know if my code is correct, but I'm not able to get it inside my functions.php file. Any help will be appreciated.

functions.php

// NB: the code is part of a small class that manage the routes. the register_rest_route function
// is inside a class method and the rest_api_init is called correctly 
   register_rest_route( 'theme/v1', '/pages/', array(
      'method' => 'GET',
      'callback' => array($this, 'get_page_data')
    ));

  public function get_page_data( $request )
  {
    //var_dump( $request );
    $slug = $request->get_params('slug');
    $page = get_page_by_path( $slug, OBJECT, 'page' );  
    $page_meta = get_page_meta( $page->ID ); 
    $images = get_post_gallery_images( $page->ID );

    foreach( $images as $image_url ){
      $attachments_url[] = $image_url;
    }  

    $data = array(
      'ID' =>  $page->ID,
      'title' => get_the_title( $page->ID ),
      'content' => strip_shortcodes($page->post_content),
      'excerpt' => $page->post_excerpt,
      'page_meta' => $page_meta,
      'attached_images' => $attachments_url,
      'featured_image' => get_the_post_thumbnail_url( $page->ID )
    );
    return $data;
  }

// In the vue app js file the url for the request is 
https://mysitedomain.com/wp-json/theme/v1/pages?slug=pageslug 

1 Answer 1

0

First off, there's a default endpoint for retrieving pages, but I presumed that you intentionally did not use it?

Now the issues with your code:

  1. That $request->get_params() gets all the parameters and not a single one. So for single parameters, you should use $request->get_param().

    $slug = $request->get_params('slug');  // incorrect
    $slug = $request->get_param( 'slug' ); // correct
    
  2. The error 500 is likely because there's no function named get_page_meta in WordPress. Did you mean to use get_post_meta?

    $page_meta = get_page_meta( $page->ID ); // incorrect
    $page_meta = get_post_meta( $page->ID ); // correct
    // or do you have a custom get_page_meta() function?
    
  3. As I already mentioned in your other question, the correct array key is methods and not method. And for the exact same callback (and parameters), you can supply an array of methods. (See below examples)

  4. I'm guessing you got the error 404 because you tried to make a POST request to your custom endpoint, in which case the error is expected since you haven't added an endpoint for POST requests. So add it, like the examples here or see below:

    register_rest_route( 'theme/v1', '/pages', array(
        array(
            'methods'  => 'GET',
            'callback' => array( $this, 'get_page_data' ),
        ),
        array(
            'methods'  => 'POST',
            'callback' => array( $this, 'get_page_data' ),
        ),
    ) );
    
    // or provide an array of methods:
    register_rest_route( 'theme/v1', '/pages', array(
        'methods'  => [ 'GET', 'POST' ],
        'callback' => array( $this, 'get_page_data' ),
    ) );
    
5
  • Hi Sally, how are you? thanks for the quick answer. I'm using the default endpoint of wordpress to prototype the vue custom theme I'm creating. I want to switch to a custom endpoint because I want to include only the needed fields I want to render in the DOM. For now I'm having this issue, I will fix the typos in my code and try, I was reading about regex when params are passed, is it needed to make the endpoint works?
    – sialfa
    Commented Apr 22, 2020 at 12:31
  • Another thing, I'm using Multi post thumbnails to add more featured images to posts and pages to use them inside the page/post when displayed. I' have a custom rest field added to get the custom metadata fields, can I use the same method to output all the thumbnails ?
    – sialfa
    Commented Apr 22, 2020 at 12:35
  • Sorry I deleted my previous comments. And if you actually mean the default Pages routes like /wp/v2/pages/<id> (e.g. /wp/v2/pages/123), then that 123 (the id parameter) is required when retrieving a single Page or updating or deleting/trashing it. And yes, if your REST field is registered for the page post type, then it should be available when using the default Pages endpoints.
    – Sally CJ
    Commented Apr 22, 2020 at 13:42
  • ok, thanks. I've played a bit with the code and now I'm able to get all the info I need using the custom endpoints of my theme. I just need to do some little improvements to distinguish between posts and pages when a vue-router link is clicked. Thanks for the help
    – sialfa
    Commented Apr 22, 2020 at 19:41
  • You're welcome. And I revised the answer a bit because I thought that extra info may help you and someone else. :)
    – Sally CJ
    Commented Apr 22, 2020 at 23:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.