The problem
API data is usually returned in JSON string format, which is not very pretty at all and probably not how you want to display your API data.
If you know PHP and are comfortable working in theme files, then this JSON data won’t be an issue. But if you don’t know how to work with this data and you are using the [wpgetapi_shortcode], read on to find out how we can easily format this data.
Format as HTML easily
The Pro Plugin introduces a new parameter to the [wpgetapi_shortcode] that will allow us to display our data as HTML on your page.
We simply need to add the ‘format’ attribute to the shortcode and set it to ‘HTML’ as shown below.
[wpgetapi_endpoint api_id='quotable' endpoint_id='random' format='html']The HTML output
The output now looks something like the below. It is still not perfect, but looks much better and we can now freely style it with some CSS.
When we look at the source code of our newly formatted data, this is when we can start to see how this could be used to make things look a bit prettier. If you know CSS, then you can make this look basically any way you want to.
You will notice that CSS classes are automatically created by using the keys as the class names (prefixed with wpgetapi_).
Styling with CSS
Our HTML can now easily styled using CSS. This is the result of the same HTML with some quick styling applied:
Below is the CSS that was used and as you can see we have simply hidden the data that we don’t want to display by using display: none and then we have added some simple styling to the other classes.
.wpgetapi_0,.wpgetapi__id,.wpgetapi_authorSlug,.wpgetapi_dateModified,.wpgetapi_length{display:none}
.wpgetapi_html{border:1px solid #d7d7d7;padding:20px 30px 24px 22px;border-radius:10px;box-shadow:7px 7px 0 #ccc}
.wpgetapi_content{font-style:italic;margin:15px 0;font-size:20px;color:#3f57cc}
.wpgetapi_content::after,.wpgetapi_content::before{color:#cdcdcd;line-height:0;vertical-align:middle}
.wpgetapi_content::before{content:'\201C';font-size:69px;margin-right:5px}
.wpgetapi_content::after{content:'\201D';font-size:60px}
.wpgetapi_author{margin-left:38px;font-size:14px;font-weight:700;display:inline-block;color:#040404}
.wpgetapi_dateAdded{display:inline-block;font-size:14px;margin-left:12px;color:#888}
Optional shortcode attributes
There are also 2 optional shortcode attributes that get added with the Pro Plugin to further let you customise how your API data can be formatted: html_tag and html_labels
html_tag
The html_tag attribute can take in 3 different options which will affect the output of our HTML. The 3 options available are div, li and span. Here is the result of setting this to html_tag=’li’
html_labels
Setting the html_labels attribute to true – html_labels=’true’ – will add the keys as labels.
Each label will be wrapped within a span tag and will be output as shown in the images below. This option will also apply some formatting to the keys so that camelCaseKeys and also keys_with_underscores or keys-with-dashes will be formatted so that they look more like this: Correctly Formatted
Shortcode attributes
The are 3 shortcode attributes that will affect the HTML output.
- format – this needs to be set to html
- html_tag – can be set to div, li or span – this sets the HTML tag that each item will be wrapped in. Default is div.
- html_labels – can be set to true or false – this will take the key of each item in the API and add it in front of the value for each item. Default is false.
[wpgetapi_endpoint api_id='quotable' endpoint_id='random' format='html' html_tag='div' html_labels='false']Endpoint settings
To use the HTML formatting, the Results Format should be set to PHP array data in the endpoint settings page.
