Design your codes

Out of the box a code is a plain black-and-white grid. A few settings turn it into something that carries your brand — recolour it, add a gradient, and with Pro round the dots, drop your logo in the middle or wrap it in a frame. Set the look once and every new code uses it. And because a code’s address never changes, you can restyle codes you already made without breaking anything you’ve printed.

Set your site-wide design

Go to QR Codes → Settings → QR design. A live preview sits beside the design controls, which are grouped in tabs. The tab opens on Colours; the technical Size & scanning tab comes last, because you’ll rarely need it. Click Save settings to make it the design for every new QR code, or Reset to defaults to start over.

• Colours — the foreground (the code’s dots) and the background, plus an optional two-stop gradient (From, To, and a horizontal, vertical or diagonal direction). Pure white behind the code scans best.
• Logo Pro — an image in the middle of the code.
• Frame Pro — a border around the code, with rounding and call-to-action text.
• Shape Pro — the code’s shape and dot style.
• Corners Pro — the style and colour of the three big corner squares.
• Size & scanning — the image size (width and height of the downloaded PNG, 100–1000 px), the Error correction level and the Margin.

Free vs Pro. Colours (gradient included) and Size & scanning are in the free plugin. Logo, Frame, Shape and Corners are Pro.

Size & scanning

• Error correction — how much damage the code can survive before it stops scanning. Low is for screens and emails only; Medium is a good default; Medium-high is good for print and allows a small logo; High is best for packaging, logos and ads. A higher level means more dots, so keep it as low as your use allows.
• Margin — the blank space around the code, measured in dots. Keep at least 4, or some phones struggle to find the code.

Want a code with fewer dots that’s easier to scan when printed small? Turn on short links — a shorter address makes a simpler code.

Images are made when you need them

Creating a code doesn’t store an image file. The plugin saves the code and its design, and draws the image in your browser whenever you need it: Download PNG, Download SVG (a vector that stays sharp at any size), a print, or the thumbnail on All QR Codes. Frame, border text and caption are all included, and every download matches the code’s current design.

The only stored image is one you ask for with Add to Media Library — handy for posts, pages and emails. If you change the code’s design or caption later, its row shows Image out of date — re-save; choose Re-save to Media Library from the Download menu to update it.

Using a logo Pro? Upload it to your Media Library. A logo hosted on another domain may be blocked by the browser, and you’ll see “Logo couldn’t be loaded from another domain — upload it to the Media Library.” With a logo, set Error correction to Medium-high or High so the code still scans with part of it covered.

Restyle codes you already made

Saving the QR design changes new codes only — existing codes keep the look they were created with until you restyle them. Two ways:

• One code — click Edit on its row. The Edit QR code dialog has a Look row with a small preview that says “Uses the site design.” or “Has its own design.” Click Use the current site design, then Save changes.
• Many codes — on QR Codes → All QR Codes, tick the codes, choose Apply current site design from Bulk actions and click Apply.

Restyling changes new downloads, prints and the list thumbnail. The code’s address stays the same, so copies already printed keep working — they simply keep their old look until you print new ones.

Give one code its own design Pro

Need one code to look different — a seasonal colour, a campaign logo? Pro gives you the full design editor (the same six tabs as the QR design settings) for a single code, in two places:

• Before you create it — in the product’s QR codes box, click Design next to the preview. Click Apply, then Create QR code: the design is saved with the new code.
• Any time after — in the Edit QR code dialog, click Customise design… in the Look row. The editor opens with that code’s current design (any kind of code, blank codes included). The design is saved with the code when you click Save changes, and its address stays the same.

To bring a customised code back in line with the rest, use Use the current site design or the Apply current site design bulk action.

Next: Manage your codes →