- use an Easy Posts component to output title links of the 5 latest posts in the left column.
- use another Easy Posts component to output the post content of the latest post in the right column.
- set up a custom function in which we define how the post data (in the right column) should be shown.
- add JS that executes when the post link is clicked and sends a AJAX request to the server while passing the ID of the post that has been clicked to the above function. The response from the PHP function is then sent back to the JS in which we specify the right content to be replaced with the received response data.
- load the JS file using a custom functionality plugin.
Edit the Page where you want to set up AJAX post loading with Oxygen.
Add a Section.
Add a Columns component with say 30% and 70% widths for the columns.
In the left column, add an Easy Posts component with a custom query with
Post Type and Count set to 5.
<?php printf( '<div><a href="%s" class="post-link" data-id="%s">%s</a></div>', esc_url( get_the_permalink() ), get_the_ID(), esc_html( get_the_title() ) ); ?>
We are setting a class of
for each title link and adding the ID of that entry as the value of
attribute. Later in the JS file, we will retrieve this ID and pass it along in our Ajax request to the server.
You may delete all the default code added by Oxygen from the Template CSS (like in my test site) or modify it as needed.
In the right column, add an Easy Posts component with this manual query:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $499 one-time).
Already a member? Log in below or here.