Widget Guide

XMF Portal uses a powerful Widget System that lets you embed interactive components anywhere in your page content using shortcodes. This guide shows you how.

How Shortcodes Work

A shortcode is a special tag in square brackets that gets replaced with rendered widget HTML when the page displays. The basic syntax is:

[xmf name="widget:name" prop1="value" prop2="value" /]

The name parameter is required — it tells the system which widget to render. All other parameters are passed as widget props.

Available Widgets

Visit the Widget Catalog in the admin panel (Admin > Widget Catalog) to browse all registered widgets, their variants, and available props. Here are the key widgets:

1. Testimonial

Display customer quotes with author attribution. Supports card, quote, and slider variants. The optional image prop controls the avatar display:

• No image prop — text-only testimonial, no avatar area
• image="placeholder" — generic silhouette avatar (ideal for demos)
• image="/path/to/photo.jpg" — actual photo

Without image — clean text-only quote:

[xmf name="xmf:testimonial" author="Alice" role="Designer" text="Clean and simple — no avatar needed." variant="quote" /]

With placeholder — generic silhouette signals a person without needing a real photo:

[xmf name="xmf:testimonial" author="Bob" role="Engineer" text="The placeholder avatar keeps the layout consistent across all testimonials." image="placeholder" variant="quote" /]

With real image — provide the URL to an actual photo:

[xmf name="xmf:testimonial" author="Carol" role="CEO" text="A real photo adds authenticity and trust to your testimonials." image="/modules/xmfportal/assets/images/sample-avatar.jpg" variant="quote" /]

“

A real photo adds authenticity and trust to your testimonials.

Carol

CEO

2. Content Cards

Pull content from portal pages or blog posts into a responsive grid. Sources: recent_pages, popular_pages, recent_blog_posts, category.

[xmf name="xmfportal:posts" source="recent_blog_posts" limit="3" columns="3" /]

Result — Recent blog posts:

3. Alert Boxes

Display notification banners. Types: info, success, warning, danger.

Info:

[xmf name="xmf:alert" type="info" text="Info alert — great for tips and helpful notes." /]

Success:

[xmf name="xmf:alert" type="success" text="Success alert — confirms a completed action." /]

Warning:

[xmf name="xmf:alert" type="warning" text="Warning alert — highlights a potential issue." /]

Danger:

[xmf name="xmf:alert" type="danger" text="Danger alert — signals an error or destructive action." /]

4. Hero Banner

Full-width banner with heading, subheading, and CTA button. Variants: centered, split, video.

[xmf name="xmf:hero" heading="Build Amazing Sites" subheading="With the XMF Widget System" ctaText="Get Started" ctaUrl="/modules/xmfportal/" variant="centered" /]

Result:

5. Call to Action

Conversion-focused banners. Variants: banner, inline, popup.

[xmf name="xmf:cta" heading="Ready to try it yourself?" buttonText="Browse Widget Catalog" buttonUrl="/modules/xmfportal/admin/catalog.php" variant="banner" /]

Result:

The Widget Catalog

The admin panel includes a Widget Catalog page (Admin > Widget Catalog) that lists every registered widget in the system. For each widget, it shows:

• Name — the shortcode identifier (e.g., xmf:testimonial)
• Category — grouping (content, layout, interaction, etc.)
• Variants — alternative templates (e.g., card, quote, slider)
• Props — configurable properties with their types and defaults
• Features — badges for Lazy loading, API access, Caching, Visibility restrictions

Use the catalog as a reference when writing shortcodes. Copy the widget name, pick a variant, and set the props you need.

[xmf name="xmf:alert" type="info" text="Tip: Widgets registered by other modules (like xmfblog) also appear in the catalog. The system is extensible — any XMF module can register its own widgets." /]

Result:

Rating System

Every page includes a thumbs up/down rating widget at the bottom. The rating system is built into the XMF framework and can be used by any module. Admins can configure the rating style (thumbs, stars, reactions, 1-5, 1-10) in module preferences, and control who can rate via the Permissions page.