WPLake > Blog > Advanced Views: Effortlessly Query and Display Content in WordPress

Advanced Views: Effortlessly Query and Display Content in WordPress

Time to read: 13 mins

-

Plugins Tutorials

-

Updated 19.03.24

Review article for the Advanced Views plugin, Smart Templates, which offer a better way to query and display your content in WordPress.

Table of Contents

Intro

#link copied

WordPress is one of the most famous and popular CMS platforms, with over 46% of websites utilizing it, according to recent statistics. Its popularity stems from its simple and customizable approach to content management.

WordPress offers features like Custom Post Types (CPTs) and metafields, which are built-in and can be extended with great meta field plugins. These features allow users to create a structured data hierarchy tailored to their specific needs in minutes.

In comparison, achieving similar results on other platforms would require significantly more time and effort.

Once we have structured our data within WordPress, the next step is to display it on our website. In WordPress, themes handle primary layout elements like headers and footers, while the content of individual pages is fully customizable.

While the Gutenberg editor in WordPress facilitates the handling of simple content such as plain text or images, our focus is on presenting Custom Post Types and custom fields. Therefore, we need to query and display our content effectively.

Let's briefly explore the various methods we can use to achieve this:

1. Coding from scratch

#link copied

This approach offers flexibility but requires PHP and WordPress coding knowledge. However, it also comes with several significant drawbacks.

The main drawback is that even experienced developers have to invest a lot of time in building things from scratch.

This is particularly challenging when strict timeframes are in place, as it can lead developers to sacrifice quality in favor of quick implementation. While this may save time initially, it often results in headaches down the line.

2. Using page builders

#link copied

Page builders, available as plugins or built into themes, offer a simple, UI-driven approach suitable for beginners. However, they come with drawbacks such as lower quality of produced layouts, including non-human-readable markup, inefficient asset management, and related performance and SEO issues.

Additionally, the complexity of some page builders necessitates significant time investment in learning them, undermining their original purpose of simplifying website building.

3. Using smart templates from the Advanced Views plugin

#link copied

The Advanced Views plugin bridges the gap between coding and page builders by providing smart templates. Unlike drag-and-drop builders, it isn't constrained to a rigid UI paradigm.

The Advanced Views plugin resolves a variety of routine tasks and common issues, while ensuring that you retain full control over the process.

Instead of the pure UI paradigm, it streamlines routine tasks while offering a robust foundation for customization. These smart templates assist in both content querying and display, aiming to expedite the process while preserving creative freedom.

In this article, we will explore this approach in detail.

Use cases

#link copied

Before diving into details, let's discuss use cases. It's impractical to cover each use case individually, so we've grouped them into categories:

1. Displaying post and custom fields of the current item

#link copied
Custom fields on the WooCommerce Product page
Displaying built-in or custom fields is necessary to enhance the appearance of the crafted item

Whether you have a Page or Post item with custom fields, or a Custom Post Type (CPT) item, whether your own or provided by plugins like WooCommerce Product, retrieving and displaying fields is necessary to customize the appearance of the item.

The Advanced Views plugin simplifies this task by handling field retrieval and format conversion. This means you only need to select which fields you want to display, and smart templates will automatically fetch them, convert them into the correct format, and pass them to the template.

This allows you to focus on the layout without worrying about specific functions or return formats. As mentioned earlier, the Advanced Views plugin isn't a drag-and-drop builder, so you retain full control over the markup and CSS rules.

The plugin provides a default template that includes all selected items, and you can simply reorder or wrap fields to achieve the desired look.

2. Displaying related item details

#link copied
Some related elements may already be included in your theme, but they might lack details from your custom fields. With the Advanced Views plugin, you can easily extend them

The second use case encompasses various scenarios that involve displaying related item details on the current page. In WordPress, content can be related in numerous ways, including categories, authors, or meta fields.

With smart templates from the Advanced Views plugin, you can effortlessly display related items, whether they are taxonomies attached to the current item (page/post/CPT), information about the post author, or custom fields of another item chosen in the meta fields of the current item.

