Tommaso Sangiorgio Tommaso Sangiorgio - 8 months ago 38
jQuery Question

How to create a frame in Wordpress in order to load the articles in the front page without changing URL?

I'm creating a layout for wordpress in which I'd like to show more than one HORIZONTAL scroll frames, inside these frames I want to show page numbers, the frames would be the "post navigation". It is important that articles are loaded into the frames, so when you go ahead with the arrow, more post are showed. But it is also important that I can change the articles page WITHOUT closing the front page URL, everything should be navigable from the front page, in these frames. Maybe there will be 3 frames: latest posts, featured posts and a feed carousel connected to another site. I want to do that just for the frontpage, search-page will be different etc.

I looked in the internet but i didn't find nothing like this. Somebody could help me, please?

Answer Source

There could be a couple of options to solve this but it sounds like an AJAX solution is what you are looking for. AJAX allows you to respond to a user action without reloading the page.

So within your front page you can tag a div with an ID, then when a user interacts with your arrow buttons your AJAX code will load new content into this div. I did something like this myself here.

A full solution is out of the scope of this site imo but I can guide you through some steps which should get you started:

  • You will need to create your arrow buttons with individual identifiers.
  • You could create a by editing your theme, this is where your content will be loaded.
  • You can use jQuery to manage the AJAX operation. WordPress includes jQuery so you have access to all this functionality in your plugin.
  • You will create an AJAX js script will need to listen for a click (OnClick) on the arrow buttons.
  • This script will have a function which fires when the loading of the new content is triggered.
  • When a click is detected you will need to run a wp query that will select the content you want to show and display it in the of your choice.

I have written up how I did this here, but my requirement was a little different. I also did it with a Genesis theme, but this does not change the overall methodology. With the information above you should be able to research more information on each step, each part could be a blog post in its own right!