Adding Ads to a WordPress Blog
Pasting the ad code is the easy part. Ads are the most reliable way to destroy a blog's layout stability, and the damage is done by placement decisions, not by the snippet.
The ad code is three lines you paste once. The thing that will hurt you is where the slots go and whether their height is reserved before the ad arrives. Every ad unit is an asynchronously loaded box of unknown height dropped into finished layout, and unless you have told the browser how tall it will be, the content beneath it jumps when it lands.
That jump is Cumulative Layout Shift, it is measured on real visitors, and an ad-funded blog is the easiest possible way to fail it. So the placement decisions come first, and the snippet comes last.
Reserve the space before you insert anything
For each place you intend to put an ad, decide the exact size the slot will serve, then give its container that height in CSS from the moment the page renders.
.ad-slot-inline {
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 782px) {
.ad-slot-inline {
min-height: 250px;
}
}
Three rules make this work:
- Reserve per breakpoint. A slot serving a 728-pixel banner on desktop and a 300-pixel rectangle on mobile needs two different reservations, not one average.
- Restrict the sizes the slot can serve. Responsive slots that may return anything from 90 to 600 pixels tall cannot be reserved accurately. Fewer allowed sizes means a tighter reservation and less shift.
- Never collapse an unfilled slot. If no ad is returned, the reserved space should stay empty. Collapsing it produces exactly the shift you were trying to avoid, just in the opposite direction.
The reserved space costs you a little blank area on unfilled impressions. That is the price, and it is far cheaper than the alternative. The broader diagnosis is in fixing cumulative layout shift in WordPress.
Placements that survive, and ones that do not
| Placement | Layout shift risk | Notes |
|---|---|---|
| Sidebar, below the fold | Low | Outside the main reading column, easy to reserve |
| Between paragraphs, mid-article | Medium | Reservable, but each one shifts everything below it if unreserved |
| Directly above the article body | High | Sits above the largest content element and delays it |
| Sticky footer bar | Low if fixed-position | Does not move document flow, but must not cover controls |
| Automatic placement modes | Highest | The network chooses positions and sizes; you cannot reserve what you cannot predict |
The last row is the trap. Letting an ad network insert units automatically is attractive because it needs no work, and it is exactly the configuration that makes layout stability impossible to control. If revenue matters enough to run ads, it matters enough to define your own slots.
Avoid putting anything above the article's main heading and lead image. That element is usually the Largest Contentful Paint, and an ad in front of it delays the metric directly.
Insert the code without editing the theme
Ad networks give you a small script for the page head plus a snippet per slot. Put them somewhere theme-independent:
- The head script goes in a code-insertion plugin or your theme's dedicated header script field, not in
header.php. See adding code to a WordPress page. - Slot snippets go in a Custom HTML block, a reusable block or a widget area, wrapped in your reserved-height container.
- Keep the network's script asynchronous. Removing
asyncto "fix" an ordering problem turns the ad script into a render-blocking resource — see render-blocking resources.
Most networks also require an ads.txt file at the root of your domain. That is a plain text file at https://example.com/ads.txt, and several ad plugins can generate and serve it for you.
Consent, disclosure and eligibility
Ad scripts set cookies and pass identifiers. In regions requiring consent, the ad script must not run until permission is given, which means your consent tool has to actually block it rather than only display a banner — cookie consent plugins covers what real blocking involves.
Networks also review sites before approving them, and they look at content depth, navigation and policy pages more than design. If approval is the current hurdle, choosing a theme with AdSense approval in mind is a better use of time than adding more slots.
Measure the cost, then decide
Record your page's field metrics before adding ads. Add one slot. Wait for real-user data rather than trusting a lab test, because ad fill rates vary and a lab run may get no ad at all.
Then answer the question honestly: what did this slot earn, and what did it cost in speed and in readers who left? Blogs routinely carry six ad units earning very little while making the page unpleasant. Two well-placed, properly reserved slots usually earn nearly as much and leave the site worth visiting — and they keep the rest of your speed work intact.
Frequently asked
- The ads themselves do not, but what they do to Core Web Vitals can. Unreserved ad slots push content around as they load, which is measured as layout shift, and ad scripts add render-blocking work that delays the largest content paint. Both are ranking signals and both are avoidable.
- Give every ad container a fixed height in CSS before the ad loads, matched to the size the slot will actually serve. If the slot serves several sizes, reserve the tallest, or restrict the slot to one size so the reservation can be exact.
- Use a plugin or a code-insertion tool so the snippets survive a theme change and are all managed in one place. Editing theme template files directly means the ads vanish on the next theme switch and are hard to find later.