How to Add Buttons in WordPress – With and Without Plugins?
Whether you are a proponent of using plugins or someone who’d rather do without, I am going to show you exactly how to add buttons in wordpress simply and easily. In this tutorial, I’ll show the best plugins and resources to do exactly that.
How to Add Buttons in WordPress-With a Plugin
MaxButtons: WordPress Button Generator
With MaxButtons you’ll be able to create professional looking buttons simply and quickly. Plus, you’ll be provided with so much flexibility, you can literally create any button you wish. No matter the style, color, or effect, MaxButtons will be able to do it. With a live visual editor, you’ll be able to see exactly the style and feel of your button before posting it onto your site.
To use Maxbuttons, simply:
- Install Maxbuttons from the WordPress Search Directory or on WordPress.org
- In the Maxbuttons settings, click on Add Button
- Fill out the desired target and text of the button
- Explore! – Play around with the settings to get your desired look: the shadow, style, font, radius, etc.
- Save and add the short code [maxbutton id=”#”] wherever the button should be on your post/page/sidebar
- That’s it!
How to Add Buttons in WordPress- Without a Plugin
There are many ways to add buttons in WordPress, all of which are perfect. However, the way I’ll be showing you requires 2 steps.
- Use a CSS Button Generator to generate CSS code
- Input the CSS code into your styles.css
- Enter your button code where you want the button to display
Step 1 – CSS Button Generator
Now some may say this is cheating, but for me I don’t really care. I still really like to be able to see the code behind each change I make. You can use any CSS button generator, but the one we’ll be using is cssbuttongenerator.com. It’s got similar options as with the MaxButtons Plugins and is super easy to use. Simply edit the button to the style of your liking.
Step 2 – Copy the CSS code
After you edit the button to fit your style, you’re going to click on “Get the Code”.
From here, find the CSS code, copy it, and paste it at the end of your style.css sheet within WordPress, which is located in Appearance>Editor. The code starts with:
If you don’t feel comfortable pasting the code directly into your theme file, you can use the Simple Custom CSS Plugin.
Step 3 – Copy the HTML code into your post/page
In the CSS Code Generator, find the HTML code and paste it on the post/page you would like the button to show up. The code should look something like this:
Now, just changing TEXT to whatever you would like to display on the button itself. Also, be sure to change the # in href to whatever link you would like the button to link to.
Finally, if you would like to add multiple styles of buttons, be sure to change the classname within the CSS Button Generator. This will change the classname in the html and CSS portions of your code. For example, if I changed the classname to “button1”, the classnames in html and CSS would both change:
Personally, if the themes I use don’t have short code buttons, I prefer using maxButtons to create my buttons rather adding code. For me, maxButtons has all the options and functionality of a CSS Button Generator, but with less steps. However, let me know in the comments below what you like best!