3. Querying items by custom criteria and displaying them

#link copied
Example of displaying the Relationship field using ACF Views Pro. The plugin allows the creation of custom layouts. Choose the target post and meta fields, and the plugin will automatically display them.
If you have any lists of items, querying and displaying them is a necessary part that can be simplified by Advanced Views

This use case covers examples where we need to retrieve and display items based on our own criteria. We can query posts using the same criteria mentioned above: by taxonomy, author, or meta fields. In addition to filtering options, we also have ordering options available.

Using the Advanced Views plugin, we can easily build queries and display the results. The plugin simplifies this task regardless of the query type.

Whether it's a straightforward query such as retrieving the 4 latest products in a specific category, or a more complex query like retrieving all Custom Post Type (CPT) items with a lower value in a meta field than defined in the URL argument (or in the meta of the current item), the plugin handles it efficiently.

Plugin basics

#link copied

To get a comprehensive understanding of the plugin, you can refer to the key aspects page in the plugin's documentation.

As a minimum, you should understand the meaning of the two new terms introduced by the plugin: View and Card.

  1. View
    A View is a smart template responsible for displaying content. It contains all template-related information, including a list of selected fields, the template itself, and any associated CSS/JS code.
  2. Card
    A Card is an instance that handles database queries and the layout of result items. The Card template is responsible solely for the layout of items, while the detailed appearance of each item is defined by the View chosen within the Card.

We create and manage Views and Cards using the plugin's user interface. Additionally, you can activate the file system (FS) storage option to modify the code using your preferred IDE or utilize Git for version control.

While Views and Cards define rules, they 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.

To achieve this, you can either paste the instance-related shortcode into the desired location or activate the Gutenberg block option and add the new Gutenberg block to the target place.

How to display content

#link copied

The View is responsible for displaying items, and this chapter will cover its main aspects.

With the View, we can address all the display-related use cases described earlier.

To create a new View, click on the "Views" item in the plugin's menu and then click on the "Add New" button.

Let's review a simple case to become familiar with Views. Suppose we need to make a featured section element, which has several related meta fields: title, description, link, and image. We have already added the related custom fields (using ACF), attached to the target page or Custom Post Type (CPT) item, and now we want to display them.

1. Create a View

#link copied

To achieve this, we'll add a new View. First, give it a name for navigation purposes.

View in the Advanced Views plugin
The View and Card's UI extends the default Gutenberg editor, providing a familiar but enhanced experience

2. Add target fields

#link copied

Next, let's add the fields to our View. In the Fields tab, choose your group, and then add the target fields. Besides native WordPress fields, Advanced Views supports WooCommerce Product fields and meta fields made by supported vendors out-of-the-box. Inside one View you can mix fields from different groups.

After adding fields, in our case ACF fields, press the "Publish" button.

Note: In the Fields tab, we declare fields explicitly, which is necessary for tracking relations and automatic template validation. These smart features distinguish the templates provided by Advanced Views from other template managers.

3. Amend the default template (optionally)

#link copied

Now, we may need to modify the template. We said modify, not create, because Advanced Views automatically generates the default template for us. This template includes the relevant markup for all the chosen fields and follows the BEM methodology in class naming out-of-the-box.

In some cases, the default markup may suffice, but since we're creating a new section (featured element), we need to make some modifications.

Template tab of the Advanced Views plugin
The template tab allows you to customize the markup to fit your needs. You can also use the FS storage option to edit files inside your IDE
Full screen mode in the Advanced Views plugin
Pro tip: Use the full-screen mode when working on code. It provides a distraction-free area and allows you to easily switch between all the code fields

So, we copied the default template and made the necessary modifications. Now, we can switch to the CSS & JS tab to style it.

4. Add styling rules (optionally)

#link copied

In this step, you may need to add CSS rules to achieve the desired look. It's case-dependent; in many simple cases, the built-in theme styles for your page will take care of the primary appearance.

