# Key Aspects Advanced Views is a specialized WordPress framework designed to enhance and customize content display and functionality. It can be used independently (see our [starter theme](/advanced-views/getting-started/starter-theme.md)) or in conjunction with your preferred theme or builder. {% hint style="info" %} Advanced Views is a versatile and flexible tool that sets itself apart from drag-and-drop builders. \ Thanks to its straightforwardness and simplicity, Advanced Views can be used by web creators and website owners for a range of simple tasks.\ Mastering advanced layouts requires at least basic HTML and CSS knowledge, while employing all the features of the framework requires PHP and JS knowledge. {% endhint %} Below we provide an overview of the key aspects of Advanced Views. If you're completely new, check out our [introduction to the framework](https://wplake.org/blog/introduction-to-the-advanced-views-framework/). ## 1. Main components The Advanced Views plugin enhances the default WordPress content querying and display process by introducing two new components: 1. *Layouts*\ This is a smart template responsible for displaying content. 2. *Post Selections*\ Post Selections retrieves posts from the database and shows them in the selected layout. ## 2. Integration approaches *Layouts* and *Post Selections* define rules but do not specify where to apply them. To render a *Layout* template or perform a *Post Selection* query, you must call these instances in the target locations. There are two ways to add a *Layout* or *Post Selection* to a target location: 1. By using the instance-related shortcode\ \ This option can be utilized in various contexts. You can find the instance-related shortcode in the right panel of the Layout or Post Selection settings. By using Layout and *Post Selection* [shortcode arguments](https://docs.advanced-views.com/shortcode-attributes/common-arguments), you can specify the data source and restrict visibility based on user roles.\ \ Note: If you plan to include the shortcode in your code, such as in PHP theme templates, you can use [the special class](https://docs.advanced-views.com/shortcode-attributes/common-arguments#id-2.-using-advanced-views-class) provided by Advanced Views instead of the default `do_shortcode` approach. This approach will make your code more readable and save you from having to remember all available arguments.
2. By using the [instance-related Gutenberg block](https://docs.advanced-views.com/display-content/custom-gutenberg-blocks-pro)\ \ This option is exclusively available in Advanced Views Pro and can be used within the Gutenberg editor. It allows you to add Gutenberg blocks to your library without requiring [React knowledge](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/). We recommend using this method on pages that support Gutenberg for the following reasons:\ \ a) Improved performance\ \ Block data is stored within the current Post content and does not trigger additional meta queries, resulting in better performance.\ \ b) Re-usability\ \ Unlike meta field groups, blocks can be used multiple times on the same page, enhancing re-usability. ## 3. "*Layout*" component A *Layout* is a smart template responsible for displaying content. It establishes connections between object fields in the database and their presentation in the display template. When you select specific fields, the *Layout* automatically inserts the necessary code to display them within the template. ### 3.1) Built-in data binding {% hint style="info" %} *Layouts* handle all data conversions in the background. {% endhint %} For instance, when you choose the 'Featured image' field of a Post, which is represented as an ID (integer) of an Image (Attachment) [in the database](https://codex.wordpress.org/Database_Description#Table:_wp_posts), *the Layout* automatically adds an "img" tag to the template, complete with all the required properties.\ \ During rendering, the *Layout* retrieves the ID of the specified Featured Image, gathers all the necessary properties, and seamlessly integrates the data into the template. ### 3.2) Automated template generation *Layouts* employ the [Twig](/advanced-views/templates/template-engines/twig.md) (or [Blade](/advanced-views/templates/template-engines/blade.md)) template engine and generates high-quality, unique markup tailored to your needs, based on the field types and names of the selected fields. In simple cases, you won't need to modify the generated markup at all. For more complex layouts, you may need to make adjustments to achieve your desired appearance. ### 3.3) Seamless data connection *Layouts* establish connections between object fields in the database and their presentation in the display template. This feature is especially useful when you work with fields from meta vendors (like ACF). {% hint style="info" %} When you change the field type or field settings in the Field Group, which would require template changes, you'll be notified about the affected templates.\ In addition to that, in the list table, you have the 'bulk validation' tab, which allows you to validate all the custom templates in one place. {% endhint %} Moreover, Advanced Views displays information about 'related' data. So, on your *Layout* screen, you can see the list of used Field Groups, and vice versa, on the Field Group screen, you can see a list of *Layouts* where the current group fields are used. ### 3.4) Object and multi-level fields support Advanced Views supports object fields (like Post.Author or ACF Relationship) and multi-level fields (like ACF Repeater). [Read more](https://docs.advanced-views.com/display-content/object-fields) ### 3.5) Benefits over the standard approach Automatic template generation and data conversion provide a solid foundation, saving you from starting entirely from scratch. These time-saving features allow you to focus on what truly matters, rather than manually typing markup, retrieving data from the database, converting it to the correct formats, and injecting it into the template. ### 3.6) Supported data vendors Advanced Views natively supports WordPress object fields, WooCommerce, and several meta vendors, like Advanced Custom Fields. You can find the full supported data vendors list [here](https://docs.advanced-views.com/getting-started/supported-data-vendors). {% hint style="info" %} Advanced Views doesn't limit the vendors. You can pass any data, including data obtained from any API, to the template using the [View Custom Data feature](https://docs.advanced-views.com/display-content/custom-data-pro) (Pro). {% endhint %} ## 4. "*Post Selection*" component *Post Selection* is responsible for fetching items from the database and showing them using the selected layout. Under the hood, it's a wrapper above the built-in WordPress '[WP\_Query](https://developer.wordpress.org/reference/classes/wp_query/)' class. It provides a user interface for query arguments with descriptions, so you don't have to spend time looking for the right names and values. ### 4.1) Item layout At the same time, *Post Selection* contains the display template for the result items. While the items' Display settings are responsible for the arrangement, *Post Selection* doesn't define the look of each individual item inside. *Layouts are* responsible for the look of the individual item, and every *Post Selection* has a *Layout* attached, which is used inside the loop to display every single item of the results. Similar to the *Layout*, The *Post Selection* template is also automatically generated and can be customized easily. ### 4.2) Extra query arguments and template variables *Post Selections* contain the main [WP\_Query](https://developer.wordpress.org/reference/classes/wp_query/) arguments. If you need to include advanced arguments in the Query that are missing in the user interface, or you want to add extra arguments to the template, you can do so using the *Post Selection* [Custom Data feature](https://docs.advanced-views.com/query-content/custom-data-pro). ## 5. Modular approach *Layouts* and *Post Selection* components are modular, which means Advanced Views encourages you to have several independent layouts rather than one large, complex one. Let's say we need to display specific posts with detailed information about their authors and categories. Instead of having one complex layout, the architecture of Advanced Views pushes you to: 1. Create a *Layout* for the item display, which will display Post fields and contain 2 extra *Layouts*: * A *Layout* for author info display * A *Layout* for category info display 2. Create a *Post Selection* for the query and attach the *Layout*. Components are independent and come with their own CSS. You can create and edit without getting lost in complex designs, keeping a clear view of how the page is arranged. {% hint style="info" %} Thanks to the features of the Advanced Views plugin, creating these components is even faster than creating one big layout. As a result, you get independent and reusable items that are easy to modify and use in other places too. {% endhint %} ## 6. Core component aspects *Layouts* and *Post Selections* serve different purposes, but both share core features that are identical in both cases. #### 6.1) Components storage *Layouts* and *Post Selections* store their settings in JSON format, and there are two storage options available: Database and File System. **Database (Default Storage)** Items are stored in the `wp_posts` table, and their JSON settings are stored within the `post_content` column. **File System** Items are stored as files inside the current theme directory. Code fields have separate files. This option is preferable if you use Git, work with IDE, or want to utilize TypeScript/Sass/Tailwind in your development workflow. You can read more about the File system storage option [here](https://docs.advanced-views.com/templates/file-system-storage). #### 6.2) Integrated Template engine The Advanced Views plugin comes with built-in integration for both [Twig](/advanced-views/templates/template-engines/twig.md) and [Blade](/advanced-views/templates/template-engines/blade.md). You can use your preferred template engine and have full control over the *Layouts* and *Post Selections*. {% hint style="info" %} If you're new to template engines, you can read about why these options are better than the default PHP templates and choose the best one for your project [here](/advanced-views/templates/template-engines.md). {% endhint %} #### 6.3) Automatic template validation When you save a *Layout* or *Post Selection*, the plugin performs automatic template validation (by passing dummy data). If there are any template issues, you'll see them right away. #### 6.4) BEM methodology and Tailwind support Advanced Views follows the [BEM methodology](https://docs.advanced-views.com/templates/bem-methodology) for class naming out-of-the-box. If you prefer [Tailwind](/advanced-views/templates/file-system-storage.md#tailwind-usage), you can disable the class generation and enable the [File system storage](/advanced-views/templates/file-system-storage.md) to [employ Tailwind](/advanced-views/templates/file-system-storage.md#tailwind-usage) for *Layouts* and *Post Selection* templates. #### 6.5) Web Components and WordPress Interactivity API Every *Layout* and *Post Selection* may have its own JS code. Advanced Views allows you to employ [Web Components](/advanced-views/templates/css-and-js.md#defaults-web-component) or [WordPress Interactivity API](/advanced-views/templates/css-and-js/wordpress-interactivity-api.md) without any extra actions. ## 7. Front-end assets management Advanced displays, such as sliders, masonry grids, or galleries, require the use of JavaScript libraries. In the Advanced Views lite, you need to download and [employ JS libraries in templates](/advanced-views/templates/css-and-js.md#employing-js-libraries) as usual, but in Pro it simplifies this using [simplified assets management](/advanced-views/display-content/front-end-assets-management-pro.md) for these scenarios and offers [Ajax support](/advanced-views/templates/custom-ajax-and-rest-api-pro.md) for *Layouts* and *Post Selection* out-of-the-box. {% hint style="info" %} Advanced Views Pro comes with a set of preloaded JS libraries. In addition to the libraries themselves, Advanced Views knows their markup requirements and the minimal configuration they need. This allows you to easily incorporate these libraries into your *Layouts* and *Post Selections* without any hassle. [Read more](https://docs.advanced-views.com/display-content/front-end-assets-management) {% endhint %} ## 8. Reusable components Reusing components is a fundamental aspect that empowers developers to create advanced functionalities without investing excessive time in implementation. *Layouts* and *Post Selections* are modular, making them ready to reuse out-of-the-box. #### Pre-built components Advanced Views comes with a set of [pre-built components](https://docs.advanced-views.com/templates/pre-built-components) for a quick start. These include meta fields, tuned markup, and primary CSS rules, including responsive styles, so you don't need to start from scratch. #### Your own reusable components You can easily reuse *Layouts* and *Post Selections* that you've crafted for one website on multiple others. In the Lite version, you can use the Import/Export tools, or enable the [FS mode](/advanced-views/templates/file-system-storage.md) and copy/paste selected items to any other installations. With Advanced Views Pro, in addition to the support for Git repositories, it allows you to create [your own component libraries](https://docs.advanced-views.com/templates/reusable-components-library-pro) and push/pull items to the library directly from the plugin's interface. ## 9. Framework reliability and performance Advanced Views is a lightweight and reliable tool with excellent performance. The framework not only encourages best practices but also adheres to them. The [framework's codebase](https://plugins.trac.wordpress.org/browser/acf-views/trunk) is modular and follows the [WordPress Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/) and is tested, and validated using [php\_codesniffer](https://github.com/WordPress/WordPress-Coding-Standards) and [phpstan](https://phpstan.org/) tools. Performance optimization is a top priority. For instance, *Layout* and *Post Selection* settings are stored as JSON instead of using post meta, which contributes to the framework's excellent performance. You can find and repeat our [performance tests](https://docs.advanced-views.com/customization/performance), which showcases the framework's strong performance. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wplake.gitbook.io/advanced-views/getting-started/introduction/key-aspects.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.