Adding recent posts to homepage and aligning elements

user_14898128 0
Viewed 28

I was so curious in creating themes for WordPress and thought to create one for myself (finally)

Seems like as much as I try, I can't get the website to display my recent posts -> 2 lines | 2 posts

Here is the PHP I'm using

<div id="blogg" class="row">
<div class="container">
    <div id="blogg_innlegg_left"><div class="well">
        <ul>
            <?php $left_query = new WP_Query( 'showposts=2' ); ?>
            <?php while ($left_query -> have_posts()) : $left_query -> the_post(); ?>
            <div class="thumb">
            <li><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></li>
            </div>
            <div class="title">
            <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
            </div>
            <?php endwhile;?>
        </ul>
    </div></div>
    <div id="blogg_innlegg_right"><div class="well">
        <ul>
            <?php $right_query = new WP_Query( 'showposts=5&offset=2' ); ?>
            <?php while ($right_query -> have_posts()) : $right_query -> the_post(); ?>
            <div class="thumb">
            <li><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></li>
            </div>
            <div class="title">
            <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
            </div>
            <?php endwhile;?>
        </ul>
    </div></div>
</div>
</div>

Here is the CSS I'm using

#blogg_innlegg_left, #blogg_innlegg_right {
    display: flex;
    .well{
        width: 100%;
        ul {
            columns: 2;
            -webkit-columns: 2;
            -moz-columns: 2;
            list-style: none;
        }
        .thumb {
            float: left;
        }
        .title {
            float: left;
            max-width:100px;
        }
    }
}

Every time I try to align them, it goes wrong, even the mobile responsive.

I want to achieve the exact match as in wpbeginner.com with the recent posts on the homepage.

wordpress-theming wordpress
1 Answers

The Loop is the default mechanism WordPress uses for outputting posts through a theme’s template files.

The basic loop is:

<?php 
if ( have_posts() ) : 
    while ( have_posts() ) : the_post(); 
        // Display post content
    endwhile; 
endif; 
?>

Source @ https://developer.wordpress.org/themes/basics/the-loop/

Here you're trying to use two different loop, which is, in this case unnecessary. It seems to me that you have currently 2 problems, you're struggling in understanding the Wordpress loop, and you can't figure out how handle css. I would suggest you have a bit of a read on both subjects.

Using our simple loop and the_title() & the_content() functions, we can start to display our posts on the frontend.

EDIT: As per your comments you wanted 2 different columns, i've edited the post with your specifications.

<main>
<section>
<?php
$query = new WP_Query( array( 'posts_per_page' => 2 ) );
if ( $query->have_posts() ) :
  while ( $query->have_posts() ) : $query->the_post(); ?>
    <article>
      <h1><?php the_title()?></h1>
      <?php the_content() ?>
    </article>
  <?php endwhile;
endif;
wp_reset_postdata(); ?>
</section>
<section>
<?php
$query = new WP_Query( array( 'posts_per_page' => 2, 'offset' => 2 ) );
if ( $query->have_posts() ) :
  while ( $query->have_posts() ) : $query->the_post(); ?>
    <article>
      <h1><?php the_title()?></h1>
      <?php the_content() ?>
    </article>
  <?php endwhile;
endif;
wp_reset_postdata(); ?>
</section>
</main>

Now that our 2 posts are being displayed on the front end we would like to styled them in a way that let us put 2 post in 2 different columns.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
section {
  max-width: 50%;
  float: left;
}
main {
  clear: both;
}

There is no "one way" to do this, for example you could achieve the same thing with display: flex;.

Learn More

user_36456500
Related