Updated on 14 Feb 2024
We shall use AJAX to dynamically fetch the clicked post's data and load it in the offcanvas with a loading indicator appearing initially.
Note: The steps below need you to use a child theme. While it may be possible to implement this tutorial using a plugin like WPCodeBox, that is not covered.
Here's the overall picture:
- We create a section-type of Bricks template called "Offcanvas Post Content". Inside this, we place the elements that should appear for each post. Ex.: Post Title, Image (set to featured image) and Post Content.
- We create a Page having a Bricks Query Loop that pulls the latest 5 posts. Each loop item contains a Basic Text element with a data attribute = the post ID.
- User clicks on the post link.
ajax()function using a) the URL to the file in WordPress AJAX API responsible for handling AJAX requests and b) URL of the loading indicator image passed to it from PHP.
- Request gets sent to
admin-ajax.phplooks at the registered action and runs the function hooked to this action. Inside the function we write PHP for outputting the clicked post's content incl. any CSS that Bricks generates for the section-template.
If you aren't already using it, download, upload and activate Bricks child theme.
It will not affect the functionality of your site if it has been built without a child theme.
Create a directory called
Inside the above, create directories having these directories:
This is a BricksLabs Pro tutorial.
For full access login below or create your BricksLabs Pro account