{"id":2514,"date":"2019-04-04T09:09:39","date_gmt":"2019-04-04T09:09:39","guid":{"rendered":"https:\/\/wpvivid.com\/?p=2514"},"modified":"2019-04-04T09:09:39","modified_gmt":"2019-04-04T09:09:39","slug":"build-tables-with-custom-fields","status":"publish","type":"post","link":"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html","title":{"rendered":"How to Build Tables with A Custom Field in WordPress?"},"content":{"rendered":"

Are you scratching your head trying to figure out how to build tables with custom fields in your WordPress website<\/a>?<\/p>\n

Before we even dive a little deeper into this, let us first address the need of custom fields altogether.<\/p>\n

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,<\/a> for instance, keywords and metadata<\/a> are inserted into your content using these custom fields.<\/p>\n

These fields are powerful when it comes to creating a robust content management system<\/a>.<\/p>\n

If you are a typical person or client who needs a place to publish their thoughts \u2013 aka a blog<\/a>, or a small business<\/a> that wants a brochure site to showcase its values and services<\/a>, then there is no need for custom fields or reading this article.<\/p>\n

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<\/a>.<\/p>\n

As a developer, you get to control how your content is displayed and position<\/a> on the front end where you can rightly capture it with the right custom fields.<\/p>\n

Alright, enough of that, let us build tables with custom fields on our WordPress website.<\/p>\n

\n

Step by Step: How to build tables with a custom field in WordPress?<\/h2>\n<\/blockquote>\n

We are going to use Advanced Custom Fields plugin in WordPress that provides a developer the means to create custom fields for their content.<\/p>\n

Natively however Advanced Custom Fields does not come with tables.<\/p>\n

If you need to add a custom field to your content where a table is required<\/a>, then you would have to extend Advanced Custom Fields with another plugin Advanced Custom Fields: Table Field WordPress<\/p>\n

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 <\/a>install it first before you can continue with this guide.<\/p>\n

Note:<\/b><\/strong> At the time of writing, Advanced Custom Fields Gutenberg editor<\/a> compatibility is still in beta mode.<\/p>\n

This guide also assumes you are familiar with Advanced Custom Fields or are a developer.<\/p>\n

Go ahead and install Advanced Custom Fields: Table Field WordPress plugin.<\/p>\n

\"install<\/p>\n

Advanced Custom Fields: Table Field WordPress plugin works straight out of the box; there is no configuration or settings you need to make.<\/p>\n

It is added to the layout section<\/a> under field types of your custom field.<\/p>\n

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.<\/p>\n

\"no<\/p>\n

On Installation and activation, we now have the table layout under field type.<\/p>\n

\"the<\/p>\n

How to build tables?<\/strong><\/h4>\n

First, we need to create a new field group or edit an existing one to insert the table field to it. ,<\/p>\n

On the Menu navigate to Custom Fields, then click Add New.<\/p>\n

\"add<\/p>\n

Provide a title to your new field group, then click Add Field to add fields to your group.<\/p>\n

\"add<\/p>\n

Supply all the relevant information related to your post or content needs.<\/p>\n

What we are specifically interested in is adding the table to our post or page.<\/a><\/p>\n

For that, select the table from the drop-down menu under field type.<\/p>\n

\"select<\/p>\n

Remember to save after you have made any changes. The publish button is found on the top right corner.<\/p>\n

\"publish<\/p>\n

When you create or edit an existing page or post, you should see the new custom field with the table you created earlier.<\/p>\n

\"the<\/p>\n

Understanding the Table layout.<\/strong><\/h4>\n

\"understand<\/p>\n

    \n
  1. The + Icon adds a column to the left of \u00a0or before the current column \u2013 in my case column A<\/li>\n
  2. The + icon on the right, adds a column to the right of or before the column \u2013 in my case column A.<\/li>\n
  3. Clicking this icon adds a row on top of the current row 1.<\/li>\n
  4. Adds a row to the bottom of the clicked row 1.<\/li>\n
  5. Deletes the column<\/li>\n
  6. Deletes the row<\/li>\n
  7. 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.<\/li>\n<\/ol>\n
    \n

    Conclusion<\/h2>\n<\/blockquote>\n

    You or your client should be able to build tables on their posts or pages.<\/p>\n

    You can now go ahead and add your table to your theme files<\/a>.<\/p>\n

    If you are using Advanced Custom Fields alongside Advanced Custom Fields: Table Field, then share with us your thoughts in the comment section<\/a> below.<\/p>\n

    You may also want to integrate charts and graphs into your WordPress site<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Need to build tables with custom fields in your website? Follow our step-by-step guide on how to build tables with a custom field in WordPress.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":64},"categories":[80],"tags":[],"yoast_head":"\nHow to Build Tables with A Custom Field in Wordpress? - WPvivid<\/title>\n<meta name=\"description\" content=\"Need to build tables with custom fields in your website? Follow our step-by-step guide on how to build tables with a custom field in WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Tables with A Custom Field in Wordpress? - WPvivid\" \/>\n<meta property=\"og:description\" content=\"Need to build tables with custom fields in your website? Follow our step-by-step guide on how to build tables with a custom field in WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html\" \/>\n<meta property=\"og:site_name\" content=\"WPvivid\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-04T09:09:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/04\/install-Advanced-Custom-Fields-Table-Field-Wordpress-plugin.png\" \/>\n<meta name=\"author\" content=\"TonyRobins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"TonyRobins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html\",\"url\":\"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html\",\"name\":\"How to Build Tables with A Custom Field in Wordpress? - WPvivid\",\"isPartOf\":{\"@id\":\"https:\/\/wpvivid.com\/#website\"},\"datePublished\":\"2019-04-04T09:09:39+00:00\",\"dateModified\":\"2019-04-04T09:09:39+00:00\",\"author\":{\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0\"},\"description\":\"Need to build tables with custom fields in your website? Follow our step-by-step guide on how to build tables with a custom field in WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpvivid.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build Tables with A Custom Field in WordPress?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpvivid.com\/#website\",\"url\":\"https:\/\/wpvivid.com\/\",\"name\":\"WPvivid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpvivid.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0\",\"name\":\"TonyRobins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png\",\"contentUrl\":\"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png\",\"caption\":\"TonyRobins\"},\"url\":\"https:\/\/wpvivid.com\/author\/tonyrobins\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build Tables with A Custom Field in Wordpress? - WPvivid","description":"Need to build tables with custom fields in your website? Follow our step-by-step guide on how to build tables with a custom field in WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html","og_locale":"en_US","og_type":"article","og_title":"How to Build Tables with A Custom Field in Wordpress? - WPvivid","og_description":"Need to build tables with custom fields in your website? Follow our step-by-step guide on how to build tables with a custom field in WordPress.","og_url":"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html","og_site_name":"WPvivid","article_published_time":"2019-04-04T09:09:39+00:00","og_image":[{"url":"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/04\/install-Advanced-Custom-Fields-Table-Field-Wordpress-plugin.png"}],"author":"TonyRobins","twitter_card":"summary_large_image","twitter_misc":{"Written by":"TonyRobins","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html","url":"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html","name":"How to Build Tables with A Custom Field in Wordpress? - WPvivid","isPartOf":{"@id":"https:\/\/wpvivid.com\/#website"},"datePublished":"2019-04-04T09:09:39+00:00","dateModified":"2019-04-04T09:09:39+00:00","author":{"@id":"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0"},"description":"Need to build tables with custom fields in your website? Follow our step-by-step guide on how to build tables with a custom field in WordPress.","breadcrumb":{"@id":"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpvivid.com\/build-tables-with-custom-fields.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpvivid.com\/build-tables-with-custom-fields.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpvivid.com\/"},{"@type":"ListItem","position":2,"name":"How to Build Tables with A Custom Field in WordPress?"}]},{"@type":"WebSite","@id":"https:\/\/wpvivid.com\/#website","url":"https:\/\/wpvivid.com\/","name":"WPvivid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpvivid.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0","name":"TonyRobins","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpvivid.com\/#\/schema\/person\/image\/","url":"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png","contentUrl":"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png","caption":"TonyRobins"},"url":"https:\/\/wpvivid.com\/author\/tonyrobins"}]}},"_links":{"self":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts\/2514"}],"collection":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/comments?post=2514"}],"version-history":[{"count":0,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts\/2514\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/media?parent=2514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/categories?post=2514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/tags?post=2514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}