Adding buttons to your WordPress site can improve user experience. Buttons help guide visitors and make navigation easy. No coding skills are needed to do this. This guide will show you how to add buttons without using shortcodes.

Why Add Buttons to Your WordPress Site?

Buttons make your website more interactive. They can be used for:

• Directing users to important pages
• Encouraging clicks on call-to-action (CTA) links
• Improving navigation
• Making your site look more professional

Let’s learn how to add buttons without shortcodes.

Using the WordPress Block Editor

The WordPress Block Editor, also called Gutenberg, is user-friendly. You can add buttons without any coding. Follow these steps:

1. Log in to your WordPress dashboard.
2. Go to “Posts” or “Pages” and click “Add New” or edit an existing one.
3. Click the “+” button to add a new block.
4. Select the “Button” block from the list.
5. Type the text you want on the button.
6. Click the “Link” icon to add a URL.
7. Choose the button style, color, and alignment.
8. Click “Publish” or “Update” to save your changes.

Using a WordPress Theme with Built-in Button Options

Some WordPress themes have built-in button options. These themes make adding buttons easy. Check your theme settings:

1. Log in to your WordPress dashboard.
2. Go to “Appearance” and then “Customize.”
3. Look for button options in your theme’s settings.
4. Follow the instructions to add buttons.
5. Save your changes.

Credit: www.youtube.com

Using a Page Builder Plugin

Page builder plugins offer more customization options. Popular page builders include Elementor, Beaver Builder, and WPBakery. Let’s use Elementor as an example:

1. Install and activate Elementor.
2. Go to “Pages” and click “Add New” or edit an existing one.
3. Click “Edit with Elementor.”
4. Drag and drop the “Button” widget to your page.
5. Type the text you want on the button.
6. Add a URL in the link field.
7. Customize the button style, color, and size.
8. Click “Update” to save your changes.

Using HTML in the Classic Editor

If you prefer the Classic Editor, you can use HTML. It is simple and does not require shortcodes. Follow these steps:

1. Log in to your WordPress dashboard.
2. Go to “Posts” or “Pages” and click “Add New” or edit an existing one.
3. Switch to the “Text” editor tab.
4. Paste the following HTML code:

Button Text

Replace “URL” with your link and “Button Text” with your text. Save your changes by clicking “Publish” or “Update.”

Credit: motopress.com

Using CSS for Custom Buttons

For more control, you can use CSS. This method requires some basic CSS knowledge. Follow these steps:

1. Log in to your WordPress dashboard.
2. Go to “Appearance” and then “Customize.”
3. Click on “Additional CSS.”
4. Add the following CSS code:

            .custom-button {
                background-color: #ff5733;
                color: #ffffff;
                padding: 10px 20px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                border-radius: 5px;
            }
        

Click “Publish” to save your changes. Now, add the button to your post or page:

1. Go to “Posts” or “Pages” and click “Add New” or edit an existing one.
2. Switch to the “Text” editor tab.
3. Paste the following HTML code:

Button Text

Replace “URL” with your link and “Button Text” with your text. Save your changes by clicking “Publish” or “Update.”

Frequently Asked Questions

How Do I Add Buttons In WordPress Without Shortcodes?

Use a plugin like Elementor. It lets you add buttons easily.

What Are The Best Plugins For Adding Buttons?

Elementor, Beaver Builder, and WPForms are great plugins for adding buttons.

Can I Add Buttons Without Using Code?

Yes, use a page builder plugin. It requires no coding skills.

How To Customize Button Appearance?

Most plugins allow you to change colors, size, and text. Very easy!

Conclusion

Now you know how to add buttons in WordPress without shortcodes. You can use the Block Editor, a theme with built-in options, a page builder plugin, HTML in the Classic Editor, or CSS for custom buttons. These methods make adding buttons easy and fun. Try them out and see which one works best for you!