Display posts in three columns by category

I’ve seen posts which probably answer this, but unfortunately the answers are all a bit technical without telling you where the code should go?
At the moment I have my posts directed to a blog page. I separate my posts into three categories. What I would like is to have 3 columns for each category, with the ability to put an image and title above the start of each column, and a styled line between them.
I understand that this involves Loops and editing the php files, but in other posts they don’t say which php files or which css etc?
Sorry for being stupid, but if possible a simple explanation would be great. I’m using the free pagelines theme, but on a localhost as just learning.
Thanks very much!!

Related posts

Leave a Reply

2 comments

  1. I am not familiar with the theme you’re using, but that ought to be irrelevant anyhow.

    Pages can be assigned template files, the php of which defines what and how content is displayed on said page.

    You do not need to modify the page templates supplied with the theme, instead create your own in addition to the ones existing already (for reference read the linked codex page). Assign that to the page set as blog page.

    Whether you decide to run three separate loops or fetch the posts in one query sorted by categories (and echo markup accordingly from within the loop) is pretty much up to you. As for how to go about said loop(s) see the codex on the WP_Query class and its usage.

    Whether you enqueue a separate style sheet for it or edit the themes style.css file is again up to you.

    Should the original theme author ship regular updates and you be planning on making use of these in the future, you might want to decide not to modify it at all, but to familiarize yourself with child themes instead.

  2. You can do similar to the structure of below snippets in your free pagelines theme, here I’m using bootstrap to display it in three columns.

    Just follow the same basic structure and apply it to the theme you have, and from their I think it may help you display different category in three columns.

    <div class="row">
      <div class="col s4">
        <?php  
          $args    = array( 'posts_per_page' => 8, 'category_name' => 'your-category' );
          $myposts = get_posts( $args );
          foreach ( $myposts as $post ) : setup_postdata( $post );
            if (have_posts()) {
              the_title();
              get_the_content();
              // and other function in the_loop
            }
          endforeach;
          wp_reset_postdata();
        ?>
      </div>
      <div class="col s4">
        <?php  
          $args    = array( 'posts_per_page' => 8, 'category_name' => 'your-category' );
          $myposts = get_posts( $args );
          foreach ( $myposts as $post ) : setup_postdata( $post );
            if (have_posts()) {
              the_title();
              get_the_content();
              // and other function in the_loop
            }
          endforeach;
          wp_reset_postdata();
        ?>
      </div>
      <div class="col s4">
        <?php  
          $args    = array( 'posts_per_page' => 8, 'category_name' => 'your-category' );
          $myposts = get_posts( $args );
          foreach ( $myposts as $post ) : setup_postdata( $post );
            if (have_posts()) {
              the_title();
              get_the_content();
              // and other function in the_loop
            }
          endforeach;
          wp_reset_postdata();
        ?>
      </div>
    </div>
    

    Please take time to read from their official documentation of wordpress in this link

    https://codex.wordpress.org/Template_Tags/get_posts