README.md

• https://wordpress.org/plugins/meta-box/
• https://wordpress.org/plugins/advanced-custom-fields/
• https://wordpress.org/plugins/custom-field-suite/

meta-box-example.php

<?php
/*
Plugin Name:  Meta Box - Example
*/

// https://docs.metabox.io/fields/color/
add_filter( 'rwmb_meta_boxes', 'prefix_register_meta_boxes' );
function prefix_register_meta_boxes( $meta_boxes ) {
    $meta_boxes[] = array(
        // https://docs.metabox.io/extensions/meta-box-tabs/
        'tabs'      => array(
            'contact' => 'Contact',
            'note' => 'Note',
        ),

        'title'      => 'Meta Box',
        'post_types' => 'post',
        'context'    => 'normal',
        'priority'   => 'high',
        'fields' => array(
            array(
                'name'  => 'Full name',
                'desc'  => 'Format: {First Name} {Last Name}',
                'id'    => 'fname',
                'type'  => 'text',
                'clone' => true, # https://docs.metabox.io/cloning-fields/
                'tab'   => 'contact',
                'columns' => 4,

            ),
            array(
                'name'          => 'Color picker',
                'id'            => 'fcolor',
                'type'          => 'color',
                // Add alpha channel?
                'alpha_channel' => true,
                'js_options'    => array(
                    'palettes' => array( '#125', '#459', '#78b', '#ab0', '#de3', '#f0f' )
                ),
                'tab'   => 'note',

            ),
            array(
                'id'               => 'image',
                'name'             => 'Image Advanced',
                'type'             => 'image_advanced',
                'force_delete'     => false,
                'max_file_uploads' => 2,
                'max_status'       => 'false',
                'image_size'       => 'thumbnail',
                'tab'              => 'note'
            ),
            
        )
    );
    // Add more meta boxes if you want
    // $meta_boxes[] = ...

    return $meta_boxes;
}

single.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			/* Start the Loop */
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/post/content', get_post_format() );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

				the_post_navigation( array(
					'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
					'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
				) );

			endwhile; // End of the loop.
			?>
			<style>
			.swatch{
				margin-top:8px;display:inline-block;height:20px;width:20px;
			}
			.attr-list {
				padding:0 0 0 20px;
			}
			</style>
			<?php $upload_url = wp_upload_dir()['baseurl']; ?>
			<div style="border:dashed 1px #ccc;padding:16px;margin:0 -40px;">
				<h4>Meta Box</h4>
				- Free, but without a UI<br />
				- Cloneable fields<br />
				- "Up & coming" <br />
				<h5>Premium</h5>
				https://metabox.io/plugins/meta-box-builder/ $50 unlimited

				<h5>API</h5>
				- https://metabox.io/get-field-settings/<br />
				<code>[rwmb_meta meta_key="fname"]</code>

				<h5>Docs</h5>
				- https://metabox.io/online-generator/<br />
				- https://docs.metabox.io/custom-field-type/

				<h5>Custom Types</h5>
				- https://docs.metabox.io/custom-field-type/

				<h5>In Template</h5>
				<ul style="padding:0 0 0 20px">
					<li>
						Full Name: <br />
						<?php foreach(rwmb_meta('fname') as $name): ?>
							- <?php echo $name; ?><br />
						<?php endforeach; ?>
					</li>
					<li>Color: 
						<span class="swatch" style="background:<?php echo esc_attr(rwmb_meta('fcolor')); ?>">
						</span>
					</li>
					<li>
						Images: <br />
						<br />
						<?php // print_r(rwmb_meta('image')); ?>
						<?php foreach(rwmb_meta('image') as $image): ?>
							<img src="<?php echo esc_attr($image['url']); ?>" />
						<?php endforeach; ?>
					</li>
					<li>
						<pre><?php print_r(rwmb_get_field_settings('fname')); ?></pre>
					</li>
				</ul>
				<hr />
				
				<h4>ACF</h4>
				- The "gold" standard<br />
				- Robust features for free<br />
				- Clean UI<br />
				<h5>Premium</h5>
				- https://www.advancedcustomfields.com/pro/ $25/$100
				<br />

				<h5>Docs</h5>
				- https://www.advancedcustomfields.com/resources/register-fields-via-php/ <br />
				<h5>Custom Types</h5>
				- https://www.advancedcustomfields.com/resources/creating-a-new-field-type/

				<h5>In Template</h5>
				<ul class="attr-list">
					<li>
						Email: <?php echo get_field('email'); ?>
					</li>
					<li>
						Textarea:
						<?php echo esc_html(get_field('textarea')); ?>
					<li>
						Related Page:
						<?php $page = get_field('related_page'); ?>
						<?php if (!is_null($page)): ?>
							<?php echo esc_html($page->post_title); ?>
						<?php endif; ?>					
					</li>
					<li>
						<pre><?php print_r(get_field_object('email')); ?></pre>
					</li>
				</ul>
				<hr />
				<h4>Custom Field Suite</h4>
				- Free Free, no Premium
				- https://wordpress.org/plugins/custom-field-suite/

				<h5>Docs</h5>
				- http://customfieldsuite.com/field-types.html<br />
			
				<h5>In Template</h5>
				<ul class="attr-list">
					<li>
						Text: <?php echo esc_html(CFS()->get('text')); ?>
					</li>
					<li>Users:
						<?php foreach(CFS()->get('user') as $user_id): ?>
							<?php echo get_userdata($user_id)->user_login; ?>
						<?php endforeach; ?>
					</li>
					<li>
						Loopty:<br />
						<?php foreach(CFS()->get('loopty') as $child): ?>
							- <?php echo esc_html($child['child']);  ?>
							<?php echo esc_html($child['dob']);  ?><br />
						<?php endforeach; ?>
					</li>
					<li>
						<pre><?php print_r(CFS()->get_field_info('text')); ?></pre>
					</li>
				</ul>
				<h5>Custom Types</h5>
				<pre><\?php
class custom_field extends cfs_field {
	// ...
}</pre>

<pre><\?php 
add_filter( 'cfs_field_types', function($types) {
	$types['custom'] = '/path/to-custom.php';
	return $types;
});
</pre>
				<?php global $wpdb; ?>

				<h2>Post Meta</h2>
				<b>How is the data stored in the database?</b>
				<ul class="attr-list">
				<?php foreach(get_post_meta(get_the_ID(), null, true) as $key => $value):  ?>
					<li>
						<code><?php echo "$key: "; ?><?php print_r($value[0]); ?></code>
					</li>
				<?php endforeach; ?>
				</ul>
			</div>

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();