Meta Box plugin

https://github.com/wpmetabox/docsv2
Admin
This repository contains the documentation for Meta Box, built using Docusaurus 2, a modern static...
Tokens:519,770
Snippets:4,740
Trust Score:7.6
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Meta Box Free Extensions with Composer

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/composer.md

This snippet demonstrates how to install Meta Box and its free extensions using Composer. It shows commands for installing the core Meta Box plugin, the MB Rest API extension, and the Meta Box Lite package which includes all free extensions.

```bash
composer require wpmetabox/meta-box
composer require wpmetabox/mb-rest-api
composer require wpmetabox/meta-box-lite
```

--------------------------------

### Install Premium Meta Box Extensions with Composer

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/composer.md

This snippet shows how to install premium Meta Box extensions after configuring your `composer.json` with the premium repository. It uses `dev-master` as the version, indicating the latest development version.

```bash
composer require meta-box/mb-settings-page:dev-master
composer require meta-box/meta-box-group:dev-master
```

--------------------------------

### Block Icon Examples - Meta Box PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/03-mb-blocks.md

Demonstrates different ways to specify an icon for a Gutenberg block when registering it with PHP. Includes examples for Dashicons, FontAwesome, custom SVG, and advanced configuration with colors.

```php
// Specifying a dashicon for the block
'icon' => 'book-alt',

// FontAwesome 5 icon
'icon' => 'fas fa-user',

// Specifying a custom svg for the block
'icon' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>',

'icon' => [
    // Specifying a background color to appear with the icon e.g.: in the inserter.
    'background' => '#7e70af',
    // Specifying a color for the icon (optional: if not set, a readable color will be automatically defined)
    'foreground' => '#fff',
    // Specifying a dashicon for the block
    'src' => 'book-alt',
]
```

--------------------------------

### Get Settings Page Data (cURL)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/17-mb-rest-api.md

Fetches settings page data using a GET request to the '/meta-box/v1/settings-page' endpoint. Requires the 'id' parameter and proper user capabilities. Authentication is also necessary.

```bash
curl --request GET \
	--url 'https://domain.com/wp-json/meta-box/v1/settings-page?id=website-settings' \
	--user 'USERNAME:PASSWORD'
```

--------------------------------

### Get Text Field Value - PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/functions/01-rwmb-meta.md

Retrieves the value of a simple text field. This is a basic usage example demonstrating how to fetch and display a text field's content.

```php
<p>
    <strong>Location:</strong> <?= rwmb_meta( 'location' ) ?>
</p>
```

--------------------------------

### Get Color Field Value (PHP)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/fields/color.md

This example shows how to retrieve the value of a color field in a PHP template. The retrieved hex value can be directly applied to CSS properties like background-color.

```php
<?php $value = rwmb_meta( 'my_field_id' ) ?>
<div style="background-color: <?= $value ?>">
    <h2>My section title</h2>
    <p>My section content</p>
</div>
```

--------------------------------

### Get All Dates Between Two Dates

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/build-hotel-booking-website-p3-frontend.md

This utility function generates an array of all dates between a specified start date and end date, inclusive. It is useful for date range calculations and validation in booking systems. The dates are returned in 'YYYY-MM-DD' format.

```php
function get_dates_between( $start_date, $end_date ) {
    $dates = array();
    $current = strtotime( $start_date );
    $end     = strtotime( $end_date );

    while ( $current <= $end ) {
        $dates[] = date( 'Y-m-d', $current );
        $current = strtotime( '+1 day', $current );
    }

    return $dates;
}
```

--------------------------------

### Example PHP Render Callback Function

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/03-mb-blocks.md

A sample PHP function demonstrating how to use block attributes, such as custom class names and alignment, to render HTML for a hero block.

```php
<?php
function my_hero_callback( $attributes ) {
	// Fields's data.
	if ( empty( $attributes['data'] ) ) {
		return;
	}

	// Custom CSS class name.
	$class = 'hero ' . ( $attributes['className'] ?? '' );
	if ( ! empty( $attributes['align'] ) ) {
		$class .= " align{$attributes['align']}";
	}
	?>
	<div class="<?= $class ?>" style="background-color: <?= $attributes['background_color'] ?>">
		<img class="hero__image" src="<?= $attributes['image']['full_url'] ?>">

		<div class="hero__body">
			<h2><?= $attributes[ 'title' ] ?></h2>
			<div class="hero__content"><?= $attributes[ 'content' ] ?></div>
		</div>
	</div>
	<?php
}
?>
```

