How to Add a Banner in WordPress

Banners are one of the most powerful tools on any WordPress site — but most people set them up wrong, miss key placements, or use outdated methods that quietly kill performance.

This guide walks you through every method to add a banner in WordPress, from the simplest drag-and-drop approach to custom code, so you can pick what fits your site and execute it without second-guessing.

What Is a WordPress Banner?

A WordPress banner is a visual element — an image, graphic, or HTML block — displayed prominently on your site to communicate a message, promote something, or guide visitors toward an action.

Banners can appear in headers, sidebars, within content, between blog posts, or in footers. They serve different goals: some drive clicks to product pages, some collect emails, some run ads.

Why this matters: According to WordStream, display advertising reaches over 90% of global internet users across 2 million+ websites. Meanwhile, HubSpot reports that landing pages with targeted banners convert 2–5x better than those without any visual call-to-action. Getting your banners right isn’t optional — it’s a direct revenue lever.

Types of WordPress Banners

Understanding what type of banner you need before building one saves you time and avoids the classic “it looks wrong on mobile” panic.

Header Banners Full-width banners that sit at the top of a page or post. These get the most visibility — users see them within seconds of landing. Studies show that the first 8 seconds determine whether a visitor stays, making header placements prime real estate.

Sidebar Banners Fixed or scrolling banners in the left or right column. Sticky sidebars — banners that follow users as they scroll — show significantly higher engagement rates than static placements, according to Nielsen Norman Group research on reading patterns.

In-Content Banners Banners placed inside blog posts or pages, usually after the first few paragraphs or at natural break points. Content Marketing Institute data shows that in-content placements outperform sidebar ads by up to 47% in click-through rate because they appear when reader intent is highest.

Footer Banners Lower-visibility placements that capture visitors who scroll all the way down — a strong signal of engagement. These work especially well for newsletter signups and secondary offers.

Popup and Overlay Banners Full-screen or partial overlays triggered by time-on-page, exit intent, or scroll depth. When used correctly, exit-intent popups recover 10–15% of abandoning visitors, according to Sumo data.

Method 1 — Add a Banner Using a WordPress Plugin

This is the fastest method, and the one most site owners should start with.

Step 1: Choose your plugin

The most widely used options are:

• Advanced Ads — granular targeting, scheduling, and placement rules
• Ad Inserter — flexible positioning with custom code support
• WP AdCenter — clean interface, good for non-technical users
• Shortcodes Ultimate — if you want to embed banners via shortcodes

Step 2: Install and activate

Go to your WordPress dashboard → Plugins → Add New → search for your chosen plugin → click Install Now → then Activate.

WordPress currently powers 43.4% of all websites on the internet (W3Techs, 2024), and the plugin ecosystem reflects that scale — there are over 59,000 plugins in the official repository, meaning almost any banner use case already has a dedicated solution.

Step 3: Create your banner

In Advanced Ads (as an example):

• Go to Advanced Ads → New Ad
• Choose your ad type: Image Ad, Plain Text and Code, or Rich Content
• Upload your banner image or paste your HTML
• Set size, destination URL, and alt text
• Save

Step 4: Choose placement

This is where most users make mistakes. Advanced Ads lets you:

• Inject the banner before or after content
• Insert it within the post content (after paragraph 2, for example)
• Assign it to a sidebar widget
• Set it as a header or footer injection

Step 5: Set targeting rules (optional but powerful)

Advanced Ads lets you target banners by post type, category, tag, user role, device, or even time of day. This level of precision is what separates a banner that converts from one that gets ignored.

Method 2 — Add a Banner Using the WordPress Block Editor (Gutenberg)

If you’re not using a plugin, the Block Editor gives you solid native options.

Step 1: Open the page or post

Navigate to Pages or Posts in your dashboard and open the one you want to edit.

Step 2: Add an Image or Cover Block

Click the + icon to add a new block. Search for:

