CSV format add-on for Twig Anything

banner-772x250

This free add-on adds support for the CSV format (comma separated values).

DOWNLOAD FROM WORDPRESS.ORG

The add-on is a standard WordPress plugin. Once it is installed, you will find a new option in the Data Format dropdown box:

Comma separated values Format

3 configuration options are available for the CSV reader:

CSV format settings

Below are two examples:

  1. Output a simple multiline text from your CSV
  2. Generate a beautiful table from your CSV

Demo 1 – multiline text

Let us use a CSV file with a list of countries and their corresponding top-level domain names (TLD). Here is an extract from the file:

We want to display TLDs for all countries that start with “D”, just like this (the output below is generated with using a live template!):

Denmark - .dk
Djibouti - .dj
Dominica - .dm
Dominican Republic - .do

 

Columns are numbered starting from #0, so we will need the column #0 (country name) and #5 (top-level domain name).

After the input is parsed, the resulting lines are passed to your Twig template as the data variable. You can then loop over it with using Twig”s “for” syntax:

{% for row in data %}...{% endfor %} is the loop. The code inside the loop will be rendered once for every line from the CSV file.

Let us take a closer look at this piece: if row.0|slice(0,1)|upper == ''D''

First of all, row.0 is how we access column #0, a country name in our case. Next, |slice(0,1) is a Twig filter that takes the first character of the country name. The next filter is |upper and it simply uppercases the first letter returned by the previous filter. Finally, we only allow for countries that start with the “D” letter: == ''D''.

Inside the loop, we output a country name with using {{row.0}} and a TLD name with using {{row.5}}. Plus a very basic HTML markup: <br/> to insert a line break and <strong>...</strong> to make TLD name appear bold.

Demo 2 – a beautiful table

COUNTRY TLD
Denmark .dk
Djibouti .dj
Dominica .dm
Dominican Republic .do

Generating a table like this from your CSV if pretty easy!

We will need some HTML markup in our template. If you are not very familiar with HTML, I recommend going through the following tutorials – you”ll learn in 10 minutes, I guarantee!

You can also use the following table generators and just copy-paste the HTML they generate right into your template. The generators also allow to apply some basic styling, like borders, colors, margins, paddings etc:

We are going to use the following HTML tags:

  • <table>...</table> to make a table
  • <thead>...</thead> to make a table header with column headings
  • <tbody>...</tbody> to make a table body with all the rows from CSV
  • <tr>...</tr> to make a table row
  • <th>...</th> to make a cell in the header”s row
  • <td>...</td> to make a cell in a regular rows in the table”s body

For simplicity, I just generated HTML for this demo with using TextFixer”s table generator. It also generates <style></style> to add some styles, and here is the final template with twig syntax in it to generate multiple table rows:

Notice how we use the {% for row in data %} syntax to loop over CSV lines, and then output a table row <tr>...</tr> inside the loop, so that a new row is made for every CSV line.

Actually, you can use just about any HTML and apply any CSS rules to it. Just don”t forget to put {{row.0}}, {{row.1}} etc where you want your csv values in the table cells, e.g.: <td>{{row.0}}</td>.

Embed with shortcodes

While you prepare your template, you usually preview it many times by clicking the “Preview Changes” button. Once you are happy with the preview, you will want to embed it somewhere – in a post / page, footer / header, widget or as a Visual Composer block (see how).

To embed your template, you will use a shortcode:

[twig-anything slug="my-template-slug"]

In WordPress, every Twig Template has its own slug, just like posts and pages. It can be found under the template title.

Alternatively, you can use the template ID:

[twig-anything id="123"]


That is it! Now why don”t you Download  CSV format add-on from the official WordPress plugins directory and try it yourself.

Note. Internally, a native PHP function str_getcsv() is used, so technically all 3 settings are passed directly to the function: Delimiter character, Enclosure character and Escape character.’