DEV Community

How to get all WordPress posts from the WP API with JavaScript

Jack Lyons on March 19, 2019

This post was originally published on my blog, jacklyons.me Just recently I was asked to scrape a Wordpress blog for a client to audit of all th...
Collapse
 
j_holtslander profile image
Jay Holtslander

To anyone stumbling across this post and trying the above code. Make sure you give enough time for the posts to be pulled. I kept thinking it wasn't working when it was actually still loading them all.

Collapse
 
elrond25 profile image
Carlos Araya

You can also get the x-wp-totalpages by making a HEAD request for the posts URL (/wp-json/wp/v2/posts/). This will return all the headers for the request and none of the content. If you need the total number of posts, there's another header you can get, x-wp-total.

Collapse
 
joshuaburleson profile image
Joshua Burleson • Edited

Nice, I've taken a similar approach on posts from multiple sources before. I would just like to point out that this use case is one of the ones where the backend, assuming you control it [ even though it's PHP (gross) ] is probably the better way to go ( primarily because the response time will be much faster than doing multiple queries ). You can use a filter on the rest_[your-post-type]_collections_params like so

function cpt_custom_max_per_page( $params ) {
    if ( isset( $params['per_page'] ) ) {
        $params['per_page']['maximum'] = *value of your choice*;
    }
    return $params;
}

$cpts = ['dancers', 'team_members', 'crew_members', 'locations', 'cats', 'pages'];

foreach( $cpts as $cpt ){
    $post_params_hook = 'rest_' . $cpt . '_collection_params';
    add_filter( $post_params_hook, 'cpt_custom_max_per_page', 10, 1 );
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jomuji profile image
José Mujica

Wow! this is great! can i do this in react?
in componentDidMount(){} i guess.

regards

Collapse
 
jackedwardlyons profile image
Jack Lyons

Sure if you wanna do this in react just pop it in a lifecycle hook. Let me know if you have any issues :)

Collapse
 
kirti_ujjwal profile image
उज्जवल कीर्ति (Ujjwal Kirti) 🇮🇳

hey thanks for the above code, but I have a doubt. Whenever I am sending the get request, the response that comes back has the required data. But when we look at title and content of each post, it has some pagebuilder in it, any idea how to remove it?

[vc_row type=”full_width_background” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” top_padding=”5%” bottom_padding=”13%” id=”team” overlay_strength=”0.3″ shape_divider_position=”bottom” bg_image_animation=”none” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_link_target=”_self” column_shadow=”none” column_border_radius=”none” width=”1/1″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” bg_image_animation=”none”][vc_column_text]

It looks like this.

Collapse
 
christopherhbutler profile image
Christopher Harold Butler

Awesome Jack!
Quick question: How can I authenticate to access a secure site that I have a login and account for?

Collapse
 
jackedwardlyons profile image
Jack Lyons

Not sure tbh ... but I'm sure some googling might provide an answer :) Otherwise you would need to make the content publicly accessible

Collapse
 
theketan2 profile image
Ketan Ramteke

I am trying to fetch data from my free Wordpress blog but its not working

Collapse
 
jackedwardlyons profile image
Jack Lyons

Can you share your code or the error message?

Collapse
 
darlenecodes profile image
Darlene

Wow, a wealth of data. Thank you!