Multiple “sections” on one site

If you are writing a theme, it shouldn’t be controlling what is shown. Themes display whatever is queried. The only time a theme should affect the query is through a front-page.php and even then, it has to respect the user’s choice of what to show on the front page.
Given that, you can look at the code for Twenty Seventeen to see how the front page shows other pages in sections (the ones chosen by the user in Customizer).

Otherwise, if you are writing a plugin, you can do whatever, and filter the template used to display to have it come out your way.

The way I do it in my theme is by creating a custom template and calling the individual sections with custom loops.

Here I have a custom 1 page scrolling site with 2 editable sections.
The first section called “home-page” is pulling its content from a page with the slug “home-page”
The second section is pulling its content from a page with the slug “home-section-2”
There is a div separating the 2 sections.
Code is Bootstrap 3 you can just strip out the loops and place them in your page.

Full template code:

<?php
/* 
*
* Template Name: Static Front Page
*
* This template is for a one page scrolling site. - rename to front-page.php and create pages
* Make sure to change page slug in loop to match pages in backend.
*/
?>

<?php get_header(); ?>
<div id="main" class="clearfix" role="main">
  <div id="content" class="wow fadeIn">
              
    <!-- begin sections where each section is a page of content -->
    <div class="section" id="first">
      <div class="container">
        <div class="row">
          <?php
            $query = new WP_query ('pagename=home-page'); // page slug adds pages to loop
              // The LooP
              if ( $query->have_posts() ) {
              while ( $query->have_posts() ) {
                $query->the_post(); ?>
                  <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
                  <section class="post_content">
                <?php the_content(); ?>
                  </section> <!-- end article section -->
                </article><!-- / article-->  
              <?php 
              }
              }
            wp_reset_postdata();
          ?>

        </div><!--row-->
      </div><!--/container-->
    </div><!--/.section-->

      <div class="section sep1">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
           <p class="h1 wow fadeIn" data-wow-delay="0.5s">This is text for the sep Section</p><!-- /.h1 -->
        </div><!-- /.col-sm-12 -->
      </div><!-- /.row -->
    </div><!-- /.container -->
  </div><!-- /.section sep1 -->

    <div class="section" id="second">
      <div class="container">
        <div class="row">
            <?php
              $query = new WP_query ('pagename=home-section-2'); // page name adds pages to loop
                // The LooP
                if ( $query->have_posts() ) {
                while ( $query->have_posts() ) {
                  $query->the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
                    <section class="post_content">
                  <?php the_content(); ?>
                    </section> <!-- end article section -->
                  </article><!-- / article-->  
                <?php 
                }
                }
              wp_reset_postdata();
            ?>
        </div><!--row-->
      </div><!--/container-->
    </div><!--/.section-->
              
  </div><!-- /. content -->
</div><!--/main-->
<?php get_footer(); ?>

Or you can change the type of loop and pull in posts instead of pages.

Well, @joyously. I want to create a theme so it’s easy to add information and customize as much as possible through wordpress.

@jaycbrf
Oke, thanks. I’ll have a look, but if im reading you guys right, it doesn’t exist today? But your code seems legit and might work for me. Thanks.

Having the same “design” on each section is not a great website and trying to work with widgets. Maybe there is a good plugin for this, dunno.

It’s not a good idea to develop a theme that requires a plugin as well. Offering optional plugins is fine, it’s any required ones that should be avoided.

Have you looked at the Gutenberg editor? It is block based. Users can move blocks around quite easily. You can build custom blocks that do special things. This sounds a lot like what you are trying to do with template code. Consider focusing on G’berg blocks instead of interactive templates.

@bcworkz okey – I see. Any good way to create a theme and still be able to use wordpress a CMS and not a blog? Want to be able to manage my own website through wordpress as a CMS.

Nah, looked at it now, looks good. Could try it out.

The best solution I can see right now is do “sub-pages” and add them to the parent-page automatically. And trying to use templates to specify the style of the “section”.
Want to be able to style the sections like ‘image left’, ‘big hero (background image with text)’ or whatever. So a user can choose style and have a more versatile and easy-to-use theme.

There will always be opposing forces in theme design between ease of use and flexibility. Determine who your target users are and do what’s best for them. You will not be able to please everyone. Gutenberg has great potential, but it’s going to intimidate some users. You could in fact offer solutions in both tracks, templates and Gutenberg. But not only does that make for more work on your part, the multitude of options can overwhelm some users, all the while appealing to others.

Your task is to find the optimal approach that is the best fit for your target users. Gutenberg may or may not be part of that, but you can be assured the basic Gutenberg implementation is going to be the default editor in WP very soon. It’s looking like WP v5.0 right now. Subject to change.