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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: