PRO: JCI and TablePress

The Plugin “TablePress” and the PRO version of the JSON Content Importer can work together in this way:

  1. Create a new TablePress-Table with e. g. two columns and two rows. Fill the cells with some dummy text. This gives you a shortcode
    [table id=NUMBER_OF_TABLEPRESS_TABLE /].  
  2. Create a new JCI-Plugin Template:

Name: tablepress

name: {{}}

1a: {{}}1b


name: Love Breakfast
1a: Love Breakfast1b

3. Insert {{}} in a table-cell of the Tablepress-Table. Then reload the page and you should see the JSON-data in the Table.

If the number of columns or rows is dynamic: Up to my knowledge TablePress has a fixed number of cols and rows. So this is not that flexible.
Maybe Table Sort is an option then.

JCI and Tablepress in Action:

name: Love Breakfast

1a: Love Breakfast1b

PRO: JSON & Slider – How to do it with the jQuery Lightslider-Lib

Your challenge:
You have some URLs to Images in your JSON-Feed. Those images should be displayed in a image-slider.

There are many ways to do that:
One way is to use a PRO-slider like Smartslider and feed him with RSS, build out of JSON.

Another way is to use the jQuery lightSlider Library (see also here).

  1. Example JSON:
  2. Create a new JCI-Template:
    • Name: lightslider
    • URL:
    • twig-Template:
<link type="text/css" rel="stylesheet" href="">                  
<script src="//"></script>
<script src=""></script>
<ul id="lightSlider">
{% for d in _context %}
<img src="{{d.venue.img}}">
{% endfor %}
<script type="text/javascript">
  $(document).ready(function() {
        speed: 1500,
        auto: true,
        loop: true

ATTENTION: In this Twig-code are three Script-Tags, loading code from remote servers. You can do that for testing. For a productive website you should host the JS-libs on your own servers!

  • “jquery.min.js” you can add via the JCI-options, Tab “Extra”
  • “lightslider.css” / “lightslider.js” you find at at “Download”. In the zip you find a folder “dist”. Copy the files from that (js and css) to your server and insert the URL to the two libs in the JCI-template.

Insert this Shortcode on a WordPress-Page:

[jsoncontentimporterpro nameoftemplate=lightslider]

In Action:

PRO: Display & Search JSON and pass it to a Contact Form

Challenge: You have to display and search a JSON like

Create two JCI-Templates and Pages and get that:

PAGE 1: Display-Page:

[jsoncontentimporterpro nameoftemplate=hrus]

on page /hrus-list-all/ (you can change that, but then you have to change it in the Twig-code of both Templates too!)

JCI-Template 1:
Name: hrus
urlparam4twig: jobsea

<form action="/hrfuturebrandsus/">
<input type="text" name="jobsea" value="{{urlparam.jobsea}}">
<input type="submit">

{% set jobanz = 0 %}
{% set jobtxtout = '' %}
{% for c in _context %}
{% if c.title %}
{% set jobtxt  = '
<h1>' ~ c.title ~ '</h1>
' %}
{% set jobtxt  = jobtxt  ~ c.summary ~ '
' %}
{% set jobtxt  = jobtxt  ~ '<i>' ~ c.employment_status ~ '</i>' %}
{% set jobtxt  = jobtxt  ~ ' <a href="/hrus-detail/?slug=' ~ (c.slug | url_encode) ~ '">View Job</a>' %}
{% set jobtxt  = jobtxt  ~ '


' %}
{% if urlparam.jobsea %}
{% if 
(c.title matches '/'~urlparam.jobsea~'/i') or
(c.summary matches '/'~urlparam.jobsea~'/i')
{% set jobtxtout =jobtxtout ~ jobtxt  %}
{% set jobanz = jobanz +1 %}
{% endif %}
{% else %}
{% set jobtxtout =jobtxtout ~ jobtxt  %}
{% set jobanz = jobanz +1 %}
{% endif %}
{% endif %}
{% endfor %}
{% if urlparam.jobsea %}
{{ jobanz}} Jobs found
{% else %}
Current {{ jobanz}} Positions Open:
{% endif %}

PAGE 2: Details-Page
“orderofshortcodeeval=2” tells the plugin to execute the Contact Form first and then insert the JSON-Values

[jsoncontentimporterpro nameoftemplate=hrusdetail orderofshortcodeeval=2]

on page /hrus-detail/ (you can change that, but then you have to change it in the Twig-code of the Display-Page Templates !)

JCI-Template 2:
Name: hrusdetail
urlparam4twig: slug

{% set jobtitle = "" %}
{% for c in _context %}
{% if (c.title and (urlparam.slug==c.slug)) %}


{% set jobtitle = (c.title) %}
{% endif %}
{% endfor %}

<a href="/hrus-list-all//">Back to all Jobs</a><br>
insert shortcode for contact form here, hereby insert info about selected job, here we go with "contact-form-7"<br>
[contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"]

contact-form-7 (option):
If you need to add a Contact-Form for the User the Plugin Contact-Form-7 is an option.
For that install Contact-Form-7 and add a new Form with this Code:

<label> Job
    [text* job "{{jobtitle}}"] </label>

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional)
    [textarea your-message] </label>

[submit "Submit"]

Name that, save it and then you get a Shortcode like [contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"].

The {{jobtitle}} is transformed with the JSON-Data. For that, check the JCI-Options at “Shortcode Settings”: The Radiobox at “Usage of Shortcodes (JCI or other) in the JCI-twig-Template” must be at the “Or the other way round: Executing Shortcodes in the template first and then evaluate the twig-code”

PRO: Show Data and pass it to Contact Form

Current 3 Positions Open:

Digital Manager

The Digital Manager is responsible...
Full Time Contract View Job

Project Coordinator

The Project Coordinator will manage all marketing programs in the initial stage...
Temporary Contract View Job


The Person is responsible for brainstorming, setting up and optimizing...
Full Time Contract View Job

PRO: Display JSON as a Chart -amCharts-Plugin

This plugin shos you how to display JSON-data in a Chart. For that we use the amChart-Plugin.

In Action:



<!-- Styles -->
#chartdiv {
  width: 100%;
  height: 500px;

<!-- Resources -->
<script src=""><\/script>
<script src=""><\/script>
<script src=""><\/script>

<!-- Chart code -->
am4core.ready(function() {

// Themes begin
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart); = 0; // this creates initial fade-in = [
{% for c in _parent %}
    country: "{{}}",
    visits: {{c.visits}}
{% if (not loop.last) %},{% endif %}
{% endfor %}

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 40;
categoryAxis.fontSize = 11;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 24000;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;
// axis break
var axisBreak = valueAxis.axisBreaks.create();
axisBreak.startValue = 2100;
axisBreak.endValue = 22900;
axisBreak.breakSize = 0.005;

// make break expand on hover
var hoverState = axisBreak.states.create("hover"); = 1; = 0.1;
hoverState.transitionDuration = 1500;

axisBreak.defaultState.transitionDuration = 1000;
// this is exactly the same, but with events"over", function() {
    [{ property: "breakSize", to: 1 }, { property: "opacity", to: 0.1 }],
});"out", function() {
    [{ property: "breakSize", to: 0.005 }, { property: "opacity", to: 1 }],

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;

// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", function(fill, target) {
  return chart.colors.getIndex(target.dataItem.index);

}); // end am4core.ready()

<!-- HTML -->
<div id="chartdiv"></div>

PRO: Slider & API – Smartslider & JCI

  • Your task:
    Connect a slider with an API. The API (JSON; XML, CSV) gives all info for images, text and links for a slider on a WordPress-Page.
  • Solution:
    Install the PRO-Version of the JCI-Plugin and the plugin “Smartslider3 PRO.
    With the JCI-Plugin you can create a RSS-Feed out of the API-data.  The GET-Parameter “?show=oc” removes the WordPress-Template and creates pure RSS : This RSS-URL can be used to feed the RSS-Generator of the Smartslider.
  • In Detail:
    Create a JCI-Template with the following template-code for static RSS. By adding twig and an URL you can add API-data.
    RSS-XML-Code for the Slider:
<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
    <copyright>Copyright 20...</copyright>
    <lastBuildDate>Tue, 21 Oct 2019 03:19:24 -0800</lastBuildDate>
    <pubDate>Tue, 21 Oct 2019 12:18:22 -0300</pubDate>
      <pubDate>Tue, 21 Oct 2019 07:38:46 -0800</pubDate>

Notice: RSS is sensitive to special chars and chars used for RSS itself. Therefore consider to mask JSON-data in a CDATA-tag:


Name this JCI-Template e. g. “rss” and add this Shortcode to a page:

[jsoncontentimporterpro nameoftemplate=rss]

Publish this page and add “?show=oc” to the URL: This removes the WordPress-Template and gives pure RSS / XML.
This URL can be used with the SmartSlider 3 RSS-connector.

Sort data in Browser: Table Sorter and PRO JCI-Plugin

The number of Bitcoin transactions added to the mempool per second.
no (sortable) x x (sortable) y (sortable) randomno (sortable)

Credits: Thank you Lawrence from South Melbourne, Austr

see more how this is done: