How to load all pages into one page with their templates

Question

You could do this exchanging each page name for the page you want to use. I just tested and it seems to work. I’m sure there are downsides (speed for one).

<?php
/**
 * Template Name: OnePager
 */
    <?php get_header(); ?>
    <!-- Page One - How it Works -->
    <section id="section1">
    <div class="container">
        <div class="col-sm-12">
            <?php
                $section1 = new WP_Query( 'pagename=how-it-works' );
                while ( $section1->have_posts() ) : $section1->the_post();?>
                <h1><?php the_title(); ?></h1>
                <?php the_content(); ?>
                <?php endwhile;
                wp_reset_postdata();
            ?>
            </div>
        </div>
    </div>
    </section>
    <!-- Page One - Who We Are -->
    <section id="section2">
    <div class="container">
        <div class="col-sm-12">
            <?php
                $section2 = new WP_Query( 'pagename=who-we-are' );
                while ( $section2->have_posts() ) : $section2->the_post();?>
                <h1><?php the_title(); ?></h1>
                <?php the_content(); ?>
                <?php endwhile;
                wp_reset_postdata();
            ?>
            </div>
        </div>
    </div>
    </section>
    <!-- Additional Pages Below -->

    <?php get_footer(); ?>

Sometimes people (including myself) are so determined on using php with wordpress that they waste a lot of time trying to do things like this when they could have created what ever it was in a fraction of the time by just using html. WordPress is mainly designed for dynamic content. Where for the most part one-pager sites are usually pretty static.

I’ve done a few of these one page sites using wordpress and here’s what I’ve tried.
1) Static html in a wordpress template (fastest and easiest)
2) Used a pagebuilder. There are a few out there, most notably Visual Composer that have support for doing this.
3) Advanced Custom Fields

Personally I liked the advanced custom fields method the most and have used it a couple times to do this. This way you can easily add image fields and text fields without having to worry about what markup the post editor might alter on output.

    <section>
        <h1><?php the_field('banner_h1_title_text'); ?></h1>
        <h2><?php the_field('banner_h2_description_text'); ?></h2>
        <a href="#" class="btn btn-default">
            <?php the_field('call_to_action_main_button'); ?>
        </a>
    </section>

Or if I’m feeling really lazy I’ll use Advanced Custom Fields like above except use it with the Custom Content Shortcode then you don’t have to worry about php at all. It’s sort of like mustache.js for wordpress, if you’ve ever used or heard of that. Here a couple pages I just made using that method (parallax / sticky-sections)

Just do whatever is easiest for you. There’s nothing wrong with using html for something that is hardly ever edited. Plus if you’re doing it for a client, it would give them a reason to keep you around as they would still need your help if they wanted that page changed 🙂

Related Posts: