Wized Docs

Appearance

Building a URL shortener with Wordpress, Wized and Xano ​

This guide walks you through building a dynamic WordPress website that combines the design flexibility of WordPress, the business logic capabilities of Wized, and the backend power of Xano.

Architecture Overview ​

The Wized + WordPress + Xano setup creates a three-tier architecture:

WordPress (Design & Content Layer)
    ↓
Wized (Logic & Interaction Layer)
    ↓
Xano (Backend & Database Layer)

WordPress handles your site design, static content, and core website structure. It's what your visitors see and navigate.

Wized acts as the bridge between your WordPress frontend and your backend services. It manages all the dynamic functionality, data binding, event handling, and user interactions without requiring complex code.

Xano (or similar backend services) provides your database, business logic, authentication, and API endpoints that power your dynamic features.

Key Concepts ​

1. Pages & Routes ​

Your WordPress site contains multiple pages that need dynamic functionality. Each page becomes an interactive application powered by Wized.

Common page types:

  • Dashboard Pages - Display user-specific data (user profile, activity history, preferences)
  • List/Directory Pages - Show filtered and searchable data from your backend (products, users, content)
  • Form Pages - Collect user input and send data to Xano (registration, contact forms, applications)
  • Detail Pages - Display individual item information (product details, user profiles, post details)
  • Admin Pages - CRUD operations for managing content (create, read, update, delete)

2. Dynamic Elements ​

Every interactive element on your WordPress page that needs to change based on data or user actions must be identified with Wized attributes.

Element types:

  • Text elements - Display dynamic content (user name, status, counters)
  • Image elements - Show dynamic images (profile pictures, thumbnails, product images)
  • Input fields - Collect user data (search queries, form inputs, filters)
  • Buttons - Trigger actions (submit forms, delete items, navigate to detail pages)
  • Containers - Repeat or show/hide sections based on data or conditions
  • Lists/Tables - Display collections of data with dynamic rows

3. Wized Attributes ​

Wized attributes are HTML identifiers that link WordPress elements to Wized's logic system. These attributes tell Wized which elements to manage and how.

Main attributes:

  • wized="element-name" - Main identifier for interactive elements
  • wized-cloak - Prevents content flash while data loads
  • wized-loader - Shows/hides loading indicators

Step-by-Step Setup ​