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) or in conjunction with your preferred theme or builder.

Advanced Views (AVF) is a versatile and flexible tool that sets itself apart from drag-and-drop builders. Thanks to its straightforwardness and simplicity, AVF 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.

Below we provide an overview of the key aspects of Advanced Views. If you're completely new, check out our introduction to the framework.

1. Main components

The Advanced Views plugin enhances the default WordPress content querying and display process by introducing two new components:

1. View This is a smart template responsible for displaying content.

2. Card This instance handles the database query and the layout of result items.

2. Integration approaches

Views and Cards define rules but do not specify where to apply them. To render a View template or perform a Card query, you must call these instances in the target locations.

There are two ways to add a View or Card 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 View or Card settings. By using View and Card shortcode 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 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 This option is exclusively available for Pro users and can be used within the Gutenberg editor. It allows you to add Gutenberg blocks to your library without requiring React knowledge. 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) Reusability Unlike meta field groups, blocks can be used multiple times on the same page, enhancing reusability.

3. "View" component

A View 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, View automatically inserts the necessary lines to display them within the current template.

3.1) Built-in data binding

View handles all data conversions in the background.

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, View automatically adds an "img" tag to the template, complete with all the required properties. During rendering, View 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

View employs the Twig (or Blade) 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

View establishes 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).

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.

Moreover, Advanced Views displays information about 'related' data. So, on your View screen, you can see the list of used Field Groups, and vice versa, on the Field Group screen, you can see a list of Views 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

3.5) Benefits over the default 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.

Advanced Views doesn't limit you to the vendors listed there. You can pass any data, including data obtained from any API, to the template using the View Custom Data feature.

4. "Card" component

Card is an instance responsible for the DB Query and result item layout.

Under the hood, it's a wrapper above the built-in WordPress '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, Card contains the display template for the result items. While the items layout is responsible for the list/grid/other appearance, Card doesn't define the look of each individual item inside.

View is responsible for the layout of the individual item, and every Card has a View attached, which is used inside the loop to display every single item of the results. Similar to the View, Card's template is also automatically generated and can be easily customized.

4.2) Extra query arguments and template variables

Card contains the main WP_Query arguments. If you need to include advanced arguments in the Query that are missing in the user interface, or add extra arguments to the template, you can do it using the Card Custom Data feature.

5. Modular approach

View and Card 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 Card for the query and items layout

2. Create a View for the item display, which will display Post fields and contain 2 extra Views:

• View for author info display

• View for category info display

In this way, each component is relatively small and independent. Each has its own CSS. While creating and editing, you don't have to deal with overly complicated layouts, and you can easily keep a clear picture of the current layout in your mind.

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.

6. Core component aspects

View and Card serve different purposes, but both share core features that are identical in both cases. Here are these core items:

6.1) Components storage

Views and Cards 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.

6.2) Integrated Template engine

The Advanced Views plugin comes with built-in integration for both Twig and Blade. You can use your preferred template engine and have full control over the layout of Views and Cards.

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.

6.3) Automatic template validation

When you save a View or Card, the framework 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

The Advanced Views framework follows the BEM methodology for class naming out-of-the-box. If you prefer Tailwind, you can disable the class generation and enable the File system storage to employ Tailwind for View and Card templates.

6.5) Web Components and WordPress Interactivity API

Every View and Card may have its own JS code. The Advanced Views Framework allows you to employ Web Components or WordPress Interactivity API without any extra actions.

7. Front-end assets management

Advanced layouts, such as sliders, masonry grids, or galleries, require the use of JavaScript libraries.

In the Lite edition, you need to download and employ JS libraries in templates as usually, while the Pro edition offers simplified assets management for these scenarios and brings Ajax support for Views and Cards.

Advanced Views Pro comes with a set of pre-loaded 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 Views and Cards without any hassle. Read more

8. Reusable components

Reuse is a fundamental aspect that empowers developers to create advanced functionalities without investing excessive time in implementation.

Views and Cards are modular, making them ready for reuse out-of-the-box.

Pre-built components

Advanced Views comes with a set of pre-built components for a quick start. These include meta fields, tuned markup, and primary CSS rules, including responsive, so you do not need to start from scratch.

Your own reusable components

You can easily reuse Views and Cards that you've crafted for one website on multiple others.

In the Lite version, you can use Import/Export tools, or enable the FS mode and copy/paste selected items to any other installations.

With Advanced Views Pro has in addition support for Git repositories, allowing you to create your own component libraries and push/pull items to the library directly from the plugin's UI.

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 is modular, follows WordPress Coding Standards, covered by tests, and validated using php_codesniffer and phpstan tools.

Performance optimization is a top priority. For instance, View and Card 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, which showcase the framework's strong performance.