W_R_M W_R_M - 2 years ago 139
Javascript Question

Load Wordpress Post In Div Using A Different Template

I have a page with an image gallery. Each image is linked to open a wordpress post in a div above the gallery. I have that working, but it loads the whole page including header and footer.

What I need is to use a custom page template to display only the parts of the page I need. Like remove the header and footer for example from the page that loads in the div. I know how to create a template, but can't figure out how to get the post in the div to use that page template.

Here is how I have it setup.

Script in header:

<script type="text/javascript">
var post_url = $(this).attr("href");
return false;

Link in gallery:

<div class="ngg-gallery-thumbnail" >

<a href="../<?php echo $image->ngg_custom_fields["Link"]; ?>"


title="<?php echo $image->description ?>"

<?php echo $image->thumbcode ?> >

<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image-> thumbnailURL ?>" <?php echo $image->size ?> />



Div above Post/Gallery on that page:

<div id="Div-That-Loads-Post">


Like I said it loads the page in the div. How can I go about specifying the template it loads in the div? I can't change the original post template because I want that to stay intact on its original page.

Also interested if there is any better way to go about achieving this same experience.

Any help appreciated. Thanks.

Answer Source

Comment helped me get on the right track but had to solve a few other problems to accomplish. Thanks for the help. This is how I did it if anyone needs to change url to id in this way.

Link For Image:

-class tells script this is the link. You will put the slug of post for href.

<a href="SlugOfPostGoesHere" class="ajax" </a>

Div on same page, this div will load custom php page from script:

<div id="tabs">


Script In Header:

-Pulls slug from href and creates variable.(postslug in this case)

-Loads "loading..." in div #tabs while loading.

-Loads custom php page in the div #tabs on that same page with the variable appended to url.(you won't see this in browser)

-Scrolls to top of page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
        var postslug = $(this).attr("href")
        $("#tabs").load("../custom-page.php?slugid=" + postslug);
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;

And then on your custom PHP Page you need to put:

<?php require( "wp-load.php" ); ?> 

(or whatever the path is to that wordpress page so you can use wp functions)

Also this code to get the ID of the post from the slug that you passed in the URL:

-First Line gets post slug from variable slugid in url and sets it to variable $slug.

-Second line creates full URL from slug.

-Third line gives you post ID from url.

$slug = $_GET['slugid'];
$url = ("http://www.yourwebsite.com/" .$slug);
$postid = url_to_postid($url);

Now you can code page to use post ID to load the content you want in the div.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download