How can I dynamically load another page template to provide an alternate layout of the posts?

3 Views

I have a page that displays posts (4 on each row), with a thumbnail image & title for each. Is it possible to click a text/icon link and dynamically switch the page template? I’m looking to provide an alternate view of the posts, perhaps with larger images, more text/custom fields added etc.

I thought it would be easy just to link to another page template but it changes the url (would like the url to stay the same) and for some reason it loads the closest matching post, rather than the new page template (I have the page template nested within the first).

Read More

Something like this

domain.com/page/?view=list

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. I think I have a workable solution on what I was trying to do. This works but is there a better way? Also are there any implications I should be aware of when using $_GET? Didn’t realize it would be this easy 🙂 perhaps I’m missing something.

    <?php $view = $_GET["view"]; ?>

    Then if the URL is domain.com/page/?view=list I use an IF statement inside the loop to modify the markup as required:

    <?php if ( $view == "list" ) : ?>

    // code here for list view

<?php else : ?>

    // code here for normal default view

<?php endif; ?>

  3. You can change the stylesheet of your current page with some Javascript.

    In your header.php

    <link rel="stylesheet" href="main.css" id="stylesheet">

<script type="text/javascript">
function switchStyleSheet( url ) {
    document.getElementById( 'stylesheet' ).href = url;
}
</script>

    And in your template file :

    <a href="#" onclick="switchStyleSheet('main.css'); return false;" >switch to main style</a> 

<a href="#" onclick="switchStyleSheet('special.css'); return false;" >switch to special style</a>