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

What do you mean "not desirable"? Also you mentioned the category ID is 502, but in the code it's set to 27 (see it under the ). Was that 27 a typo? — Sally CJ
– Sally CJ, Commented Aug 16, 2018 at 15:12
Hello, @Madhan, the category 27 is not the issue. I had used it as a placeholder for any category ID. By not desirable I mean what the code displays is not what I want. It displays all the content minus the featured images. The look I want to achieve is a featured image on the left then the title and excerpt on the right. But that is not the case. — MAJALIWA WILFRED
– MAJALIWA WILFRED, Commented Aug 16, 2018 at 16:00
You can see it in action with these links. This is what the code above fires digestafrica.com/testing and the look I want to achieve is here digestafrica.com The code executes fine but somehow all the styling as it is in digestafrica.com is lost. Recovering the styling is my biggest challenge. I don't see how — MAJALIWA WILFRED
– MAJALIWA WILFRED, Commented Aug 16, 2018 at 16:22
Then the PHP code works. Perhaps you should better edit your question and add the template code for the homepage, or the template part which displays the "Latest Articles" section on the homepage. And also the code in the template you used on digestafrica.com/testing. — Sally CJ
– Sally CJ, Commented Aug 16, 2018 at 17:13
Solved: Was missing template tags. Had to add my own custom CSS. — MAJALIWA WILFRED
– MAJALIWA WILFRED, Commented Sep 10, 2018 at 18:23

MAJALIWA WILFRED · Accepted Answer · 2018-09-12 08:59:45Z

  <?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.

You should accept your own answer, so that people will see the question has been answered. Btw, I upvoted for your efforts. Cheers!

Collectives™ on Stack Overflow

Customizing the WordPress loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related