CSS tab in the Advanced Views plugin
The CSS field supports the '#view' selector aliases and will be enqueued only on target pages automatically

Note: We no longer need to worry about enqueuing the styles on the target pages. Advanced Views will automatically print the related CSS code on the pages where the View appears. It follows a modular approach out-of-the-box, so we don't need to worry about splitting our style.css into pieces anymore.

5. Add the View to the target place

#link copied

The final step is to add the View to the target place. As mentioned earlier, this can be achieved in two ways: using a shortcode or by registering a Gutenberg block.

a) Using shortcode

#link copied

Each View has a unique shortcode, which is available in the right area. Click on the copy button and paste it into any target place, then save to apply the changes. In our case, it's the page content of the same page that contains our custom meta fields.

Shortcode for View in the Advanced Views plugin
You can paste the View shortcode into any target place

Note: The View shortcode arguments allow for managing data source and visibility. In this case, we need to load the fields from the same page where fields are stored, so we leave the arguments as is.

Make sure you've filled out the meta fields and saved the page. Now, you can visit the page to see our new section displaying data from our custom fields.

Pre-built featured section element of the Advanced Views plugin
If you think that the Featured section layout is often used, you're not alone. It's one of the pre-built components that you may import and customize rather than starting from scratch.

b) Using a custom Gutenberg block

#link copied

Another way to integrate Views into your content is by registering a custom Gutenberg block. This approach surpasses using shortcodes and offers enhanced functionality.

However, it requires the Pro version of the Advanced Views plugin and access to the Blocks feature from your data vendor, such as ACF Blocks. Compared to shortcodes, utilizing blocks presents several advantages, including improved performance and the ability to reuse the same block within a page.

We highly recommend employing this method whenever querying by field values isn't necessary, as field values are stored within the post_content, eliminating the need for additional database queries, unlike conventional custom fields.

To register a block, navigate to the Options tab and select the Blocks vendor. In our case, we'll choose ACF.

Gutenberg Block option in the Advanced Views Pro plugin
Advanced Views supports the Blocks feature of meta plugins, enabling you to easily convert a View into a Gutenberg block with just one click

Now, we need to open the target page and add the registered Gutenberg block to the page. The custom blocks are stored in your website library, so you can add them in the same way as other built-in Gutenberg blocks.

Custom Gutenberg block feature of the Advanced Views Pro plugin
The custom Gutenberg block includes all the fields you've attached to the View

As you can see, the fields we've selected in the View have become the block fields. This means they're scoped to the current block, allowing us to reuse the same block multiple times on the same page, unlike traditional meta fields.

Fill out your fields, and click the save button. Now, we can visit the page to see the result.

Pre-built featured section element of the Advanced Views plugin
If you think that the Featured section layout is often used, you're not alone. It's one of the pre-built components that you may import and customize rather than starting from scratch.

Summary of View

#link copied

We've reviewed the main principles of View based on a simple example. With this foundational knowledge, you can create and customize Views to suit your specific requirements.

With the Advanced Views plugin, you can concentrate on the layout design while the plugin handles the retrieval of fields, conversion of their formats, and passing them into the template. Customizing the auto-generated templates saves you time and prevents you from starting from scratch.

Additionally, Views have built-in template validation and track connections between fields and templates. This notifies you if a template needs attention after a Meta group update.

Views can be utilized to display various pieces of content, ranging from built-in WordPress fields to custom fields generated by meta plugins. You can explore the full list of supported data vendors here.

Regarding field types, it's important to note that the Lite version of Advanced Views supports all primary field types, including gallery and map fields.

The Pro version extends support to include Repeater fields and allows for fine-tuning the display of object fields, such as Post objects or relationships. Additionally, Pro includes a range of useful features like asset management, enabling you to transform gallery field items into Masonry layouts and more.

How to query content

#link copied

We have just reviewed the display tasks and the View component, which is responsible for that part. Now, let's move on to review the query task and the Card component, which assists with it.

