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

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

Layouts handle 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, 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 (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

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

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

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.

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 (Pro).

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

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

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

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.

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.

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 Layouts and Post Selections.

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 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 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 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 or WordPress Interactivity API 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 as usual, but in Pro it simplifies this using simplified assets management for these scenarios and offers Ajax support for Layouts and Post Selection out-of-the-box.

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

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 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 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 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 is modular and follows the WordPress Coding Standards and is tested, and validated using php_codesniffer and phpstan 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, which showcases the framework's strong performance.