Custom Post Grid WPBakery
Using flex
—
### **1. Register a Custom Shortcode in `functions.php`**
Add a custom shortcode for the grid layout.
function custom_post_grid_shortcode($atts) {
ob_start();
// Query Arguments
$args = array(
'post_type' => 'post', // Adjust for custom post types if needed
'posts_per_page' => 6, // Number of posts to display
);
$query = new WP_Query($args);
// Output
if ($query->have_posts()) : ?>
<div class="custom-post-grid">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="custom-post-grid-item" style="background-image: url('<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>');">
<div class="custom-post-content">
<h2 class="custom-post-title"><?php the_title(); ?></h2>
<div class="custom-post-excerpt"><?php the_excerpt(); ?></div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif;
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('custom_post_grid', 'custom_post_grid_shortcode');—
### **2. Add CSS for the Grid Layout**
Include this CSS in your WordPress theme’s `style.css` file or Customizer > Additional CSS.
/* Custom Post Grid Container */
.custom-post-grid {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Space between grid items */
}
/* Each Grid Item */
.custom-post-grid-item {
flex: 0 1 calc(33.333% - 20px); /* 3 columns with gap adjustment */
background-size: cover;
background-position: center;
position: relative;
min-height: 300px; /* Adjust the height as needed */
color: #fff;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
border-radius: 8px; /* Optional: Rounded corners */
}
/* Overlay Content */
.custom-post-content {
background: rgba(0, 0, 0, 0.6); /* Dark overlay */
padding: 20px;
width: 100%;
text-align: center;
}
/* Title Styling */
.custom-post-title {
font-size: 1.5rem;
margin: 0;
}
/* Excerpt Styling */
.custom-post-excerpt {
font-size: 1rem;
margin-top: 10px;
}—
### **3. Add the Shortcode to WPBakery**
1. Edit your page using WPBakery.
2. Add a **Text Block** element.
3. Insert the shortcode:
[custom_post_grid]—
### **4. Final Output**
This will generate a grid layout with:
– 3 equal-width columns per row (using Flexbox).
– The featured image as the background for each grid item.
– The post title and excerpt displayed over a dark semi-transparent overlay.
You can adjust the number of posts, layout, and styling further by tweaking the shortcode or CSS.
Let me know if you need additional modifications!
Here is an updated version of the CSS for your grid layout:
—
### **Updated CSS with `mix-blend-mode`**
Add or replace this CSS in your theme's `style.css` file or Customizer > Additional CSS.
/* Custom Post Grid Container */
.custom-post-grid {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Space between grid items */
}
/* Each Grid Item */
.custom-post-grid-item {
flex: 0 1 calc(33.333% - 20px); /* 3 columns with gap adjustment */
position: relative;
min-height: 300px; /* Adjust the height as needed */
color: #fff;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
border-radius: 8px; /* Optional: Rounded corners */
}
/* Background Image with Blend Mode */
.custom-post-grid-item::before {
content: "";
background-image: inherit;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: color; /* Blend mode applied */
z-index: 1;
}
/* Color Overlay */
.custom-post-grid-item::after {
content: "";
background: #333; /* Overlay color, change as needed */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* Overlay Content */
.custom-post-content {
background: rgba(0, 0, 0, 0.6); /* Dark overlay for content */
padding: 20px;
width: 100%;
text-align: center;
position: relative;
z-index: 2; /* Ensures content appears above background */
}
/* Title Styling */
.custom-post-title {
font-size: 1.5rem;
margin: 0;
}
/* Excerpt Styling */
.custom-post-excerpt {
font-size: 1rem;
margin-top: 10px;
}—
### **Key Changes**
1. **`::before` Pseudo-element**:
– The background image is inherited using `background-image: inherit;` and `mix-blend-mode: color` applies the color blending effect.
2. **`::after` Pseudo-element**:
– A solid color overlay (e.g., `#333`) is applied beneath the blended image to achieve the visual effect.
3. **Z-Index**:
– Ensures that the title and excerpt content are on top of the image and overlay.
—
### **Final Effect**
– The featured image will have a **color-blend mode** effect applied.
– A solid color overlay creates a unique visual blending.
– Post title and excerpt remain clear and visible on top.
You can adjust the overlay color (`#333`) and mix-blend mode for variations like `multiply`, `overlay`, or `darken` depending on the desired outcome.
Let me know if you need further tweaks!