Loading Frontend AJAX Content in WordPress

December 21, 2011 | WordPress

If you want to load some content on demand without a page refresh WordPress has you covered. AJAX is employed in the admin area and we can use those built in functions to achieve the same at the frontend.

The following code is available on github:gist.

Firstly we need to get the ajax functionality loaded on the frontend. The 

function fronted_ajaxurl()

below loads the file into our document head.

The PHP

Then we declare what we want to load and create function to load that content. Note that at the end of 

function dhf_loadme_ajax()

we call 

die();

. This is to make sure the action ends, otherwise you end up in a kerfuffle. You’ll need to put the 

fronted_ajaxurl

in your functions.php file, and the content you want to call can go anywhere as long as it’s linked to somehow. Keep it in your functions.php file if you’re unsure.

Note also there are two 

add_action()

calls. One is for users who are logged in, one is for users not logged in. See codex.wordpress.org/AJAX_in_Plugins

The JavaScript

JavaScript makes it all work:

I’m using jQuery here to call the function we declared up there in the PHP.

To make the whole process more fluid looking I’ve replace my “button” with an AJAX loading image while the content we actually want it being fetched.

The Sundries

There’s some code there for a button, and don’t forget some CSS to put the AJAX loading image in place.

And…

It’s all actually quite straight forward to do this. And by being a bit more creative with the JavaScript you could choose to load instantly content viewed on the desktop, and for mobile devices load it if the user requests it. That could be part of your Responsive Web Design plan. Go forth.

  • CG

    hi there.
    I’m trying to find a way to, in a wordpress PAGE, create in html an accordion menu (that’s easy).
    What I would like to do is to have each of those links to call content from other pages. To be more specific, I have some pages with nextgen galleries, and I want that menu to call those galleries to a specific div.

    Can you help me out?

    Thanks in advance

    • CG

      just to be more specific i have:
      1- menu inside the body (left div)
      2- empty div to receive the result of the ajax call (load, whatever) (right div)

      • http://deadlyhifi.com Tom de Bruin

        This is untested but firstly you’d need to be a bit more generic in your javascript and fetch the ID of the page you want to get. You can then pass this value through the ajax request.

        Then in the dhf_loadme_ajax function you can request the page you want with the ID you just received.

        Now getting the contents of the page may not be as easy as this but there is a PHP function `file_get_contents()`, so perhaps, with `file_get_contents(get_permalink( $id ));` you could get the contents of a page and place it in your specified div.

        I made a gist here: https://gist.github.com/1558945. Note that specifically in the JS `data: { action: “dhf_loadme_ajax”, page_id: request.attr(“id”) },` I’m sending a $POST value `page_id` which is the attribute ID value of the parent of the button being clicked on to request the page content.

        In fact, rather than `get_file_contents()` you can do a wp_query for just the ID you requested, then get its contents with `get_the_content()`.

        Anyway, I hope that makes sense and you’re able to figure it out.