How to Add Custom Buttons to WordPress Posts and Pages: A Detailed Step-by-Step Tutorial

Image[1] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Worldwide, Fast Response

Adding buttons is made easy with WordPress built-in button blocks, a feature introduced with the Gutenberg WordPress block editor. In this article, we will show you the many ways on how to add call-to-action buttons to WordPress blog posts and pages. You can choose the solution that best suits your needs.

Adding buttons to WordPress posts/pages using the default editor

This method is easy to use and suitable for all users. It uses the WordPress block editor's built-in "buttons"Blocks. If you're still using the older Classic Editor, you can skip to the next section.

1. Select page

needCreate a new postmaybeEdit existing postto add buttons.

Image [2] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - Photon Fluctuation Network | Professional WordPress Repair Service, Worldwide, Fast Response

On the post editing screen, click "+" icon and select the button block from the Layout Elements section.

Image [3] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Worldwide, Fast Response

2. Add button block

Next, you should see that the button block has been added to the content editor. Simply click "Add text..." field and enter the button text.

Image [4] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Worldwide, Fast Response

3. Add button text

Then, click the Link button in the toolbar to add a link. Either search for the post or page, or simply copy and paste the URL into the link field. When finished, press the "Enter"or click on "appliance"icon to save the link.

Image [5] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Coverage, Fast Response

4. Add button link

To center the button, you can click "line up in correct order" icon and select "center alignment". The vertical alignment of the buttons can also be changed from the toolbar.

Image [6] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Reach, Fast Response

5. Change button alignment

Next, you can customize the button style and change the text and background color from the Block Settings panel on the right. Simply switch to the block settings under "type" tab to adjust the button style.

Image [7] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Reach, Fast Response

6. Change the button style

There are three button styles to choose from: default, outline, and square. The Color Settings section includes five color variations for the button background and text. The color settings can also be changed by clicking on the "Custom colors" option to select a custom color. Once satisfied with the button design, save or publish your post to see a live preview.

Image [8] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Worldwide, Fast Response

Creating WordPress Buttons in the Classic Editor

The default WordPress block editor is more modern and faster. Some users still use the old Classic WordPress editor. We don't recommend using the classic editor because it has limited functionality and is outdated.

If still using the Classic Editor, you can add buttons to WordPress in three ways:

  1. Add buttons using HTML/CSS code.
  2. Add buttons using the Button Shortcode plugin.
  3. Add buttons without using the shortcode.

1. Use Forget About Shortcode Buttons plug-in (software component)

The third recommended method is to use a plugin. First, install and activate in the dashboard Forget About Shortcode Buttons Plugin. After activating the plugin, create a new post or edit an existing post. In the editor, click "Insert button"Icons.

2、Insert button icon

A window will pop up where you can design the new button. First, add the button text and the URL. next, you can add the nofollow tab and select Open link in new tab.

Image [9] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Reach, Fast Response

3、Select button icon and color

You can also select the button icon, text color and background color, and choose the button style and size. When you are done, click "update" button, the button will be inserted into the post.

Image [10] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Reach, Fast Response

4、Button Alignment

Button alignment can be set by selecting the button text and using the toolbar buttons in the editor. Once you are satisfied with its design, publish or update the post to see the actual result.

Image [11] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Coverage, Fast Response

Adding Click-to-Call Buttons in WordPress

Click-to-call buttons are a specific type of call-to-action phrase button that users simply click to call your team. This is very effective in increasing leads and conversions.

1. Installation WP Call Button plug-in (software component)

First.Install and activate WP Call Button pluginAfter activation, visit the Settings page. After activation, visit the Settings "WP Call Button" page to configure the plugin settings and design the click-to-call button.

Image [12] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Worldwide, Fast Response

2、Configure sticky call buttons

In the Sticky Call Button settings, activate the Call Now button state, enter the phone number, edit the call button text, and select the button position and color.

3、Customized button settings

You can customize the button text, color, icon, etc. and choose which pages and devices on your website to display the sticky call button on. Save your changes and visit the website to view the button effect.

4. Add static call button

Static call buttons can also be added to WordPress pages, posts and sidebars using the plugin. Add a WP Call Button block in the block editor and customize the button design. If using the Classic Editor, you can use the Short Code Generator to get the short code and add it to the post or page.

Image [13] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Reach, Fast Response

5. Add widgets

Drag the WP Call Button widget to the sidebar or other widget area to save the settings.

Image [14] - How to Add Custom Buttons to WordPress Posts and Pages: Detailed Step-by-Step Tutorial - photonfluctuation.com | Professional WordPress Repair Service, Global Reach, Fast Response

Adding Custom Button Tips in WordPress

Adding buttons is not enough, you may need to use theHero Image,Menus and customized layoutsCustomize the page. It is recommended to use thedrag-and-drop WordPress page builder plugins such as SeedProd maybe Thrive Architect. These builders help you create custom pages with beautiful call-to-action buttons.

Summary:

This article details the many ways to add call-to-action buttons to WordPress posts and pages. Whether you're using the default Gutenberg block editor or the classic editor, there are a variety of options available to you. You can add custom buttons and click-to-call buttons via built-in button blocks, plugins like Forget About Shortcode Buttons and WP Call Button.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
Author: xiesong
THE END
If you like it, support it.
kudos0share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments