Ok I’ve been trying to get this to work for 2 days now and I just can’t make it happen so I want to ask you guys for help.
Is it possible to load the content from a certain post into a div without the header and footer? IE, create a new single.php layout without the header and footer and ONLY call it when the visitor is on a specific page? Or let me put it this way, is it possible to load a single post without the header and footer in one specific template layout, and use the default single.php layout on the rest of the website?
My problem in depth: I have created a specific theme layout for one part of my website. On that page I have two divs. The left div contains a list of posts from one specific category and the other div loads the content from the left div when the links are clicked.
Now, my problem is that when you click on the links in the left div, the ENTIRE single post is loaded into the right div, including the header and footer. How can I create a template for those single posts so the header and footer won’t show?
I can’t remove the header and footer in single.php because that would drop the header and footer from the single post layout if the single posts links were clicked from other parts of the website.
Any help is appreciated because I’m really getting frustrated.
What about this plugin:
thanks for your reply Michael. I took a closer look at that plugin myself prior to posting here, but I think that plugin doesn’t solve my main problem.
As mentioned earlier I have 2 DIVS (using ajax). One div contains links (the left one), the other div (the right one) is used to display the content of those links, which in this case are wordpress posts.
I have a list of the 10 most recent posts on my front page, or take any posts in any category for that matter. If I assign a post template without header/footer to a set of posts, accessing the posts through the front page or any category won’t look very good.
What I think I need is a plugin that based on the referrer url strips the header/footer of the posts before displaying it in the right div. I can’t think of any other way to do this kind of thing 🙁 Iframes are another solution, but that is “outdated” and it doesn’t really solve my problem with the header/footer part. Using external files kills the idea of using wordpress posts 🙁
So if anyone has any great ideas, please share them with me 😉
Thanks again Michael.
strips the header/footer of the posts before displaying
That confused me.
Sorry Michael, let me try to put it this way 🙂
When a single post is displayed, the header and footer are always included. What I’m looking for is a plugin that will remove the header and footer when the post is displayed inside a DIV.
It doesn’t look right when an ENTIRE single post (including header & footer) is loaded inside a DIV using AJAX. You’ll end up with double footers and double headers.
So I want to know if it’s possible to somehow make WP know from where a single post is loaded. If I’m making a biography page with two divs. One div (floated left) contains links like “About me” “My history” “More info” etc, and I want to load that content into a 2nd div that’s floated right on the same page, I don’t want the full single post template to be loaded because the links are loaded without refreshing the entire page.
What I’m looking for is if a single post from the left DIV (on the biography page) is clicked and loaded into the right DIV, I want WP to remove the header and footer of the single post.
If the single post is loaded from anywhere else, the header and footer should be included.
I hope that makes it more understandable 😉 Thanks again Michael.
I think you need te re-design your page a bit.
Leave the header and footer. You always want them there.
The header and footer, is the sceleton of you website.
It’s what’s in between that you should change layout on.
<?php get_header(); //This gets the content of the current single post $title = get_the_title(); $content = get_the_content(); ?> <div id="leftSection"> <?php //This gets all posts for the specific category. query_posts("cat=123&orderby=title&order=ASC"); if (have_posts()) : while (have_posts()) : the_post(); List posts her endwhile; endif; ?> </div <div id="rightSection"> <?php echo '<h1>'.$title.'</h1>'; echo $content; ?> </div> <?php get_footer(); ?>
The reason I put the title and the content in variables, is that query_posts will delete the current single post stored in casche (or wherever it’s stored).
So in order to retrieve the current pages content, is by retrieving it before I call the query_posts.
ofcourse you could output the right div befiore the left, and save you some work 🙂
I’m no expert, but I think this is one solution that will work.
Thanks for your efforts spstieng, but that doesn’t work 🙁
Imagine a website with a header, two divs next to eachother positioned under the header, and the footer.
The div on the left is supposed to have a bunch of links. If those links are clicked, the content of those links is loaded into the right div, without refreshing or reloading the entire page. I know iframes works, but that’s a bad solution because the content from the links in the left DIV are loaded into the right div with the header and footer. That would give me two headers and two footers on both pages.
I know AJAX or jquery works for this kind of idea, but I’m not sure how to transform that into code. Here is an example with jquery:
I need some script that will figure out for me when the links are clicked in the left div, that the header and footer and removed from the single posts that are loaded into the right div.
If I’m not mistaken your solution would work if my entire page wouldn’t already have a header and footer outside those two divs.
Thanks again for your efforts, I still want to figure this out 😉
I just came on this thread while searching for something else. I haven’t worked this out, but conceptually – you can use the same single.php template for loading the div from Ajax as you use to display the single post page, if you conditionally display the header and footer in this template.
One way would be to pass a query parameter on the URL Ajax is loading. Something like ?hide=true
When that parameter is set on the page, jQuery would add a class “hide” to the header and footer divs. In the CSS, the class hide applies
display: noneto header and footer div’s. The code is still there, but they don’t display. Since that query parameter would only be active in the inner page called from Ajax, header and footer would still display correctly on the main page.
I’m looking for a solution to this one as well!
I’ve got exactly the same layout as ThreeD describes – I need to load posts into the right hand div while keeping the left as is (it lists posts, and paginates them – the problem is that when the page is reloaded it resets the paging to the first page….)
Any pointers greatly appreciated.
Do you have Prev/next links set for the left column?
Are you using query_posts to select the left col posts lists?
There is pagination code that must be added as part of a query_posts statement to keep the pagination working as intended. Symptoms of not working would be you click the next page link and the same page of posts appears again.
I’ve started a different post for my own question – (not trying to hijack ThreeD’s thread, sorry!)
Hi. I’m looking for similar solution as ThreeD. I want to have a div with a post from a certain category in my home page (it isn’t the difficult part). Below the div that contains this post, a list of the 10 previous posts from same category (it is simple to get too).
1- I can’t figure out how to get a post inside same div when I click a link from the list (ThreeD, can you post the code that you have been using to do it trought ajax? Thanks in advance)
2. If I’m not wrong, I think that I have read once that the call to wp header is always necessary because of the functions its calls. Although that, I have never tried to use a query_posts call without <?php get_header(); ?> so I don’t know what will happen if I do it.
I think that you are near to get I working ThreeD. Maybe with a call directly to the_content or something similar.
Did you find a solution to this issue yet?
Thanks in advance.
ps: sorry for my bad english.
I found this link. Maybe you can create your own code from this one.
Just a quick thought – you’ve probably solved this problem already but what about designing a custom single.php file that doesn’t call the header and footer files? Duplicate your single.php file, strip the code out that you don’t want to use, rename it simple_single.php or what ever and go from there.
- The topic ‘Single post layout for specific template’ is closed to new replies.