Customize Output
Bannerize provides several ways to customize the HTML output of your banners, including WordPress filters, custom CSS classes, and template overrides.
CSS Classes Filter
The wp_bannerize_classes filter lets you modify the CSS classes applied to each banner’s container element. This is useful for adding custom styling or integrating with CSS frameworks.
Filter Signature
apply_filters('wp_bannerize_classes', array $classes, WP_Post $banner): array| Parameter | Type | Description |
|---|---|---|
$classes | array | The default CSS classes for the banner container |
$banner | WP_Post | The banner post object |
Example: Add Custom Classes
add_filter('wp_bannerize_classes', function ($classes, $banner) {
// Add a custom class to all banners
$classes[] = 'my-custom-banner';
return $classes;
}, 10, 2);Example: Add Campaign-Specific Classes
add_filter('wp_bannerize_classes', function ($classes, $banner) {
// Get the banner's campaigns
$campaigns = wp_get_post_terms($banner->ID, 'wp_bannerize_tax', ['fields' => 'slugs']);
// Add a class for each campaign
foreach ($campaigns as $slug) {
$classes[] = 'campaign-' . $slug;
}
return $classes;
}, 10, 2);Example: Add Conditional Classes
add_filter('wp_bannerize_classes', function ($classes, $banner) {
// Add a class based on banner type
$type = get_post_meta($banner->ID, 'banner_type', true);
if ($type === 'local' || $type === 'remote') {
$classes[] = 'banner-image';
} else {
$classes[] = 'banner-html';
}
// Add a class for banners with links
$link = get_post_meta($banner->ID, 'banner_link', true);
if (!empty($link)) {
$classes[] = 'banner-clickable';
}
return $classes;
}, 10, 2);Custom Templates
Bannerize supports custom templates for controlling how individual banners and campaign archives are rendered. You can override the default templates from the plugin settings.
Configuring Custom Templates
Navigate to Bannerize > Settings > Theme to configure custom templates:
| Setting | Description |
|---|---|
| Banner Single Template | Template used to render each individual banner |
| Campaign Archive Template | Template used for campaign taxonomy archive pages |
Creating a Custom Banner Template
Create a template file in your theme directory that controls the HTML output of each banner. The template receives the banner post object and all its meta data.
<?php
/**
* Custom Bannerize banner template
*
* Available variables:
* $banner - WP_Post object
* $meta - Array of banner meta fields
*/
?>
<div class="custom-banner-wrapper" data-banner-id="<?php echo $banner->ID; ?>">
<?php if ($meta['banner_type'] === 'local' || $meta['banner_type'] === 'remote') : ?>
<?php
$img_url = ($meta['banner_type'] === 'local')
? $meta['banner_url']
: $meta['banner_external_url'];
?>
<?php if (!empty($meta['banner_link'])) : ?>
<a href="<?php echo esc_url($meta['banner_link']); ?>"
target="<?php echo esc_attr($meta['banner_target']); ?>"
<?php echo $meta['banner_no_follow'] ? 'rel="nofollow"' : ''; ?>>
<img src="<?php echo esc_url($img_url); ?>"
alt="<?php echo esc_attr($meta['banner_description']); ?>"
width="<?php echo esc_attr($meta['banner_width']); ?>"
height="<?php echo esc_attr($meta['banner_height']); ?>" />
</a>
<?php else : ?>
<img src="<?php echo esc_url($img_url); ?>"
alt="<?php echo esc_attr($meta['banner_description']); ?>"
width="<?php echo esc_attr($meta['banner_width']); ?>"
height="<?php echo esc_attr($meta['banner_height']); ?>" />
<?php endif; ?>
<?php else : ?>
<div class="banner-html-content">
<?php echo $banner->post_content; ?>
</div>
<?php endif; ?>
</div>Custom CSS
You can style banners using CSS. Bannerize outputs banners with predictable class names that you can target in your theme’s stylesheet or the WordPress Customizer’s Additional CSS section.
Default CSS Structure
/* Banner container */
.wp-bannerize-banner {
margin-bottom: 16px;
}
/* Image within a banner */
.wp-bannerize-banner img {
max-width: 100%;
height: auto;
}
/* Banner link wrapper */
.wp-bannerize-banner a {
display: block;
text-decoration: none;
}
/* HTML banner content */
.wp-bannerize-banner .banner-content {
overflow: hidden;
}
/* Horizontal layout container */
.wp-bannerize-horizontal {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
/* Vertical layout container */
.wp-bannerize-vertical {
display: flex;
flex-direction: column;
}Layout Margins
Bannerize provides built-in margin settings. Navigate to Bannerize > Settings > Layout to configure:
| Setting | Description | Default |
|---|---|---|
| Margin Top | Space above each banner (px) | 0 |
| Margin Right | Space to the right of each banner (px) | 0 |
| Margin Bottom | Space below each banner (px) | 10 |
| Margin Left | Space to the left of each banner (px) | 0 |
These margins are applied as inline styles to each banner container, so they take precedence over CSS rules.
You can override the inline margin styles with CSS using the !important declaration if needed, but it is recommended to use the settings page for margin adjustments.
Responsive Styling Example
/* Stack banners vertically on small screens */
@media (max-width: 768px) {
.wp-bannerize-horizontal {
flex-direction: column;
}
.wp-bannerize-banner img {
width: 100%;
height: auto;
}
}
/* Add a subtle border and shadow */
.wp-bannerize-banner {
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
}
.wp-bannerize-banner:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}Randomization Seed Filter
The wp_bannerize_banners_rank_seed filter lets you customize the randomization seed used when orderby is set to random.
Filter Signature
apply_filters('wp_bannerize_banners_rank_seed', int $seed): intExample: Time-Based Seed
// Change the random order every hour instead of every page load
add_filter('wp_bannerize_banners_rank_seed', function ($seed) {
return (int) date('YmdH'); // Changes every hour
});Example: User-Based Seed
// Show the same random order to each logged-in user
add_filter('wp_bannerize_banners_rank_seed', function ($seed) {
if (is_user_logged_in()) {
return get_current_user_id();
}
return $seed;
});The rank_seed attribute in shortcodes, widgets, and PHP functions takes precedence over this filter. The filter only applies when no explicit rank_seed is provided.
