Shortcodes & Rendering

WP-Nexus components are embedded on your WordPress site using the [wp_nexus] shortcode. This lets you place any component inside posts, pages, or theme templates.

Basic Syntax

[wp_nexus app="app_slug" component="component_slug"]

Both app and component are required attributes. They reference the slugs you defined when creating the app and the component.

Example:

[wp_nexus app="task_manager" component="task_list"]

Custom Parameters

You can pass extra attributes to the shortcode. These become available as context data in your component's expressions via row.param_name.

[wp_nexus app="task_manager" component="task_detail" post_id="123"]

Inside the component, use { {row.post_id}} to access the value "123".

[wp_nexus app="blog" component="category_posts" category="news" limit="5"]

Inside the component, { {row.category}} resolves to "news" and { {row.limit}} resolves to "5".

How Parameters Work

1. All attributes except app and component are collected as custom parameters.
2. Parameters are sanitized with sanitize_text_field() (keys with sanitize_key()).
3. They are set as the parent context of the component's pipeline executor.
4. They are also stored on the rendered wrapper element as data-nxs-params for client-side use.
5. Inside expressions, access them as row.param_name.

Use the Parent Data source node in your pipeline to read these parameters when building data queries.

How Rendering Works

When WordPress encounters the [wp_nexus] shortcode:

1. The shortcode handler loads the component by app slug and component slug.
2. Bootstrap CSS and jQuery are enqueued for styling and interactivity.
3. The component's layout tree is passed to the server-side PHP renderer.
4. Each widget in the layout tree is rendered to HTML, with expressions evaluated against the pipeline data.
5. The resulting HTML is wrapped in a <div> with a data-nxs-component attribute identifying the component.

The output is standard HTML that integrates naturally with your WordPress theme.

Profile Components

Components with a profile mount have special behavior. When rendered:

1. If the user is not logged in, a "Please log in" warning is displayed instead of the component.
2. If the user is logged in, their WordPress user data is automatically injected into the context:

Context Field	Description
row.id	User ID
row.email	Email address
row.display_name	Display name
row.login	Username
row.first_name	First name
row.last_name	Last name
row.roles	Array of user roles
row.registered	Registration date

This makes profile components ideal for "My Account", "Edit Profile", or "My Orders" pages where you need the current user's data automatically.

Using in Theme Templates

You can also render the shortcode in PHP template files:

<?php echo do_shortcode('[wp_nexus app="task_manager" component="task_list"]'); ?>

Or with dynamic parameters:

<?php
$post_id = get_the_ID();
echo do_shortcode("[wp_nexus app=\"shop\" component=\"product_detail\" post_id=\"{$post_id}\"]");
?>

Tips

• Slugs are case-sensitive -- always use the exact slug (lowercase with underscores) as defined in WP-Nexus.
• Custom parameters are always strings -- even if you write post_id="123", the value arrives as the string "123". Arithmetic and comparison operators automatically coerce strings to numbers, so expressions like row.limit > 3 work as expected.
• One component per shortcode -- each [wp_nexus] tag renders one component. Use multiple shortcodes on a page for multiple components.
• Profile components require login -- always place profile shortcodes on pages that require authentication, or use a membership plugin to restrict access.