There are several methods to display banners randomly in WordPress. The simplest option is to utilize plugins, but if you prefer not to use one, you can achieve random banner displays using JavaScript along with HTML/CSS.
If you want to use a plugin for displaying random banners, you can install and test plugins like Random Banner or Brave Popup (premium version).
In this article, we will explore how to showcase banners randomly in the Top Bar widget area using JavaScript within the GeneratePress theme. This approach can also be adapted to other themes.
Displaying Random Top Banners in WordPress (Using GeneratePress Theme)
For the GeneratePress theme, you can add a custom HTML block in the Appearance » Widgets section of the Top Bar widget area to display your top banners.
For detailed instructions on displaying banners in the Top Bar area, please refer to the following article (in Korean).
The goal is to enable multiple banners to be displayed randomly in the Top Bar widget area of the GP theme.
We aim to ensure that the banners change randomly each time the page is loaded. (Previously, we exhibited alternating banners for the theme and web hosting. However, we are currently only exhibiting one banner, as most of the Black Friday promotions seem to be nearing their conclusion. 😄)
HTML Code
Add a custom HTML block in the Top Bar section under Appearance » Widgets and input the following HTML code.
<div id="banner1" class="notice-inner grid-container" style="display: none;">
Banner 1<a href="URL1" aria-label="Learn more about Banner 1">
Learn More
</a>
</div>
<div id="banner2" class="notice-inner grid-container" style="display: none;">
Banner 2<a href="URL2" aria-label="Learn more about Banner 2">
Learn More
</a>
</div>
You may modify the text and URL to fit your preferences.
CSS Code
The styles for the banners displayed in the Top Bar area should be adjusted through the theme options and custom CSS of the GeneratePress theme.
You can configure the layout from WordPress Dashboard » Appearance » Customize » Layout » Top Bar.
Background color and text color can be set under the Appearance » Customize » Colors section for Top Bar.
You can add custom CSS under Appearance » Customize » Additional CSS. I utilized the following code. If you use it, please adjust colors and font sizes accordingly.
/* Top Bar - Dark and Modern HighTech Style in GeneratePress */
.top-bar {
background: #101010; /* Dark black shade */
color: #1abc9c; /* Bright teal text */
font-family: 'Consolas', monospace; /* Tech-inspired monospace font */
font-size: 1.0rem !important;
font-weight: 600 !important;
padding: 10px 20px;
border-bottom: 5px solid #16a085; /* Subtle darker teal contrast */
}
.top-bar a {
display: inline-block;
padding: 8px 20px;
margin: 0 10px;
border-radius: 0; /* Sharp edges for a sleek appearance */
background: #16a085; /* Sophisticated dark teal background */
color: #101010; /* Dark for improved readability */
text-decoration: none;
font-weight: 700;
letter-spacing: 1.5px; /* Enhancing spacing for a modern touch */
transition:
background 0.3s,
color 0.3s,
box-shadow 0.3s;
}
.top-bar a:hover {
background: #0e6251; /* Darker teal on hover for depth */
color: #ecf0f1 !important; /* Light grey on hover */
box-shadow: 0 0 10px 3px rgba(14, 98, 81, 0.8); /* Shadow with a greenish teal hue */
}
@media (max-width: 768px) {
.top-bar {
display: none; /* Hides top bar on mobile devices */
}
}JavaScript Code
Using the following JavaScript will ensure the top banner changes randomly each time a visitor loads the page.
<script>
document.addEventListener('DOMContentLoaded', function () {
const bannerList = ['banner1', 'banner2']; // Array of banner IDs
const selectedBanner = bannerList[Math.floor(Math.random() * bannerList.length)]; // Randomly choose one banner
// Initially hide all banners
bannerList.forEach(banner => {
document.getElementById(banner).style.display = 'none';
});
// Show the randomly chosen banner
document.getElementById(selectedBanner).style.display = 'block';
});
</script>The JavaScript code can be added in the Appearance » Elements section as a hook in the wp_footer area or by utilizing a plugin like WPCode to add it to the footer section.
The aforementioned JavaScript provides a simple function to display banners randomly whenever a visitor enters the site. You may enhance the code to maintain the banner per user using localStorage.
If you wish to minimize the impact on your site, consider adding the following sample code to the functions file of a child theme for enqueuing.
function enqueue_random_banner_alternative() {
if (wp_is_mobile()) {
return; // Do not load on mobile devices
}
wp_enqueue_script(
'random-banner-alt',
get_stylesheet_directory_uri() . '/js/random-banner-alt.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_random_banner_alternative');Make sure to create a child theme for any modifications to avoid losing your changes when the theme updates.
function load_random_banner_alternative() {
if (wp_is_mobile()) {
return; // Do not load on mobile devices
}
wp_enqueue_script(
'random-banner-alt',
get_stylesheet_directory_uri() . '/js/random-banner-alt.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'load_random_banner_alternative');The code has been added to ensure that the top banner does not load on mobile devices. The example provided randomly selects from two banners, but you can modify the code to allow for three or more banners as needed.
Conclusion
In summary, we have explored a straightforward way to implement random banners in WordPress using basic HTML and JavaScript. Although demonstrated with the GeneratePress theme, the principles can be applied across different themes with ease.
The GeneratePress theme is favored for its speed and is commonly used among blogs, particularly income-generating ones. This blog is currently using the GP theme. If you manage a blog or a site where speed is crucial, GeneratePress is an excellent choice.