Loading posts on click using WP REST API in Bricks

This Pro tutorial provides the steps to load the title and excerpt of the post whose title has been clicked from a list of posts. The ID of the clicked post title is included in a request to the WordPress REST API and the response data is processed and injected into the page without any page reloading.

Step 1

Edit your Page/Template with Bricks.

Copy this JSON and paste the Section built on our dev site.

We have the post titles (linked to #) of the 10 latest posts at the left and the latest post’s title and excerpt on the right.

For each post title link, we are adding a data attribute called data-id set to {post_id}.

‘read more →’ at the end of excerpt text is via the excerpt_more filter to be added in the next step.

Each post title link has a class of post-loadr assigned to it.

Add this custom CSS in the page settings:

#post-details {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

post-details is the ID we assigned to the right side query loop element.

Step 2

Download the finished plugin from the link below, upload it to your site and activate it.

Download plugin (https://k00.fr/sfihlkbr | password: 643281)

This plugin is meant to be customized.

Open it in a code editor like Visual Studio Code and go through the code.

Replace

if ( ! is_page( 'sample-page' ) ) {

as applicable.

Check the front end to see it in action.