Load posts dynamically

Here’s how I’d approach it. Let me know in the comments if you need more detail.

1) Create a template that pulls back your initial page content — the default right panel content and the list of links for the left panel. Ensure the links have post_id set as the value of the id attribute.

2) Write a Javascript request function to request the content for the right panel, based on the link clicked in the left panel, using an ajax call. Pass the value of the id attribute and the callback function (from step 3). Write an init function to add it to the onclick event for each left hand panel link. Add the init function to the page load event.

3) Write a Javascript callback function to replace the left panel content with the results of your request.

4) Add an ajax action filter so WordPress knows how to handle your request. You’ll also need a php function that takes post id and returns the content sent back to the page. Here’s the codex page on using Ajax in WordPress. Here’s an important detail about using ajax filter actions when calling ajax from the front-end: https://wordpress.stackexchange.com/a/53729/4645 Put the php code into your functions.php file or add it to your site-specific plugin.

5) Put all the javascript into a file. Enqueue it in your functions.php file or site-specific plugin. (Here’s a tutorial on how only load the code for a specific template.)

Here’s a tutorial on loading posts through ajax, that will give you some code to get you started.

Leave a Comment