How to create a Layout
1. Layout basics
A Layout is an entity type introduced by Advanced Views that defines how your content is displayed. Each Layout consists of the following components:
Fields list – specifies which fields are loaded into the template.
Layout Template – defines the HTML markup and rendering logic for displaying the fields.
CSS and JavaScript (both optional) – provide styling and scripting associated with the Layout.
Embedding shortcode – a unique shortcode that can be pasted anywhere, with support for passing loading arguments.
Once you've defined the fields list, Advanced Views automatically generates a default template for them. It recognizes each field type and produces the appropriate markup - for example, an <img> tag for an Image field, a loop for a Gallery field, and so on.
Advanced Views eliminates the need to learn your field provider's documentation or manually retrieve field data. It automatically transforms raw database values into template-ready formats.
For example, an image ID stored in the database is passed as a complete image object with properties such as src, width, and height.This lets you focus on crafting the layout instead of dealing with field types and meta retrieval.
Layouts are composable, meaning one Layout can include another. They also support arbitrary logic, allowing you to perform operations such as combining field values, formatting output, or calling any WordPress function directly within the template.
2. How to create a Layout
Visit Advanced Views → Layouts in your WordPress dashboard.
Click Add New Layout.
Give your Layout a clear name.
Example:
Team Member Card
A good name helps you identify your Layout later, especially when you have multiple Layouts on your website.
2.1) Select your content source
Choose where your Layout should get its data from.
Advanced Views supports multiple sources including:
WordPress fields (title, content, featured image, etc.)
Custom fields
WooCommerce fields
Users
Taxonomies
Select the fields you want to display.
Advanced Views will automatically prepare the field data and generate a template for you.
2.2) Review the generated template
After selecting your fields, Advanced Views creates the starting template.
This gives you a clean structure that you can customise instead of starting from scratch.
You can adjust:
HTML structure
CSS styling
Field placement
Additional logic
Your Layout remains independent from your theme, making it easier to maintain or reuse.
2.3) Publish your Layout
Click Publish to save your Layout.
After publishing, Advanced Views creates a shortcode.
Copy the shortcode and place it anywhere shortcodes are supported:
Pages
Posts
Page builders
Theme areas
Your content will now display using your Layout.
3. Updating your Layout
Need to add more fields later?
Simply edit your Layout and include the additional fields.
Because the shortcode stays the same, you do not need to replace it across your website.
4. Next steps
You have now created your first Layout and learned how to control how your content is displayed.
Layouts are perfect when you want to display a single item or create reusable designs.
The next step is learning about Post Selections.
Post Selections let you query multiple posts, pages, products, or custom post types and display them using your Layout.
For example:
Latest blog posts
Property listings
Product grids
Team directories
Event lists
Continue with Creating Your First Post Selection
Learn more about the Layout shortcode parameters.
Last updated