Display all your WordPress Posts on One Page by Category
In this article, we going to see how to display all your WordPress posts on one page by category. For my recent WordPress blog, I try to get all the blog posts on one page with the post category. So here I found one solution to get all the posts with the category names.
Now you going to see two models one with card view another with raw code. Both these methods will display post category, title, image, date, author, tags and content. The below example will help you to get the category with the limit of 100 posts per page with the loop. If you do not have any post on your blog its shows error message “No posts available”. Below you going to see the card view model.
Display all your WordPress Posts on One Page in Card View
Here, below you can see the card view code if you used bootstrap on your theme it helps you to see in the good card view model. Click here to see the card view example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<div class="container mt-4"> <div class="row"> <?php $cats = get_categories($cat_args); foreach ($cats as $cat) { $cat_id= $cat->term_id; ?> <div class="col-md-12 p-4"> <!-- Category Name with ID --> <h2 id="<?php echo $cat->slug; ?>" class="text-center"><?php echo $cat->name; ?></h2> </div> <?php // the query $drs_all_query = new WP_Query("cat=$cat_id&posts_per_page=100"); ?> <?php if ( $drs_all_query->have_posts() ) : ?> <!-- the loop --> <?php while ( $drs_all_query->have_posts() ) : $drs_all_query->the_post(); ?> <div class="col-xl-3 col-lg-6"> <div class="card card-stats mb-4 mb-xl-4"> <a href="<?php esc_url(the_permalink()); ?>"> <!-- Post Permalink --> <?php the_post_thumbnail('delicious-recent-thumbnails'); ?> <!-- Featured Image --> </a> <div class="card-body"> <div class="row"> <div class="col justify-content-center align-self-center"> <a href="<?php esc_url(the_permalink()); ?>"> <!-- Post Permalink --> <h3 class="card-title mb-0"><?php the_title(); ?></h3> <!-- Post Title --> </a> </div> <div class="col-auto"> <a href="<?php esc_url(the_permalink()); ?>"> <!-- Post Permalink for Button --> <div class="icon icon-shape rounded-circle shadow"> <i class="fas fa-external-link-alt"></i> </div> </a> </div> <span class="text-muted mb-0 px-3"><?php the_excerpt('excerpt_length'); ?></span><!-- Post Content --> </div> </div> </div> </div> <?php endwhile; ?> <!-- end of the loop --> <?php wp_reset_postdata(); ?> <?php else : ?> <p><?php _e( 'No posts available.' ); ?></p> <?php endif; ?> <?php } ?> </div> </div> |
Display all your WordPress Posts on One Page in HTML View
If you like to use raw code without card view, here you have the solution to use. Below you can see the raw code with category this can help you to integrate on your theme.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php $cats = get_categories($cat_args); foreach ($cats as $cat) { $cat_id= $cat->term_id; ?> <!-- Category Name with ID --> <h2 id="<?php echo $cat->slug; ?>" class="text-center"><?php echo $cat->name; ?></h2> <?php // the query $drs_all_query = new WP_Query("cat=$cat_id&posts_per_page=100"); ?> <?php if ( $drs_all_query->have_posts() ) : ?> <!-- the loop --> <?php while ( $drs_all_query->have_posts() ) : $drs_all_query->the_post(); ?> <ul> <li> <!-- Post Permalink & Featured Image --> <a href="<?php esc_url(the_permalink()); ?>"> <?php the_post_thumbnail('delicious-recent-thumbnails'); ?> </a> <!-- Post Permalink & Post Title --> <a href="<?php esc_url(the_permalink()); ?>"> <h3 class="card-title mb-0"><?php the_title(); ?></h3> </a> <!-- Post Content --> <span><?php the_excerpt('excerpt_length'); ?></span> </li> </ul> <?php endwhile; ?> <!-- end of the loop --> <?php wp_reset_postdata(); ?> <?php else : ?> <p><?php _e( 'No posts available.' ); ?></p> <?php endif; ?> <?php } ?> |
Display more details from your blog post, below you have some more information to get.
Author Name
|
1 |
<?php the_author() ?> |
Post Date and Time
|
1 |
<?php the_time('l, F jS, Y \a\t g:i A') ?> |
Post Tags
|
1 |
<?php the_tags(); ?> |
If you thinking it is too hard to use these codes on your theme? for that here you have the solution using WordPress plugin.
Conclusion:
I hope this article will help you to get your custom posts and display them on one page in your WordPress theme. If you like this post kindly share it with your friends.