--------------------------------

### Querying Posts with MB Views

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/create-download-preview-buttons-mb-views.md

This code snippet uses MB Views to query posts of the 'ebook' post type. It sets the `posts_per_page` argument to -1 to retrieve all posts. The `mb.get_posts` function is utilized to fetch the posts, which are then iterated over using a for loop. This is a fundamental step for displaying dynamic content on a page.

```twig
{% set args = { post_type: 'ebook', posts_per_page: -1 } %}
{% set posts = mb.get_posts( args ) %}
{% for post in posts %}

{% endfor %}
```

--------------------------------

### Get Image Info from Group Sub-fields - PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/12-meta-box-group.md

This PHP code demonstrates how to retrieve and process image attachment IDs stored within a group sub-field. It uses `RWMB_Image_Field::file_info` to get image details, allowing for dynamic display of images associated with group entries. This example assumes a group field named 'group_id' with an 'image_key' sub-field for image IDs.

```php
$group = rwmb_meta( 'group_id' );
$image_ids = $group['image_key'] ?? [];
foreach ( $image_ids as $id ) {
    $image = RWMB_Image_Field::file_info( $id, ['size' => 'thumbnail'] );
    echo '<img src="' . $image['url'] . '">';
}
```

--------------------------------

### Get Selected User Object - PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/fields/user.md

This example demonstrates how to fetch the complete user object from WordPress using the user ID obtained from a Meta Box field. It first retrieves the user ID using `rwmb_meta` and then uses the WordPress `get_userdata` function to get all data associated with that user. The `print_r` function is used to display all properties of the user object.

```php
<?php $user_id = rwmb_meta( 'my_field_id' ); ?>
<?php $user = get_userdata( $user_id ); ?>
<pre>
    <!-- Show all data from the selected user -->
    <?php print_r( $user ); ?>
</pre>
```

--------------------------------

### PHP: Display Cloneable Number Field Values

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/fields/number.md

Provides an example of how to loop through and display multiple values from a cloneable number field. It uses `rwmb_meta` to get all values and then iterates through the array.

```php
<?php $values = rwmb_meta( 'my_field_id' ) ?>
<?php foreach ( $values as $value ) : ?>
    <p><?= $value ?></p>
<?php endforeach ?>
```

--------------------------------

### Hook into Settings Page Load

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/19-mb-settings-page.md

Shows how to hook into the 'mb_settings_page_load' action to perform custom actions after a settings page is loaded and data is saved. The example uses a priority of 20 to execute after default saving actions.

```php
add_action( 'mb_settings_page_load', function ( $args ) {
    if ( $args['id'] === 'YOUR SETTINGS PAGE ID' ) {
        // Do something
    }
}, 20 );
```

--------------------------------

### Example: Nested Collapsible Groups in PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/12-meta-box-group.md

Provides a complete example of setting up nested collapsible groups using the metabox library. This includes defining a main group with 'collapsible' enabled and 'group_title' configured, which in turn contains a nested group with its own settings. The 'rwmb_meta_boxes' filter is used to register the meta box.

```php
add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = [
        'title'  => 'Company Branches',
        'fields' => [
            [
                'id'          => 'g1',
                'name'        => 'Branches',
                'type'        => 'group',
                'clone'       => true,
                'collapsible' => true,
                'group_title' => '{name}', // ID of the subfield

                'fields' => [
                    [
                        'name' => 'Name',
                        'id'   => 'name',
                    ],
                    [
                        'name' => 'Address',
                        'id'   => 'address',
                    ],
                    [
                        'id'          => 'contacts',
                        'type'        => 'group',
                        'clone'       => true,
                        'collapsible' => true,
                        'group_title' => '{person}',
                        'fields'      => [
                            [
                                'id'   => 'person',
                                'name' => 'Person',
                            ],
                            [
                                'id'   => 'phone',
                                'name' => 'Phone',
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ];

    return $meta_boxes;
} );
```

--------------------------------

