How to Add Keyboard Style Symbol in Wordpress posts

How to Add Keyboard Style Symbol in WordPress posts

In this tutorial we are going to see about Add Keyboard Style Symbol in WordPress posts Mostly you are seen in Programming blog’s if you are running a blog related to web design and programming it will help to mention the key shortcuts with Keyboard Style Symbol For Example if I publish a post related to Windows mostly we mention some shortcut keys for run and add commands we mention the keyboard shortcut keys in Text will bold letter but this widget help to mention the shortcut key like Keyboard Style Symbol in our WordPress posts.

Demo

CTRL + F

just follow our Below steps install to add this keyboard style symbol on your WordPress website.

Login to your WordPress Dashboard
Copy and Paste the below CSS code on your Theme Stylesheet

Learn How to add Custom CSS

Simple Method to Add custom CSS in WordPress

bawt-key{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Now copy the Below PHP shortcode Function code and paste in your theme’s functions.php file

Learn How to add Custom functionalities

A Simple Method to create a Site Specific Plugin for WordPress

function awts_keystyle($atts, $content = null) {
extract(shortcode_atts(array(
'link' => '#'
), $atts));
return '<bawt-key>'.$content.'</bawt-key>';
}
add_shortcode('keybt', 'awts_keystyle');