Published on Aug 23, 2020

Loading posts using AJAX in Oxygen

Sridhar Katakam

This members-only tutorial provides the steps to dynamically pull and display the post data when a post's title link is clicked using AJAX (without page refresh) in Oxygen.

We shall

  • 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.
AJAX call process flow in WordPress

Step 1

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 Post Type and Count set to 5.

Template PHP:

<?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 post-link for each title link and adding the ID of that entry as the value of data-id 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.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-down