No Shortcodes Allowed: Adding a Button to Your WordPress Website
I will be the first to admit, I am a writer, not a coder. And I know that I am not alone. Most website owners are not knowledgeable or comfortable with using HTML/CSS. And while I personally know a bit about both, if I can find a plugin to do the work of a shortcode, chances are I will take the plugin.
That’s why I am here to share with you how to add a button to your WordPress website without having to memorize difficult shortcodes or customize the look with CSS changes. Instead, I will be using a great little WordPress plugin called Forget About Shortcode Buttons.
What is Forget About Shortcode Buttons?
If the name doesn’t give it away for you, I will go ahead and explain that this plugin (found for free in the WordPress Repository) features a way for you to add a linkable button in your website’s posts and pages…without using a shortcode!
This plugin allows you to add CSS styled buttons via the editor screen where you add content that will be published to your website. And what’s great about it is that the buttons can be customized to your liking and functions like a charm.
Click a button and that’s all. The editing starts there.
- Easily edit established buttons by double clicking on them and reconfiguring the settings.
- Utilize the latest CSS properties for styling.
- Include Dashicons and Font Awesome Icons to add some extra character.
- Customize the text, linking properties, text and button color, button type, and determine a size.
- Link to a variety of things: social media accounts, product downloads or details, even special offers located elsewhere on your website.
- Move and copy multiple buttons easily and without the frustration of losing customization; simply cut & paste.
Curious to see it in action? Check out this awesome video the plugin developers have created so users can fully understand what Forget About Shortcode Buttons is all about.
Using Forget About Shortcode Buttons
Let’s see how you can download this user friendly button plugin and start using it on your WordPress website right away.
Step 1: Install & Activate Plugin
First navigate to Plugins > Add New and search for Forget About Shortcode Buttons. Then click on Install Now.
Next click on Activate Plugin to finish the installation process. And that’s it. There are no additional configurations, settings to apply, nothing. Simply install and activate the plugin for use.
Step 2: Create a Button
To create a button open up an existing post or page or create a new one. Whichever you prefer will work just fine.
Then, click on the Insert Button icon located in your WordPress Visual Editor.
Step 3: Customize Your Button
Once you click on Insert Button a popup will appear so that you change a number of things on your button to match the look and feel of your website.
First, in the Properties section, enter the text you would like to include within the button. This could be something as simple as ‘Download Here’ or ‘Twitter’. Next add the URL that the button will link to once a site visitor clicks on the button.
You also have the option to open up the link in a new window which is something I always do for my outbound links. I find this provides a better user experience. I know I do not like clicking on a link within a blog post only to have to click on the back button to get back to what I was reading.
Next you can customize the look of your button.
- Text color.
- Button color.
- Type of button (Flat, Flat Rounded, Glossy, Glossy Rounded, Popout, and Popout Rounded).
- Size of button (Extra Small, Small, Medium, Large, and Extra Large).
The Icons section allows you to assign an icon image to your button. There are several options for you to choose from so there is bound to be a perfect icon to match whatever type of button you are creating.
Choose from the following icon categories:
- Brand Medical
Pick an icon that associates with the type of button you are adding to your website.
Unfortunately, this is a new section I have never seen before in this plugin and I am unsure as to what it does. When I click on it there is no information showing. And when I checked in the WordPress Repository I was unable to find any information regarding it.
That being said, if I find out anything I will be sure to let you guys know!
Step 4: Insert Your Button
When you are done creating your button the last step is to click on Insert. This will place your newly created button in your post or page wherever your cursor is.
And just in case you are wondering, although you cannot directly place a button in a widgetized area, if you create a button in your Visual Editor and copy and paste the HTML generated into a text widget, you can display the button perfectly.
This is what mine looked like after customizing the text, URL, colors, and icon:
Furthermore, this is what my button looks like on the front end of my website, where my site visitors will access it:
If you are looking to get some inspiration for your website button creation, check out this cool image the plugin developers provide users in the Screenshot section of the plugin in the WordPress Repository:
This image shows just some of the many ways you can design a unique button for your site visitors to engage with.
So, there you have it. An easy and no coding required way of adding linkable buttons to your WordPress website. It is just the way I like it!
Have you used Forget About Shortcode Buttons? What type of button did you create? I would love to hear all about it in the comments below!
Image courtesy of FreeVector
I am a freelance writer trying to make it in the online world. I love all things WordPress and can write on a variety of different topics as well. If you are in need of a content writer, researcher, or virtual assistant for your website, consider contacting me to help you out!