How to fix the Journal section on Digital Pro’s homepage

Digital Pro‘s homepage has a Journal section that shows 3 blog posts below widget areas.

If you want to have a separate blog page where all posts are shown, the recommended method is to designate two Pages as static homepage and Posts page in WordPress’ Reading settings and then all posts will automatically appear on the Posts page.

Unfortunately, doing so will make the Journal section empty (or whatever is the static homepage’s content to appear) on the homepage.

This is because the theme’s template for front page uses the default query and not use a separate query as it should be for displaying the posts in the Journal section. This will make the content of the static Page set as the homepage to appear in the Journal and not the blog posts as one would expect.

We can fix this by removing the default Genesis loop and adding a custom one via genesis_custom_loop() on the front page.

Since it does not make sense to have pagination here, we shall replace it with a link to the Posts page (typically, /blog).

Step 1

Edit Digital Pro’s front-page.php.

a) Inside digital_front_page_genesis_meta(), change

if ( 'true' === $journal ) {

    // Add opening markup for blog section.
    add_action( 'genesis_before_loop', 'digital_front_page_blog_open' );

    // Add closing markup for blog section.
    add_action( 'genesis_after_loop', 'digital_front_page_blog_close' );

} else {

to

if ( 'true' === $journal ) {

    // Remove the default Genesis loop.
    remove_action( 'genesis_loop', 'genesis_do_loop' );

    // Add opening markup for blog section.
    add_action( 'genesis_before_loop', 'digital_front_page_blog_open' );

    // Add closing markup for blog section.
    add_action( 'genesis_after_loop', 'digital_front_page_blog_close' );

} else {

b) replace

// Add opening markup for blog section.
function digital_front_page_blog_open() {

    $journal_text = get_option( 'digital_journal_text', __( 'Our Journal', 'digital-pro' ) );

    if ( 'posts' == get_option( 'show_on_front' ) ) {

        echo '<div id="journal" class="widget-area fadeup-effect"><div class="wrap">';

        if ( ! empty( $journal_text ) ) {

            echo '<h2 class="widgettitle widget-title center">' . $journal_text . '</h2>';

        }

    }

}

// Add closing markup for blog section.
function digital_front_page_blog_close() {

    if ( 'posts' == get_option( 'show_on_front' ) ) {

        echo '</div></div>';

    }

}

with

// Add opening markup for blog section.
function digital_front_page_blog_open() {

    $journal_text = get_option( 'digital_journal_text', __( 'Our Journal', 'digital-pro' ) );

    // if ( 'posts' == get_option( 'show_on_front' ) ) {

        echo '<div id="journal" class="widget-area fadeup-effect"><div class="wrap">';

        if ( ! empty( $journal_text ) ) {

            echo '<h2 class="widgettitle widget-title center">' . $journal_text . '</h2>';

        }

        $args = array(
            'posts_per_page' => '3',
            'no_found_rows'  => true,
        );

        genesis_custom_loop( wp_parse_args( $args ) );

        printf( '<div class="pagination"><a href="%s">%s</a></div>',
                get_permalink( get_option( 'page_for_posts' ) ),
                __( 'Our Journal »', 'digital-pro' )
            );

    // }

}

// Add closing markup for blog section.
function digital_front_page_blog_close() {

    // if ( 'posts' == get_option( 'show_on_front' ) ) {

        echo '</div></div>';

    // }

}

Step 2

Add the following in style-front.css above the media queries:

.front-page .entry {
    margin-bottom: 10%;
    padding-bottom: 10%;
    border-bottom: 1px solid #eee;
}

.front-page .entry-header,
.front-page .entry-content {
    max-width: none;
}

.front-page .entry-title {
    font-size: 36px;
    font-size: 3.6rem;
    letter-spacing: -2px;
}

#journal .pagination {
    text-align: right;
}