### JavaScript: Get Current Time

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/realtime-opening-status-automatically.md

This JavaScript line captures the current hour and minute and formats them as a string (e.g., '11.30'). This 'now' variable is used for comparing against the start and end times of the restaurant's operating hours. It relies on the Date object.

```javascript
var now = date.getHours() + "." + date.getMinutes();
```

--------------------------------

### Initialize and Sync Slick Sliders and Handle Product Variations (JavaScript)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/display-product-variations-mb-views.md

Initializes two Slick sliders for product images (main display and thumbnail navigation) and synchronizes their behavior. It also handles click events for color selection, updating active states and displaying corresponding product information. Finally, it refreshes the sliders to ensure correct rendering after changes. Dependencies: jQuery and Slick Carousel library.

```javascript
jQuery(document).ready(function ($) {
    $('.slider-single').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        adaptiveHeight: false,
        infinite: false,
        useTransform: true,
        speed: 400,
        cssEase: 'cubic-bezier(0.77, 0, 0.18, 1)',

    });

    $('.slider-nav')
        .on('init', function (event, slick) {
            $('.slider-nav .slick-slide.slick-current').addClass('is-active');
        })
        .slick({
            slidesToShow: 4,
            slidesToScroll: 4,
            dots: false,
            focusOnSelect: false,
            infinite: false,
            responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 5,
                }
            }, { 
                breakpoint: 640,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 4,
                }
            }, { 
                breakpoint: 420,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                }
            }]
        });

    $('.slider-single').on('afterChange', function (event, slick, currentSlide) {
        $('.slider-nav').slick('slickGoTo', currentSlide);
        var currrentNavSlideElem = '.slider-nav .slick-slide[data-slick-index="' + currentSlide + '"]';
        $('.slider-nav .slick-slide.is-active').removeClass('is-active');
        $(currrentNavSlideElem).addClass('is-active');
    });

    $('.slider-nav').on('click', '.slick-slide', function (event) {
        event.preventDefault();
        var goToSingleSlide = $(this).data('slick-index');

        $('.slider-single').slick('slickGoTo', goToSingleSlide);
    });
    jQuery(".grouped-product .color-contain-group .color-group .color-name a").click(function (e) {
jQuery(".color-contain-group .color-group .color-name").removeClass("active");
jQuery(this).show();
jQuery(this).parent().addClass("active");
jQuery("div[data-id]").removeClass("active");
jQuery("div[data-id='" + jQuery(this).attr("href").replace("#", "") + "']").addClass("active");
jQuery('.slider-single').slick('refresh');
jQuery('.slider-nav').slick('refresh');
e.preventDefault();
    });

    jQuery(".size-contain-group .size-group .info .list-size a").click(function (e) {
        e.preventDefault();
    });

    jQuery('.size-contain-group .size-group .info .list-size .size-name').click(function(){
        jQuery(this).addClass('active');
        jQuery('.size-contain-group .size-group .info .list-size .size-name').not(this).removeClass('active')
    })
})
```

--------------------------------

### Get Term Meta Value - PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/functions/01-rwmb-meta.md

Retrieves a meta field value associated with a specific term ID. This example shows how to fetch a 'color' meta value for a term and use it to style an HTML element.

```php
<?php $color = rwmb_meta( 'color', ['object_type' => 'term'], 15 ) ?>

<div class="featured-section" style="background-color: <?= $color ?>">
    <h2>Featured section</h2>
</div>
```

--------------------------------

### Fetch and Loop Through Posts in Meta Box Views

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/show-featured-restaurants-mb-views.md

This snippet demonstrates how to query posts of a specific post type ('restaurant') with unlimited posts per page and loop through them using Meta Box Views templating. It sets up the arguments for the post query and then iterates over the retrieved posts.

```Meta Box Views Templating
{% set args = { post_type: 'restaurant', posts_per_page: -1 } %}
{% set posts = mb.get_posts( args ) %}
	{% for post in posts %}
	{% endfor %}
```

--------------------------------

### PHP: Setup Google Maps and Address Fields

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/fields/map.md

Example PHP code to define a text field for the address and a Google Maps field. The 'address_field' setting links the map to the text input for autocomplete.

