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

 

 

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

 

 

function awts_keystyle($atts, $content = null) {
extract(shortcode_atts(array(
'link' => '#'
), $atts));
return '<bawt-key>'.$content.'</bawt-key>';
}
add_shortcode('keybt', 'awts_keystyle');
  • Now use this below shortcode to display the Keyboard Style Symbol in your WordPress posts
[keybt]Your Text[/keybt]
  • That’s all Successfully we install the Keyboard Style Symbol widget in our WordPress website  🙂

WP Keyboard Style Key Symbol WordPress Plugin

Finally, we are releasing a Plugin for Keyboard Style Symbol for WordPress Posts.

Add Keyboard Style Symbol in WordPress posts

  • Install & Activate the Plugin
  • Plugin Option Panel Under Settings
  • Choose your Favourite color for Keyboard Style keys in Plugin Option Panel
  • on your Post Editor, you having the Button for Adding Shortcodes
  • That’s all Done 🙂

If you need Any Help in Installation Please Feel Free to Comment Here our Team will help you.

 


Was this article helpful?
Thanks!

Your feedback helps us improve Allwebtuts.com



7 Shares
+12
Tweet
Share4
Pin1
Stumble