WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Add CTA Buttons to WordPress Posts and Pages Without Code

Last Updated on March 11th, 2022

Tags: , , ,

It’s all fine and dandy having reams of text on a site telling folk how amazing your products are or what an excellent service you offer. However, without some means for them to easily avail of those products or services, you may as well be talking to yourself. Therefore, you must allow visitors to continue the dialog by tasking them with an action of some kind. This is where the WordPress buttons step into the limelight.

Why Do You Need Call to Action Buttons in WordPress?

CTA – or call-to-action ­– buttons encourage users to take the next action. They could be as simple as a ‘Buy Now’ or ‘Add to Cart’ button to immediately secure a sale. Or they could lead the visitor to other content designed to further ‘funnel’ them in a particular direction.

Other examples of CTA buttons include:

  • Read More
  • Read Now
  • Download
  • Subscribe to Our Newsletter
  • Watch on YouTube
  • Listen on Spotify
  • Bookmark This Page
  • Join Now

The placement of CTA buttons is also crucial. For example, there isn’t much point in putting a “Buy Now” button at the beginning of a product listing as people won’t know what you want them to purchase. What’s more, most won’t be willing to read through a lengthy product description and then have to scroll back up the page to buy it – they want the button to be exactly where they expect it to be.

Therefore, place buttons at the logical point in the post or page where users are most likely to need them. For example, the main menu buttons on a website (which are also CTAs) are usually at the top of the page, where people expect to find them.

What’s more, the design of CTA buttons also plays a big part in users’ willingness to press them. They need to be obvious enough to attract attention, but not so ‘in your face’ that they scare people away. Remember, people like to think they can decide for themselves and don’t always appreciate being ‘told’ what to do. Therefore, your CTA buttons need to reflect that.

Having CTA buttons on your site can help improve conversions. They can have a massive impact when well designed and properly placed.

How To Create Buttons in WordPress

WordPress purists may tell you that you need to mess around with code or CSS to create buttons on your site. Indeed, if you want them to be totally bespoke, there is an element of truth in that.

However, if you are like me and possess zero coding skills, you’ll be happy to know there are several alternative methods for adding CTA and other button types to WordPress. I am now going to show you three of them, none of which need any knowledge or experience of CSS or code.

Option 1 – Using Gutenberg

Gutenberg is the block editor that WordPress introduced in version 5 of the platform at the end of 2018 to replace the classic editor. As with anything entirely new, Gutenberg received mixed reviews, with the negative ones coming primarily from people who had gotten used to the classic editor. However, it’s here to stay, and once you are familiar with it, going back to the classic editor feels archaic.

Article Continues Below

Gutenberg includes several handy ‘blocks’ which you add into content to do various things. Naturally, buttons are included, and adding one is child’s play:

Step 1

Firstly, you need to insert a new block in your post or page where you want the button to appear.

To do this, just hit enter (you can rearrange the blocks later if necessary, using the up/down arrows that appear in the mini toolbar, which hovers above the blocks):

Inserting a button into a page or post using Gutenberg - inserting a new block
Inserting a button into a page or post using Gutenberg - the new block is highlighted

Step 2

Enter a forward slash (/) in the ‘Type / to choose a block’ field – a list of commonly used blocks will pop up. In my case, the buttons block option appeared at the top, but you can type /buttons to see only the available button options:

Inserting a button into a page or post using Gutenberg - locating the buttons block

Step 3

Choose ‘Buttons.’ A new button field will insert automatically. Press the little gear icon to the top right of the screen to call up the block editor so you can configure the button:

Inserting a button into a page or post using Gutenberg - the new button inserted into the post and how to call up the button editor

Step 4

Double click on the button to enter the text you want it to contain:

Inserting a button into a page or post using Gutenberg - entering the text that will appear on the button

Then, use the options in the block editor to the right of the screen to change button colors, outlines, size, shape, etc.:

Inserting a button into a page or post using Gutenberg - how using the button editor affects the look and behavior of the button

Step 5

To position the button, use the options in the floating toolbar:

Inserting a button into a page or post using Gutenberg - repositioning the button
Inserting a button into a page or post using Gutenberg - the repositioned button

Step 6

You must now add the hyperlink to which the button points. The link can be to an external web address or an internal one leading to another page or post on your website.

Click the link button on the floating toolbar, enter the URL into the URL field, and hit the curved arrow next to it to enter it.

Article Continues Below

Inserting a button into a page or post using Gutenberg - adding the hyperlink to the button

Step 7

You have now created your button! You may see how it will look once published using the preview option. Any necessary adjustments to the size, position, color, etc. can be made by repeating steps 4 and 5:

Inserting a button into a page or post using Gutenberg - previewing the finished button

Option 2 ­– Using Elementor

Here is a very brief overview of how to add a simple button to a post or page using Elementor:

Step 1

Call up the widget menu on the left-hand side of the Elementor editor screen and type “button” in the search bar. The available button widgets will appear (some will only be accessible if you have an Elementor Pro subscription). Drag the desired button widget and drop it into the block where you want it to be located:

Inserting a button into a page or post using Elementor - inserting a new block and dragging and dropping the button widget

Step 2

The menu to the right-hand side of the screen should now show ‘Edit Button’ with all the button configuration options. If it isn’t, simply click on your newly created button to access that menu.

Step 3

Change the button’s text by typing into the ‘Text’ field. The changes you make will reflect in real-time in the button:

Inserting a button into a page or post using Elementor - adding the button text

Step 4

Enter the required hyperlink into the ‘Link’ field. Please note that clicking the little cog icon will drop down a couple more options:

