Meta Field Block – Display Custom Fields for ACF, Meta Box and More vs Website Builder by SeedProd

This single-block plugin allows you to display custom fields, shortcode as blocks in the Block Editor. It supports custom fields for posts, terms, and users. It can be nested inside a parent block that has postId and postType context, such as Query Loop, WooCommerce Product Collection, Term Query, or used as a stand-alone block. You can display any field whose value can be retrieved by the core API (get_post_meta, get_term_meta, get_user_meta) and is a string or can be converted to a string. To display the field value in the Block Editor, it has to be accessible via the REST API or have the field type set to dynamic. You can also display custom fields created by the Advanced Custom Fields or Meta Box plugin explicitly. It supports all ACF field types and Meta Box field types whose values are strings or can be converted to strings. Some other ACF complex fields such as Image, Link, Page Link, True False, Checkbox, Select, Radio, Button Group, Taxonomy, User, Post Object and Relationship field types as well as Meta Box fields such as Select, Checkbox, Radio, Image, Video, Taxonomy, User, Post field types are also supported in basic formats. This plugin also provides developer-friendly hook APIs that allow you to easily customize the output of the block, display complex data type fields, or use the block as a placeholder to display any kind of content with object_id and object_type as context parameters. An edge case where this block is really helpful is when you need to get the correct post_id in your shortcode when you use it in a Query Loop. In that case, you can set the field type as dynamic and input your shortcode in the field name. The block will display it correctly on both the front end and the editor. Alternatively, if you only want to see the preview of your shortcode in the editor, you can also use this block as a better version of the core/shortcode. To quickly learn how this block displays custom fields, watch the short guide (for MFB version 1.3.4) by Paul Charlton from WPTuts. The video focuses on the Advanced Custom Fields plugin, but you can use a similar approach to display fields from other frameworks like Meta Box. Links Website How it works & tutorials MFB PRO What is the HTML output of a custom field? The HTML output of a custom field on the front end depends on the context of the field. It uses one of these core API functions to get the field value: get_post_meta, get_term_meta, get_user_meta. What is the HTML output of ACF fields? All basic field types that return strings or can cast to strings are supported – The HTML output is from the get_field function. Link type – The HTML output is: {title} There is no rel attribute if the target is not _blank Image type – The HTML output is from the wp_get_attachment_image function. The image size is from the Preview Size setting. True / False type – The HTML output is Yes if the value is true, and No if the value is false. Below is the code snippet to change these text values: add_filter( 'meta_field_block_true_false_on_text', function ( $on_text, $field_name, $field, $post_id, $value ) { return 'Yep'; }, 10, 5 ); add_filter( 'meta_field_block_true_false_off_text', function ( $off_text, $field_name, $field, $post_id, $value ) { return 'Noop'; }, 10, 5 ); Checkbox / Select type – The HTML output is: {item_value} , {item_value} The item_value can be either value or label, depending on the return format of the field. Multiple selected values are separated by ,. Below is the code snippet to change the separator: add_filter( 'meta_field_block_acf_field_choice_item_separator', function ( $separator, $field_name, $field, $post_id, $value ) { return ' | '; }, 10, 5 ); Radio button / Button group type – The HTML output can be either value or label, depending on the return format of the field. Page link type, Post object type – The HTML output for a single-value field is: {title} For a multiple-value field is: {title} {title} Relationship type – The HTML output is: {title} {title} Taxonomy type – The HTML output is: {term_name} {term_name} User type – The HTML output for a single-value field is: {display_name} For a multiple-value field is: {display_name} {display_name} For other complex field types, you can generate a custom HTML output by using the hook: apply_filters( 'meta_field_block_get_acf_field', $field_value, $post_id, $field, $raw_value, $object_type ) Or by using the general hook: apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $object_id, $object_type ) What is the HTML output of Meta Box fields? Similar to ACF fields, all basic fields that return strings or can cast to strings using the function rwmb_get_value are supported. The HTML output of cloneable basic fields is: {item_1_value} , {item_2_value} Use the following hooks to change the tag and the separator: apply_filters( 'meta_field_block_mb_clone_field_item_separator', ', ', $field, $post_id, $field_value ) apply_filters( 'meta_field_block_mb_clone_field_item_tag', 'span', $field, $post_id, $field_value ) Single image types – The HTML output is from the wp_get_attachment_image function. The image size is from the image_size setting. Image list types (Image, Image advanced, Image upload) – The HTML output is: Checkbox / Switch type – Similar to ACF True / False type. Multi-choice types (Select, Select advanced, Button group, Autocomplete, Image select, Checkbox list) – The HTML output is: {item_value} , {item_value} To display the label instead of the value, use this hook: apply_filters( 'meta_field_block_mb_field_choice_item_display_label', false, $field_name, $field, $post_id, $value ) To change the separator, use this hook: apply_filters( 'meta_field_block_mb_field_choice_item_separator', ', ', $file_name, $field, $post_id, $value ) Radio type – The output is the field value by default. To display label or change the separator, use the same hooks as the multi-choice types. Post type – The HTML output for a single-value field is: {title} For a multiple-value field is: {title} {title} Taxonomy, Taxonomy advanced type – The HTML output for a single-value field is: {term_name} For a multiple-value field is: {term_name} {term_name} User type – Similar to ACF User type Video type – The HTML output for a single-value field is: For a multiple-value field is: To display complex field types or change the output of a field, use the hook meta_field_block_get_mb_field or the general hook meta_field_block_get_block_content. Copy & paste snippets When using the meta_field_block_get_block_content hook to customize block content, we recommend selecting dynamic as the field type. This way, both the front end and the editor will show the changes. If you are working with ACF Fields, we suggest using the meta_field_block_get_acf_field hook to modify the field content. Similarly, Meta Box users should use the meta_field_block_get_mb_field hook to modify the content. ACF snippets can also be used with Meta Box fields, but you must use the correct hook name and replace the get_field function with the rwmb_get_value function. How to change the HTML output of the block? Using the meta_field_block_get_block_content hook: add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id, $object_type ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'your_unique_field_name' === $field_name ) { $block_content = 'new content'; } return $block_content; }, 10, 5); Using the meta_field_block_get_acf_field hook for ACF Fields only: add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value, $object_type ) { $field_name = $field['name'] ?? ''; if ( 'your_unique_field_name' === $field_name ) { $block_content = 'new content'; } return $block_content; }, 10, 5); This basic snippet is very powerful. You can use it to display any fields from any posts, terms, users or setting fields. Please see the details in the below use cases. How to wrap the block with a link to the post within the Query Loop? Using the meta_field_block_get_block_content hook: add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) { $block_content = sprintf(' %2$s ', get_permalink($post_id), $block_content); } return $block_content; }, 10, 4); Using the meta_field_block_get_acf_field hook for ACF Fields only: add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) { $field_name = $field['name'] ?? ''; if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) { $block_content = sprintf(' %2$s ', get_permalink($post_id), $block_content); } return $block_content; }, 10, 4); This snippet only works with the block that has only HTML inline tags or an image. How to display an image URL field as an image tag? Using the meta_field_block_get_block_content hook: add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) { $block_content = sprintf(' ', esc_attr($block_content)); } return $block_content; }, 10, 4); Using the meta_field_block_get_acf_field hook for ACF Fields only: add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) { $field_name = $field['name'] ?? ''; if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) { $block_content = sprintf(' ', esc_attr($block_content)); } return $block_content; }, 10, 4); How to display multiple meta fields in a block? For example, we need to display the full name of a user from two meta fields first_name and last_name. add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'full_name' === $field_name ) { $first_name = get_post_meta( $post_id, 'first_name', true ); $last_name = get_post_meta( $post_id, 'last_name', true ); // If the meta fields are ACF Fields. The code will be: // $first_name = get_field( 'first_name', $post_id ); // $last_name = get_field( 'last_name', $post_id ); $block_content = trim("$first_name $last_name"); } return $block_content; }, 10, 4); Choose the field type as dynamic and input the field name as full_name. How to display a setting field? For example, we need to display a setting field named footer_credit on the footer template part of the site. add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; // Replace `footer_credit` with your unique name. if ( 'footer_credit' === $field_name ) { $block_content = get_option( 'footer_credit', '' ); // If the field is an ACF Field. The code will be: // $block_content = get_field( 'footer_credit', 'option' ); } return $block_content; }, 10, 4); How to use MFB as a placeholder to display any kind of content? SAVE YOUR TIME WITH MFB PRO To display simple data type fields for posts, terms, and users, you only need the free version of MFB. MFB Pro can save you 90% of development time when working with ACF, or Meta Box complex fields. It achieves this by transforming your ACF complex field types into container blocks, which work similarly to core container blocks. This eliminates the need for creating custom blocks or writing custom code for displaying complex fields. Below are some video tutorials that demonstrate how MFB Pro can help you display complex fields: How to build a post template to display dynamic data without coding How to display ACF Repeater fields as a list, grid, or carousel How to display ACF Gallery fields as a grid, masonry, or carousel The main features of MFB PRO are: Display settings fields. Display ACF advanced layout fields: Group, Repeater, and Flexible content. Display ACF Repeater fields in a carousel layout, which is useful for displaying banner sliders. Display ACF Repeater fields in an accordion layout, which is useful for displaying FAQ pages. Display ACF Relationship and Post Object fields as a Query Loop. Display the ACF Image field as a core image block. Display the ACF Gallery field as an image gallery using grid, masonry, or carousel layouts. Display the ACF File field as a video block, an image block, a button block, or a link. Display the ACF Link field as a button block. Display the ACF URL field as an image block, a button block, a link, a video block, or an embed block. Display the ACF Email field as a button block or a link. Display the ACF oEmbed field as an embed block. Display the ACF Google Map field. All Meta Box field types that correspond to ACF field types support the same Pro features as ACF. Display the Meta Box Group field, similar to the ACF Group field. Display the Meta Box Cloneable Group field as a repeater block, similar to the ACF Repeater field. Supports row, stack, grid or carousel layouts. Display the Meta Box Post field as a Query Loop. Display the Meta Box single image field as an image block, and the image list field as an image gallery using grid, masonry, or carousel layouts. Display the Meta Box File single input field as a video block, an image block, or a button. Display a group field as a details block, and display a repeater or cloned group as an accordion. Set a single image sub-field (ACF Image or Meta Box Image) as the background image of a group field. Display custom fields from a specific post, term or user. Display a taxonomy field as a Terms Query block. Display a repeater or cloned group field as an core/accordion block. Since version 1.5.3, MFB Pro allows you to bind custom fields (ACF, Meta Box, core meta fields, and core settings) directly to core blocks (Heading, Paragraph, Button, Image, Video, Embed, and the background image/video/embed of Cover block). For more complex field types (Group, Repeater, Flexible Content), you can use MFB Pro to display the group as a container. Nested fields can then be displayed using the Sub Field Block, as before, or bound directly to core blocks. If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it. Please check out my other plugins if you’re interested: Content Blocks Builder – Build custom layouts and blocks visually in the Block Editor without needing a code editor, using only core blocks and native Gutenberg features. SVG Block – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library. Icon separator – A tiny block just like the core/separator block but with the ability to add an icon. Breadcrumb Block – A simple breadcrumb …

SeedProd – Drag & Drop WordPress Website Builder, Landing Page Builder, Coming Soon Page & Maintenance Mode SeedProd was originally created in 2011 and allowed you to create a Coming Soon Page or a Maintenance Mode Page. You could work on your website in private while visitors see a “Coming Soon” or “Maintenance Mode” page. It still does this and really well! But People loved SeedProd’s easy-to-use page builder so much and wanted to create their entire website with it. So, due to popular demand, you can do just that! Yes, you can now use SeedProd as a WordPress Website Builder. This means you can build every part of your WordPress custom theme. WordPress Headers, Footers, Single Page Templates, Archives, Global Parts, WooCommerce Product Pages, WooCommerce Carts, and more. The best part is SeedProd is a No-Code Website Builder. No coding knowledge or experience is needed. Full Site Editing made easy. In addition, SeedProd is still the best Landing Page Builder. Create a variety of landing pages that include but are not limited to: Sales Pages, Coming Soon Pages, Maintenance Mode Pages, 404 Pages, Login Pages, Webinar Pages, and Thank You Pages. Sites and Pages built with SeedProd’s Drag and Drop Page builder are lightweight, super fast, and it’s so easy to use anyone can create a WordPress Website or Landing Page. SeedProd Pro This plugin is the lite version of the SeedProd Website Builder and Landing Page plugin that comes with all the features you will ever need to create great-looking landing pages, coming soon pages, and maintenance modes pages within your WordPress website with no code. Click here to purchase SeedProd, the best premium WordPress Website Builder and Landing Page plugin now! Watch John Turner, the Co-Founder of SeedProd, build the SeedProd.com website with the SeedProd WordPress Website Builder Using SeedProd as a WordPress Website Builder SeedProd is a WordPress Website Theme Builder, which allows you to create custom theme and template parts like: Headers, Footers, Front Pages, Content Pages, Blog Posts, Blog Pages, Archives, Search Results, Category Pages, Tag Pages, Sidebars, WooCommerce Product Pages. WooCommerce Checkout Pages, WooCommerce Cart Pages, WooCommerce Shop Pages all using our no-code Theme Builder. Typically you would need a traditional WordPress theme to accomplish this. With SeedProd no theme is needed. No more conflicts between your theme and page builder. SeedProd is a complete turnkey solution that gets you a website fast. Themes created with SeedProd can use any builder. Of course, SeedProd is the best page builder in our opinion, but you can use: Gutenberg Page Builder, Elementor Page Builder, Beaver Builder Page Builder, Divi Page Builder, Visual Composer Page Builder, Brizy Page Builder, Thrive Architect Page Builder, Beaver Builder, and the list goes on… SeedProd also has a growing library of 200+ beautiful pre-built WordPress themes, templates, blocks, sections and complete websites to help you get started. Did I mention, no coding is required 🙂 Creating WordPress Landing Pages with SeedProd What are landing pages? A landing page is a standalone web page that a person “lands” on after clicking through from an email, ad, or other digital location. Most of the time, these landing pages have a different design from the rest of your site and do not show your website’s standard header and footer. Landing Pages have a particular purpose and desired user action; therefore, you want them to be distraction-free as possible. With SeedProd, it is super easy to create high-converting landing pages for any purpose, that are entirely separate from your website’s design. You can use our Domain Mapping feature to put landings page on their own domain, our Dynamic Text feature to add personalization, or our WooCommerce Blocks to build one-off product pages. These are just a few of the many powerful features SeedProd provides. Building Coming Soon Pages and Maintenance Mode Pages with SeedProd SeedProd allows you to build a coming soon or maintenance mode page that will hide your site from visitors and search engines like Google. You can work on your website in private. When the website uses coming soon mode, the page will be indexed by Google as long as your site is not set to be private in WordPress. In Maintenance Mode, we return a 503 header status that lets Google know your site is down for maintenance. Both of these modes are essential for any WordPress Website to have. The Free Version of SeedProd comes with a variety of Coming Soon Page and Maintenance Mode templates. Full Page Builder Feature List: WordPress Theme Builder – Create Headers, Footers, Pages, Posts, Archives, Sidebars, WooCommerce Pages or any part of a WordPress theme with our no-code Theme Builder. Fast Drag & Drop Page Builder – Our page builder is super fast, lightweight and responsive. WordPress Themes created with SeedProd work with any page builder. Landing Pages work with any WordPress Theme. 200+ Professionally Designed WordPress Themes, Landing Page Templates & Layout Sections 80+ Pro Page Blocks – We have created a variety of blocks to display static and dynamic content. Landing Page Templates – Sale Pages, Coming Soon Pages, Maintenance Mode Pages, Webinar Pages, Giveaway Pages, Thank You Pages, 404 Pages, and Login Pages Responsive and Mobile Ready – Pages created with SeedProd look great on any device. Premium Integrations – Collect emails with your favorite 3rd party email marketing service providers, including MailChimp, ActiveCampaign, ConvertKit, Constant Contact, and more… Subscriber Management – Track every subscriber with or without a 3rd party email provider. Stock Images – Get In-Plugin Access to over 2 Million Stock Images. Searchable, Resized, and Optimized for the Web. Live Previews – We allow you to see live previews of the page while it’s in any state, draft, live, or just testing. Layout Navigation – Use our layout navigation, which is a mini-map of your page, to easily rearrange sections, rows, columns, blocks, or access your page settings Revision History, Undo & Redo – With one click reverts, you can go back to any previously saved point on your page and even see who made those particular changes. Draft Mode – Work on your page in private without revealing its construction to the public. Mobile Device Preview – See what your pages will look like on desktop and mobile devices before you go live. Bloat Free Code – The code our builder produces, unlike other builders, is bloat-free and minimal to load your page quickly. Color Schemes – Choose from over 20 built-in color schemes or create your own custom color palette to use throughout your landing page design. Font Combinations – SeedProd integrates with Google Fonts to provide unlimited font combinations. Custom CSS – Need to tweak the style of an element on your page? No problem! Domain Mapping – Domain Mapping lets you create landing pages and point them to any domain name instead of your main website domain. Dynamic Text – Dynamic Text lets you dynamically insert dates or values from a query parameter to personalize your landing pages. Custom Scripts – Need to add a tracking script or widget from another website? Use the built-in header and footer scripts area to implement more technical tweaks. Spam Protection – Protect your landing pages from spam, bots, and fraudulent submissions with Google ReCaptcha WordPress Blocks: Standard Blocks – Headline, Text, List, Button, Image, Video, Divider, Spacer, Column Advanced Blocks – Giveaway, Contact Form, Optin Form, Countdown, Social Profiles, Social Sharing, Animated Headlines, Progress Bar, Icon, Testimonials, Image Carousel, Image Box, Icon Box, Nav Menu, Pricing Tables, Page Anchor, Star Rating, Accordion, Shortcode, Login Form, Google Maps, Seach Form, Custom HTML Social Media Blocks – Facebook Page, Facebook Embed, Facebook Like, Facebook Comments, Twitter Embed Tweet, Twitter Embed Timeline, Twitter Tweet Button, Twitter Follow Button WooCommerce Blocks – Add To Cart, Checkout, Cart, Product Grid, Recent Products, Sale Products, Best Selling Products, Featured Products, Top Rated Products, Menu Cart, Product Title, Product Featured Image, Product Price, Short Description, Additional Information, Products Related, Upsells, Product Rating, Product Stock, Archive Products, Product Data Tabs Theme Template Tag Blocks: Posts, Post Title, Post Content, Post Excerpt, Featured Image, Author Box, Post Comments, Post Navigation: Post Info, Archive Title, Site Logo, Global Template Parts WordPress Email Marketing Integrations: ActiveCampaign AWeber Campaign Monitor Constant Contact ConvertKit Drip Facebook GetResponse Google Recaptcha iContact Mad Mimi Mailchimp MailerLite Sendy Sendinblue Twitter YouTube Zapier After reading this feature list, you can probably imagine why SeedProd is the best Drag & Drop WordPress Website Builder and Landing Page Builder in the market. Give SeedProd a try. Want to unlock more blocks and page builder features? Upgrade to SeedProd Pro. Credits This plugin is created by John Turner and Syed Balkhi. Branding Guideline SeedProd® is a registered trademark of SeedProd LLC. When writing about the Coming Soon Page, Maintenance Mode, Landing Pages & WordPress Website Builder plugin by SeedProd, please use the following format. SeedProd (correct) Seedprod (incorrect) Seed Prod (incorrect) seedprod (incorrect) What’s Next If you like our WordPress Website Builder and Landing Page Builder plugin, then consider checking out our other projects: OptinMonster – Get More Email Subscribers with the most popular conversion optimization plugin for WordPress. WPForms – #1 drag & drop online form builder for WordPress. MonsterInsights – See the Stats that Matter and Grow Your Business with Confidence. Best Google Analytics Plugin for WordPress. WP Mail SMTP – Improve email deliverability for your contact form with the most popular SMTP plugin for WordPress. RafflePress – Best WordPress giveaway and contest plugin. Smash Balloon – #1 social feeds plugin for WordPress. SearchWP – Advanced WordPress search plugin. PushEngage – Best web push notification plugin. TrustPulse – Social Proof Notification to Boost Conversions. All In One SEO – Best WordPress SEO plugin to help you improve your search engine rankings. Easy Digital Downloads – From eBooks, to WordPress plugins, to PDF files and more, we make selling digital products a breeze. AffiliateWP – An easy-to-use, reliable WordPress plugin that gives you the affiliate marketing tools you need to grow your business and make more money. WP Simple Pay – Start accepting one-time and recurring payments on your WordPress site without setting up a shopping cart. No code required. Sugar Calendar – Simple, light-weight, and provide just the major features you need for event management. Visit WPBeginner to learn from our WordPress Tutorials and find out about other best WordPress plugins.