Create and Delete Pages, Posts in JavaScript With WordPress REST API

These are AJAX examples for how to create/insert a new WordPress page or post in JavaScript/jQuery, using the WordPress REST API. This will also show you how to delete a page or post in the same way.

Before getting into the JavaScript/jQuery, we need to use wp_localize_script to send two pieces of information to the script. We need to send the WordPress REST URL, and we need to send a nonce token.

To send these to the script, add this PHP right after your wp_enqueue_script where you load your JavaScript file.

wp_localize_script( 'your-script-handle', 'my_restapi_details', array(
	'rest_url' => esc_url_raw( rest_url() ),
	'nonce' => wp_create_nonce( 'wp_rest' )
) );

In the snippet above, you must change your-script-handle to the handle of your JavaScript file.

Now, here are four AJAX/jQuery examples that use the WordPress REST API: Create/Insert a Page, Create/Insert a Post, Delete a Page, and Delete a Post. These are sample AJAX calls; you would use these in your own script based on some user action, depending on the needs of your script.

These only work when a user is logged in.

1. Create a New Page

   This first AJAX example will create a new page. You can edit the page title on line 7. For the page content, this example just adds a sample shortcode which you can see on line 8. The page status on line 10 can be one these: publish, future, draft, pending, private. The default status is “draft”, so if you want to create an unpublished draft of a page, then remove line 10.

   This example doesn’t specify an author for the page. By default, the author will be the logged-in user. You can designate an author by passing the desired user ID. For example, add this: author: 4, after the status on line 10. That would specify the author as the person with the user ID of 4.

   This example saves the ID of the newly-created page on line 19. This way, you can use the page ID if you need it elsewhere in your script.

   // Create a page with the WordPress REST API
   
   $.ajax({
   	method: "POST",
   	url: my_restapi_details.rest_url + 'wp/v2/pages',
   	data: {
   		title: 'Your Desired Page Title',
   		content: '[my_sample_shortcode]',
   		type: 'page',
   		status: 'publish',
   	},
   	beforeSend: function ( xhr ) {
   		xhr.setRequestHeader( 'X-WP-Nonce', my_restapi_details.nonce );
   	},
   	success : function( response ) {
   
   		// Save the page ID in case you need it for something
   
   		var myNewPageID = response.id;
   
   	}
   });
   

2. Create a New Post

   This AJAX example will create a new post. The difference here is that the REST URL endpoint path (line 5) is different than the one above. For posts, it is wp/v2/posts rather than wp/v2/pages.

   The “type” on line 9 is now “post” although this is the default type, so line 9 can be safely omitted if you want to create a regular post.

   You can edit the post title on line 7, the post content on line 8, and the post status on line 10. Just like with pages, the default status is “draft.” So, to create an unpublished draft of a post, simply omit line 10.

   This example saves the post ID of the newly-created post on line 19. This way, you can use the post ID if you need it elsewhere in your script.

   // Create a post with the WordPress REST API
   
   $.ajax({
   	method: "POST",
   	url: my_restapi_details.rest_url + 'wp/v2/posts',
   	data: {
   		title: 'Your Desired Post Title',
   		content: '[my_sample_shortcode]',
   		type: 'post',
   		status: 'publish',
   	},
   	beforeSend: function ( xhr ) {
   		xhr.setRequestHeader( 'X-WP-Nonce', my_restapi_details.nonce );
   	},
   	success : function( response ) {
   
   		// Save the post ID in case you need it for something
   
   		var myNewPostID = response.id;
   
   	}
   });
   

3. Delete a Page

   This AJAX example will delete a page using the WordPress REST API. Here, the method on line 4 is “DELETE” and you can see the REST endpoint on line 5. You must replace myPageID with the ID of the page that you want to delete.

   This example adds “?force=true” to the endpoint URL. This will make the page bypass the Trash and it will force it to be permanently deleted. If you prefer to send the page to the Trash, remove + '?force=true' from line 5, but leave the comma in place.

   // DELETE a page with the WordPress REST API
   
   $.ajax({
   	method: "DELETE",
   	url: my_restapi_details.rest_url + 'wp/v2/pages/' + myPageID + '?force=true',
   	beforeSend: function ( xhr ) {
   		xhr.setRequestHeader( 'X-WP-Nonce', my_restapi_details.nonce );
   	}
   });
   
   

4. Delete a Post

   This AJAX example will delete a post using the WordPress REST API.

   This is the same as the example above for pages, except that the REST URL endpoint path is different. For posts, it is wp/v2/posts rather than wp/v2/pages.

   You must replace myPostID, on line 5, with the ID of the post that you want to delete.

   This example adds “?force=true” to the endpoint URL. This will make the post bypass the Trash and it will force it to be permanently deleted. If you prefer to send the post to the Trash, remove + '?force=true' from line 5, but leave the comma in place.

   // DELETE a post with the WordPress REST API
   
   $.ajax({
   	method: "DELETE",
   	url: my_restapi_details.rest_url + 'wp/v2/posts/' + myPostID + '?force=true',
   	beforeSend: function ( xhr ) {
   		xhr.setRequestHeader( 'X-WP-Nonce', my_restapi_details.nonce );
   	}
   });