```php
// Address field
[
    'id'   => 'my_address',
    'name' => 'Address',
    'type' => 'text',
],
// Map field
[
    'id'            => 'map',
    'name'          => 'Location',
    'type'          => 'map',
    'std'           => '-6.233406,-35.049906,15',
    'address_field' => 'my_address',
    'api_key'       => 'XXXXXXXXX',
]
```

--------------------------------

### Integrate Slick Slider with MB Views

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/display-images-as-gallery.md

This snippet demonstrates integrating the Slick Slider library into a Meta Box Views template for creating a slideshow gallery. It includes adding necessary HTML structure with specific classes for Slick Slider initialization and configuring the slider's behavior via JavaScript. Ensure Slick Slider's CSS and JS files are correctly enqueued.

```php
<!-- In the HTML tab of your MB Views template -->
<div class="your-gallery-class">
    <?php
    $images = rwmb_meta( 'image_gallery', ['size' => 'large'] );
    if ( $images ) {
        foreach ( $images as $image ) {
            echo '<div><img src="' . esc_url( $image['url'] ) . '" alt="' . esc_attr( $image['alt'] ) . '"></div>';
        }
    }
    ?>
</div>

<!-- In the CSS tab of your MB Views template -->
<style>
.your-gallery-class img {
    width: 100%; /* Example styling */
    height: auto;
}
/* Add Slick Slider specific CSS here or link to its stylesheet */
</style>

<!-- In the JavaScript tab of your MB Views template -->
<script>
jQuery(document).ready(function($){
    $('.your-gallery-class').slick({
        // Slick Slider options here
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true
    });
});
</script>

```

--------------------------------

### Get Radio Field Value from Specific Post - PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/functions/03-rwmb-get-value.md

Retrieves the value of a radio field from a specific post (ID 123) using `rwmb_get_value`. The example demonstrates conditional logic based on the retrieved field value.

```php
<?php
$layout = rwmb_get_value( 'layout', '', 123 );

if ( $layout === 'content-sidebar' ) {
    get_template_part( 'main-content' );
    get_template_part( 'sidebar' );
} elseif ( $layout === 'full-width' ) {
    get_template_part( 'main-content' );
}
```

--------------------------------

### Get Text Field Value - PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/functions/03-rwmb-get-value.md

Retrieves the value of a text field using `rwmb_get_value`. This is a basic usage example, assuming the field ID is 'location' and no extra arguments or object ID are needed, defaulting to the current post.

```php
<p>
    <strong>Location:</strong> <?= rwmb_get_value( 'location' ) ?>
</p>
```

--------------------------------

### Initialize Block Scripts for Frontend and Editor (JavaScript)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/03-mb-blocks.md

A robust JavaScript pattern for blocks that require initialization. It defines an `init` function for common tasks and uses `$( document ).ready()` for frontend execution and `$( document ).on( 'mb_blocks_preview/hero-area', init )` for editor preview loading. jQuery is available as a dependency.

```javascript
( function( $ ) {
    function init() {
        // Do something.
    }

    // Run when a document ready on the front end.
    $( document ).ready( init );

    // Run when a block preview is done loading.
    $( document ).on( 'mb_blocks_preview/hero-area', init );
} )( jQuery );
```

--------------------------------

### Use PHP Functions in Gutenberg Blocks (MB Builder)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/04-meta-box-builder.md

Demonstrates how to integrate PHP and WordPress functions within Gutenberg block templates using MB Builder's `mb.function()` syntax. This allows dynamic data retrieval and display within blocks. It requires the MB Builder plugin.

```twig
{% set post = mb.get_post( post_id ) %}
{{ post.post_title }}
```

```twig
{% set site_title = mb.get_bloginfo( 'name' ) %}
{{ site_title }}
```

--------------------------------

### Displaying Group Sub-fields - PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/functions/05-rwmb-get-field-settings.md

This example demonstrates how to iterate through the sub-fields of a non-cloneable group field. It uses rwmb_get_field_settings to get group settings and rwmb_meta to retrieve the group's values, then displays each sub-field's name and value.

```php
<?php
$group_id       = 'my_group';
$group_settings = rwmb_get_field_settings( $group_id );
$group          = rwmb_meta( $group_id );

for ( $i = 0; $i < count( $group ); $i++) {
    $field = $group_settings['fields'][$i];
    ?>
    <div class="sub-field"><?= $field['name'] ?>: <?= $group[ $field['id'] ] ?></div>
    <?php
}
?>
```

