WordPress Guide

Install the Recipe Widget on WordPress

Two ways to embed: the WPCode snippet flow (reusable across pages) or a simple Custom HTML block. Under 15 minutes either way.

The Crafted Pour widget is a JavaScript embed — no WordPress plugin install required, and it works with any theme or page builder that can output raw HTML. Because the recipes render into your page's DOM (not an iframe), the SEO value of every recipe accrues to your domain.

Before you start

A Crafted Pour brand profile. If you have not claimed yours yet, start free at craftedpour.com/claim.
Your products registered with Crafted Pour. Email info@craftedpour.com with your product list, product detail page URLs, a photo of each product, and UPC codes (preferred) or SKUs. We register these so your products appear as shoppable ingredients and the right recipes flow into your widget. Paid plans can manage products directly in the CMS.
Your plugin_id. We issue this when we provision your widget — it ties the embed to your brand's products, settings, and domain. Log in at craftedpour.com/cms — your Plugin document is listed there, and its document ID is your plugin_id. It is also in your onboarding email, or ask info@craftedpour.com.
Your site domain on file with us. Tell us the exact domain (and any staging/preview domains) where the widget will run so we can register them. Recipes will not load from an unregistered domain.
Brand color hex codes (6 digits, without #) if you want the widget styled to match your site — e.g., B42B30. A tool like htmlcolorcodes.com helps.
A WordPress administrator account (you will install a small helper plugin or edit a page).

Your embed code

Both methods below use the same two-script embed. The SEO script must come first:

Cocktail gallery embed (v2)

<!-- Crafted Pour SEO script (load first) -->
<script type="text/javascript"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin-seo.js">
</script>

<!-- Crafted Pour recipe widget -->
<script id="crafted-pour-recipe-plugin-script"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin.js?plugin_id=YOUR_PLUGIN_ID&catfilter=true&featured=true&primaryColor=B42B30">
</script>

Replace YOUR_PLUGIN_ID with your plugin ID and B42B30 with your brand's hex color (no #). The full list of customization parameters is below.

Keep the id="crafted-pour-recipe-plugin-script" on the widget script exactly as shown, and never put two script tags with that same id on one page — duplicates mean only the first is processed. Embedding more than one widget on a single page requires the v2-only class form — see the universal guide.

Method A — WPCode snippet (recommended)

WPCode lets you manage the embed centrally and drop it onto any page with a shortcode — the cleanest approach if you may reuse or move the gallery later.

Install the WPCode plugin

In your WordPress admin, go to Plugins → Add New, search for “WPCode” (listed as “WPCode — Insert Headers and Footers + Custom Code Snippets”), then click Install Now and Activate. The free version is all you need.

Create a new snippet

A Code Snippets item appears in the left admin menu. Click it, then + Add Snippet. Hover “Add Your Custom Code (New Snippet)” and click Use snippet.

Paste the embed code

Give the snippet a title (e.g., “Crafted Pour Recipe Widget”), set Code Type to HTML Snippet, and paste the embed code from above into the Code Preview box.

Set insertion to Shortcode

Scroll to the Insertion section and choose Shortcode as the insertion type (the default). WPCode generates a shortcode like [wpcode id="19"]. Alternatively, Auto Insert can place the snippet automatically at a location such as “Insert After Paragraph” on chosen pages — the shortcode gives you precise manual placement, so we recommend it here.

Activate and save

Flip the toggle at the top right to Active, then click Update (or Save Snippet).

Place the shortcode on your recipes page

Edit (or create) the page where the gallery should live — e.g., /cocktails or /recipes — and add a Shortcode block containing your [wpcode id="…"]. Publish, then view the page.

Method B — Custom HTML block (no plugin)

If you would rather not install anything: edit your recipes page in the block editor, add a Custom HTML block (search “html” in the block inserter), and paste the same embed code directly. Publish. Classic-editor sites can switch the editor to Text mode and paste there. Page builders (Elementor, Divi, Beaver Builder) all have an equivalent HTML/code element.

Optional — load the SEO script sitewide from the theme header

The SEO script can live in your site's <head> instead of the page body — useful if you want recipe detail links (URLs with ?cp_rid=…) to resolve with full SEO tags even if the theme moves things around:

With WPCode: Code Snippets → Header & Footer → paste the SEO <script> tag (just the first script, not the widget script) into the Header box → Save.
Without a plugin: in a child theme, add it before </head> in header.php. Avoid editing a parent theme directly — updates will overwrite it.

If you do this, you can drop the SEO script line from the on-page embed; keep the widget script where the gallery should render.

WooCommerce product pages

Put recipes for a specific bottle directly on its product page — this placement drove our measured 57% checkout lift. Add a Custom HTML block (or a WPCode shortcode) to the product template or product description with the product-page variant:

Product page embed

<!-- Crafted Pour recipe widget — product page mode -->
<script id="crafted-pour-recipe-plugin-script"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin.js?plugin_id=YOUR_PLUGIN_ID&rows=1&ratings=true&sku=YOUR_PRODUCT_UPC_OR_SKU&primaryColor=B42B30">
</script>

rows=1 keeps it to one swipeable row; ratings=true adds community tasting notes and star ratings above the recipes. Use the product's UPC (preferred) or SKU as registered with Crafted Pour. If you template this across all products with WooCommerce hooks, your developer can inject each product's SKU dynamically — or ask us and we will set it up as part of a white-glove install.

Customize the widget: full parameter reference

Everything after the ? in the script URL configures your widget. Chain parameters with &. All are optional except plugin_id.

Parameter	Example	What it does
`plugin_id`	`plugin_id=qYyFJ6…`	Required. Your widget ID from Crafted Pour — loads your products, recipes, and partner settings.
`rows`	`rows=2`	Show a fixed number of rows with paging arrows. Omit for an infinite-scroll gallery. Use `rows=1` on product pages.
`featured`	`featured=true`	Adds the curated FEATURED rail at the top — hand-picked seasonal recipes photographed with your bottle. Toggle its content via the CMS (`show_featured`).
`ratings`	`ratings=true`	Shows the product-ratings widget (community tasting notes and star ratings) above the recipes. Designed for single-product pages.
`recipes`	`recipes=false`	Set to `false` to hide the recipe grid — combine with `ratings=true` for a ratings-only embed.
`catfilter`	`catfilter=true`	Adds a category (spirit-type) filter dropdown.
`productfilter`	`productfilter=true`	Lets visitors filter recipes by your products. Rendered as a dropdown or as visual product pills depending on your partner-level filter style setting.
`brandfilter`	`brandfilter=true`	Brand selector — for portfolios, groups, and retailers managing multiple brands in one widget.
`product`	`product=KN3ARO…`	Restrict the widget to one product by its Crafted Pour product ID. Only needed when you cannot use `sku`.
`sku`	`sku=012345678905`	Match a product by UPC (preferred) or SKU — ideal on ecommerce product templates where the platform injects the value dynamically. Repeatable for multi-SKU pages.
`primaryColor`	`primaryColor=B42B30`	Main accent color (buttons, highlights). Hex without `#`.
`color`	`color=B42B30`	Supported alias for `primaryColor` — many existing installs use it and it keeps working. If both are present, `primaryColor` wins. Prefer `primaryColor` for new installs.
`secondaryColor`	`secondaryColor=FFFFFF`	Background for tags and ingredient boxes.
`backgroundColor`	`backgroundColor=FFFFFF`	Widget background. Defaults to transparent so it inherits your page background.
`textColor`	`textColor=000000`	Main text color.
`textPosition`	`textPosition=bottom`	Moves recipe name and creator below each photo instead of overlaid on it — a cleaner look on minimal sites.
`recipeItemBorder`	`recipeItemBorder=0`	Set to `0` for square recipe-card corners (matches squared-off site designs). Omit for the default rounded cards.

Partner-level behavior — editor's notes, smart product placement (competitor masking), generic-recipe inclusion, and filter style — is configured per brand rather than per embed. See the Partner Settings guide and manage them at craftedpour.com/cms.

Recipe detail pages & SEO setup

Every recipe card links to a full recipe page on your domain (your gallery URL with ?cp_rid=<recipe> appended). The SEO script in the embed above is what makes those pages count for search:

Server-rendered recipe content. Title, ingredients, instructions, and your brand's AI-sommelier editor's note are served before any JavaScript runs, so Google indexes real content on your URL — not an empty shell.
Structured data. Machine-readable Recipe markup including star ratings, making your pages eligible for Google's rich results and readable by AI assistants like ChatGPT and Gemini.
Canonical and social tags. Correct canonical, Open Graph, and Twitter URLs are set per recipe automatically.

That is why the two-script embed matters: keep the SEO script before the widget script, on the same page.

WordPress note: for the sitemap redirect, a plugin like “Redirection” works — redirect /recipe-sitemap.xml to your auto-generated Crafted Pour sitemap URL.

Submit your recipe sitemap to Google

We auto-generate a sitemap of every recipe URL on your domain at: https://plugin.craftedpour.com/sitemaps/YOURDOMAIN.com_recipes.xml
Create a redirect on your domain — e.g. yourdomain.com/recipe-sitemap.xml → the URL above.
In Google Search Console, verify your domain and submit the redirect URL under Sitemaps.

How to know it worked

The gallery renders. Open the published page — you should see a grid of recipe cards with photos and a “Powered by Crafted Pour” badge. If you enabled featured=true, a FEATURED rail leads the page.
Cards open recipe pages on your domain. Click any recipe — the URL should stay on your site and gain ?cp_rid=…, showing the full recipe with your product linked in the ingredients.
Your products are shoppable. On a recipe that uses your product, the ingredient should link out with your “shop” call-to-action (competitor names masked if smart product placement is on).
SEO content is being served. On a recipe page (with cp_rid in the URL), use View Source and search for recipe-seo-content or the recipe name — it should appear in the raw HTML.
No console errors. Open your browser's developer tools (F12) → Console. A healthy install logs Recipe widget loaded with no red errors.

Troubleshooting

The block editor stripped my script tag. Make sure you used a Custom HTML block, not a Paragraph block, and that your user role is Administrator — WordPress strips scripts for lower roles (unfiltered_html).
A caching plugin (WP Rocket, W3 Total Cache, LiteSpeed) is deferring or combining JS and the widget stopped rendering. Exclude crafted-pour-recipe-plugin from JS minification/defer/combine in the caching plugin settings, then purge the cache.
The shortcode text shows literally on the page. The snippet is inactive, or the shortcode was pasted into a code-formatted block. Check the WPCode toggle is Active and use a Shortcode block.
The script shows as plain text on the page. It was pasted into a rich-text/paragraph field instead of an HTML/code element. Re-paste it into your platform's HTML embed field.
Nothing renders at all. Check that the script URL is exactly https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin.js and that your page editor did not strip the <script> tag (some platforms restrict scripts on lower-tier plans).
An empty grid loads. Usually a wrong or missing plugin_id, or your domain is not yet registered with us. Email support@craftedpour.com with your page URL.
Testing on a staging or preview domain. Send us the full preview URL first so we can whitelist it — unregistered domains will not load recipes.
Old content keeps showing after changes. Clear your site/CDN cache and hard-refresh (Cmd/Ctrl + Shift + R).
Colors look wrong. Color values must be 6-digit hex without the # — primaryColor=B42B30, not primaryColor=#B42B30. A # starts the URL fragment, so everything from it onward is silently dropped and your color never reaches the widget. The same applies to the legacy color= parameter.
Your site uses a Content-Security-Policy. Allow plugin.craftedpour.com in script-src, connect-src, and img-src.

Want the deep-dive on what the widget does for your brand — smart product placement, brand-aware photos, AI editor's notes, star ratings in Google? See the full feature tour.

Install it free — or let us do it for you

Everything on this page is free to self-install with your existing widget. Prefer white-glove? We offer paid installation — custom styling, placement, and theme work included — so it is live on your site without you touching a line of code.

Request Paid Installation Ask a Question

← All installation guides Widget features →