# How to add a QR code to WordPress

> Add the downloaded PNG with an Image block, no plugin required. Plugins that render QR codes through third-party services send your URLs out on every page view; a static image or a keyless API call keeps the page self-contained. Templates can generate per-post codes automatically.

Source: https://useqr.app/docs/how-to/how-to-add-a-qr-code-to-wordpress · Last reviewed 2026-08-21 · UseQR is free forever, no signup.

---

## The no-plugin route (recommended)

1. Generate the code with the [URL generator](/url) 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](/glossary/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](/wifi-qr-code)), that trade is worse than it looks: see
[client-side vs server-side generation](/docs/security/client-side-vs-server-side-qr-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](/docs/developers/free-qr-code-api-no-key):

```php
<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.

```css
.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](/docs/print/the-10-to-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](/docs/how-to/how-to-embed-a-qr-code-in-html).

Before publishing, run the rendered page through a phone scan and the
[validator](/validate): 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.

## Try it

- https://useqr.app/url
- https://useqr.app/validate