Are you struggling with how to add a button in WordPress and style it? Do you want to add a button to urge the audience to take a certain action? Do you want to add a custom button in your website header, menu, or other areas of the website?
Then I got you! And I will discuss your worries in this article.
As you know, buttons are vital elements and play a significant role in the look and functionality of the website and boosting conversions.
These buttons guide the audience to navigate different areas wherever they want to visit, which can be visiting different website pages or performing particular actions such as subscribing to the newsletter or performing different calls to action.
In short, these buttons help to increase engagement and conversion. So, it is crucial to add buttons that make visiting the website easy for the audience.
In this article, I will discuss how to add buttons to your WordPress pages and style them with and without plugins.
How To Create Click-Worthy Buttons?
When you create buttons, it is important to make them click-worthy and make sure they stand out on the page because if they are not click-worthy, you will not get the high level of engagement or conversions you aim for.
So use WordPress built-in styling options before inserting them into your pages and posts.
And place buttons where you are sure that visitors can naturally see them like you can add buttons at the end of the blog post.
But it depends on the purpose of your button. Some buttons need to be placed in the sidebar where these buttons are constantly visible to the visitor when they are on your website.
Usually, we use buttons for CTA purposes, but there are different ways you can use buttons To encourage the visitor to perform a certain action like
- Read more, Learn more, or See more
- Add to the cart
- Buy Now or Book Now
- Download option
- Contact Us
How To Add A Button In WordPress Without Plugin In 2023
No default feature can add the button directly, so you need to add buttons in different ways, like adding buttons with the help of
- Gutenberg blocks
- Custom CSS and HTML
All these methods have their advantages, and you can use them according to different situations. If you want to create a simple button, you can use shortcodes or the Gutenberg blocks method.
Suppose you want to create a more personalized button. If you want more control over the design and function of the button, then use the page builder and coding method.
But your chosen theme and plugin will decide the most appropriate method because some themes and plugins offer more functionality that improves the feature and functionality of the button.
First, I will discuss methods that don’t need any plugins
Method No 1. Add A Button In WordPress By Using Gutenberg Block:
This method is easier and recommended for beginners.
If you are using the latest version of WordPress, like WordPress 5.4, the latest WordPress versions have a Button block that you can easily drag and drop a button. If you use a classic editor, you must switch to the Gutenberg or Block Editor option.
- Log in to WordPress with admin ID, then go to the WordPress dashboard
- Now create a post or choose where you want to add a button.
- On the post edit screen, in Gutenberg or block editor, click on the block inserter tool or click on the ‘+’ icon at the top left of the editor and then select the Buttons block under the Design section.
- You can also type a button in the search field, and then Gutenberg will suggest a Button block.
- WordPress will add a button to the particular place of the post. Now click on the button and add the text. Write the text that you want to display on the button.
- After writing the text in the button, you now have to add the link in the button where you want the audience to visit the destined page after clicking on the button. Click on the box above the button and add the link to the page you want to link to.
- On the right side of the menu bar, you will see the setting panel for the buttons. Here, you can customize the style, color, background color, size, and button alignment.
There are three styles of buttons: default, outline, and squared. There are 5 colors, button text, and a background of the button. If you do not like colors, then you can also customize it yourself.
- After customizing your button style and design, you can preview your button.
- After previewing, click on the publish button.
How To Style The Button On Gutenberg Block?
If you want to style your button, you can do it with the help of the block editor side panel.
1. Style Of The Button:
In this section, you will get two style options: Fill and Outline. If you want to give your button a solid color, then choose the fill option, or if you want to give the button a transparent look, then choose the outline option, in which the button is displayed with the outlined border.
2. Typography Of The Button:
You can also choose the font style and font size of the button. Choose the size of the button from extra small to very large, or add a custom size.
3. Color Of The Button:
You can also change the button’s color according to your website theme. For this, you will get different color options on the side panel. If you do not get the desired color, you can also make a customized shade.
You can also give your button a gradient color instead of a solid one.
Method No 2. By Using Custom HTML And CSS:
In this method, you need to write coding where you want to add the button. So, this method is not ideal for beginners.
The second way to add a button without a plugin is to use an HTML editor. For this
- Open the index.php file in your WordPress site
- Now add the code
- After adding the code, add the custom buttons plugin.
- For this, go to the plugin tab and search for the custom buttons.
- After finding the plugin, install it
- After installation, click on the activate button and activate it.
- After activation, add the custom button widgets.
- For this, go to the widget tab and click on the Add New widget button.
- In the widget details page, you will need to add a name, description, and type of the custom buttons,
- After naming them, click on the Save button.
- After adding a custom button widget, add the code to display the button.
- For this, open the custom butotn.js file and add the underlying code
$(‘.custom-buttons’).click(function() { $(this).
parent().parent().addClass(‘active’); });.
13. Now add the code to display the button.php file in the WordPress site and add the underlying code.
‘ . esc_html( ‘Add a new post’ ) . ‘‘; ?>.
14. After adding code, test the buttons. If you want to add the button to any post, go to the post page “add a new post,” and add a new button.
How To Add A Button And Style It With a Plugin?
If you want to add a button with the help of the classic editor, then add a button with the help of
- Shortcodes
- Page Builder
Method No 3. By Using Shortcodes:
What Are Shortcodes?
Shortcodes are simple code enclosed in a square bracket that makes your website more functional. If you want to add a button, you have to type a shortcode in the post editor.
WordPress will read the code and create a button for you on the web page. These shortcodes are helpful for people who have no technical background.
Add A Button In WordPress With Plugins:
If you want to create a button with the help of shortcodes, then use this method. Moreover, if your required shortcode is unavailable, you can also create new shortcodes.
As a beginner with no technical background, writing code is the most demanding. So first, I will discuss the method by which you can use the shortcode with the help of plugins.
Although many plugins help to create shortcodes, in this article, I will discuss the most popular and well-known plugin, MaxButtons,, which has more than 100k active installations.
Moreover, this plugin is compatible with Wordpress’s different versions, and you can easily use it.
For this, let’s start to follow the underlying steps.
- Download and activate this plugin.
- Now go to the MaxButton menu.
- After going to the Maxbutton dashboard, click Add New to reach the Button Editor.
- First, fill out the basic information, such as the button name, URL, and text. In this field, you can also edit the font style and color of the text.
Although the button’s name will not be displayed before the audience, it is just for you to remember the button if you have more than one button.
And the link of the button will take your audience to particular destinations. And the text will appear on your button before the people.
5. After editing, you can preview it by clicking on the button on the screen’s right side.
How To Style It?
- You will get more customization options if you want to customize the button designs and styles in detail. After customization, click on the Save button.
- You can change the button’s background color, the text’s font style, the border around the button, and many more.
- Now go to the Maxbutton dashboard, and then you will see the shortcode for the particular button.
- Just copy the shortcode, and paste it into the WordPress editor.
- Or, if you want to add the button, click the Add Button.
- You can modify the button URL and text according to your post requirements. In this way, you do not need to create a different shortcode for different posts.
- If you want to preview it, then click on the Update button and then the Preview button.
- After previewing, click on the Publish button. Now you can see the result of the customize button on the WordPress page.
Limitation:
This method has a certain limitation in that it has limited flexibility, which means you can not change the button style or design; if you want to change or edit it, then you have to go to the plugin dashboard.
These shortcodes work on MaxButtons shortcodes. If you ever want to deactivate the plugin, all your previous buttons will vanish.
If you don’t want this to happen, use the non-shortcode button builder plugin.
Use A Non-Shortcode Plugin:
If you don’t want to add a button with the help of a shortcode, then you can add the button in the WordPress editor with the help of the “Forget about Shortcode” plugin.
With this plugin, you can edit and style the button on the WordPress editor without visiting the plugin dashboard.
For this, click on the icon of the insert button and start to customize it.
You can customize the style, color of the text, background color and size of the buttons, and many more.
Moreover, if you want to add an icon to the button, you can easily add it with the help of this plugin. Furthermore, you don’t need to create a new button again from scratch for a different post.
- To save the button, click on the floppy disk icon.
- If you ever need to use it again, click the template tab.
- After adding the button remember to click on the update button.
Method No. 4: By Using A Page Builder:
How to Add A Button In Elementor?
If you are working on the Elementor and want to add a button in Elementor, then you can easily add the button. This method is beginner-friendly, and you can easily add the buttons without plugins.
- For this, open the post in Elementor, click on the + icon, and click on a new element. Or type the button in the search field.
- Or you can edit the post with the help of Elementor. For this, open the post by clicking the edit with the Elementor option.
3. Then, on the side panel, click the app launcher icon on the right.
4. Or you can type the button in the search widget field.
5. Now you will find the button under the heading of Basic; click on it
6. A button will appear in the search result, and click on it.
Style Your Button By Using Elementor:
Here you will get different customization options like
1. Type:
This option lets you choose the button type and even set the button’s color. The blue indicates the info button; the orange is for the warning, etc.
2. Text:
Add the text of the button that will be displayed on the button.
3. Size:
You can set the size of the button. You can get the button’s small, medium, large, and extra-large sizes.
4. Link:
You can insert the link in the button to complete a certain action or take them to another page or website.
5. Icon:
If you want to make your button more attractive, you can add an icon. You can choose from premade icons if you don’t have a particular icon.
6. Position And Space Of The Icon:
If you want to add an icon before or after the text or set the distance between icons and text, you can easily edit it.
Using a style option, you can also style your button.
Button Widgets:
Now you have two basic settings for the customization of buttons. You can also use the advanced settings to refine your buttons in detail.
Most of the time, content and style settings are enough to create attractive and click-worthy buttons.
The Content Settings:
In this setting, you define the button’s purpose, like text, layout, size and type, and button link.
In this setting, you can also get the icon option to add the icon to your button. You can use your icon or select the icon from the icon library.
You can also set the color of the text, border width, radius, and color of the border and background color of the border and padding.
Button Info Widgets:
This button helps to add extra text as a subtext in the button. It’s like a little description of the button that tells the purpose of the button in detail and what this button is used for.
If you have a button with the main text like Learn More, then in the subtext, write “click here to get more information.” You can also modify the color and text of the subtext according to the style of the button.
How To Add A Button In WordPress In A Header Menu?
Although you can add buttons to your post with the editor’s help, if you want to add a button in the menu, you cannot use the button block.
For this, follow the underlying instructions carefully.
- Go to the WordPress dashboard
- Then go to the Appearance then Menu page in WordPress.
- Add the link to the navigation menu.
- Now click on the screen option button located at the top of the screen.
- Now you will see the CSS classes option under the heading of advanced menu properties.
- Expand the menu item and choose the item you can turn into a button.
- Now you will see another CSS class field where you have to add a class name. We need to add a menu here, so we write the menu button in the field.
- Now click on the save menu button.
- After adding a custom CSS class in the menu, you can change the button’s looks using a custom code. It can be added using a particular plugin or Built-in tool on WordPress.
- Add to the custom button with post editor buttons in WordPress.
Final Words:
WordPress does not provide the default feature to add customized buttons easily. For this, you need to use plugins. Although you can add a button without any help from a plugin, there are two methods and one of them is adding buttons via coding which is usually not recommended for beginners.
A button is the best way to urge people to perform certain actions, such as buying now, logging in, downloading a file, subscribing to a newsletter, etc. These buttons make it easy for the website owner to perform the desired actions from users.
If you want to add a WordPress button, you need to add a custom code to your theme. However, adding a custom code is tricky and not ideal for beginners with no technical background.
I have discussed different methods to help you add buttons on WordPress. You can use any of them that suits you best, but monitor your button performance. For this, use Google Analytics, which tracks visitor clicks and different parameters to gain insight into how visitors reach your targeted destination.
Frequently Asked Questions (FAQs)
How To Add A Button In WordPress Without Plugins?
Here are two methods that you can use to add buttons without plugins.
- With Gutenberg block
- With CSS and HTML coding,
The first method is the most preferable as it is beginner-friendly, and you can easily design the button according to your requirements.
How To Remove Buttons In WordPress?
- Go to the WordPress page where you want to remove the button
- Please scroll up, find the three horizontal line icons, and click on them.
- Here you will see the button block; click on it.
- After showing the button block, click on the three-dotted icons and the remove block option.
How To Remove The Button From The Header Menu On WordPress?
To remove the header button, follow the underlying instructions
- Go to the WordPress dashboard and then go to the appearance option.
- Now go to the customize option > Header > Header button, then remove the text under the button text.
How To Find The Button On WordPress?
If you want to find the button on WordPress. Then follow the underlying steps
- First, go to the WordPress dashboard
- Then open the page or post where you want to add the button
- Now click on the + ion or write the button in the text field
- You will see the button block in the result
- Click on the button option and customize your button.
