> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/getting-started/first-layout.md).

# 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:

1. **Fields list** – specifies which fields are loaded into the template.
2. **Layout Template** – defines the HTML markup and rendering logic for displaying the fields.
3. **CSS and JavaScript** (both optional) – provide styling and scripting associated with the *Layout*.
4. **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](/advanced-views/field-types/media/image-field.md), a loop for a [Gallery field](/advanced-views/field-types/media/gallery-field.md), 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.&#x20;

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.

{% hint style="success" %}
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.
{% endhint %}

## 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.

<figure><img src="/files/bkeF5uVqcPLqVZh6TvbK" alt=""><figcaption></figcaption></figure>

### 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](/advanced-views/layouts/code-fields/custom-template.md):

* 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](/advanced-views/getting-started/first-post-selection.md)

{% hint style="success" %}
Learn more about the *Layout* [shortcode](broken://pages/OVsiDsPFfS2DISIVmkoA) parameters.
{% endhint %}