Introduction to Post Meta

Sal Ferrarello / @salcode

Fishing Equipment

Twentysixteen Default

Add Subtitle to Content

template-parts/content-single.php

<header class="entry-header">
	<?php
		the_title(
			'<h1 class="entry-title">',
			'</h1>'
		);
	?>
</header>

template-parts/content-single.php

<header class="entry-header">
	<?php
		the_title(
			'<h1 class="entry-title">',
			'</h1>'
		);
	?>
	<h2>It's a beautiful day</h2>
</header>

Add Subtitle

Hardcoded

Hello World

Post ID: 1

template-parts/content-single.php

<header class="entry-header">
	<?php
		the_title(
			'<h1 class="entry-title">',
			'</h1>'
		);
	?>
	<h2>It's a beautiful day</h2>
</header>

<h2>It's a beautiful day</h2>

Subtitle Code

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id,
						'fe_subtitle', true );

if ( $subtitle ) {
	echo '<h2>' .  $subtitle . '</h2>';
}

Subtitle Code

						'fe_subtitle'

Link to template code

Introduction to Post Meta

Post ID: 4

Post ID: 4

Post ID: 1

Grocery Carts

WordPress is Smarter

Database

wp_posts

wp_postmeta

get_post_meta()

# In general:
# get_post_meta( $post_id, $meta_key, true );

# Example:
get_post_meta( 4, 'fe_subtitle', true );

wp_postmeta

Subtitle Code

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id,
						'fe_subtitle', true );

if ( $subtitle ) {
	echo '<h2>' . $subtitle . '</h2>';
}

Subtitle Code

$post_id  = get_the_ID();

Subtitle Code

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id,
						'fe_subtitle', true );

Subtitle Code

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id,
						'fe_subtitle', true );

if ( $subtitle ) {
	echo '<h2>' . $subtitle . '</h2>';
}

Refactored Subtitle Code

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id,
							'fe_subtitle', true );

if ( $subtitle ) {
	echo '<h2>' . $subtitle . '</h2>';
}

Refactored Subtitle Code

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id,
							'fe_subtitle', true );

if ( $subtitle ) {
	echo '<h2>' . esc_html( $subtitle ) . '</h2>';
}

Refactored Subtitle Code

$post_id  = get_the_ID();

$subtitle = get_post_meta( $post_id,
							'fe_subtitle', true );

if ( $subtitle ) {
	echo '<h2>' . esc_html( $subtitle ) . '</h2>';
}

Link to template code

Introduction to Post Meta

Post ID: 4

wp_postmeta

get_post_meta( 4, 'fe_learn_more', true );

Display Learn More Link

$post_id = get_the_ID();

$url = get_post_meta( $post_id,
	'fe_learn_more', true );

if ( $url ) {
	echo 'Learn More';
}

Link to template code

Refactored Learn More Code

$post_id = get_the_ID();

$url = get_post_meta( $post_id,
	'fe_learn_more', true );

if ( $url ) {
	echo '<a href="' .  $url .  '">Learn More</a>';



}

Refactored Learn More Code

$post_id = get_the_ID();

$url = get_post_meta( $post_id,
	'fe_learn_more', true );

if ( $url ) {
	printf(
		'<a href="%s">Learn More</a>',
		$url
	);
}

Refactored Learn More Code

$post_id = get_the_ID();

$url = get_post_meta( $post_id,
	'fe_learn_more', true );

if ( $url ) {
	printf(
		'<a href="%s">Learn More</a>',
		esc_url( $url )
	);
}

Refactored Learn More Code

$post_id = get_the_ID();

$url = get_post_meta( $post_id,
	'fe_learn_more', true );

if ( $url ) {
	printf(
		'<a href="%s">Learn More</a>',
		esc_url( $url )
	);
}

Hello World

Post ID: 1

wp_postmeta

Apply Title Color

$post_id = get_the_ID();
$color = get_post_meta( $post_id,
	'fe_color', true );

if ( ! $color ) { $color = 'black'; }

printf(
	'<header style="color: %s;">',
	esc_attr( $color )
);

Apply Title Color

$post_id = get_the_ID();
$color = get_post_meta( $post_id,
	'fe_color', true );

Apply Title Color

$post_id = get_the_ID();
$color = get_post_meta( $post_id,
	'fe_color', true );

if ( ! $color ) { $color = 'black'; }

Apply Title Color

$post_id = get_the_ID();
$color = get_post_meta( $post_id,
	'fe_color', true );

if ( ! $color ) { $color = 'black'; }

printf(
	'<header style="color: %s;">',
	esc_attr( $color )
);

Link to template code

Gutenberg

Gutenberg

Removes the Custom Fields Metabox

Restore the Metabox

The Custom Fields for Gutenberg Plugin restores the Custom Fields Metabox.

CMB2

A toolkit for building metaboxes, custom fields

• Plugin
• Documentation

Link to add CMB2 Title Color field

Link to add CMB2 Title Color field

wp_postmeta

CMB2 Field Types Include:

• Email
• Money
• Date
• Radio Buttons
• Select Box
• Checkbox
• File / Image
• Repeatable Group

See full list of CMB2 Field Types

wp_postmeta

get_post_meta( $post_id, $meta_key, true );

Sal Ferrarello

salcode.com/post-meta

@salcode

Additional Resources

Additional Resources are available at salcode.com/post-meta#resources

Image Credits

• Fishing Picture
• Shopping Cart Large
• Shopping Cart Small