Are you scratching your head trying to figure out how to build tables with custom fields in your WordPress website?
Before we even dive a little deeper into this, let us first address the need of custom fields altogether.
WordPress has custom fields, which you can use to add fields to your content as you create them, if you look at your SEO plugin, for instance, keywords and metadata are inserted into your content using these custom fields.
These fields are powerful when it comes to creating a robust content management system.
If you are a typical person or client who needs a place to publish their thoughts – aka a blog, or a small business that wants a brochure site to showcase its values and services, then there is no need for custom fields or reading this article.
However, think of a business that has a little more requirements and data associations of their content. A standard post or page alone will not help you do this without messing around with the code.
As a developer, you get to control how your content is displayed and position on the front end where you can rightly capture it with the right custom fields.
Alright, enough of that, let us build tables with custom fields on our WordPress website.
Step by Step: How to build tables with a custom field in WordPress?
We are going to use Advanced Custom Fields plugin in WordPress that provides a developer the means to create custom fields for their content.
Natively however Advanced Custom Fields does not come with tables.
If you need to add a custom field to your content where a table is required, then you would have to extend Advanced Custom Fields with another plugin Advanced Custom Fields: Table Field WordPress
If you arrived at this page from a Google search about building tables with custom fields, then you need to know that this plugin requires Advanced Custom Fields install it first before you can continue with this guide.
Note: At the time of writing, Advanced Custom Fields Gutenberg editor compatibility is still in beta mode.
This guide also assumes you are familiar with Advanced Custom Fields or are a developer.
Go ahead and install Advanced Custom Fields: Table Field WordPress plugin.
Advanced Custom Fields: Table Field WordPress plugin works straight out of the box; there is no configuration or settings you need to make.
It is added to the layout section under field types of your custom field.
A quick you can see the before installing and or activating the plugin we do not have a table field in the field type of Advanced Custom Fields.
On Installation and activation, we now have the table layout under field type.
How to build tables?
First, we need to create a new field group or edit an existing one to insert the table field to it. ,
On the Menu navigate to Custom Fields, then click Add New.
Provide a title to your new field group, then click Add Field to add fields to your group.
Supply all the relevant information related to your post or content needs.
What we are specifically interested in is adding the table to our post or page.
For that, select the table from the drop-down menu under field type.
Remember to save after you have made any changes. The publish button is found on the top right corner.
When you create or edit an existing page or post, you should see the new custom field with the table you created earlier.
Understanding the Table layout.
- The + Icon adds a column to the left of or before the current column – in my case column A
- The + icon on the right, adds a column to the right of or before the column – in my case column A.
- Clicking this icon adds a row on top of the current row 1.
- Adds a row to the bottom of the clicked row 1.
- Deletes the column
- Deletes the row
- Adds data to a cell. Click the cell you want to add, remove or update data to; a tooltip will open up, make your modifications there and click anywhere on the screen.
Conclusion
You or your client should be able to build tables on their posts or pages.
You can now go ahead and add your table to your theme files.
If you are using Advanced Custom Fields alongside Advanced Custom Fields: Table Field, then share with us your thoughts in the comment section below.
You may also want to integrate charts and graphs into your WordPress site.