![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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409501054.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409533692.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409514811.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409535354.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409541054.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409542927.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409544250.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409550555.png)
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:
- Add buttons using HTML/CSS code.
- Add buttons using the Button Shortcode plugin.
- 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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409560436.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409562624.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409564821.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409572820.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409574499.png)
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](http://gqxi.cn/wp-content/uploads/2024/07/2024072409582040.png)
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.
Link to this article:http://gqxi.cn/en/14547The article is copyrighted and must be reproduced with attribution.
















No comments