Add a QR Code Block to Your Fundraising Page

Fundations includes a QR code block that generates a scannable code linking to any fundraising page. QR codes are generated locally on your server, with no external service required. This is a free feature.

Why use it

QR codes bridge offline and online fundraising. Print a QR code on a flyer, poster, event programme, or t-shirt, and anyone who scans it is taken directly to the donation page. No typing required.

What it does

The get-fund/qr-code block renders a QR code image directly on the page. The code is generated as a PNG image embedded in the page (no separate image file is created). The generated code is cached so subsequent page loads are fast.

Features:

Generates the QR code server-side using the endroid/qr-code PHP library.
Uses High error correction level, which means the code remains scannable even if part of it is obscured.
Default URL is the current page’s permalink. You can override this with any custom URL.
Optional download button so visitors can save the QR code as a PNG file.
Fully configurable styling: size, button colour, border radius, and more.
Cached indefinitely in WordPress transients. If the URL of a page changes, the old cached QR code will remain until the cache is manually cleared.

If the QR generation library is unavailable or throws an error, the block displays an SVG placeholder reading “QR Code Generation Failed” instead of breaking the page.

How to use it

Adding a QR code to a page

Edit the fundraising page (or any page) in the WordPress block editor.
Click the + button to add a block.
Search for QR Code and select the Fundations QR Code block.
The block defaults to the current page URL. To link to a different URL, enter it in the Custom URL field in the block settings sidebar.
Adjust size, button text, and colours as needed.
Save or publish the page.

Adding a download button

In the block settings sidebar, enable Show Download Button.
Optionally customise the button text.
Choose between a button style or a text link style.

When a visitor clicks the download button, the browser downloads the QR code as qr-code.png.

Block attributes

Attribute	Default	Description
`customUrl`	(current page URL)	Override the URL encoded in the QR code
`size`	`256`	QR code image size in pixels
`showDownloadButton`	`true`	Show a download button below the QR code
`downloadButtonText`	(localised default)	Label text for the download button
`downloadButtonStyle`	`button`	`button` for a styled button, `text` for a plain link
`buttonColor`	(theme default)	Background colour of the download button
`buttonTextColor`	(theme default)	Text colour of the download button
`buttonHoverColor`	(theme default)	Background colour on hover
`textLinkColor`	(theme default)	Colour of the text-style download link
`textLinkHoverColor`	(theme default)	Hover colour of the text-style link
`buttonSize`	`medium`	`small`, `medium`, or `large`
`borderRadius`	(theme default)	Button corner radius
`roundedButton`	`false`	Apply fully rounded (pill) shape to the button
`textWeight`	(theme default)	Font weight of the button text
`underlineHeight`	(theme default)	Underline thickness for text-style links

Capabilities and limitations

What you can do	What you cannot do
Use any URL in the QR code, not just fundraising pages	Change the error correction level (fixed at High)
Place the block anywhere in the WordPress block editor	Generate the QR code in a format other than PNG
Let visitors download the QR code directly from the page	Automatically invalidate the cache when a page URL changes (manual cache clearing is required)
Override size and colours for each block instance independently

Troubleshooting

Problem	Likely cause	Fix
The block shows “QR Code Generation Failed”	The `endroid/qr-code` library is missing	Run `composer install` in the plugin directory or reinstall the plugin
The QR code links to the wrong URL after a permalink change	The cached code has not been updated	Go to Tools > Transients (or use a transient manager plugin) and delete transients matching `get_qr_*`, or use the `get_fund_qr_data` filter to override the URL
The QR code is too small to scan reliably	The size is set too low	Increase the `size` attribute to at least 300 pixels
The download button downloads a broken file	Data URI blocked by a security plugin	Check if your security plugin is stripping `data:` URIs from the page

Developer reference

Hooks and filters

Hook	Type	Description
`get_fund_qr_data`	filter	Modify the URL or data being encoded into the QR code; receives `string $data`, `int $size`
`get_fund_qr_settings`	filter	Modify QR code generation settings; receives `array $settings`, `string $data`

The `$settings` array shape

Key	Type	Description
`size`	int	Image size in pixels
`margin`	int	Quiet zone margin in pixels
`foreground_color`	array	RGB array, e.g. `[0, 0, 0]` for black
`background_color`	array	RGB array, e.g. `[255, 255, 255]` for white

Signatures

// Add UTM tracking parameters to all QR code URLs
add_filter( 'get_fund_qr_data', function( string $data, int $size ) {
    return add_query_arg(
        array(
            'utm_source'   => 'qr',
            'utm_medium'   => 'print',
            'utm_campaign' => 'fundraiser',
        ),
        $data
    );
}, 10, 2 );

// Use a custom foreground colour
add_filter( 'get_fund_qr_settings', function( array $settings, string $data ) {
    $settings['foreground_color'] = [ 30, 80, 160 ]; // dark blue
    return $settings;
}, 10, 2 );

Cache key format

Transient keys follow the pattern get_qr_{md5( $data . $size )}. To programmatically bust the cache for a specific URL:

$url  = get_permalink( $post_id );
$size = 256;
delete_transient( 'get_qr_' . md5( $url . $size ) );

QR Codes