Integrating Allspice with WP Recipe Maker

Overview

We strongly recommend adding one or more entry points to Allspice inside the recipe card. That gives readers a clear way to open Allspice while they are already engaging with the recipe, and it usually performs much better than relying only on buttons elsewhere on the page.

Recommended approach

In most cases, the easiest and best approach is to add an Allspice button directly into your WPRM recipe template by inserting the shortcode for any active Allspice button into your recipe card layout.

Before you start

Make sure you have already:

• Activated at least one Allspice button in your Allspice setup
• Copied the shortcode for that button from the Publisher Portal
• Confirmed which WPRM recipe template your site is currently using

A shortcode will look something like this (your id will differ):

Allspice shortcode

[allspice_button id="WIDCON-t7ab"]

Option 1: Add an Allspice button in a recipe card template

This is the most common setup. In your WordPress admin:

1. Go to WP Recipe Maker
2. Open Template Editor
3. Click Recipe Templates
4. Select the recipe template you want to edit
5. Click Edit Template
6. Open Edit HTML in the part of the template where you want the button to appear
7. Paste in your Allspice shortcode

A common placement is directly below the ingredients section and above the instructions section.

Example layout

Paste this into the template’s Edit HTML view (same editor as in the steps above).

Recipe template (HTML editor)

[wprm-recipe-ingredients header="Ingredients" notes_style="faded" unit_conversion="both" unit_conversion_both_style="parentheses" adjustable_servings="before" servings_text_style="normal" servings_button_accent="#a18f7a" servings_button_radius="2px" unit_conversion_show_identical="0" ingredients_style="regular" ingredient_notes_separator="comma"]
[wprm-spacer size="10px"]
[allspice_button id="WIDCON-t7ab"]
[wprm-spacer size="10px"]
[wprm-recipe-instructions header="Instructions" text_margin="5px" image_size="medium"]

This placement works well because the button appears at a natural transition point, when a reader is moving from gathering ingredients into cooking.

Option 2: Place the button inside a custom container

Some WPRM templates use custom wrappers, theme-specific containers, or more advanced layouts. You still add everything in the HTML editor for the recipe template: open WP Recipe Maker → Template Editor → Recipe Templates, choose your template, click Edit Template, then Edit HTML - the same flow as Option 1. There you can paste WPRM shortcodes and plain HTML together so the Allspice shortcode sits inside your custom markup.

If you need extra spacing, alignment, or responsive tweaks, add CSS in the CSS editor in that same WPRM panel. It appears directly under the Edit HTML button - do not put CSS inside the HTML editor.

For example, in Edit HTML:

Custom container (HTML editor)

<div class="cwp-food-header__full">
    [wprm-recipe-summary]
    <div style="margin-top: 14px;">
        [allspice_button id="WIDCON-t7ab"]
    </div>
</div>

This approach is useful when:

• Your recipe card has a highly customized layout
• You want the Allspice button near the summary or top portion of the card
• You need more control over spacing or structure

Option 3: Create your own custom button element

For full control over design, add your own button or link in the template’s Edit HTML view and assign it an Allspice action using the data-allspice-id attribute with the ID of the button or action you want to trigger.

This is the most customizable option and is usually best when the entry point should match the existing recipe card styling. It works with both premade and fully custom Allspice button setups.

Adding a button next to the default WPRM “Jump to Recipe” button

If you use WPRM’s default Jump to Recipe snippet and want an Allspice control beside it, you can usually do that through Snippet Templates.

1. Go to WP Recipe Maker
2. Open Template Editor
3. Click Snippet Templates
4. Find the snippet template that contains your Jump to Recipe control
5. Edit that snippet, open Edit HTML, and add your Allspice trigger inside the actions container

A structure like this is typically what you want (still in the snippet’s Edit HTML view):

Snippet template (HTML editor)

<div class="wprm-recipe-snippet-summary-container">
    [wprm-recipe-rating display="stars-details" text_style="bold" icon_color="#f7dc6f" icon="star-full" icon_size="1.3em"]
    [wprm-recipe-meta-container fields="times" selected_fields="" label_separator=": " style="inline" label_prep_time="Prep" label_cook_time="Cook" label_total_time="Total" inline_separator="long-line"]
    <div class="wprm-recipe-snippet-summary-actions">
        [wprm-recipe-jump icon="arrow-down" style="inline-button" border_color="#e8e8e8" border_radius="5px" icon_color="#474747" text_color="#474747" button_color="#f7dc6f" text="JUMP to RECIPE" text_style="bold" vertical_padding="5px" smooth_scroll="0"]
        <a
          href="#"
          class="wprm-recipe-link wprm-block-text-bold wprm-recipe-link-inline-button wprm-color-accent"
          style="color: #474747; background-color: #f7dc6f; border: 1px solid #e8e8e8; border-radius: 5px; padding: 5px 5px;"
          data-allspice-id="WIDCON-CUSTOM-2fgybg2x37"
          role="button"
          aria-label="Start Cooking"
        >
          <span class="wprm-recipe-icon" style="margin-right: 4px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 2 20 20">
              <path fill="#474747" d="M7 4v16l13-8z"/>
            </svg>
          </span>
          START COOKING
        </a>
        [wprm-recipe-jump-to-comments text="RATE this RECIPE" style="inline-button" border_radius="5px" border_color="#e8e8e8" text_color="#474747" text_style="bold" horizontal_padding="5px" vertical_padding="5px" icon_color="#474747" link="#recipe" button_color="#f7dc6f" icon="star-full"]
    </div>
</div>

When to use a premade button vs. a custom button

Use a premade Allspice button when

• You want the fastest setup
• You are comfortable placing a shortcode in the template
• You want Allspice to control default design and behavior
• You do not need the control to exactly match existing WPRM button styling

Use a custom Allspice button when

• The trigger should visually match your recipe card
• You are placing it inside an existing WPRM actions row
• You want full control over HTML and CSS
• You are integrating next to default WPRM inline buttons such as Jump to Recipe

Placement recommendations

In general, strong placements include:

• Directly below the ingredients section
• Between ingredients and instructions
• Near the top of the recipe card summary area
• Inside an existing action row, such as next to Jump to Recipe

The right placement depends on your layout; the goal is to put the Allspice entry point where readers are most likely to use it while they are actively using the recipe card.

Styling notes

In WPRM’s template or snippet editor, use the CSS panel directly under the Edit HTML button for rules that target your recipe card or Allspice trigger. Keep structural markup in Edit HTML and styling in that CSS field.

In some templates you may need a small amount of CSS to:

• Add spacing above or below the button
• Align the button with other WPRM controls
• Match fonts, radius, colors, or padding
• Adjust mobile wrapping or stacking

With a custom Allspice trigger element, that level of tuning is normal and gives you the most flexibility.

Troubleshooting

The button does not appear

Check the following:

• The Allspice button is activated in the portal
• The shortcode or data-allspice-id value is correct
• You edited the template that is actually assigned to the recipe card
• The change was saved in the correct WPRM template or snippet
• Caches (page cache, CDN, object cache) were cleared if applicable

The button appears in the wrong place

Usually the template structure needs a small adjustment. Try moving the shortcode or custom element into a different wrapper, or add a spacer or container around it.

The button styling looks off

Often resolved by switching to a custom Allspice trigger, adjusting the surrounding markup in Edit HTML, or adding CSS in the CSS editor (below Edit HTML) to match the rest of the recipe card.

Need help?

WPRM setups vary a lot by site, template, and theme. If you want help choosing placement, matching styling, or wiring a custom trigger, contact us and we can help you set it up.