For this project, I was given a specific design (it was actually already built on a non-WordPress platform) and I was hired to migrate the entire site from the proprietary platform to WordPress. I built the site on the Astra Pro theme, using Beaver Themer, Beaver Builder and the Ultimate Beaver Builder Add-On along with custom code.
For a post to be displayed in the featured section of the homepage, I used ACF custom fields to provide the author the ability to set the feature parameters
I wrote a function to evaluate the featured_on_homepage, start and end custom fields. If the post is set to be displayed in the featured section, this function adds a WordPress built in tag (sweet) to the post. A tag was used so that I could do most of the query within the UABB Advanced Post Module. This function runs when the homepage loads.
function tob_home_feature() {
$today = current_time('Ymd');
$start_date = 'start';
$end_date = 'end';
$args = array(
'post_type' => 'post',
'meta_key' => 'featured_on_homepage',
'compare' => 'EXISTS',
'posts_per_page' => -1 // get all posts
);
$query = new WP_Query( $args );
// remove the sweet tag from all posts where the featured_on_homepage is checked
// this is so that we keep the tags clean
if ( $query->have_posts() ):
while( $query->have_posts() ):
$query->the_post();
wp_remove_object_terms( get_the_ID(), 'sweet', 'post_tag' );
endwhile;
endif;
wp_reset_postdata();
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'meta_query' => array(
'relation' => 'AND',
array(
'key' => $start_date,
'value' => $today,
'compare' => '<=',
'type' => 'DATE',
),
array(
'key' => $end_date,
'value' => $today,
'compare' => '>=',
'type' => 'DATE',
),
array(
'key' => 'featured_on_homepage',
'compare' => 'EXISTS'
)
)
);
$query = new WP_Query( $args );
// set the sweet tag for posts that are to be featured where today is within their date range
if ( $query->have_posts() ):
while( $query->have_posts() ):
$query->the_post();
wp_add_object_terms( get_the_ID(), 'sweet', 'post_tag' );
endwhile;
endif;
wp_reset_postdata();
}The query settings inside UABB are set to:
I assigned the class featured-banner to this UABB Advanced Post Module so that I could use a small filter to further refine the query so as to pull the right featured image — the one that resides in the banner (FWIW, the other sections in the featured area function exactly the same just different module classes and location meta_values.
function tob_uabb_blog_posts_query_args( $args, $settings ) {
if ( $settings->class == 'featured-banner') {
global $post;
$my_meta = [ 'meta_key' => 'location', 'meta_value' => 'banner'];
$args = array_merge ( $args, $my_meta );
}
return $args;
}Now that we have the single right post available to display, it’s time to format the visual. UABB Advanced Post does not have a pre-defined format that I could use. Fortunately, it allows for a Custom Post Layout for maximum flexibility. The custom layout uses two containers –> HTML and CSS.
The banner contains a clickable button to the associated category archive page, a full width image and the post title. The button and post title overlay the image.
HTML
<div class="awesome-banner">
<h2 class="awesome-post-cat"></h2>
<a class="awesome-image-link" href="https://jaimeslutzky.com/wordpress-full-width-custom-banner-with-overlay/" style="display: block;background: url('');background-size: cover; background-position-y: 10%">
</a>
<h4 class="awesome-post-name normal ">
Read More...
</h4>
</div>The category, featured image and title are all inserted with Beaver Themer shortcodes.
CSS
.awesome-banner {
height: 650px !important;
}
.awesome-image-link {
height: 650px !important;
}
.awesome-banner .awesome-post-name {
font-family: upgrade;
font-weight: 400;
position:relative;
margin-bottom:-100px;
top: -100px;
padding: 10px;
}
.awesome-banner .awesome-post-cat {
text-align: left;
position: relative;
top: 80px;
left: 60px;
margin-top: -50px;
}
.awesome-banner .awesome-post-cat a {
color: #ffffff !important;
text-transform: uppercase;
text-decoration: none !important;
font-family: 'Futura-PT',futura-pt,sans-serif;
font-weight: 700;
background: #1bc3f8;
letter-spacing: 0.1rem;
display: inline-block;
padding: 5px 20px;
font-size: 14px;
transition: all .25s .1s ease;
}
.awesome-banner .awesome-post-cat a:hover {
background: #0581a8;
color: #ffffff !important;
}
.awesome-banner .awesome-image-link {
background-position-x: 25% !important;
}
.awesome-banner .awesome-post-name {
text-align: left;
padding-left: 60px;
}
.awesome-banner .awesome-post-name a {
color: #ffffff;
text-decoration: none !important;
font-family: upgrade;
font-size: 48px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.awesome-banner .awesome-post-name.reverse a {
color: #000000;
text-shadow: 0 1px 0 rgba(27, 195, 248,.5);
}
.uabb-blog-post-content:hover .awesome-post-name a,
.awesome-banner .awesome-post-name a:hover {
color: #1bc3f8;
}
.uabb-blog-post-element-link:hover {
display: none;
z-index: 1;
}
.uabb-blog-post-inner-wrap:hover {
z-index: 42;
}
@media screen and (max-width: 800px) {
.awesome-banner {
height: 250px !important;
}
.awesome-image-link {
height: 250px !important;
}
.awesome-banner .awesome-post-cat {
left: 20px;
}
.awesome-banner .awesome-post-name {
padding-left: 30px;
}
.awesome-banner .awesome-post-name a {
font-size: 24px;
}
}