Search

How to Add Button to Table Block in WordPress Block Editor (Without Plugin)

Adding buttons is an excellent method to improve your website visitors’ user experience with tables in the WordPress block editor a.k.a. Gutenberg. Users can easily and quickly take action with buttons, such as visiting a new page, completing a form, signing up for your newsletter, making a purchase, and many more.

Unfortunately, by default, in the WordPress block editor Table block, there are no features to add buttons directly to table cells. This article will show you how to add the buttons to the Table block in Gutenberg without the help of any third-party plugins.

Steps to Add the Buttons to the WordPress Table Block

Step 1: Add the Additional Custom CSS

First, we will add the additional custom CSS to your WordPress site.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable theme customizer first. We have a separate post covering how to enable theme customizer on a block theme you may want to read.

Here is the CSS snippet you can use.

.table_button {
	color:#3c02db;
	background-color: #fcdb03;
	border-radius: 8px;
	display: inline-block;
	font-size: 14px;
	text-align: center;
	padding: 10px 25px;
	vertical-align: top;
  }

.table_button:hover {
	background-color: #f0d4d4;
	color: #000000;
  }

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

Step 2: Apply the HTML Tag

In this step, we will apply some HTML tags to the text on the Table block you want to set as a button.

Add or Edit the Table Block

Go to the Gutenberg WordPress editor to create new content (page/post) or select your existing content with the Table block inside. Tweak and style up your Table block with your preference.

Next, specify the text/s you want to set as the buttons. In this example, we will set the “Select Plan” as the button.

Edit the Block as HTML

Navigate to the block toolbar by clicking the Options button () -> Edit as HTML.

Please follow the steps below:

  • Assign the text/s you want to as the buttons (e.g.: Select Plan)
  • Add the <span> tag before the text, and then close it with the </span> after the text that you assigned as a button
  • Add class="table_button" within the tag

Once you’ve finished adding HTML tags to your Table block, please return to the visual editor and preview your page by clicking the Preview button.

Step 3: Add the Link to the Button

As you can see from the image above, the text already looks like a button but still can’t be clicked. So, it’s time to add a link to the buttons.

Select the text/s you assigned as the buttons, then click the Link button (🔗) in the toolbar. In the box that appears, enter the URL of the link.

That’s it. You can preview the page to see the result. Don’t forget to save or publish your project if you want to.

Note: Feel free to modify the button’s appearance by editing the property values in the CSS snippet, such as the text and background color, border radius, padding, etc.

The Bottom Line

This article shows how easily you can add the buttons to the WordPress Table block in Gutenberg without the help of any plugins. Adding a button to a table in Gutenberg without needing a plugin is feasible and can enhance the functionality and aesthetics of your WordPress content. Following the step-by-step guide outlined in this article, you can seamlessly incorporate buttons into your tables, providing an interactive and user-friendly experience for your website visitors.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

2 thoughts on “How to Add Button to Table Block in WordPress Block Editor (Without Plugin)”

  1. Thanks for the code, Akbar. I have one question. What if I wanted to center the button only (with the rest of the table content left-aligned).

    Reply
  2. Hi Melissa!
    Thank you for visiting our site.
    Regarding your question, please input the following CSS property below inside the declaration of custom CSS snippet above (after the text-align property):

    left: 25%;
    transform: translateX(25%);

    Replace the values with your preference.

    Thank you!

    Reply

Leave a Comment