Customizing the WordPress loop

Question

Below is the php code that fires the look on this website http://digestafrica.com/

<?php
                            if (have_posts()) {
                            while ( have_posts() ) : the_post();
                            ?>

                            <div class="td-page-header">
                                <h1 class="entry-title td-page-title">
                                    <span><?php the_title() ?></span>
                                </h1>
                            </div>
                            <div class="td-pb-padding-side td-page-content">
                                <?php
                                the_content();
                                endwhile;//end loop
                                }
                                ?>
                            </div>

And below is the php code that fires the look on http://digestafrica.com/testing/

<!-- latest post-->
                          <?php
                          $args = array(
                            'post_type' => 'post',
                            'posts_per_page' => 1
                          );

                          $latest = new WP_Query($args);

                          while($latest->have_posts()) : $latest->the_post();
                          $dontshowthisguy = $post->ID;
                          ?>

                          <div class="td-page-header">
                            <h1 class="entry-title td-page-title">
                              <span><?php the_title() ?></span>
                            </h1>
                          </div>
                          <div class="td-pb-padding-side td-page-content">
                            <?php the_content(); ?>
                          </div>

                          <?php endwhile; wp_reset_query();  ?>

                          <!-- Promoted Post -->
                          <?php
                          $args = array(
                            'post_type' => 'post',
                            'posts_per_page' => 1,
                            'cat' => 502
                          );

                          $promotedpost = new WP_Query($args);

                          while($promotedpost->have_posts()) : $promotedpost->the_post();
                          $promoted = $post->ID;
                          ?>
                          <div class="td-page-header">
                            <h1 class="entry-title td-page-title">
                              <span><?php the_title() ?></span>
                            </h1>
                          </div>
                          <div class="td-pb-padding-side td-page-content">
                            <?php the_content(); ?>
                          </div>

                          <?php endwhile; wp_reset_query();  ?>

                          <!-- Rest of the previous posts -->
                          <?php
                          $args = array(
                            'post_type' => 'post',
                            'post__not_in' => array($dontshowthisguy,$promoted)
                          );

                          $prevposts = new WP_Query($args);

                          while($prevposts->have_posts()) : $prevposts->the_post();
                          ?>
                          <div class="td-page-header">
                            <h1 class="entry-title td-page-title">
                              <span><?php the_title() ?></span>
                            </h1>
                          </div>
                          <div class="td-pb-padding-side td-page-content">
                            <?php the_content(); ?>
                          </div>

                          <?php endwhile; wp_reset_query();  ?>

All blocks of code i.e the loops, are encapsulated by these two divs below

    <div class="td-pb-span8 td-main-content" role="main">
       <div class="td-ss-main-content">
       <----the loop goes here -----!>
        </div>
   </di>

So I am confused as to why the first loop, which came with the theme produces this kind of look http://digestafrica.com and my custom loop produces this kind of look http://digestafrica.com/testing/ with all the formatting gone

That is my challenge

Thanks

