2 Column from WP_Query in CSS File

Viewing 2 posts - 1 through 2 (of 2 total)
  • #17998
    gkjm
    Participant

    This is my first attempt at coding a custom page template. I have removed all the “stuff” and got down to the category just posting the way I want it. I am using Pinboard Theme and need to format this posting in two columns for content on one page. The rest of the site has a single content column formatting.

    I believe the column formatting goes in the style.css file in the child theme folder. I get the posting data I need in a single column but are unable to format the page with two columns. Here is the codes I am using for the page template file and style.css file:
    Custom Page Template

    
    <?php
    /*
    Template Name: Inspiration Gallery
    */
    ?>
                <style type="text-css">
                img {
                    width: 330px;
                    height: auto;
                    margin-bottom: 0;
                }
                </style>
    
    <!-- the query -->
               <?php $wp_query = new WP_Query( 'cat=12' ); ?>
    
    <div class="col-content">
              <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
    
                  <div id="left-column">
                      <?php the_content(); ?>
                  </div>
    
                  <?php endif; endwhile; else: ?>
                      <div>Alternate content</div>
                  <?php endif; ?>
    
              <?php $i = 0; rewind_posts(); ?>
    
              <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
    
                  <div id="right-column">
                      <?php the_content(); ?>
                  </div>
    
                  <?php endif; endwhile; else: ?>
                      <div>Alternate content</div>
                  <?php endif; ?>
    
    </div><!-- .entry-content -->

    There is the code I am using for the child style.css file:

    
      .left-column {
      width: 346px;
      height: auto;
      float: left;
      clear: none;
      }
    .right-column {
      width: 346px;
      height: auto;
      float: right;
      clear: none;
      }

    Thanks for your help,
    gary

    #18031
    Daniel Tara
    Keymaster

    Instead of the left-column and right-column classes try using the twocol class that is already declared in the theme’s CSS.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.