How to Create Coupon Cards with WordPress Blocks – WP Tavern

Last year, I designed several templates to showcase discount codes on a site. They were part of a larger thematic project that I never completed. However, I had a lot of fun playing with the variations. Not liking them to fade on my laptop hard drive, I thought I’d share them with the Tavern audience.

The basic coupon card looks like this:

When I designed this and the others I had Christmas in mind (if that wasn’t obvious from the screenshot). Of course, I always think of the holidays, usually starting my shopping at least in July each year.

Besides the image, I intentionally left most of the design generic so it could be easily applied to other holidays and events.

This tutorial in the Building with Blocks series will walk you through every step of creating custom coupon cards from the editor. I’ll also share some variation ideas at the end.

Step 1: Add a group block

WordPress post editor with gray color group block in post editor.
Added Group block with custom background and border.

As with most templates, you need to start with a container-like block. For the coupon card, start by inserting a group. You are free to customize this as you wish. However, to use the same layout in the tutorial, you must at least set the block padding to 0px and block spacing option for 0px. These need to be zeroed for the rest of the design to work.

I adjusted my Group block to have a light gray background color. Then I added a 4px dotted border and a 8px border radius. Each of these design tools is available in the Block Inspector in the sidebar panel. Play around with the colors and other settings until you find something you like.

Step 2: Add an image

WordPress post editor with an image hosted inside a Group block with a gray border and background.
Insertion of an Image block in the Group.

This step is simple. Insert an Image block inside the group from step 1. No particular setting is required.

Of course, you have to link it to something via the insert link button in the toolbar. You’re probably selling a product and you want people to click on it.

Step 3: Add a content group

WordPress post editor with a group block that houses an image and another group block.
Added nested Group block.

This should be another simple step. Under the Image block from step 2, add a new group. This will house the “content” you will add in step 4.

The most crucial setting for this block is adding padding through the block design tools in the sidebar panel. I opted for 2rem to match my theme. Remember that you zeroed out the padding in the outer group in step 1. Now you need to add some to keep the contents from butting against the side of the container.

Step 4: Add content

WordPress post editor with group block containing image, title and paragraph.
Added sales pitch.

With the Group block in place from Step 3, you have a new free-form area to present your sales pitch to potential customers. It can be as simple as a title followed by a paragraph or something much more complex. It’s probably best to keep it short and to the point.

Step 5: Coupon Code Line

WordPress post editor with a group block that houses an image, a second group with content, and a new line block.
Insertion of a line block for the promo code section.

To highlight the coupon code, add a new Line block below the Group block added in step 3. This allows you to add a section for the code and expiration date in the next step.

Select the “space between items” option for the justification control. This parameter separates each nested block from the other.

Next, select a custom background color. This should automatically give padding to the Row block. If you refuse to set a color, you must manually set the padding to match the Group block above.

Step 6: Add code and expiration

WordPress post editor with a group block that houses an image, a second group with content, and a row with a coupon code.
Personalized coupon code and expiration date.

The final step is to add two Paragraph Blocks to the Line container. The first should read something like “Coupon: XMAS2022” and the second should be “Expire: December 31”.

Of course, it’s your card, so have fun customizing it.

Variants

The wonderful thing about the WordPress block editor is that there are many ways for users to edit the output of a set of blocks like above. Something as simple as changing the colors can give you a completely different look. And, by rearranging a block or two, you can create something uniquely yours.

One of the easiest ways to customize the coupon code above is to add some emoji as shown in the following screenshot:

WordPress post editor with a group block that houses an image, a second group with content, and a row with a coupon code.  Christmas themed emoji are mixed.
Variant of emojis.

OKAY. I had a little fun with it. More seriously, there are many ways to modify the formula and create something new.

It only took me a few moments to merge steps 2 and 4 (skipping step 3) above to create the following:

WordPress post editor with a Group block that houses a Media and text block with a sales pitch.  Below is a Row block with a coupon code and expiration date.
Variation of media and text.

It’s a Media & Text block in the mix. I leave it up to you to recreate this variation without a full walkthrough. If you get stuck, check out my previous tutorial, which covers media and text in detail.

Esther L. Gunn