blog page - Building articles grid

admin管理员组

文章数量:1026640

Would appreciate help. I'm trying to figure out how to build a menu page where there are pictures or photos with a summary with a link to a post or article. Like a grid or a similar shape. (Not using categories) It's clear to me that this is probably a basic thing that I have not been able to crack gently :( Thanks in advance.

Would appreciate help. I'm trying to figure out how to build a menu page where there are pictures or photos with a summary with a link to a post or article. Like a grid or a similar shape. (Not using categories) It's clear to me that this is probably a basic thing that I have not been able to crack gently :( Thanks in advance.

• blog-page

Share Improve this question asked Mar 28, 2019 at 6:58 LoveIsHereLoveIsHere 10333 bronze badges 2

• Hi -- I think you'll need to provide more information. Where are you trying to build such a page? For the front-end of your site? Are you creating a custom theme or plugin, or are you using one and want to extend its layout capabilities? – tmdesigned Commented Mar 28, 2019 at 10:27
• Hi i am trying to build a discography page which will be linked to the menu. In the page i want to have a grid of cd pictures with a link to information of the cd etc... – LoveIsHere Commented Mar 28, 2019 at 11:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Use WP_Query for getting the posts you want. Then you can loop through them and get their title, their featured image and their excerpt to be printed they way you want. Something like that:

<?php $args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'posts_per_page' => 9,
    'order'          => 'DESC',
    'orderby'        => 'date',
]; ?>

<?php $the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>
    <div class="my-grid">

    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="grid-item">

           <div class="thumbnail"><?php the_post_thumbnail(); ?></div>
           <div class="title"><?php the_title(); ?></div>
           <div class="excerpt"><?php the_excerpt(); ?></div>

        </div>
    <?php endwhile; ?>

    <?php wp_reset_postdata(); ?>

    </div>
<?php else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

And the rest is just CSS.

Would appreciate help. I'm trying to figure out how to build a menu page where there are pictures or photos with a summary with a link to a post or article. Like a grid or a similar shape. (Not using categories) It's clear to me that this is probably a basic thing that I have not been able to crack gently :( Thanks in advance.

Would appreciate help. I'm trying to figure out how to build a menu page where there are pictures or photos with a summary with a link to a post or article. Like a grid or a similar shape. (Not using categories) It's clear to me that this is probably a basic thing that I have not been able to crack gently :( Thanks in advance.

• blog-page

Share Improve this question asked Mar 28, 2019 at 6:58 LoveIsHereLoveIsHere 10333 bronze badges 2

• Hi -- I think you'll need to provide more information. Where are you trying to build such a page? For the front-end of your site? Are you creating a custom theme or plugin, or are you using one and want to extend its layout capabilities? – tmdesigned Commented Mar 28, 2019 at 10:27
• Hi i am trying to build a discography page which will be linked to the menu. In the page i want to have a grid of cd pictures with a link to information of the cd etc... – LoveIsHere Commented Mar 28, 2019 at 11:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Use WP_Query for getting the posts you want. Then you can loop through them and get their title, their featured image and their excerpt to be printed they way you want. Something like that:

<?php $args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'posts_per_page' => 9,
    'order'          => 'DESC',
    'orderby'        => 'date',
]; ?>

<?php $the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>
    <div class="my-grid">

    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="grid-item">

           <div class="thumbnail"><?php the_post_thumbnail(); ?></div>
           <div class="title"><?php the_title(); ?></div>
           <div class="excerpt"><?php the_excerpt(); ?></div>

        </div>
    <?php endwhile; ?>

    <?php wp_reset_postdata(); ?>

    </div>
<?php else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

And the rest is just CSS.

本文标签： blog pageBuilding articles grid