Tag: metabox

You know that box on the side of your posts? With “Publish” and it has some information? What if you want to add more information to it?

Jetpack does it. Yoast SEO does it. You can do it too.

The Concept

We’re going to be using a hookable action called post_submitbox_misc_actions that fires after the post date information.

In this example, I want to grab the content of a post meta variable called char_count to list the number of characters associated with the post. And since I like my site to look pretty, I want to use the nametag Dashicon on the side of it.

The PHP Code

The first part of the code is making it work. I’ve already talked about how I calculated how many characters belong to a show and shared the data between post types. At this point, I have the data nicely saved in every show post, as the aforementioned char_count post meta.

In order to display it in the publish box, the code looks like this:

add_action( 'post_submitbox_misc_actions', 'MYSITE_post_page_metabox' );
function MYSITE_post_page_metabox() {
	global $post;
	switch ( $post->post_type ) {
		case 'post_type_shows':
			$count = get_post_meta( $post->ID, 'shows_char_count', true );
			?><div class="misc-pub-section MYSITE misc-pub-MYSITE">
			<span id="characters">Characters: <b><?php echo $count; ?></b></span>
			</div><?php
			break;
		}
}

You can replace the terms with whatever you want, however please note the naming conventions for the div’s classes. This will come in handy in a second.

The CSS Code

The problem with the above code is that it’s not pretty. And frankly pretty things get used more when it comes to software. In order to handle this, the CSS looks like this:

.MYSITE #characters:before {
	content: "\f484";
	position: relative;
	top: -1px;
	font: 400 20px/1 dashicons;
	speak: none;
	display: inline-block;
	margin-left: -1px;
	padding-right: 3px;
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
	color: #82878c;
}

That’s basically stolen from how Core does it for the publish icon, only changed to the nametag Dashicon. Change content: "\f484"; to be what you want.

The End Result

In the end, it looks like this:

Which is exactly what I wanted.