WordPress banners serve many purposes, from directing users to special offers to capturing attention with large text and graphics. Even though banners are often helpful, they can sometimes interfere with user experience or the site’s design.
Turning them off is thus an action taken by webmasters who want a more minimalist, clean look of their site. If you’re looking for ways to clean your WordPress website and remove banners, this guide will show you exactly how to do it. Whatever theme banners, plugin banners, or annoying dashboard notifications you have, we’ve got simple steps for you. You can also refer to the detailed theme documentation provided with their WordPress theme for more information on customisation options.
Understanding Banners in WordPress
Before we dive into how to turn them off, let’s take a minute to talk about what banners are and why you even have them on your site in the first place.
What are Banners in WordPress?
WordPress banners are simply objects (text or picture) that stand out on your page. They are static or dynamic depending on user action. These are the most common types of banners:
- Promotional Banners: These are the banners that usually promote a sale, event, or new content. They are usually flashy and are designed to grab your attention.
- Informational Banners: These banners alert your visitors to something important, such as maintenance dates or policy updates.
- Navigation Banners: In some cases, banners are used to take visitors to the most-visited pages or to focus areas on the site.
- Alert Banners: These are generally used to inform users of something important, like a security compromise or a major update.
Why Use Banners?
Banners are very important in website user interaction and communication strategy. Here are some of the reasons why they are used:
- Visibility: Because banners are placed in strategic locations, they are visible and can grab the user’s attention.
- User Interaction: Banners can trigger user interaction by promoting special offers or highlighting key content, and increase the chances of user interaction.
- Communication: They are great vehicles for direct user communication on the site, providing critical information without user initiation.
- Aesthetics: Banners can also make a site prettier and can be livelier and brighter.
Technical Implementation of Banners
WordPress banners are accessed using various processes that include the use of HTML, CSS, JavaScript, and PHP. Below is how they are incorporated:
HTML (HyperText Markup Language): HTML is the fundamental part of any web page and is utilized to create the structure of banners. This can be as simple as a div tag with an image or text or more complex constructs that include lists, links, and so on.
Example:
<div class="promo-banner">
<h1>Special Offer!</h1>
<p>Get a 50% discount on all services this month!</p>
<a href="/promotion">Learn More</a>
</div>
CSS (Cascading Style Sheets): CSS styles the banner. This includes the size, colors, background images, and banner placement on the page. Also, changes in responsive design are taken care of by CSS, so banners look good on any device.
Example:
CSS
.promo-banner {
background-color: #f49f42;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
JavaScript: For dynamic banners, JavaScript can be used to control interactions, such as closing the banner, click tracking, or dynamically updating content based on user action.
Example:
JavaScript
document.querySelector('.promo-banner').addEventListener('click', function() {});How to Disable Banners in WordPress Theme
Yes! There are various methods for disabling banners on a WordPress based on what type of banner is in use, its implementation, and what level of coding comfort you have. Here we discuss those methods in much greater detail while giving you practical help to implement each one.
1. Hiding via CSS (Quick & Easy)
This method works by using CSS so that to the outside world the banner will essentially disappear but is still there in the codebase of the site. It’s the easiest and is best for anyone who wants a quick-and-dirty fix for something they may wish to change back.
How it works:
The CSS rules are added to change the display property of the banner’s HTML elements to none.
This method only applies to the visual presentation of the banner, which means that the banner will still be loading in the background. This can be a problem if you want to improve your page load speed.
For instance, if you had a class promo-banner on the banner, you could add the following CSS rule in the Customizer under “Additional CSS,” directly in your child theme’s style.css or by using a custom CSS plugin:
CSS
.promo-banner {
display: none;
}2. Removing via Hooks in functions.php or a Custom Plugin
This is a more technical method and uses WordPress’s hook system to remove or disable the banner by unhooking the function that renders it. Best for removing theme and plugin generated banners.
How it works:
Identify the action or filter hook that is used to display the banner.
Use remove_action() or remove_filter() functions to unhook the banner’s function.
Example: If a theme or plugin adds a banner using an action hook like wp_footer, you can disable it by adding the following code to your child theme’s functions.php file or a site-specific plugin:
PHP
function remove_custom_theme_banner() {
remove_action('wp_footer', 'the_custom_banner_function');
}
add_action('init', 'remove_custom_theme_banner');3. Direct Edits in Template Files
This method involves editing the theme’s PHP template files where the banner code is hardcoded. Requires good understanding of PHP and HTML as incorrect edits can break your site.
How it works:
Locate the PHP file where the banner is coded, often in specific theme files like header.php, footer.php, or a specific template part.
Carefully remove or comment out the banner code.
Example: In the header.php file, you might find code like this:
HTML
<div class="header-banner">
Special Offer - Only this Week!
</div>To disable it, you can either remove these lines or comment them out:
4. Using a Code Snippet Plugin
For those who don’t want to edit theme or plugin files directly, a code snippet plugin is a reversible and safe option. These plugins allow you to add custom PHP code snippets which can disable functions to suppress banners, all without the risk of your site breaking because of a syntax error.
How it works:
Install a plugin like Code Snippets.
Add a new snippet to remove the banner using similar code to what you’d put in the functions.php file.
Example: In the Code Snippets plugin, you would create a new snippet with the code to remove the action or filter that adds the banner, similar to the remove_action() example above.
FAQs
Will these changes persist through updates?
A: Changes made in a child theme or through a custom plugin will be preserved. However, changes made directly to theme or plugin files will be lost unless done in a child theme.
Are there plugins that can disable banners without coding?
Yes, plugins like Disable Admin Notices can turn off a lot of admin area banners without any code.
Will disabling banners affect my website’s SEO?
Overall, banner removal won’t affect your website’s SEO unless banners contain SEO-content or keywords. Minimizing big or numerous banners might improve page loading speed, which would have a positive effect on SEO as site speed is a ranking factor.
What if I remove a banner and change my mind?
That’s why it’s important to back up your site before you do anything. If you delete something and need it back, you can restore your site from the backup. Or if you commented out code, you can just delete the comments to activate the banner again.
Can I disable banners on specific pages only?
Yes, you can conditionally disable banners by making changes to your PHP files within your theme or through custom CSS. For example, you can use conditional tags in WordPress and check if the page being visited is the page you want to modify and hide the banner in that case:
PHP
if (is_page('about-us')) {
// Code to disable banner
}Alternatively, use CSS to hide banners on specific pages by targeting page-specific classes added by WordPress to the <body> tag.
What if disabling a banner breaks my site’s layout?
If removing a banner does break your layout, you will need to modify your CSS or the rest of your HTML layout. Check if the banner container was also functioning as a layout element. If you do need to do so, you can add in custom CSS to fix the layout issues, such as filling up the space the banner held or repositioning nearby elements.
Can I disable banners from a child theme?
Yes you can. In fact that’s the way to be using when modifying the theme. It’s easy; override the files within parent themes where banners have been placed and added through them. Add extra functions in child themes to deregister shortcodes and widgets. Those will still be there after you update your themes.
How do I know if a banner is added by a plugin?
To find out if a plugin adds a banner, temporarily deactivate your plugins and see if the banner disappears. If it does, reactivate them one by one until you find the culprit. Once you identify which plugin is the culprit, check the plugin’s options or documentation on how to disable its banners.