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.
