Question

After the user clicks a link, I want to load the corresponding page within the currentpage. This ajaxpage should be themed differently than it’s non-ajax page.

The pages would be added by the client in different languages. So there is no fixed id’s and the client shouldnt add the same article twice (1 for normal and 1 for ajax). This rules manually overwriting templates out.

The first part, ajax loading of content is easy to do, but I don’t know how to display content in different ways.

So

domain.com/product/car direct visit shows a product (car) using single-product.php as template which includes a header and footer.

ajax loading domain.com/product/car would show a product (car) but without a header and footer and perhaps some small layout changes.

My initial thought would be setting some template dynamicly (template-product-ajax.php) but Im not sure if this is possible or how.

In short, how can I create a different template/layout/view when loading a page with ajax in wordpress

Answer 1

You would have to pass in a series of variables, including the page/post ID you want to load, what kind of object you’re trying to load (either ‘page’ or ‘post’) and a boolean to ensure that the standard get_header() function isn’t loaded (as you only want the content of the page, not the headers).

Somewhere within the template, you can use that boolean to determine the template’s behavior. For example:

<?php
/*Template Name: AJAX Content*/
if(!isset($_POST['bool']))
    get_header();
?>
<div id="body">
    <div class="page_content">
    <?php
        if(isset($_POST['bool']))
        {
            $object = $_POST['ob_type'] == 'page' ? get_page($_POST['PID']) : get_post($_POST['PID']);
            echo $object->post_content;
            /*echo '<pre>';var_dump($object);echo '</pre>';//Uncomment this section if you want to know what you can access with variable $object*/
        {
        else
        {
            //STANDARD LOOP
        }
    ?>
    </div>
</div>

This is untested, but it should help get you started if you’re already familiar with AJAX calls and sending POST data to a separate page.