The Card component enables us to query (filter) posts based on our custom criteria. It utilizes the WP_Query class under the hood but provides clear field names and descriptions, eliminating the need to search for the correct names and formats.

Let's explore the main Card settings using a simple example. Suppose we need to display the four latest articles on our website.

1. Create a new Card

#link copied

Like View, Card extends the default Gutenberg editor, offering a familiar but enhanced experience. Once we become familiar with View, Card looks the same.

Card in the Advanced Views plugin
The Basic tab contains the primary filters and sorting settings

In essence, we need to complete two primary settings: View and Post Type. First, select the View that will be used to display each item in the result, or click 'Add new View' if it hasn't been created yet. Then, we must define the Post Type that we want to query.

Other fields have default values, so we can leave them unchanged if they suit our needs. However, in our case, we need to query only the four latest articles. Therefore, we have adjusted the Maximum number and Sort settings to the desired values.

In our case, we do not need to use any other filters. Therefore, we can simply press the Publish button and switch to the Template tab.

2. Amend the default template (optionally)

#link copied

Similar to the View, the Card contains an auto-generated display template. This template primarily defines the layout of items, so in most cases, there's no need to modify the default template. In our 'latest articles' scenario, we will copy and amend the default template to add the h2 title.

Card template in the Advanced Views plugin
The Card template is responsible for the layout of items

3. Add styling rules (optionally)

#link copied

The Card, like the View, enables the addition of CSS rules to style the layout of items. Click on the CSS tab if you need to define styling rules and press Update after to save the changes.

4. Add the Card to the target place

#link copied

To add our Card to the desired location, we also need to utilize shortcodes. Copy the shortcode from the designated area on your Card and paste it into the desired location. You can employ shortcode arguments to restrict access by roles and other criteria.

Card shortcode in the Advanced Views plugin

Now we can visit the page to see the result.

It's a screenshot of the Latest articles section, one of the pre-built components

Your result element will display the items that were queried and sorted according to your filters.

While the Card styles handle the layout of items, such as arranging them in a row or column stack and determining the spacing between items, the selected View defines the fields and their appearance for each specific item.

Summary of Card

#link copied

We've discussed the core principles of Cards using a straightforward example. Armed with this foundational understanding, you can craft and tailor Cards to meet your specific needs.

The Lite version allows you to query items by post type and define their sorting. Alternatively, you can manually list posts or exclude certain ones (accessible via the Advanced tab).

The Pro version enhances functionality with Meta and Taxonomy filters, enabling you to master complex queries effortlessly. Additionally, it features Ajax pagination and slider capabilities, which are customizable to your preferences. This streamlines development while maintaining control over the process.

Furthermore, in the Pro version, you have access to a range of arguments within the UI, and you can incorporate any supported arguments from WP_Query using the Custom Data feature.

Summary

#link copied

We've explored the essential features of the Advanced Views plugin, the Smart Templates that allow us to display content in WordPress easily.

These templates consist of two primary elements: View and Card.

The View empowers you to focus on layout design while it takes care of field retrieval, format conversion, and passing them into the template. Customizing the auto-generated templates saves time and avoids starting from scratch.

In the Pro version, View's capabilities expand further, allowing you to integrate Gutenberg blocks or manage front-end assets such as Slider or Masonry libraries seamlessly.

The Card component aids in querying from the database, providing a user-friendly interface for the WordPress WP_Query class, which manages querying and sorting at the core level.

In the Pro version, Card enables effortless mastery of Meta and Taxonomy queries and facilitates tasks such as Ajax pagination and slider creation.

The Advanced Views plugin is a tool designed to expedite the development process for developers. It provides a robust foundation and handles routine aspects, allowing developers to focus on more intricate tasks.

Additionally, the plugin includes a set of best practices out of the box, ensuring the quality of the final result. It's especially beneficial when working on projects with tight deadlines, as developers can rely on the plugin to maintain high standards regardless of time constraints.

About the Author
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it