将内容应用于Wordpress主题部分

Question

Somebody help! I am new to Wordpress and trying to build single page responsive(bootstrap) theme from scratch. My index.php page looks like this:

<?php get_header(); ?>
<section id="plx_mission_section" >
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><h2>title</h2></div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><p>text</p></div>
    </div>
  </div>
</section>

<section id="plx_whyus_section" >
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><h2>title</h2></div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><p>text</p></div>
    </div>
  </div>
</section>

......
<?php get_footer(); ?>

So my question is: How Can I add content to specific section? looked for the answer but could not find good working example.

Answer 1

You need a get_posts() Loop in each of your sections

<?php
$args = array( 'posts_per_page' => 5, 'offset'=> 1, 'category' => 1 );

$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><h2>
    <?php the_title(); ?>
</h2></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><h2>
    <?php the_content(); ?>
</h2></div>
<?php endforeach; 
wp_reset_postdata();?>

Edit $args as needed

Updated: If it's fixed content in each section I would simply create a new wordpress page for each section. Then you can run a loop like this in your index.php

<?php

$mypages = get_pages( array( 'include' => '1, 2, 3, 4', 'sort_column' => 'post_title', 'sort_order' => 'asc' ) );

    foreach( $mypages as $page ) {      
        $content = $page->post_content;
        if ( ! $content ) // Check for empty page
            continue;

        $content = apply_filters( 'the_content', $content );
    ?>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><h2><a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a></h2></div>
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><?php echo $content; ?></div>
    <?php
    }   
?>

Replace '1, 2, 3, 4' with your new page ids created above.