How to add a QR code to WordPress

The no-plugin route (recommended)

1. Generate the code with the URL generator and download it as PNG.
2. In the block editor, add an Image block and upload the file.
3. Set explicit width, add meaningful alt text ("QR code linking to our booking page"), and leave white space around it — the quiet zone must survive your theme's styling.

That is the whole job. One detail catches people out: WordPress blocks SVG uploads by default for security reasons, so upload PNG unless your site already allows SVG. For on-screen display PNG is fine; keep the SVG in your files for anything that will be printed.

Why you probably don't want a QR plugin

Most QR plugins do one of two things: bundle a JavaScript generator (fine, but now you maintain a plugin to do what one image does), or render the code by calling a remote service — which means every page view sends your URL, and your visitor's IP, to a third party. If the content of the code is sensitive at all (an internal tool, a pre-launch page, a WiFi credential), that trade is worse than it looks — see client-side vs server-side generation.

A static image involves no plugin to update, no external call, and no way for the code to break when a plugin is abandoned.

Automatic per-post codes in a theme template

If you want every post to carry a code pointing at itself — useful when articles get printed — put one line in your theme's template (e.g. single.php or a block theme pattern), using the keyless API:

<img src="https://useqr.app/api/v1/qr?data=<?php echo urlencode(get_permalink()); ?>&size=300"
     width="150" height="150" loading="lazy" alt="QR code for this article">

No API key, no account; the image URL is the whole integration. The code changes per post because get_permalink() does.

The print-stylesheet trick

The neatest use of a per-post code: show it only in print. A reader who prints your recipe, guide or documentation gets a code on paper that leads back to the live page.

.qr-print { display: none; }
@media print {
  .qr-print { display: block; width: 30mm; }
}

Wrap the image above in class="qr-print" and the code exists only where it is useful. At 30 mm printed width, the code scans comfortably at close range under the 10:1 distance rule.

Placement notes

• Keep the rendered code at least 100 × 100 px on screen; smaller thumbnails scan poorly from other phones and look like decoration.
• Do not let the theme apply rounded corners, shadows or filters to the image — corner radius can clip the quiet zone and finder patterns.
• Dark-mode themes that invert images will break codes; exclude the image from any filter: invert() rule. More on this in embedding a QR code in HTML.

Before publishing, run the rendered page through a phone scan and the validator — themes do unexpected things to images.

FAQ

Do I need a plugin to add a QR code to WordPress?

No. An Image block with an uploaded PNG does everything a plugin does, with nothing to update and no third-party requests. A plugin only makes sense if you need codes generated dynamically across thousands of pages, and a one-line template tag handles that too.

Why won't WordPress let me upload an SVG QR code?

WordPress blocks SVG uploads by default because SVG files can contain scripts. Upload the PNG for the site and keep the SVG for print jobs, or enable SVG support deliberately with sanitisation if your workflow requires it.

Can each blog post have its own QR code automatically?

Yes. Add an image tag to your single-post template that passes the post's permalink to a keyless QR API. Every post then renders its own code with no per-post work.

Will a QR code slow my WordPress site down?

A static uploaded PNG of a QR code is typically a few kilobytes — smaller than almost any photo on the page. Use loading="lazy" and it has no measurable effect on load time.