--------------------------------

### Dynamic Banner Styling with Background Image (PHP)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/create-dynamic-banners.md

Demonstrates how to dynamically apply styles to a banner, specifically setting the background image using retrieved data. The `$image_attributes[0]` variable holds the URL of the background image.

```php
background-image: url(' .  $image_attributes[0]  . ' ).
```

--------------------------------

### Get Event Posts Using MB Views (Twig)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/show-event-on-calendar-mb-views.md

This code snippet demonstrates how to retrieve all posts of the 'event' post type using the mb.get_posts() function within an MB Views template. It sets up arguments to fetch posts and then iterates through them. Ensure MB Views is installed and activated.

```twig
{% set args = { post_type: 'event', posts_per_page: -1} %}
{% set posts = mb.get_posts( args ) %}
{% for post in posts %}

{% endfor %}
```

--------------------------------

### Color Field Settings Example (PHP)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/fields/color.md

This snippet demonstrates how to define the settings for a color field using PHP. It includes options for alpha channel selection and JavaScript color picker options, such as predefined palettes.

```php
[
    'name'          => 'Color picker',
    'id'            => 'field_id',
    'type'          => 'color',
    'alpha_channel' => true,
    'js_options'    => [
        'palettes' => ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f'],
    ],
]
```

--------------------------------

### Get Custom Fields for Terms using PHP

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/functions/06-rwmb-get-object-fields.md

Fetches custom fields associated with a specific term ID or taxonomy slug. This functionality requires the 'MB Term Meta' extension to be installed and active. It allows for the management of metadata on a per-term basis, enhancing content organization.

```php
// For terms, requires MB Term Meta extension
$fields = rwmb_get_object_fields( 123, 'term' ); // Get by term ID, or
$fields = rwmb_get_object_fields( 'your_taxonomy_slug', 'term' ); // Get by taxonomy slug
```

--------------------------------

### Retrieve post data with custom fields using JavaScript Fetch API

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/17-mb-rest-api.md

This JavaScript code example shows how to retrieve post data, including Meta Box custom fields, using the Fetch API. It makes a GET request to the WordPress REST API endpoint for a specific post and logs the JSON response.

```javascript
const request = await fetch( 'https://domain.com/wp-json/wp/v2/event/5837' );
const response = await request.json();
console.log( response );
```

--------------------------------

### Single Project Post Template Content (PHP)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/bundle-meta-box-into-another-plugin.md

This is the content for the 'project-template.php' file, responsible for displaying the basic structure of a single project post. It includes the header, a div for content with the post title and permalink, and the footer. It also demonstrates retrieving and displaying the date.

```php
<?php get_header(); ?>
<div class="content">
    <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    <p><?= get_the_date('d.m.Y'); ?></p>
</div>
<?php get_footer(); ?>
```

--------------------------------

### Handle Start Date Change for Filtering Posts

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/filter-posts-by-date-picker-field.md

This script handles changes to the start date input. It clears the specific date field, sets the minimum date for the end date input to the selected start date, and then applies the filter. If the start date is cleared, the end date's minimum restriction is removed.

```javascript
$from.on('change', function () {
    $spec.val('');

    if (this.value) {
        $to.attr('min', this.value);
    } else {
        $to.removeAttr('min');
    }

    applyFilter();
});
```

--------------------------------

### Displaying Portfolio Terms Information

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/tutorials/create-taxonomy-thumbnails-featured-images-mb-views.md

This snippet demonstrates how to display the name and description of a portfolio term. It assumes you have a 'portfolio' object available in your template context.

```html
{{ portfolio.name }}
{{ portfolio.description }}
```

--------------------------------

### Check if Field Value Starts With a String (PHP)

Source: https://github.com/wpmetabox/docsv2/blob/master/docs/extensions/06-meta-box-conditional-logic.md

The 'starts with' operator determines if a field's string value begins with a specified prefix. This is useful for partial string matching, like filtering brands that start with 'App'.

```php
'visible' => [ 'brand', 'starts with', 'App' ]
```
Tokens:
Raw