Integrating Allspice with WP Recipe Maker

Overview

Readers are most likely to open Allspice while they're using the recipe card, so it's worth having an entry point in or next to it. There are two ways to get one on WP Recipe Maker (WPRM):

• Use the recommended widget styles, which place Allspice next to the card with no template edits (see No-code option).
• Add a button to your WPRM recipe template yourself, which lets you put it inside the card (Options 1 to 3 below). For new setups, use a custom button (Option 3).

No-code option

Allspice finds the WPRM recipe card on each page on its own, so the recommended setup needs no changes to your WPRM templates:

With the Inline style (the default on mobile), the widget sits in the page directly above the recipe card. With the Floating style (the default on desktop), the “Ask Pico” bar sits in the same spot. Set the style in WordPress under Settings → Allspice (see Widget style).

This goes next to the card, not inside it. If you want the button between the ingredients and instructions, or in the card's action row, edit the template as described below.

Before you start

Make sure you have:

• Created at least one button in the Publisher Portal's Button library (Integrate → your domain → General tab)
• Copied the button's code from the library: the shortcode in the WordPress view, or the data-allspice-id attribute in the Non-WordPress view
• Checked which WPRM recipe template your site uses

A shortcode looks like this (your id will differ). The portal copies it as [Allspice_Button id="..."], which works the same:

Allspice shortcode

[allspice_button id="WIDCON-t7ab"]

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

Premade button shortcodes belong to the older Overlay setup and are deprecated. They still work, but for new setups use a custom button (Option 3), which goes in the same place. In WordPress:

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 puts the button where the reader moves from gathering ingredients to cooking.

Option 2: Place the button inside a custom container

Some WPRM templates use custom wrappers or theme-specific containers. You still work in the template's Edit HTML view (same steps as Option 1), where you can mix WPRM shortcodes and plain HTML so the Allspice shortcode sits inside your own markup.

For spacing, alignment, or responsive tweaks, use the CSS editor in the same WPRM panel, directly under the Edit HTML button. Don't put CSS in 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>

Use this when your card has a heavily customized layout or you want the button near the summary at the top of the card.

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 give it the data-allspice-id attribute of the button you want it to trigger. Copy the attribute from the Button library in its Non-WordPress view, for example data-allspice-id="WIDCON-CUSTOM-2fgybg2x37".

Use this when the entry point should match your recipe card's styling.

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, edit the snippet in 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

For example, 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>

Premade vs. custom buttons

Premade buttons are deprecated. Existing premade shortcodes keep working, but use a custom button for anything new.

A custom Allspice button fits 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

Placements that work well:

• Between the 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 best spot depends on your layout. Put it where readers look while they cook from the 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.

Some templates need a little 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

Expect this kind of tuning with a custom Allspice trigger element.

Troubleshooting

The button does not appear

Check the following:

• The button exists in the portal's Button library
• The shortcode or data-allspice-id value is correct
• You synced after creating the button (Settings → Allspice → Sync Buttons & Settings), or waited for the automatic sync, which runs about every 12 hours
• 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

Move the shortcode or custom element into a different wrapper, or add a spacer or container around it.

The button styling looks off

Switch to a custom Allspice trigger, adjust the surrounding markup in Edit HTML, or add CSS in the CSS editor (below Edit HTML) to match the rest of the card.

Need help?

WPRM setups vary a lot by site, template, and theme. For help with placement, styling, or a custom trigger, contact us.