Pages

Pages are surfaces that render a UI Component at a specific URL on your WordPress site. They let you create standalone, URL-addressable screens -- product catalogs, dashboards, detail views -- powered by your components and pre-loaded with data from the URL.

How Pages Work

A page is a surface that connects three things:

1. A URL pattern -- defines the route where the page is accessible (e.g., /products/{category_slug})
2. A UI Component -- the visual layout rendered at that URL
3. A data source pipeline -- runs before the component renders, extracting URL parameters and loading context data

When a visitor hits the URL, WP-Nexus matches the pattern, executes the surface pipeline, and renders the component with the pipeline output as its root context.

Creating a Page

Navigate to your app and click the Pages tab. Click New Page and fill in:

• Name -- a descriptive name (e.g., "Product Catalog")
• Slug -- URL-safe identifier, auto-generated from the name
• Component -- select the UI Component to render
• URL Pattern -- the route pattern, with optional {parameter} placeholders

URL Patterns

URL patterns define the route where your page is accessible. Use curly braces to define dynamic parameters:

Pattern	Example URL	Parameters
/products	example.com/products	(none)
/products/{category_slug}	example.com/products/electronics	category_slug = "electronics"
/products/{category_slug}/{product_slug}	example.com/products/electronics/laptop	category_slug = "electronics", product_slug = "laptop"
/users/{user_id}/profile	example.com/users/42/profile	user_id = "42"

Parameters are extracted at runtime by the Route Params pipeline node and made available to downstream nodes in the pipeline.

Data Source Pipeline

Each page has its own data source pipeline that runs before the component renders. A typical page pipeline:

Route Params → Query Table (filter by row.category_slug) → Output

1. Route Params -- extracts URL parameters from the pattern (e.g., category_slug)
2. Query / Lookup -- uses the extracted parameters to fetch data from your tables, CPTs, or APIs
3. Output -- passes the result as the component's root context

The component then accesses the data via expressions like {{row.name}}, {{row.price}}, etc.

Example: Product Catalog

Suppose you have a products database table and a "Product List" component.

1. Create a page named "Product Catalog"
2. Set the URL pattern to /products/{category_slug}
3. Select the "Product List" component
4. Open the pipeline editor and build:

Route Params → Query Table (products, where category_slug = row.category_slug) → Output

Now visiting example.com/products/electronics renders the Product List component with only electronics products.

TIP

Pages register WordPress rewrite rules automatically. After creating or changing a page's URL pattern, WordPress may need to flush its rewrite rules. WP-Nexus handles this on save.