Full-Width and Parallax Banners for Archives

In Theme Blvd Framework 2.6, we introduced some new options for displaying the featured image prominently at the top of posts and pages. Within the framework, we refer to this feature as “epic thumbnails.”

Now, you’re loving this feature, but what about your WordPress archives? They’re now looking a little plain in comparison. Wouldn’t be cool if you could also apply one of these epic thumbnails across your blog archives, as well? In this tutorial, I’ll show share a code snippet that’ll do it!

So what we’ll do is pick an existing page or post that you’ve setup how you want. Then, we’ll take the following information from it, in order to apply it to our WordPress archives:

  1. Its header layout option (i.e. “Transparent Header” or not).
  2. Its featured image.
  3. Its featured image display option, which must be set to “Full screen” or “Full width.”

Below is the full code snippet that you’ll put into your child theme’s functions.php. Make sure to change the two instances of 123 to the ID of the post or page you’re wanting to pull the featured image and header layout options from.

/**
 * Apply transparent header option from designated
 * post or page.
 */
function my_frontend_config_header( $header ) {

    if ( is_archive() ) {

        $post_id = 123;  // ID of post or page to pull transparent header option from
        $header = get_post_meta( $post_id, '_tb_layout_header', true );

    }

    return $header;

}
add_filter( 'themeblvd_frontend_config_header', 'my_frontend_config_header' );

/**
 * Trigger the epic thumbnail on archives, matching with
 * a selected post or page.
 */
function my_trigger_epic_thumb() {

    if ( is_archive() ) {

        $post_id = 123; // ID of post or page to pull featured image and options from

        if ( ! has_post_thumbnail( $post_id ) ) {

            return; // if no featured image is set, we can't do anything

        }

        $thumbs = get_post_meta( $post_id, '_tb_thumb', true );

        if ( $thumbs == 'fs' || $thumbs == 'fw' ) {

            query_posts( array(
                'post_type' => array( 'post', 'page' ),
                'post__in' => array( $post_id )
            ));

            themeblvd_set_att( 'thumbs', $thumbs );
            themeblvd_set_att( 'epic_thumb', true );

        }

    }

}
add_action( 'themeblvd_header_after', 'my_trigger_epic_thumb', 5 );

/**
 * Put the original query back.
 */
function my_reset_query() {

    wp_reset_query();

}
add_action( 'themeblvd_header_after', 'my_reset_query', 15 );
Note: We have future plans to incorporate the WordPress default header image feature into this kind of banner functionality across your archives, which we plan to match the formatting of featured images. So when that happens, this tutorial will most likely no longer be relevant.