• Image — simple, clean, works for most banner use cases
• Cover — adds a background image with text overlay, ideal for promotional banners
• Media & Text — two-column layout with image and text side by side
• HTML — if you have a custom HTML banner to embed

Step 3: Configure the block

For an Image block:

• Upload your banner image or choose from the Media Library
• Add a destination link under Image Settings → Link To → Custom URL
• Set your alt text for accessibility and SEO
• Adjust alignment: Full Width tends to perform best for header-style banners

For a Cover block:

• Upload your background image
• Add headline text directly on the image
• Add a button block inside the cover for your CTA

Step 4: Adjust sizing

Gutenberg’s default image handling crops aggressively on mobile. Set your banner to Full Width alignment and use an image at least 1200px wide to prevent blurry or misaligned renders on larger screens.

The WordPress Block Editor now has a 64% adoption rate among active WordPress sites (Automattic internal data), making it the most accessible path for non-developers to manage banners without touching a single line of code.

Method 3 — Add a Banner to a Widget Area (Sidebar or Footer)

For sidebars and footer zones, widget areas are your cleanest option.

Step 1: Go to Appearance → Widgets

Your active theme determines which widget areas are available. Most themes offer: Sidebar, Footer 1, Footer 2, and sometimes additional areas like “Header Widget” or “Before Content.”

Step 2: Add an Image Widget

Drag an Image Widget into your chosen area. Upload your banner image, set the link URL, add alt text, and save.

Step 3: Add an HTML Widget for Custom Banners

If you need an animated banner, a third-party ad tag, or a custom HTML banner, drag a Custom HTML widget into your area and paste your code.

<a href=”https://yourdestination.com” target=”_blank”>

  <img src=”https://yoursite.com/wp-content/uploads/banner.jpg”

       alt=”Your Banner Description”

       style=”width:100%; max-width:300px; display:block;” />

</a>

Step 4: Make the sidebar sticky (optional)

To create a sticky sidebar banner that follows users as they scroll, add this CSS to Appearance → Customize → Additional CSS:

.widget-area {

  position: sticky;

  top: 20px;

}

Note: This applies to all widgets in that area. For granular sticky control, use a plugin like Q2W3 Fixed Widget or add the class only to a specific widget wrapper.

Method 4 — Add a Banner Using a Page Builder

If you use Elementor, Divi, WPBakery, or Beaver Builder, banner placement becomes a visual drag-and-drop operation.

Elementor (most popular — 12+ million active installs)

• Open the page in Elementor editor
• Drag an Image Widget or Banner Widget from the left panel into your desired section
• Upload your image, add your link, and adjust spacing
• Use the Position: Fixed option under Advanced → Custom CSS to create a sticky floating banner

Divi Builder

• Add a new Row with a single column
• Insert an Image Module

Under Advanced → Custom CSS, add sticky behavior:
position: sticky;top: 30px;

Elementor alone powers approximately 7% of all WordPress sites globally, making it one of the most common environments where banners are built. Its visual interface means zero code for the majority of placements.

Method 5 — Add a Banner With Custom Code

For full control over placement, behavior, and styling — custom code is the most flexible path.

Add a banner to a specific location using PHP hooks

Open your theme’s functions.php file (or a child theme) and add:

function custom_header_banner() {

    echo ‘<div class=”custom-banner”>

        <a href=”https://yourdestination.com”>

            <img src=”‘ . get_template_directory_uri() . ‘/images/banner.jpg”

                 alt=”Your Banner” />

        </a>

    </div>’;

}

add_action(‘wp_body_open’, ‘custom_header_banner’);

Inject a banner after the second paragraph in posts

function insert_banner_after_paragraph($content) {

    if (!is_single()) return $content;

    $banner = ‘<div class=”in-content-banner”>

        <a href=”https://yourdestination.com”>

            <img src=”‘ . get_template_directory_uri() . ‘/images/mid-banner.jpg”

                 alt=”In-Content Banner” />

        </a>

    </div>’;

    $paragraphs = explode(‘</p>’, $content);

    if (count($paragraphs) > 2) {

        $paragraphs[1] .= $banner;

    }

    return implode(‘</p>’, $paragraphs);

}

