Add Latest Posts with Pagination to Front Page with Widgets

Add Latest Posts with Pagination to Front Page with Widgets

Divi WordPress Theme

(This tutorial is a modified version of Brad Dalton’s Add Latest Posts With Pagination To Front Page With Widgets Where he has provided the front-page.php code for News Pro Child Theme. Please do refer to his article to understand this code.)

Most StudioPress themes include a front-page file which normally includes widgets.

If you also want to include your latest posts dynamically, you can enable the standard loop before or after the widget areas.

Another option is to add a custom grid loop that also enables you to display your posts in a grid type layout or simply as features that are like the standard loop archive.

The only problem is, it may not generate pagination.

In this tutorial, I will show you how to Add Latest Posts with Pagination to Front Page with widgets on Magazine Pro Genesis Child Theme.

I will provide the entire front-page.php template which includes all the code tested on the Magazine Pro Genesis Child Theme. You can modify the classes to fit in with your existing themes classes.

Here it is:

If you simply added a custom loop or grid loop to our home or front page template file you would suffer these problems:

  • It wouldn’t include pagination
  • If it did include pagination, the 2nd and subsequent paginated pages will also include the widgets you have coded in your template file to display on every paginated page.

The code above includes the solutions to solve both problems so:

  • Only your front page includes the widgets
  • All paginated pages linked to your front page only display your standard loop like a posts page without widgets.

On top of this, you can also choose how you want your posts displayed:

  • In a grid loop, 2 excerpts side by side
  • The first post in full and the rest excerpts.
  • Full content width featured and then grid excerpts.

Screenshots

Confused? Here’s what the front page & paginated pages look like after adding the code.

pixel2pixel-design-magazine-pro-theme-genesis

And here’s what the 2nd and subsequent paginated pages look like without the home page widgets.

pixel2pixel-design-pagination-magazine-pro-theme-genesis

If you enjoyed this article, you can also read Easy Steps to Start a WordPress Blog and Make Money.

Related Tutorials

Written by
Suresh Patel
Join the discussion

13 comments
  • Here is a simpler solution I used to add pagination to Magazine Pro:
    1. Create a new page with the title Next. The slug should be next.
    2. Under settings – reading, set the Posts page to Next
    2. Edit your home page with the block page editor. At the very end, add a paragraph with just this text: More Stories. Add a link to the More Stories text to yourhomepage/next/page/2
    3. That’s it. The end of your page will have a “More Stories” paragraph which when clicked will take the reader to page 2. From there, the pagination is provided by wordpress.

  • Hi,

    Added this code in frontpage,php


    remove_action( 'genesis_loop', 'genesis_do_loop' );
    add_action( 'genesis_loop', 'custom_grid_loop' );

    function custom_grid_loop() {

    if ( is_home() && function_exists( 'genesis_grid_loop' ) ) {

    genesis_grid_loop( array(
    'features' => 0,
    'feature_image_size' => 'home-top',
    'feature_image_class' => 'aligncenter post-image',
    'feature_content_limit' => 0,
    'grid_image_size' => 'home-middle',
    'grid_content_limit' => 250,
    'more' => __( 'Read more', 'magazine' ),
    'posts_per_page' => 5,
    ) );
    } else {

    genesis_standard_loop();

    }

    }

    Now pagination is showing up, but the problem is when I open 2nd page all the widgets are showing there also.
    Is there any way to hide widgets on 2nd page?
    P.S: I'm not using Magazine Pro theme.

    • Hi Brad,
      You are doing very good job at your blog by teaching people and providing tutorials about Genesis. I need one favor from you. I am enable to open your website here at india this is my IP address

      125.99.108.162.

      It is giving me an error of
      Sorry but this content is not available in your country at the moment.
      can you please tell me why it is happenning.

      Keep doing the great work.

      Thanks & Regards,
      Suresh Patel

  • I copied the code to my magazine pro theme and like it but If I want to keep the Section Titles ( the black title bar for top middle and bottom widget) How would I do that?

  • I think there’s something wrong here – this solution shows the first 6 posts twice. Is there a way to offset the posts that come after the widgets?

  • I checked Brad and yours update, however I have 2 questions for you.

    1. I am also using the Magazine Child theme but not the latest upgrade Magazine Pro, will the code still work?

    2. On my Magazine Child theme, I don’t have front-page.php but I have there the default page_landing php. Should I update it with the code above or I have to create front-page.php?

    Thanks

    • Hi Arsie,
      Thanks for checking this tutorial but sorry to tell you that i have not used magazine child theme, so not able to tell you whether this code will work for magazine child theme.

      But you can try pasting this code to page_landing php fill on your local environment and see whether it is working or not.

Subscribe To Our Blog For All The Latest & Greatest Freebies!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

We don't spam and your information will never be shared.