WordPress QR Code Gutenberg Block: How to Create Custom QR Codes in Minutes

Adding a QR code to your website used to mean generating an image on an outside tool, downloading it, and uploading it to your media library. Every time your link changed, you had to repeat the whole process.

With the WordPress QR Code Gutenberg block, you can skip all of that. You add the block, choose what the QR code should do, style it to match your brand, and publish. Visitors can even download the QR code themselves as a PNG, SVG, or PDF.

In this guide, you’ll learn how to use the QR Code block from the WordPress QR Code Generator plugin step by step, including every customization option.

What Is the QR Code Gutenberg Block?

The QR Code block is a custom block for the WordPress block editor (Gutenberg). It generates a scannable QR code directly inside your page, post, or product, with no external tools and no code.

Here is what you can do with it:

• Generate a QR code for the current page link automatically
• Create QR codes for a custom link, text, email, or number
• Create QR codes for phone numbers, WhatsApp, WiFi, Google Maps, events, and vCards
• Customize dot style, gradient colors, corner eyes, and background
• Add your logo in the center
• Style the download button to match your website
• Let visitors download the QR code as PNG, SVG, or PDF

Why Use a QR Code Block Instead of an Image?

A QR code image is static. If your link changes, the image becomes useless. A block-based QR code is generated by the plugin, so it is easier to manage and update from the editor.

Some practical benefits:

• Faster workflow: no switching between tools
• Consistent branding: colors and logo are applied in one place
• Less clutter: no extra files in your media library for every QR code
• Visitor-friendly: built-in download button with multiple formats

Requirements

Before you start, make sure you have:

• WordPress with the Gutenberg (block) editor
• The WordPress QR Code Generator plugin installed and activated ([Plugin link])

How to Add a QR Code in WordPress with the Gutenberg Block

Step 1: Add the QR Code Block to Your Page

1. Go to Pages → Add Page in your WordPress dashboard (or open an existing page or post).
2. Enter a page title.
3. Click the + icon, search for QR Code, and select the QR Code (Composer Pro) block.

A styled QR code and a Download QR button appear instantly in the editor.

Step 2: Choose the QR Code Source

Select the block, open the Block tab on the right, and expand QR Code Source. Under Source Type, you can choose:

Source Type	Use it for
Current Page Link	Automatically linking to the page the QR code is on
Custom Link / Text / Email / Number	Any link, message, email, or number
Phone Number	Letting people call you with one scan
WhatsApp	Starting a WhatsApp chat
WiFi	Sharing network name, type, and password with guests
Google Maps	Opening a location (latitude, longitude, or a search query)
Event	Adding an event with a title, description, date, and time
vCard	Sharing digital business card details

The default is Current Page Link, which needs no extra input.

Step 3: Customize the QR Code Design

Expand QR Code Design to match the QR code to your brand. You can change:

• Shape and size
• Body dot style, for example Dots
• Body colors with a two-color gradient
• Eye frame style: Square, Dot, or Extra Rounded
• Eye ball style and colors
• Background color
• Error correction level: Low, Medium, Quartile, or High
• Border corner radius

Any option left on Default (use admin setting) uses your global design from the plugin settings, so you can set one default style and only override it when needed.

Tip: Keep strong contrast between your QR code and its background. Dark colors on a light background scan most reliably.

Step 4: Add Your Logo

1. In the design settings, find the Logo section.
2. Click Upload Logo.
3. Choose an image from your Media Library and click Select.

Your logo appears in the center of the QR code. If you use a logo, set the error correction level to Quartile or High so the code stays easy to scan, and always test it with your phone.

Step 5: Style the Download Button

Open the Download Button section to customize:

• Button label
• Text color
• Background color
• Border color
• Border radius
• Font size

You can also set a custom download file name so downloaded files are clearly named.

Step 6: Publish and Test

Click Publish (or Update), then View Page. Visitors can choose PNG, SVG, or PDF from the dropdown and download the QR code. With the PDF option, they can print it or save it as a PDF file.

Finally, scan the QR code with your phone to confirm it works.

How to Hide the QR Code on Certain Pages

You may not want a QR code on every page. There are two ways to control this.

Hide on a single page

1. Open the page in the editor.
2. Click the QR Code Generator icon in the top toolbar.
3. Set Remove QR Code from Frontend to Yes.
4. Click Update.

Hide by post type or page (global setting)

In the plugin settings, choose the post types (Post, Page, Product, and more) or specific pages where QR codes should not appear.

Creative Ways to Use QR Codes on Your WordPress Site

• Restaurants and cafés: link to a digital menu
• Local businesses: share your Google Maps location
• Offices and guest areas: share WiFi access without typing passwords
• Events: let visitors add the date to their calendar
• Freelancers and agencies: share a vCard on your contact page
• Online stores: link printed packaging to product pages
• Blogs and documentation: let readers continue on their phone with one scan

Tips for Better QR Codes

1. Test before publishing. Scan with more than one phone.
2. Use high contrast. Light backgrounds with dark dots work best.
3. Don’t make the logo too big. A large logo can make scanning harder.
4. Increase error correction with a logo. Use Quartile or High.
5. Keep it large enough. Small QR codes are harder to scan, especially in print.

Frequently Asked Questions

How do I add a QR code in WordPress without coding?

Install a QR code plugin that includes a Gutenberg block, add the block to your page, choose a source type, and publish. No code is needed.

Can I add my logo to a WordPress QR code?

Yes. Click Upload Logo in the block’s design settings and choose an image from your Media Library.

Can visitors download the QR code?

Yes. The block includes a download button, and visitors can choose PNG, SVG, or PDF.

Can I create a WhatsApp or WiFi QR code in WordPress?

Yes. Choose WhatsApp or WiFi as the source type and fill in the details.

Can I use more than one QR code block on a page?

Yes. Each block has its own source type and design settings.

Will changing one block change all my QR codes?

No. Block settings affect only that block. To change the default style for all QR codes, use the plugin’s global Design QR Code settings.

Conclusion

The WordPress QR Code Gutenberg block is the easiest way to add professional, branded QR codes to your site. You can generate codes for links, phone numbers, WhatsApp, WiFi, maps, events, and vCards, customize every detail, and let visitors download them in the format they need, all without leaving the editor.

Ready to try it? [Download the plugin] or [try the live demo], and add your first QR code in minutes.

• Facebook
• Twitter
• LinkedIn
• whatsapp
• Mail