Keyboard “kdb” keys in WordPress content

Showing keyboard keys in your content is super-easy with a plugin for TinyMCE and, at most, a bit of CSS in your theme.

Adding the Format

While you can code custom styles in TinyMCE manually (see the Codex) it’s much easier with the TinyMCE and TinyMCE Advanced Professsional Formats and Styles plugin. After installing and activating, go to Admin > Settings > TinyMCE prof. Styles:

1. Add a “Title” (shown in “Formats” dropdown)
2. Ensure “Type” is “Inline”
3. Se “Type Value” to “kbd” (the HTML tag to use)
4. Check “Wrapper”

I’ve added styles for <code> and <kbd> tags which are both used on this blog (see Hyphen, En Dash or Em Dash). You can then add <code> and <kbd> tags to your content via the “Formats” dropdown.

Styling the Format

The best option is via CSS, either by adding a class (in Format settings, see image above) or styling the element itself.

The styles I use are:

kbd,
code {
	font-family: 'Ubuntu Mono', monospace;
	padding: 0 .25em;
	border-radius: 3px;
	padding: .1em .3em .2em .3em;
	font-size: $size-minus-one;
	font-weight: 600;
	white-space: nowrap;
	position: relative;
	bottom: .1em;
}

code {
	background: $silver;
}

kbd {
	background: $white;
	box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .5);
	margin: 0 .3em;
}

Conclusion

Now you see how painless it is to add custom Formats to WordPress TinyMCE editor, why not add one for cite, ins, del, small or time?