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:
- Its header layout option (i.e. “Transparent Header” or not).
- Its featured image.
- 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() ) {
/*
* Set the ID of post or page to pull transparent
* header option from.
*/
$post_id = 123;
$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() ) {
/*
* Set the ID of post or page to pull featured
* image and options from.
*/
$post_id = 123;
if ( ! has_post_thumbnail( $post_id ) ) {
return;
}
$thumbs = get_post_meta( $post_id, '_tb_thumb', true );
if ( 'fs' === $thumbs || 'fw' === $thumbs ) {
query_posts( array(
'post_type' => array( 'post', 'page' ),
'post__in' => array( $post_id )
));
themeblvd_set_att( 'show_meta', false );
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 );
Could this concept also be applied to other scenarios like a WooCommerce shop?
Taking all of the same concepts above, we can expand this idea to other scenarios, too. For example, what about a shared banner across all pages of your WooCommerce shop? This might be a logical thing on some websites.
Below is a code example that modifies our previous example, but applies the concept to WooCommerce. — We’ll have everything work off the “Shop” page, designated from the WooCommerce settings. The end-user will just need to apply a featured image and “full-width” or “full-screen parallax” setting to that “Shop” page. Then, the following code will apply that across all WooCommerce pages.
/**
* Apply transparent header option from the
* WooCommerce shop page.
*/
function my_frontend_config_header( $header ) {
if ( function_exists( 'is_woocommerce' ) ) {
if ( is_woocommerce() && ! is_shop() ) {
$shop_id = wc_get_page_id( 'shop' );
$header = get_post_meta( $shop_id, '_tb_layout_header', true );
}
}
return $header;
}
add_filter( 'themeblvd_frontend_config_header', 'my_frontend_config_header' );
/**
* Trigger the epic thumbnail on WooCommerce pages,
* matching it to the WooCommerce shop page.
*/
function my_trigger_epic_thumb() {
// Avoid fatal errors if WooCommerce is deactivated.
if ( ! function_exists( 'is_woocommerce' ) ) {
return;
}
if ( is_woocommerce() && ! is_shop() ) {
$shop_id = wc_get_page_id( 'shop' );
if ( ! has_post_thumbnail( $shop_id ) ) {
return;
}
$thumbs = get_post_meta( $shop_id, '_tb_thumb', true );
if ( 'fs' === $thumbs || 'fw' === $thumbs ) {
query_posts( array(
'post_type' => array( 'post', 'page' ),
'post__in' => array( $shop_id )
));
themeblvd_set_att( 'show_meta', false );
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 );