WordPress One page site (page on front-page)

Question

I'm designing a theme from scratch. It's an One page site and my CMS is WordPress. My folder structure is :

• front-page.php
• page-about.php
• page-work.php
• page-contact.php

I can display all my pages on the front-page.php as section but I lose all my custom classes (and specific styles). Here the loop in my front-page.php :

<?php get_header(); ?>

<?php query_posts('post_type=page&order=ASC'); ?>

<?php 

if (have_posts()): 

    while (have_posts()) : the_post(); ?>

        <section id="page-<?php the_ID(); ?>">

            <div class="container">

                <h2><?php the_title(); ?></h2>

                <article>

                    <p><?php the_content(); ?></p>

                </article>

            </div>

        </section>

    <?php endwhile; 

endif; ?>   

<?php get_footer(); ?>

How can I keep the style (therefore, their classes/id's) of the page-xxx.php as section in my front-page.php ?

Thank you

Answer 1

1. you can add a custom class to specific page id, example :

   add_filter('body_class', 'your_body_class'); function your_body_class($classes) { if (is_page(xxx)) $classes[] = 'new-class'; return $classes; }

2. you can use this plugin Custom Body Class

Answer 2

I did this (in the front-page.php) :

<?php get_header(); ?>

<?php

    $args = array(
        'post_type'              => 'page',
        'order'                  => 'ASC'
    );

    $query = new WP_Query($args);


    if ($query->have_posts()) {
        while ( $query->have_posts()) {

            $query->the_post();
            $tn = get_page_template_slug($post_id);
            $word = array("page-", ".php",' ');
            $template = str_replace($word,'',$tn);

            get_template_part('page', $template);
        }
    }

?>  

<?php get_footer(); ?>

Look like it works, I have three sections with my three pages and their classes. But now, I have no content.

My page-about.php :

<?php get_header(); 

/* Template Name: About */ ?>

<section id="about" class="section section-about">

    <div class="container">

        <h2 class="title-2"><?php the_title(); ?></h2>

        <div class="col-md-6 col-lg-12"></div>

        <article class="article-about">

            <?php

            if (have_posts()):

                while (have_posts()): the_post(); ?>    

                <p><?php the_content(); ?></p>

                <?php endwhile;

            endif;

            ?>

        </article>

    </div>

</section>

<?php get_footer(); ?>