How to Add a Button to Any Post or Page

Which would you rather click, the plain link or the button?

Click Me  Click Me

They both take you to the same place, but the button looks nicer and more clickable. Replacing plain links with buttons can generate more clicks and make your page look better.

In this post, you’ll learn how to add buttons with any color and style imaginable to any post or page on your WordPress site.

Update: try Elementor

There’s another great way to add buttons to WordPress!

The free Elementor plugin is a complete drag-and-drop page building solution, but it can also handle simple tasks like adding buttons to your posts easily.

Here’s how…

Edit with Elementor

With the Elementor plugin installed, you’ll find a new Edit with Elementor button added to all your posts and pages.

Edit With Elementor

Click this button and you’ll be taken to the Elementor editor which is a lot like the native Customizer found in WordPress.

In the left side is the control panel where you can find all the elements available. The button element is readily available in the Basic elements section.

Elementor Button Element

Click-and-drag the button element anywhere into the post and you’ll see it automatically added to your post. Once added, you’ll see the left panel update with the settings to modify the button.

Elementor Button Settings
The button is green by default, but that can be changed easily.

As you can see, it’s easy to edit the button text and URL, as well as some other options like the text alignment and the option to add an icon.

There are a ton more options available in the Style and Advanced tabs of the settings panel.

Elementor Button Styles

Elementor Button Advanced Settings

As you can see, you can create any kind of button you can imagine using Elementor.

This plugin may be a bit overkill to simply include a button in one post, but I think you might be excited about all the other possibilities that come with this plugin.

If you’re interested in learning more about how to use Elementor on your site, take a look at our complete Elementor page building guide.

Add buttons within the post content

Since Elementor is a page builder and has its own element system, you’ll notice right away that you can’t add buttons within the post content – only before or after.

The simple workaround is to copy and paste part of the post into a Text Editor element, and then you can include any Elementor elements before/after it such as a button.

Now here’s the original method recommended in this post for adding buttons to your posts and pages.

How to use Shortcodes Ultimate

The easiest way to add stylish buttons to your posts and pages is with the Shortcodes Ultimate plugin.

Shortcodes Ultimate

This plugin is amazing.

You’ll find tons of other uses for Shortcodes Ultimate, but most importantly, it makes button creation effortless. Here’s a screenshot from the plugin with some examples of the various button styles.

Screenshot of the button style examples

You can mix-and-match colors, sizes, background styles – any property a button can have.

Not sure how to use shortcodes? Take a look at this brief tutorial on shortcodes.

You’re probably itching to get started now, so here’s the step-by-step on how you can use this button plugin on your site.

Install & activate

Search for “Shortcodes Ultimate” in your Plugins menu and install it like any other WordPress plugin.

Activating the plugin will add a new top-level menu to your dashboard.

Settings page from Shortcodes Ultimate

Use the insert shortcode button

Shortcodes Ultimate also adds a new Insert shortcode button to the editor.

The button for inserting shortcodes

Clicking this button will reveal the huge array of content types available in Shortcodes Ultimate including the button option we need.

Menu of content options

Once you select the button shortcode, you’ll be taken straight to the button configuration screen.

Shortcodes Ultimate also has premium add-ons that add even more shortcode types and styles.

Configure the button

There’s an enormous amount of settings you can use to customize every button you make including:

  • Background color
  • Button text
  • Text color
  • Button link
  • Icons

I took a screenshot of the entire style section, but it’s too massive to include in the post. You can click here to view the full style settings page.

Review and insert the button

As you change the style, you can use the Live Preview button at the bottom to get a quick look at how your button will look.

Button for live previewing

When you’re finished, you can save your button as a preset so that you can reuse the same styling again elsewhere on your site.

Button to save styles as presets

Lastly, press the Insert shortcode button, and a shortcode will be added for the button.

Example shortcode from button

While you’ll only see a shortcode in the editor, it will be rendered as a button exactly the same as you previewed when you visit the post.

Adding buttons to WordPress

You don’t need to be a CSS master to start adding attractive buttons to your WordPress website.

Shortcodes Ultimate makes button creation simple and incredibly flexible. And you’ll probably find a dozen other uses for it once you’ve installed it on your site.

Have any questions about adding buttons to your posts and pages? Leave a comment below.

Related Posts

2 Comments

  1. Aiswarya Aiswarya

    Hey there! am having an issue with adding button. I’m able to add button only on posts. I need to add it on the home page in the customization. Can you help me out? This is our site.

    • Ben Sibley Ben Sibley

      Do you have access to the editor for your homepage? If not, you may be able to use a text widget instead or perhaps the page builder has an option for embedding shortcodes?

Post a comment

Your email address will not be published. Required fields are marked *