We have published lot of articles in this site on how to use shortcut keys. When writing such articles, we simply used to mention the shortcut keys like “Control + A” or “Command + A”. This will look like a plain text without any markup. However, WordPress offers an easy way to add keyboard inputs to your site. If you are frequently showing keyboard inputs in your site, then here is how to use it properly.
HTML Keyboard Input Tag
Many users do not know that HTML has a default <kbd> element for adding keyboard inputs in webpages. This element has open and close tags and you can use it like below:
Press <kbd>Command + A</kbd> keys to select all content in macOS.If you want to split the keyboard input to each key, then you can use multiple <kbd> tags as below.
Press <kbd>Command</kbd> + <kbd>A</kbd> keys……The keyboard input element will add inline input which means the entire sentence will be displayed as a single line without line break. Browsers by default uses monospace font family for differentiating keyboard input when rendering the HTML markup.
Note: In addition to <kbd>, you can use few other HTML elements like <samp> or <code> for adding inline input. There is also a <pre> element which you can use to insert preformatted text as a new paragraph.
1. Using Gutenberg editor
WordPress offers an inline keyboard input option using <kbd>…</kbd> tags. This is only available as part Gutenberg and hence make sure you are using Gutenberg block editor and not the old Classic editor.
- Create a new post or edit your existing post with Gutenberg editor.
- Type your sentence and select the portion you want to make it as a keyboard input.
- Click on the small down arrow (Displays more block tools) showing in the block’s toolbar.
- Select “Keyboard input” option from the list of items that appears.
The editor may not show any visible difference for the added keyboard input portion. However, you can click on the portion to see that it is highlighted separately as shown below.
As mentioned, WordPress will simply add <kbd> tags for the selected keyboard input section. To view the HTML code, click on the three vertical dots in the toolbar (Options) and select “Edit as HTML” option.
You can see the source code has open and close kbd tags for the selected portion.
Again, click on “Options” and select “Edit visually” option to view the block in normal mode.
Publish your post and check the live page to find how your theme outputs the keyboard input section. You can right-click and select “Inspect” option to view the CSS used by your theme for kbd class. We used Astra theme in our example and the theme only uses custom font without highlighting the output.
2. Show Keyboard Inputs in Classic Editor
If you are using Classic editor or using custom post type, then you have no default option to add keyboard inputs. In this case, you need to use <kbd> tags manually.
- When you are in Classic editor, type the sentence in “Visual” mode.
- Click on “Text” tab to toggle to text mode editor.
- Add <kbd> and </kbd> tags at the start and end of the keyboard input text respectively.
- Toggle editor mode back to “Visual” and publish your post.
The output will look similar to Gutenberg editor output as shown in section 1 above.
3. Using Custom CSS for kbd Class
As you can see the output is not highlighted by Astra theme. If your theme does not use custom CSS for KBD tag then you can easily add it as per your need. For example, you can use the following CSS for kbd class.
kbd {
border: 1px solid rgb¬¬¬¬¬(211 211 211);
padding: 3px;
background: rgb(211 211 211);
border-radius: 5px;
font-weight: 600;
font-family: inherit;
}
- Go to “Appearance > Customize” section.
- Click on “Add CSS” option showing as a last item.
- Paste the above CSS code in the text box.
- Click “Publish” button to apply the changes.
View the page with keyboard input and it will look with a background box like below.
You can change the background color, font-family, border and other properties in CSS to match the keyboard input with the appearance of your site.
4. Adding Keyboard Inputs in Widgets
If you want to add keyboard inputs in sidebar or footer widgets, then you can use Custom HTML block/widget for this purpose. Both Gutenberg and Classic editors offer Custom HTML option to make the task easier for you. However, you should use CSS and HTML code together for this to work. In addition, widgets option will show only when you use non-block based themes and will not be available for block based themes.
- Go to “Appearance > Widgets” menu in your admin dashboard.
- Search and insert Custom HTML block in Gutenberg widgets block editor. Paste the following example code and click “Update” button.
- If you are using Classic editor, then find and insert “Custom HTML” widget in the required area. Paste the below code and click on “Save” button to apply your changes.
<!-- CSS Code -->
<style>
kbd {
border: 1px solid rgb(211 211 211);
padding: 3px;
background: rgb(211 211 211);
border-radius: 5px;
font-weight: 600;
font-family: inherit;
}
</style>
<!-- HTML Code -->
<p>Press <kbd>Command + A</kbd> keys to select all content in macOS. Press <kbd>Command + C</kbd> keys to copy selected content in macOS. Press <kbd>Command + V</kbd> keys to paste the copied content in macOS.</p>
Check your page and you should see the keyboard input as shown below.
You can also only paste the HTML part inside Custom HTML element and insert the CSS under “Appearance > Customize > Additional CSS” section. In addition, you have a “Text” widget for Classic editor which works similar to option 2 as explained above.
Note: Remember, adding CSS in customizer will include the code in all the pages of your site. This is fine for the widget area, however, sometimes you may want to use keyboard inputs only on few pages. In this case, the best option is to use Custom HTML block and paste the complete CSS and HTML inside the block. This works only in Gutenberg editor as inserting CSS in Text mode will not work in Classic editor.
Final Words
Using keyboard input and highlighting the content will help users to easily identify the shortcut keys and other device inputs. Though WordPress uses HTML <kbd>…</kbd> tags in Gutenberg editor, most themes do not style the output properly. You can add custom CSS as explained above to make the look appealing for your users. For Classic editor, you can manually add the HTML in Text mode and CSS in customizer for this to work.
Leave a Reply
Your email is safe with us.