add_filter(‘the_content’, ‘insert_banner_after_paragraph’);

Style your banner for responsiveness

.custom-banner {

    width: 100%;

    max-width: 728px;

    margin: 20px auto;

    display: block;

}

.custom-banner img {

    width: 100%;

    height: auto;

    display: block;

}

@media (max-width: 768px) {

    .custom-banner {

        max-width: 320px;

    }

}

Over 30% of WordPress site owners report using custom code modifications on their sites (WP Engine Developer Report). If you’re in that group, the hook-based approach above keeps your code organized and easy to remove — unlike hardcoded edits buried in template files.

Banner Best Practices That Actually Move the Needle

Getting the banner placed is step one. Getting it to perform is what most guides skip.

Size matters more than design

The Interactive Advertising Bureau (IAB) standard banner sizes with the highest performance are:

• 728×90 (Leaderboard) — header placements
• 300×250 (Medium Rectangle) — in-content and sidebar
• 160×600 (Wide Skyscraper) — sidebar sticky
• 320×50 (Mobile Banner) — mobile header

Banners outside these standards face rendering issues across devices. Over 58% of web traffic now comes from mobile (Statista, 2024), which means your banner either renders cleanly on small screens or it doesn’t get clicked.

Loading speed kills conversions

Google’s Core Web Vitals research shows that every 100ms increase in page load time reduces conversions by 1%. Unoptimized banner images are a common culprit. Compress all banner images using tools like TinyPNG or ShortPixel before uploading — aim for under 150KB per image without visible quality loss.

Alt text and accessibility

Every banner image needs descriptive alt text. This is both an accessibility requirement and an SEO signal. Banners without alt text are invisible to screen readers and contribute to lower accessibility scores.

CTR benchmarks to know

Google’s own display network reports an average banner CTR of 0.46% across all formats. Targeted banners within relevant content perform significantly higher — well-placed in-content banners routinely hit 1–3% CTR when the message matches the reader’s intent. The gap between generic placement and strategic placement is measurable.

Frequency and fatigue

Nielsen research on banner blindness shows that users stop noticing banners they’ve seen more than 3–5 times. Rotate your banners regularly — every 30–60 days for evergreen content, and immediately after campaigns end. Tools like Advanced Ads handle rotation automatically.

Common WordPress Banner Mistakes to Avoid

Using images without defined dimensions Always set explicit width and height on your <img> tags. Missing dimensions cause layout shift — one of Google’s core ranking signals — which pushes your banner out of position as the page loads.

Ignoring mobile rendering A banner that looks clean on desktop often breaks on a 375px screen. Always preview on mobile before publishing. Use responsive CSS units (%, vw) instead of fixed pixel widths wherever possible.

No tracking on banner clicks A banner with no UTM parameters is a conversion black hole. Always append ?utm_source=site&utm_medium=banner&utm_campaign=your-campaign to your banner link so you can measure actual performance in Google Analytics.

Placing too many banners on one page Google’s Better Ads Standards research found that pages with excessive ads experience a 5–10x higher bounce rate than clean pages. More banners is almost never better. One high-quality, well-placed banner outperforms four mediocre ones.

Not testing banner variations A/B testing banner copy, image, and CTA can increase click-through rates by 20–40%, according to VWO research. Even a single test per quarter compounds significantly over 12 months.

Conclusion

Adding a banner in WordPress is straightforward once you know which method fits your setup — plugin for most users, block editor for quick one-off placements, widget areas for sidebars and footers, page builders for visual control, and custom code when you need precise injection logic.

The difference between a banner that sits there and a banner that performs comes down to placement strategy, sizing discipline, mobile optimization, and consistent testing. Banners that match reader intent at the right moment — not just banners that exist on a page — are the ones that drive results.

Apply one method from this guide today. Test it for 30 days with UTM tracking in place. Then iterate.