Gallery
Wordpress + Coda Starter Kit
Share
Explore
Shortcode Manager (SCM)

icon picker
1. Embed A Table

Level: Basic

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 if you get stuck finding the ID
Example Table - Opening Hours | ID = table-3ClmPOlOPD
8
Day
Opening Time
Closing Time
1
Monday
9am
6pm
2
Tuesday
9am
6pm
3
Thursday
9am
9pm
4
Wednesday
9am
12pm
5
Sunday
9am
1pm
6
Friday
9am
5pm
7
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.
image.png
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
11
Status
Embed Type
Name
Unique Shortcode Slug
Paste Shortcode into Wordpress
View or Table ID
1
Delete
Table View Sync
Opening Hours Table
Opening Hours
[coda id="Opening Hours"]
table-NBT4FB_ew8
2
Delete
Table View Sync
Advanced Opening Hours
Advanced Opening Hours
[coda id="Advanced Opening Hours"]
table-TENJ0UqN3P
3
Delete
Table View Sync
Stock Prices
stocks
[coda id="stocks"]
table-2lSYnnTbL4
4
Delete
Table View Sync
Weather Table AU
weather-aud
[coda id="weather-aud"]
table-e9ZfFCqble
5
Delete
Table View Sync
5 Day Sydney Weather Forecast
weather-5day
[coda id="weather-5day"]
table-T3O8E_BCmN
6
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
image.png
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
3
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.
image.png
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
11

Next Steps


Share
 
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.