Inserting a button into a page or post using Elementor - adding the hyperlink

Step 5

Style your button using the various options in the ‘Content’ and ‘Style’ tabs under the ‘Edit Button’ menu:

Inserting a button into a page or post using Elementor - using the Edit Button feature to style the button

Step 6

When you are happy with your button, you can continue creating the rest of your page or post by adding new blocks.

Option 3 – Using a Plugin (MaxButtons)

If you want many button options, including pre-made ones, a WordPress plugin such as MaxButtons is a good option.

Article Continues Below

MaxButtons is a freemium plugin that, even in its free form, offers excellent flexibility in button design thanks to a super-simple editor. A Pro version offering even more options is available starting from $24 per year.

Get MaxButtons Here

Image courtesy of maxbuttons.com

Here are the steps for adding MaxButtons to your WordPress and using it to create jazzy CTA and other types of buttons:

Step 1

From your WordPress admin dashboard, select ‘Plugins’ in the left-hand menu and then click ‘Add New.’ Then type “MaxButtons” in the search bar that will appear in the ‘Add Plugins’ screen:

Inserting a button into a page or post using MaxButtons plugin - adding anew plugin in the WordPress admin dashboard

Step 2

Locate the ‘MaxButtons’ plugin from the plugins that WordPress suggests and hit ‘Install Now’:

Inserting a button into a page or post using MaxButtons plugin - locating the MaxButtons plugin and installing it

Step 3

Once the plugin installation completes, the ‘Install Now’ button will switch to ‘Activate.’ Press that to activate the MaxButtons plugin:

Inserting a button into a page or post using MaxButtons plugin - activating the MaxButtons plugin

Step 4

A new item will appear in the left-hand menu titled ‘MaxButtons.’ Click on that to show the MaxButtons dashboard and to reveal the dropdown submenu:

Inserting a button into a page or post using MaxButtons plugin - the MaxButtons menu in the WordPress dashboard

Step 5

You are now ready to create buttons using MaxButtons. Start by pressing ‘Add New’ either in the MaxButtons submenu or in the Maxbuttons dashboard:

Inserting a button into a page or post using MaxButtons plugin - adding a new button

Step 6

You will now see the configuration and customization options for your button. This step covers the basic settings you need to create a simple one.

Firstly, you need to give the button a memorable name which will help you if you need to use the same one in the future.

Next, you must add the hyperlink to where it will point to, which can either be an external URL, or you may use the ‘Select Site Content’ button to link other parts of your site. You also need to add the CTA text that you want on the button. Furthermore, if you wish, you may optionally add a ‘tooltip’ (explanatory text that appears when users hover over the button):

Inserting a button into a page or post using MaxButtons plugin - the minimum configurations needed for a basic button

Step 7

If you wish, you can play around with the other customization options to get the button to look precisely how you want it. You’ll notice that the preview to the right-hand side of the screen shows the changes you make to the button in real-time:

Inserting a button into a page or post using MaxButtons plugin - customizing the button's appearance

Step 8

Another advanced setting is available to adjust the button to suit certain mobile device types (assuming your theme is responsive). This is accessed by pressing the ‘+ Add for mobile’ option and choosing the appropriate presets. You may create several profiles for different device types:

Inserting a button into a page or post using MaxButtons plugin - adding profiles for mobile responsive buttons

Step 9

When you are happy with your button, press ‘Save.’ A yellow box will appear containing a shortcode that you can use to embed your new button wherever you want in your site’s content, so copy that:

Inserting a button into a page or post using MaxButtons plugin - location of the shortcodes for the newly created button

Note that pressing the little down arrow next to ‘Preview’ closes the button preview, and pressing the one by ‘How to make your life easier’ gives several useful alternative shortcodes you can use:

Inserting a button into a page or post using MaxButtons plugin - additional shortcodes for reusing the button in different contexts

Step 10

To add the button to your pages or posts, simply insert the shortcode from the previous step wherever you want the button to appear. For example, here I am using the ‘Shortcode’ block in Gutenberg to insert the button:

Inserting a button into a page or post using MaxButtons plugin - embedding the shortcode into pages and posts

Step 11

You can now save and preview the post or page to see the button in action:

Inserting a button into a page or post using MaxButtons plugin - previewing the button

Step 12

To view a list of all the buttons you have created, plus to easily see the shortcodes for each of them, go back to your WordPress admin dashboard and click on ‘Buttons’ under ‘MaxButtons’:

Inserting a button into a page or post using MaxButtons plugin - using the list of buttons in the MaxButtons dashboard

Incidentally, WPLift have a full review of the MaxButtons plugin if you’d like to read more about it.

What Method Do You Use to Add CTA Buttons to Your WordPress Website? 

Personally, I think a well-designed button often looks much more attractive than a hyperlink on a page or post, particularly when used for call-to-action purposes.

As I explained in this article, adding buttons is very straightforward irrespective of what WordPress editor you prefer. What’s more, button plugins like MaxButtons can really lift your CTAs to another level.

What are your thoughts on CTA or buttons in general? Do you use them on your WordPress website? If so, did you just use Gutenberg to create them, or have you fancied them up using Elementor or a plugin? Do you have any tips on button design for other WPLift readers? Your input is always highly appreciated.

Would you like to learn more about WordPress?

Sign up for our Weekly WordPress Newsletter.

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
I'm a former construction industry professional who came out of the writer's closet and am now totally comfortable with my creative side. My pronouns are smart, creative, witty, and dependable. I have written content in a number of niches including WordPress, plus I'm a blogger and affiliate marketer. If you'd like to know more about how I can help you, please head over to my website.