Answer 1

  <?php
    /* Template Name: Testing */


    get_header();

    td_global::$current_template = 'page-title-sidebar';
    //set the template id, used to get the template specific settings
    $template_id = 'page';


    $loop_sidebar_position = td_util::get_option('tds_' . $template_id . '_sidebar_pos'); //sidebar right is default (empty)


    //read the custom single post settings - this setting overids all of them
    $td_page = get_post_meta($post->ID, 'td_page', true);
    if (!empty($td_page['td_sidebar_position'])) {
      $loop_sidebar_position = $td_page['td_sidebar_position'];
    }

    // sidebar position used to align the breadcrumb on sidebar left + sidebar first on mobile issue
    $td_sidebar_position = '';
    if($loop_sidebar_position == 'sidebar_left') {
      $td_sidebar_position = 'td-sidebar-left';
    }



    //no page builder detected, we load a default page template with sidebar / no sidebar
    ?>
    <div class="td-main-content-wrap">
      <div class="td-container tdc-content-wrap <?php echo $td_sidebar_position; ?>">
        <div class="td-crumb-container">
          <?php echo td_page_generator::get_page_breadcrumbs(get_the_title()); ?>
        </div>
        <div class="td-pb-row">
          <?php
          switch ($loop_sidebar_position) {
            default:
            ?>

            <?php global $post; ?>

            <div class="td-pb-span8 td-main-content" role="main">
              <div id="content-regenerate" class="td-ss-main-content">

                <!-- latest post-->
                <?php
                $args = array(
                  'post_type' => 'post',
                  'posts_per_page' => 1
                );

                $latest = new WP_Query($args);

                while($latest->have_posts()) : $latest->the_post();
                $dontshowthisguy = $post->ID;
                ?>
                <?php setup_postdata($post); ?>
                <div class="wm_container">
                  <div class="wm_thumb">
                    <?php the_post_thumbnail('medium' ); ?>
                  </div>
                  <div class="wm_content_right">
                    <h3 class="wm_title"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
                    <div class="wm_meta_info wm_move_meta td-module-meta-info">
                      <span class="wm_primary_category"><?php the_category(); ?></span>
                      <span class="wm_post_author_name td-post-author-name"><?php the_author(); ?></span>
                      <span class="wm_post_date td-post-date"><?php echo get_the_date(); ?></span>
                    </div>
                    <div class="wm_excerpt wm_move_excerpt">
                      <?php the_excerpt(); ?>
                    </div>
                  </div>
                </div>
              <?php endwhile; wp_reset_query();  ?>

              <!-- Promoted Post -->
              <?php
              $args = array(
                'post_type' => 'post',
                'posts_per_page' => 1,
                'cat' => 786
              );

              $promotedpost = new WP_Query($args);

              while($promotedpost->have_posts()) : $promotedpost->the_post();
              $promoted = $post->ID;
              ?>
              <?php setup_postdata($post); ?>
              <div class="wm_container">
                <div class="wm_thumb">
                  <?php the_post_thumbnail('medium' ); ?>
                </div>
                <div class="wm_content_right">
                  <h3 class="wm_title"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
                  <div class="wm_meta_info wm_move_meta td-module-meta-info">
                    <span class="wm_primary_category"><?php the_category(); ?></span>
                    <span class="wm_post_author_name td-post-author-name"><?php the_author(); ?></span>
                    <span class="wm_post_date td-post-date"><?php echo get_the_date(); ?></span>
                  </div>
                  <div class="wm_excerpt wm_move_excerpt">
                    <?php the_excerpt(); ?>
                  </div>
                </div>
              </div>

            <?php endwhile; wp_reset_query();  ?>

            <!-- Rest of the previous posts -->
            <?php

            $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
            $args = array(
              'post_type' => 'post',
              'post__not_in' => array($dontshowthisguy,$promoted),
              'posts_per_page' => 24,
              'paged'         => $paged,
            );

            $prevposts = new WP_Query($args);

            global $wp_query;
            // Put default query object in a temp variable
            $tmp_query = $wp_query;
            // Now wipe it out completely
            $wp_query = null;
            // Re-populate the global with our custom query
            $wp_query = $prevposts;

            while($prevposts->have_posts()) : $prevposts->the_post();
            ?>
            <?php setup_postdata($post); ?>
            <div class="wm_container">
              <div class="wm_thumb">
                <?php the_post_thumbnail('medium' ); ?>
              </div>
              <div class="wm_content_right">
                <h3 class="wm_title"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
                <div class="wm_meta_info wm_move_meta td-module-meta-info">
                  <span class="wm_primary_category"><?php the_category(); ?></span>
                  <span class="wm_post_author_name td-post-author-name"><?php the_author(); ?></span>
                  <span class="wm_post_date td-post-date"><?php echo get_the_date(); ?></span>
                </div>
                <div class="wm_excerpt wm_move_excerpt">
                  <?php the_excerpt(); ?>
                </div>
              </div>
            </div>

          <?php endwhile; ?>
          <span class="wm_newer"><?php previous_posts_link('&laquo; Newer posts'); ?></span>
          <span class="wm_previous"><?php next_posts_link( 'Older posts &raquo;', $the_query->max_num_pages );?></span>
          <?php wp_reset_query();  ?>

          <?php // Restore original query object
              $wp_query = null;
              $wp_query = $tmp_query;

              ?>

        </div>
      </div>





      <div class="td-pb-span4 td-main-sidebar" role="complementary">
        <div class="td-ss-main-sidebar">
          <?php get_sidebar(); ?>
        </div>
      </div>
      <?php
      break;

      case 'sidebar_left':
      ?>
      <div class="td-pb-span8 td-main-content <?php echo $td_sidebar_position; ?>-content" role="main">
        <div class="td-ss-main-content">
          <?php

          if (have_posts()) {
            while ( have_posts() ) : the_post();
            ?>
            <div class="td-page-header">
              <h1 class="entry-title td-page-title">
                <span><?php the_title() ?></span>
              </h1>
            </div>
            <div class="td-pb-padding-side td-page-content">
              <?php
              the_content();
            endwhile; //end loop
          }
          ?>
        </div>
      </div>
    </div>
    <div class="td-pb-span4 td-main-sidebar" role="complementary">
      <div class="td-ss-main-sidebar">
        <?php get_sidebar(); ?>
      </div>
    </div>
    <?php
    break;

    case 'no_sidebar':
    ?>
    <div class="td-pb-span12 td-main-content" role="main">
      <div class="td-ss-main-content">
        <?php
        if (have_posts()) {
          while ( have_posts() ) : the_post();
          ?>
          <div class="td-page-header">
            <h1 class="entry-title td-page-title">
              <span><?php the_title() ?></span>
            </h1>
          </div>
          <div class="td-pb-padding-side td-page-content">
            <?php
            the_content();
          endwhile; //end loop
        }
        ?>
      </div>
    </div>
    </div>
    <?php
    break;
    }
    ?>
    </div> <!-- /.td-pb-row -->
    </div> <!-- /.td-container -->
    </div> <!-- /.td-main-content-wrap -->

    <?php




    get_footer();
    ?>

Above is the complete custom template I used to produce what is now the digestafrica.com homepage. Using custom queries, template tags and a bit of custom styling, I was able to replicate and manipulate the layout of the homepage. Thanks for the collective support.