In today’s content-driven world, the quality of content displayed on your WordPress site is crucial. The Advanced Views Framework (AVF) is a specialized WordPress plugin designed to enhance content display and maximize functionality for WordPress sites. This framework simplifies high-quality development procedures and automates routine tasks, providing flexible solutions for both developers and website owners.
One of AVF’s main benefits is its flexibility, whether working with existing websites or new projects built from scratch. The plugin supports over 130 field types through five data vendors:
- WordPress
- WooCommerce
- Advanced Custom Fields (ACF) plugin
- MetaBox
- Pods
This high compatibility ensures seamless integration with various content types and data structures, allowing for customized and dynamic content presentations.
AVF includes powerful tools and adheres to modern web development best practices. These tools include Twig and Blade templates, and WebComponents, which are compatible with popular development tools like IDEs, Git, WP Interactivity API, and Tailwind CSS. These features speed up execution time and lead to the creation of fast, maintainable, and high-quality websites.
For those unfamiliar with the top three WordPress Meta Field plugins, here’s a quick comparison:
- Advanced Custom Fields (ACF): Offers a free basic version and a paid Pro version with added features like repeater fields and extensive support.
- MetaBox: Provides a free core plugin with additional paid add-ons, including more field types and repeater fields.
- Pods: Completely free, with advanced features like repeatable options and custom blocks with the Gutenberg editor. It’s less comprehensive in support compared to ACF and MetaBox.
Available Versions
AVF is available in two versions: Lite and Pro. Both share core features that simplify querying and displaying content within a WordPress site, but the Pro version includes additional advanced features and third-party integrations.
Lite
Advanced Views Lite edition can be installed from the WordPress directory, providing basic tools to improve content rendering and simplify template creation.
Pro
Advanced Views Pro edition offers advanced features such as multi-level field and query support (e.g., Repeaters) and a smart bridge to build Gutenberg blocks. It’s ideal for complex projects requiring sophisticated content management and display solutions.
How to Install
To install the Lite version, search for “Advanced Views” in the WordPress plugin repository and click “Install Now.” To get the Pro version, purchase it from the official website at wplake.org/advanced-views-pro/ and upload it through the plugin upload interface on your WordPress site.
Key Aspects
Understanding the basics of AVF helps you utilize it fully. This framework is designed for both beginners and advanced developers due to its extensive functionality. Here are its key aspects:
View
In AVF, a “View” is a template for rendering content. You can create or edit views using popular templating languages like Twig or Blade. Views define how data is configured and displayed.
- Built-in Data Binding: This will automatically transform and display your data.
- Automated Template Generation: This uses Twig or Blade engines for quality markup.
- Seamless Data Connection: Database fields can be connected to your templates to support changes and bulk validation.
- Object and Multi-level Fields Support: This handles complex and multi-level fields.
Benefits: Automatic template generation and data conversion saves even more time with automated generation and conversion.
Supported Data Vendors: Supports WordPress fields, WooCommerce, Advanced Custom Fields, and custom data.
Card
A “Card” is an entity for querying posts or other CPT items. Cards enable modular and consistently styled layouts that can be reproduced across different site sections.
- Item Layout: This is responsible for managing DB queries and the result item layouts with WP_Query.
- Extra Query Parameters: This is used for Advanced query customization.
- Modular Workflow: Helps in small modular layouts for better maintainability and reusability.
You can get familiar with all the key aspects in the official Docs.
Integration Methods
AVF supports numerous field types from popular plugins and custom fields, making data import easy. Some integration methods include:
- Shortcode: This can be inserted into any PHP to enhance readability.
- Gutenberg Block: This increases performance and reusability for expert users in the Gutenberg editor.
Examples of Usage
Here are some typical use cases for AVF:
Display ACF Gallery
The ACF Gallery field allows easy management of multiple images. You can add images from the WordPress Media Library or upload new ones.
Installation Requirements:
- Install and activate the Advanced Views framework on your WordPress site.
- Ensure the ACF (free) plugin is installed and active.
Step-by-Step Guide:
Step 1: Creating a View
- Navigate to “Advanced Views” in the WordPress admin menu.
- Provide a name for your View for easy identification.
- Click ‘Add Field’ to assign fields from a dropdown menu (e.g., “Page gallery”).
- Select ‘Image Size’ (e.g., ‘Full’). Pro users have access to Masonry and Lightbox options.
- Publish the View to generate and copy the unique shortcode.
Step 2: Pasting the Shortcode
- Paste the copied shortcode into the target page’s content where the ACF Gallery field is located.
- Use the Gutenberg editor’s “Shortcode” block if necessary, and update the post/page.
- Open the page to view the result, ensuring the attached images are displayed.
Troubleshooting:
- Confirm images are attached to the ACF Gallery field.
- Reload the page if the gallery is not visible.
- Verify the correct “Group” field is selected in the View settings if issues persist.
Additional Features:
- The Pro version offers enhanced options like Masonry layout and Lightbox for zooming images in the gallery.
Display Custom Fields on a WooCommerce Product Page
Unfortunately, neither WooCommerce nor the ACF plugin provides a built-in method to display custom field values on the front end. In this way, some manual template customization is necessary.
Step 1: Create an ACF View and Assign Your Fields
- Add a New View:
- Navigate to Advanced Views in the WordPress admin menu and click ‘Add New’.
- You will be taken to the ‘Edit ACF View’ screen.
- Configure Your View:
- Provide a title and a short description for your View to easily identify it later.
- Under the Fields section, select the field group you created earlier.
- Choose the specific field you want to display and give it a label.
- Click ‘Add Field’ and repeat until you’ve added all the necessary fields.
- Tip: Use the row handle to reorder fields as needed.
- For Repeater Fields:
- Switch to the ‘Repeater Sub Fields’ tab.
- Select your repeater field and assign a label.
- Save Your View:
- Click ‘Update’ to save your View.
- Copy the generated shortcode.
Step 2: Insert the Shortcode into Your Product Template
- Modify WooCommerce Template Files:
- Connect to your server via FTP.\
- Navigate to wp-content/plugins/woocommerce/templates/.
- Copy the single-product folder to your theme’s directory inside a new folder called woocommerce (the path should be wp-content/themes/your-theme/woocommerce/).
- Edit the Theme File:
- In the WordPress admin backend, go to Appearance > Theme File Editor.
- Select your theme from the top right dropdown.
- Navigate to woocommerce/single-product/short-description.php and open it in the editor.
- Insert the Shortcode:
- At the bottom of the file’s contents, insert the following code, replacing ID with your ACF View ID: <?php echo do_shortcode( ‘[acf_views view-id=”ID”]’ ); ?>
- View Your Product Page:
Save your changes and visit your product page to see the result.
By following these steps, you can display custom ACF fields on your WooCommerce product pages without writing extensive PHP code.
Display Custom Post Types and ACF Fields in WordPress
When you have posts, that’s fantastic. But what if you’re creating a business directory? Should each post represent a business or an article? And what if you also have a news section?
Using CPT allows us to solve the task properly. Let’s review how to display CPT items using Advanced Views on the ‘Company’ CPT example.
Step 1: Create an ACF View
- Navigate to “Advanced Views”:
In your WordPress admin dashboard, click on “Advanced Views” in the left sidebar.
Click “Add New” to create a new ACF View.
- “Configure the ACF View:”
- “Title:” Give your ACF View a descriptive name (e.g., “Company Stub”).
- “Description:” Optionally, add a short description to help you identify the View later.
- “Assign Fields:”
- In the “Fields” section, click on “Add Field”.
- From the dropdown list, select the field group and the specific fields you want to display.
- Assign a label to each field for easy identification.
Tip: Use the row handle to reorder the fields as needed.
- Save the ACF View:
- Click “Publish” to save your ACF View.
- You can edit your ACF View at any time to add or remove fields.
Step 2: Create an ACF Card
- Navigate to ACF Cards:
- Click on “ACF Cards” in the WordPress admin menu and select “Add New”.
- Configure the ACF Card:
- Title: Name your card (e.g., “Company List”).
- Assign View: Scroll down to the “View” section and select the ACF View you created earlier.
- Set Filters:
Switch to the “Filters” tab.
For “Post Type”, choose “Company” (or your custom post type name).
Switch to the “Sort” tab, select “Title”, and choose “Ascending” for the sort order.
- Save and Publish the ACF Card:
- Click “Publish” to save your ACF Card.
- Copy the generated shortcode to your clipboard.
Step 3: Create a Page to Display the List of Posts
- Add a New Page
- Go to “Pages” in the admin menu and click “Add New”.
- Name your page (e.g., “Companies”) for clarity and user-friendliness.
- Insert the Shortcode:
- If using the Gutenberg editor, add a “Shortcode” block.
- Paste the copied ACF Card shortcode into the block.
- Alternatively, you can paste the shortcode directly into the content area.
- Click “Publish” or “Save Draft.
Step 4: Add Company Posts
- Create Company Posts:
- Go to “Companies” (or your custom post type) in the admin menu.
- Add new posts as you would for blog posts, filling in the custom fields added by ACF.
Step 5: View and Style the Output
- View the Page:
- Visit the page you created with the ACF Card shortcode to see the list of company posts displayed with their custom fields.
- Style the Output:
- Go back to your ACF View and switch to the “Advanced” tab.
- Add custom CSS in the “CSS Code” field to style the output.
Step 6: Create a Responsive Layout
1 Responsive Layout Options:
- In the ACF Card item, switch to the “Layout” tab.
- Add rules for mobile and desktop screen sizes.
- Define the type of layout (e.g., Row, Column, Grid) and set the gap size and number of columns.
- Advanced Filters (Optional)
- If using Advanced Views Pro, you can add taxonomy and meta filters to refine the display of your custom post-type items.
- Use these filters to display posts based on specific criteria, such as industry categories or user roles.
Final Touches: Test the Setup
- Ensure that the custom fields display correctly on the front end.
- Adjust the CSS and layout settings as needed for a polished look.
By following these steps, you can effectively display ACF fields in WooCommerce product templates using the Advanced Views framework, all without writing extensive PHP code. Enjoy the flexibility and ease of this powerful tool!
Conclusion
The Advanced Views Framework is a valuable tool for modern WordPress development, providing flexible and optimal solutions for content presentation. By supporting a wide range of field types and data sources and integrating with popular development tools, AVF streamlines the development process and enhances WordPress site capabilities. Whether creating a new site or improving an existing one, AVF’s features and flexibility ensure a top-notch end product.