What Are Recipe Shortcodes?
Recipe shortcodes let you embed recipes directly inside any Joomla article, custom HTML module, or other content area. Instead of just linking to a recipe page, you can display a recipe card, a grid of recipes, or even the full recipe view — all within your existing content.
This is powered by the Content - JoomRecipe Plugin, which must be enabled in your Joomla plugin manager.
Basic Usage
Place a shortcode anywhere in your article content:
{joomrecipe id=5}
This embeds recipe #5 using the default layout configured in the plugin settings (defaults to the full recipe view for backward compatibility).
Finding the Recipe ID
The recipe ID is the number shown in the ID column of your recipe list in the JoomRecipe admin panel (Components → JoomRecipe → Recipes).
Shortcode Formats
Single Recipe
{joomrecipe id=5}
{joomrecipe id=5 layout=card}
{joomrecipe id=5 layout=stacked}
Legacy Format
The original format without id= still works:
{joomrecipe 5}
This is equivalent to {joomrecipe id=5} and renders using the default layout.
Multiple Recipes (Grid)
Embed several recipes side by side by separating IDs with commas:
{joomrecipe id=1,2,3 layout=card columns=3}
{joomrecipe id=10,20,30,40 layout=simple columns=4}
{joomrecipe id=5,8 layout=card-horizontal columns=2}
Recipes from a Category
Display the latest recipes from a specific category:
{joomrecipe category=5 count=4 layout=card}
{joomrecipe category=5 count=6 columns=3 layout=simple}
{joomrecipe category=12 count=8 columns=4 layout=thumbnails}
category— The Joomla category IDcount— How many recipes to show (default: 4)
Recipes are ordered by creation date (newest first) and only published, validated recipes are included.
Available Layouts
| Layout | Description | Best For |
|---|---|---|
full |
Complete recipe page with all sections (directions, reviews, similar recipes, etc.) | Embedding a full recipe inside an article |
card |
Vertical card with image, title, description, times, and ingredients | Recipe grids, sidebar embeds |
card-horizontal |
Horizontal card with image on the left | Wider content areas |
card-horizontal-full |
Full-width horizontal card with more details | Single recipe highlights |
stacked |
Modern centered card with image, rating, and description | Featured recipe showcases |
simple |
Minimal — image and title only | Compact lists, thumbnail grids |
thumbnails |
Image-focused with title overlay | Visual recipe galleries |
calories |
Card focused on calorie display | Health/nutrition-oriented sites |
details |
Detailed horizontal layout with table of attributes | Recipe comparison, detailed listings |
default |
Blog-style layout with full metadata table | Blog post embeds |
accordion |
Collapsible accordion panel | FAQ-style recipe lists, space-saving |
Layout Examples
Simple recipe card in an article:
Check out our latest recipe:
{joomrecipe id=42 layout=card}
Three featured recipes in a row:
{joomrecipe id=10,15,22 layout=stacked columns=3}
Latest desserts from a category:
{joomrecipe category=8 count=6 columns=3 layout=card}
Detailed recipe comparison:
{joomrecipe id=5,12 layout=details columns=2}
Display Overrides
You can control which elements are shown or hidden by adding attributes directly to the shortcode. Use 1 to show and 0 to hide.
{joomrecipe id=5 layout=card show_rating=0 show_description=0}
{joomrecipe id=5 layout=stacked show_author=1 show_cook_time=0}
Available Display Attributes
These apply to card/layout mode (all layouts except full):
| Attribute | Default | Description |
|---|---|---|
show_title |
1 | Recipe title |
show_thumbnail |
1 | Recipe image |
show_description |
1 | Recipe description text |
show_rating |
1 | Star rating |
show_category |
1 | Category name |
show_author |
1 | Author name |
show_preparation_time |
1 | Preparation time |
show_cook_time |
1 | Cooking time |
show_wait_time |
1 | Wait/rest time |
show_difficulty |
1 | Difficulty badge |
show_cost |
1 | Cost badge |
show_readmore |
1 | Read more button |
show_ingredients |
1 | Ingredients list |
These apply to full view mode only (layout=full):
| Attribute | Default | Description |
|---|---|---|
show_actions |
1 | Action buttons (print, share, etc.) |
show_directions |
1 | Preparation steps |
show_reviews |
1 | User reviews section |
show_similar |
1 | Similar recipes section |
show_video |
1 | Recipe video |
show_seasons |
1 | Seasonal information |
show_tags |
1 | Recipe tags |
show_sharingbuttons |
1 | Social sharing buttons |
show_link |
0 | Direct link to recipe page |
Override Priority
Display settings follow this priority (highest to lowest):
- Shortcode attributes —
{joomrecipe id=5 show_rating=0}always wins - Plugin settings — Configured in the plugin options panel
- Component settings — Global JoomRecipe configuration
Plugin Configuration
Navigate to Extensions → Plugins and search for Content - JoomRecipe. The plugin settings are organized into three tabs:
Layout Settings
- Default Layout — The layout used when no
layout=attribute is specified in the shortcode. Set tofullfor backward compatibility, or choose a card layout likecardorstackedto use lightweight embeds by default. - Grid Columns — Default number of columns for multi-recipe grids (when using comma-separated IDs or category embeds). Can be overridden per shortcode with
columns=.
Display Options (Card/Layout Mode)
Toggle which elements appear by default when using card or layout-based rendering. These serve as defaults that individual shortcodes can override.
Full View Options
Toggle which sections appear when using the full recipe view (layout=full or the legacy format when default layout is set to full).
Performance Notes
- Card/layout modes load only the recipe CSS — no JavaScript libraries are loaded. This is significantly lighter than the full view.
- Full view mode loads the complete recipe page including all JavaScript (print, slider, timer, modal, etc.).
- When embedding multiple recipes, each recipe is loaded individually via the model. The component CSS is loaded only once per page regardless of how many shortcodes are used.
Quick Reference
{joomrecipe 5} → Legacy format (default layout)
{joomrecipe id=5} → Default layout
{joomrecipe id=5 layout=card} → Card layout
{joomrecipe id=5 layout=stacked show_rating=0} → Stacked, no rating
{joomrecipe id=1,2,3 layout=card columns=3} → 3-column grid
{joomrecipe category=5 count=4 layout=card} → 4 recipes from category
{joomrecipe category=5 count=6 columns=3 layout=simple} → 6 recipes, 3 columns
{joomrecipe id=5 layout=card show_description=0 show_author=0} → Minimal card