Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Brett Smith
Brett Smith
4,261 Points
Posted by Brett Smith
Brett Smith
4,261 Points

One Page Wordpress Site using ACF

I'm new to Wordpress and I recently completed the One Page Wordpress workshop and I'm now trying to create my own one pager.

How can I create a one page site while using the Advanced Custom Fields plugin? If I'm using ACF I can't use the same template file (like the one-page-site.php file used in the workshop) for every page.

3 Answers

Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points

-- "If I'm using ACF I can't use the same template file (like the one-page-site.php file used in the workshop) for every page."

You can.

You can tell the ACF fields to only appear on the specific page that you want, those pages may all still use the same single template file, but as far as WordPress is concerned, they're all different pages and will be able to be treated that way by Advanced Custom Fields.

Brett Smith
Brett Smith
4,261 Points
Brett Smith
Brett Smith
4,261 Points

That makes sense but how can I use a CSS grid on the different fields? I'll have to use the_content() rather than the_field() right?

Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points

I'm not totally sure what you mean. Do you have any code?

Brett Smith
Brett Smith
4,261 Points
Brett Smith
Brett Smith
4,261 Points 
<?php 
/*

    Template Name: Porfolio Page

*/
?>
<?php get_header(); ?>
</section>
<?php 

    $args = array(
        'post_type' => 'portfolio'
    );

    $the_query = new WP_Query( $args );

?>

<?php if ( have_posts () ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <section class="portfolio">
      <div class="hero" style="background-image:url('<?php the_field( 'hero' ); ?>');height:400px;"></div>
      <div class="row">
        <div class="large-12 large-centered columns">
          <h3><?php the_field( 'title' ); ?></h3>
        </div>
        <div class="large-6 medium-7 small-10 small-centered large-centered columns browser">
          <img src="<?php the_field( 'screenshot' ); ?>" alt="Kelli Lynn Photography browser screenshot"> 
        </div>
        <div class="large-8 medium-10 small-12 large-centered medium-centered columns">
          <?php the_field( 'project_description' ); ?>
          <p>View more of this project on <a href="<?php the_field( 'dribbble_url' ); ?>">dribbble</a>.</p>
        </div>
      </div>
    </section>

<?php endwhile; else: ?>

    <p>There are no posts or pages to display.</p>

<?php endif; ?>
Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points

That looks good to me to be honest.

Unless I'm not fully understanding what you're saying.

Brett Smith
Brett Smith
4,261 Points
Brett Smith
Brett Smith
4,261 Points

That works perfectly on a multiple page site. I guess I don't fully understand exactly what I'm doing to combine all of the pages. I've been using the following code to combine the pages:

<?php 
    $args = array(
        'post_type' => 'page',
        'order' => 'ASC'
    );
    $the_query = new WP_Query( $args );         
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

When I do this it shows the home page post about 5 times and no other posts. Am I missing something?

Brett Smith
Brett Smith
4,261 Points
Brett Smith
Brett Smith
4,261 Points

That works perfectly on a multiple page site. I guess I don't fully understand exactly what I'm doing to combine all of the pages. I've been using the following code to combine the pages:

<?php 
    $args = array(
        'post_type' => 'page',
        'order' => 'ASC'
    );
    $the_query = new WP_Query( $args );         
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

When I do this it shows the home page post about 5 times and no other posts. Am I missing something?