Wordpress + Coda Starter Kit

Explore

Wordpress + Coda Starter Kit

Wordpress + Coda Starter Kit

Shortcode Manager (SCM)

1. Embed A Table

Level: Basic

⁠

Creating a Shortcode⁠

⁠

Re-syncing Shortcodes⁠

⁠

Adding a Shortcode to your website⁠

⁠

1. Create your first Shortcode

Without needing to know all parameters straight away, we will start by creating the most basic Shortcode type - which is displaying a table on your website.

Step 1.1 -Example Table and ID’s

Start by creating your own Coda example table or duplicate the example below and add some random data. Copy the table or view ID ready for the next step.

Paste your View ID here to remember for the next step: _____

NOTE: Go through
How to get Coda IDs⁠
if you get stuck finding the ID

Example Table - Opening Hours | ID = table-3ClmPOlOPD

Example Table - Opening Hours |  ID = table-3ClmPOlOPD

Day

Opening Time

Closing Time

Monday

9am

6pm

Tuesday

9am

6pm

Thursday

9am

9pm

Wednesday

9am

12pm

Sunday

9am

1pm

Friday

9am

5pm

Saturday

9am

1pm

There are no rows in this table

⁠

Step 1.2 - Create shortcode with a simple button

Here we have created a button to add the row in the table below. Click the button below to create a row in the SCM , give it a “Name” and a “Unique Shortcode Slug” and in the “View ID” field paste in your example “table or view ID” you saved from the previous step. Click the “CREATE SHORTCODE“ button once done.

⁠

Create A Row In The SCM Table

⁠

If successful a pop up should appear like below.

⁠

We will see our new entry in our SCM below. You will notice the status is “WP Re-Sync Required”. This is because we have yet to sync back the “Shortcode” table from Wordpress. We will do that in the next step.

SCM - Create A Shortcode

SCM  - Create  A Shortcode

Status

Embed Type

Name

Unique Shortcode Slug

Paste Shortcode into Wordpress

View or Table ID

Delete

Table View Sync

Opening Hours Table

Opening Hours

[coda id="Opening Hours"]

table-NBT4FB_ew8

Delete

Table View Sync

Advanced Opening Hours

[coda id="Advanced Opening Hours"]

table-TENJ0UqN3P

Delete

Table View Sync

Stock Prices

stocks

[coda id="stocks"]

table-2lSYnnTbL4

Delete

Table View Sync

Weather Table AU

weather-aud

[coda id="weather-aud"]

table-e9ZfFCqble

Delete

Table View Sync

5 Day Sydney Weather Forecast

weather-5day

[coda id="weather-5day"]

table-T3O8E_BCmN

Delete

Table View Sync

TEst

testme

[coda id="testme"]

grid-6FDDa38Pr4

No results from filter

⁠

2. ReSync Your Shortcodes table

After you have create your first shortcode, ensure to “Re-sync” your shortcode table back so you can check it has worked. You should see it show up in you shortcode table, confirming it has worked. We have pasted a

View⁠

of it in this page so you can check quickly.

First re-sync the shortcode table below

⁠

Then push the “Re-sync” button below the table

Now check the SCM table and “WP Re-Sync Required” should now be “In Sync”

Re-sync Shortcodes Table

Re-sync Shortcodes Table

⁠

Re-sync Shortcodes

⁠

IMPORTANT: If you edit, create, update save, without following the below process for each entry, rows will disappear or go out of sync.

Create Shortcode in SCM

Re-sync Shortcodes synced table

Push “Re-sync All Shortcodes” button

⁠

3. Adding to your website..

To display on your website paste the shortcodes in the page or post using the format [coda id=”your-shortcode” ]

You will find the shortcode to paste in the SCM column “Paste Shortcode into Wordpress” in the above table.

⁠

Save and publish your page or post then view to check to see if the Coda table has displayed correctly on your website

⁠

Syncing Tables: Best Practices & Troubleshooting 2

Syncing Tables: Best Practices & Troubleshooting 2

⁠

Next Steps

2. Row, Column & Cell⁠

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.