Parent / Child formatting in a list of post of a custom post type

Question

I am building a long manual for my companies procedures. We have each section (and sub-section) entered as parent and child posts in a custom post type. I have the loop running properly, but I would like to be able to format the children differently from the parents.

I would like it to display as follows:

<h1 class="parent">Parent Title 1</h1>
  <p>section content here...</p>
<h2 class="child"> Child Title 1</h2>
  <p>section content here...</p>
<h2 class="child"> Child Title 2</h2>
  <p>section content here...</p>
<h1 class="parent">Parent Title 2</h1>
  <p>section content here...</p>
<!--and so on-->

Any ideas on how I might be able to achieve this?

As requested, Here is the code for the customer post type:

<?php get_header(); ?>
<!-- The loop for page content -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Feature Image and Title Area -->
<div class="block block-inverse text-center">
  <div class="block-foreground">
    <h1 class="block-title text-ribbon text-ribbon-info"><?php the_title(); ?></h1>
    <h4 class="text-ribbon text-ribbon-info"><?php the_content(); ?></h4>
  </div>
  <div class="block-background">
    <div class="block block-fill-height app-header" style="background-image: url(<?php the_post_thumbnail_url('full'); ?>)"></div>
  </div>
  <?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <?php endif; ?>
</div>
<!-- Manual -->
<div class="block">
  <div class="container docs-content">
<!-- Manual ToC -->
    <ul id="markdown-toc">
      <li><h3><a href="#contents">Contents</a></h3></li>
      <?php       
        $args = array(
          'post_parent'=>'0',
          'post_type' => 'manual', 
          'posts_per_page'=> '-1', 
          'orderby'=>'menu_order', 
          'order'=>'asc'
          );
        $parent_loop = new WP_Query( $args );
        while ( $parent_loop->have_posts() ) : $parent_loop->the_post();
      ?>      
        <li>
          <a href="#<?php echo the_slug(); ?>" id="markdown-toc-<?php echo the_slug(); ?>"><?php the_title(); ?></a>
        </li>
     <?php endwhile;?>
    </ul>
<!--Manual Content-->
    <?php       
      $args = array(
          'post_type' => 'manual', 
          'posts_per_page'=>'-1', 
          'orderby'=>'menu_order', 
          'order'=>'asc'
        );
      $loop = new WP_Query( $args );
      while ( $loop->have_posts() ) : $loop->the_post();
    ?>
<!-- Article Title -->
    <h1 id="<?php echo the_slug(); ?>"><?php the_title(); ?></h1>
<!-- Comment Button -->
      <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <?php comments_number(); ?> <span class="caret"></span>
        </button>     
          <div class="dropdown-menu">
            <div class="container">
              <?php comments_template(); ?>
            </div>
          </div>
      </div> <!-- Comment Button -->
<!-- Article Content -->
          <?php the_content(); ?>
      <?php endwhile; ?>
  </div> <!-- Manual Container -->
    <a href="#top" class="icon icon-chevron-with-circle-up docs-top"></a>
</div> <!-- Manual Block -->
<?php get_footer(); ?>

Answer 1

I'm guessing the part you want to change is the actual content output area (not the nav). If so, you could do this:

<?php       
$args = array(
    'post_type' => 'manual', 
    'posts_per_page'=>'-1', 
    'orderby'=>'menu_order', 
    'order'=>'asc'
  );
$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();

  $class='parent';
  $header='h1';
  if ($loop->post->post_parent !== 0) {
    $class='child';
    $header='h2';
  } 

  echo '<' . $header . ' class="' . $class . '" id="' . $loop->post->ID . '">' . get_the_title() . '</' . $header . '>';
?>