Template integration

Fenómenus archives are built from two template layers: an archive template that frames the page, and a feed template that renders one item. Both are HTML with merge tags and shortcodes, and both are generated per menu type and layout when a menu type is enabled.

The two layers

Layer Responsibility
Archive template The page frame — logo, header controls, category navigation, results container
Feed template One item — title, image, prices, allergens, favorites control

The archive template is rendered once; the feed template is rendered per item.

Merge tags

Feed templates use {{ … }} merge tags. Those used by the supplied templates:

Tag Renders
{{title}} The item title
{{post_content}} The item content
{{meta name="…"}} A meta value, with optional prepend, append and only_content
{{featured_image}} / {{featured_image_url}} The featured image, with image_size and fallback_url
{{gallery}} The item gallery
{{taxonomy_terms taxonomy="…"}} Terms of a taxonomy, with options for thumbnails, links and wrappers
{{icon family="…" name="…"}} An icon
{{like_button}} The likes control
{{feed_from_meta}} A nested feed built from a meta value — used by set menus for their dish blocks
{{translatable_string}} A string that participates in translation
{{if …}} … {{else}} … {{/if}} Conditional output, commonly meta="…" value="not_empty"

The conditional is what keeps a menu clean: a price line is wrapped in an {{if}} so an empty format renders nothing.

Shortcodes in archive templates

The supplied archive templates use:

[web_logo], [allergens_filter], [allergens_list], [favorite_posts], [current_post_type_plural], [web_button], [web_modal], [web_modal_content], [web_icon], [web_taxonomy_terms_thumbnails], and a language switcher.

The category navigation is injected automatically when the archive markup does not already contain [category_nav].

The archive HTML filter

Archive template markup passes through a filter before shortcodes are parsed:

add_filter( 'pom_archive_template_html', function ( $html, $post_type ) {
    // Inspect or modify the archive markup for this post type.
    return $html;
}, 10, 2 );

This is the supported point for adding markup to every archive of a menu type. The category navigation uses it, and skips injection when the markup already contains the shortcode.

Per-layout stylesheets

Each layout has a stylesheet generated alongside its templates, and those stylesheets read the site's palette — in particular whether the background is light or dark — and adapt card backgrounds, shadows and overlays accordingly.

A custom layout should do the same rather than hardcoding colors, or it will break when the palette changes.

Writing a custom feed template

Supplied templates use POM Theme's rem spacing helpers, for example mb-075 (0.75rem), p-1 (1rem), and mb-2 (2rem). The shared suffixes are 0, 0375, 075, 1, 125, 2, 3, 4, 6, and 8; the suffix is not a pixel count. Update the theme and supplied templates together. Existing saved copies and customized archive/feed templates are not overwritten by installing the plugin; review them with POM Theme's wp pom migrate-spacing-helpers --dry-run command before applying its migration.

If you replace a feed template:

  1. Keep the {{if}} guards around optional fields, especially prices.
  2. Render allergens through the supported output so icons and the visibility toggle keep working.
  3. Keep the favorites control if the archive offers the favorites view.
  4. Use the palette rather than fixed colors.
  5. Test with items that have no photo, no subtitle and one price.

For dish allergen thumbnails, retain the supplied wrapper:

<div class="post-allergens">{{taxonomy_terms taxonomy="allergen" category_thumbnail="true" taxonomies_with_links="false" without_wrapper="true"}}</div>

On sites with allergens enabled, shared menu styles size these direct .term-thumbnail > img children to 24 × 24 px and give each thumbnail 8 px of right spacing. This also applies to saved template copies, embedded menus and dynamically loaded dishes. The [post_allergens] shortcode retains the same size and spacing. General taxonomy thumbnails outside .post-allergens, the information panel and PDF layouts are unaffected. Keep .post-allergens for the guest visibility switch, and use a more specific custom selector when a design needs different icon dimensions.

Standalone gaps

For an empty spacer in a custom template, use POM Theme's web-gap-075, web-gap-125, web-gap-2, web-gap-3, web-gap-4, web-gap-8, or web-gap-12 classes. They represent 0.75, 1.25, 2, 3, 4, 8, and 12rem respectively. The same tokens are accepted by [web_gap gap_space="075"]; omitting gap_space uses 1.25rem.

The setup assistant's home template uses this shortcode scale. When editing the generated home page, choose its gap size in the page builder and verify the spacing on desktop and mobile. Installing a plugin update does not replace an existing home page.

What not to depend on

Generated template file locations, generated stylesheet names and the internal identifiers assigned to templates are implementation details. Integrate through the filter and the documented tags and shortcodes.

What POM Site Authoring can do and how to ask
Previous