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 postsMostly 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

 

1 bawt-key{
2 border:1px solid gray;
3 font-size:1.2em;
4 box-shadow:1px 0 1px 0 #eee0 2px 0 2px #ccc0 2px 0 3px #444;
5 -webkit-border-radius:3px;
6 -moz-border-radius:3px;
7 border-radius:3px;
8 margin:2px 3px;
9 padding:1px 5px;
10 }
  • 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

 

1 function awts_keystyle($atts$content = null) {
2 extract(shortcode_atts(array(
3 'link' => '#'
4 ), $atts));
5 return '<bawt-key>'.$content.'</bawt-key>';
6 }
7 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 🙂

 

 


posted on: https://www.allwebtuts.com/add-keyboard-style-symbol-in-wordpress-posts/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s