Data Content Publisher

Basic Field References

Recommended Workflow

1. Build the visual layout in Gutenberg or Elementor first.
2. Copy the HTML into the template editor.
3. Replace static text with DCP fields such as [title], [col_1], and [image_url].
4. Add DCP logic only where needed: [if], [repeat].
5. Keep nesting shallow. If the template becomes too complex, revise the database structure instead.

DCP is not a visual page builder. The most natural workflow is to design first, then convert the static parts into DCP variables and logic.

Conditional Branching (if)

Basic Conditions

Multiple Conditions

Modulo Conditions

Loop and Section Tags

Control-style tags use explicit closing names such as [endif], [endrepeat], [end_before], and [end_after].

Repeat nesting is supported up to 3 levels. For readability and performance, 2 levels or fewer are recommended.

Deep nesting can become heavy when control tags are combined. Save validation and preview warnings will alert you when nesting becomes too deep.

Link Tag

Both direct values and variable-style values are supported. [link="url"] is the simplest canonical example.

Special Variables

Icon + Title Link

Displays the image and title, and turns them into a link when a URL exists.

[if url=fill]
  [link="url"]
  [image_url width="50"]<br>
  [title]
  [/link]
[else]
  [image_url width="50"]
  <br>[title]
[endif]

Icon Only

Displays only the image, and turns it into a link when a URL exists.

[if url=fill]
  [link="url"]
  [image_url width="50"]
  [/link]
[else]
  [image_url width="50"]
[endif]

Three-Column Wrap

Displays icons and titles in a wrapping three-column layout. Requires the Flexible Table Block plugin.

[before]<!-- wp:flexible-table-block/table -->
<figure class="wp-block-flexible-table-block-table"><table class="has-fixed-layout"><tbody><tr>
[end_before]
<td style="text-align:center">
  [if url=fill]
    [link="url"]
    [image_url width="50"]<br>
    [title]
    [/link]
  [else]
    [image_url width="50"]
    <br>[title]
  [endif]
</td>
[if _counter%3=0]
</tr><tr>
[endif]
[after]
</tr>
</tbody></table></figure>
<!-- /wp:flexible-table-block/table -->
[end_after]

Note: _counter%3=0 inserts a line break every third item. Change the number if you want a different column count.

Overview

This feature lets you interactively sort and filter table data on the front end. Because it runs in JavaScript, filtering happens instantly without page reloads.

Creating Sort Presets

You can create reusable filter settings from the Sort Settings screen in the admin area.

Filter Types

Using Presets in Shortcodes

Specify the sort preset you created in a shortcode.

Basic Usage

Setting the data-sort Attribute

Important: You must manually add the data-sort attribute to table headers (<th>). Filtering will not work without it.

How to Define data-sort

The Sort Settings edit screen displays copy-ready data-sort attribute examples. Copy them and paste them into your template header.

Complete Template Example

This example creates a table similar to a Pokemon index.

Template Content

[before]<!-- wp:flexible-table-block/table -->
<figure class="wp-block-flexible-table-block-table"><table class="has-fixed-layout"><tbody><tr>
<th style="text-align:center;width:10%" data-sort="col_7">No</th>
<th style="text-align:center">Pokemon</th>
<th style="text-align:center" data-sort="col_4">Type</th>
<th style="text-align:center">Base Stats</th>
</tr>
[end_before]
<tr>
  <th style="width:10%;text-align:center">[col_7]</th>
  <td style="text-align:center">
    [if url=fill]
      [link="url"]
      [image_url width="100"]<br>
      [title]
      [/link]
    [else]
      [image_url width="100"]
      <br>[title]
    [endif]
  </td>
  <td style="text-align:center">[dcpub_template id="41" title="[col_4]"][dcpub_template id="41" title="[col_5]"]</td>
  <td style="text-align:center">[col_9]-[col_10]-[col_11]-[col_12]-[col_13]・・col_14]・・lt;/td>
</tr>
[after]
</tbody></table></figure>
<!-- /wp:flexible-table-block/table -->
[end_after]

Note: Please use full-width parentheses ・茨ｼ・ Some patterns containing half-width parentheses () may be falsely blocked by WAF.

Shortcode

Map Embed (Google Maps)

To embed Google Maps in your template, set the column type to Map when creating the database.

How to use

1. In your database, add a column and set its type to Map.
2. In the entry editor, paste the Google Maps embed code (<iframe>) into the Map column. The plugin automatically extracts the URL.
3. In the template, use the column variable (e.g. [col_3]) to output the map.

Template Examples

Getting the Embed Code

1. Open Google Maps and find the location.
2. Click Share 竊・Embed a map.
3. Copy the entire <iframe> code and paste it into the entry cell.

You can also paste just the embed URL directly. No API key is required.

OR Search and AND Search

Type selection filters let you choose the search mode.

How to Get Filter Options

Filter choices can be configured in two ways.

1. Auto-load from the DB

After selecting a target column, click the "Load from DB" button to automatically fetch all existing values from that column.

2. Add Manually

You can add choices one by one with the "Add Manually" button. You can specify the value, label, and icon URL.

Troubleshooting

Nothing happens when I click a filter button

• Make sure the data-sort attribute is correctly set on the table headers
• Check the browser console (F12) for errors

All entries disappear

• Make sure the column names used in data-sort match your actual data
• Make sure the columns configured in the filter match the columns used in the template

The template cannot be saved

• Some patterns containing half-width parentheses () (for example [col_14])) may be falsely blocked by WAF
• Please change them to full-width parentheses ・茨ｼ・/code>