Wized Docs

Appearance

WordPress Setup ​

This page describes the WordPress pages we created for the URL Shortener product demo.

Pages Created ​

For the URL Shortener product, we set up the following pages in WordPress:

1. Dashboard Page ​

The main page where users can shorten URLs, view their links, and track click statistics.

URL: /dashboard

Purpose: Display and manage all shortened URLs created by the user

Dashboard Page

Note: We render all static elements that will be used by Wized to make them dynamic. In this case, we render the Link Item, analytics, and loader components statically, then Wized manages showing, hiding, or loading the dynamic content based on the data fetched from the backend.

2. Home/Landing Page ​

The public homepage that introduces the URL shortener functionality.

URL: /

Purpose: Marketing and entry point for the application

Home Page

3. Sign In / Sign Up Pages ​

Used for authenticating users with the Xano backend

alt textalt text

Setting up Wized Attributes ​

When you need dynamic functionality with Wized, such as rendering a list of components, showing or hiding elements based on conditions, or managing form submissions, you add the wized attribute to HTML elements. For example, to render links fetched from Xano, add wized="shorted_url_container" to the static container inside WordPress/Elementor.

Shorted URL Container

Other Attribute Examples ​

AttributeElementPurpose
wized="sign-in-button"ButtonDynamically show or hide the button based on user authentication status
wized="username"ParagraphDynamically display the authenticated user's username or hide the element
wized="url-form"FormHandle form submission functionality

Below you can see all the Wized attributes used in this demo displayed on Wized dashboard:

Dashboard attributes

How It Works ​

  1. WordPress provides the page structure and HTML elements with Wized attributes
  2. Wized identifies the attributes and manages the dynamic functionality
  3. Xano provides API endpoints and database management for authentication and URL storage

Next Step ​

Continue to the Xano setup guide to learn how the backend API and database are configured: