How it works
Shortcodes in WordPress are designed to output either strings or HTML, so when using the standard [wpgetapi_endpoint] shortcode, you must set the Results Format in WPGetAPI to JSON string which often results in a bunch of gibberish being displayed like in the image below.
The Pro Plugin has a built-in option that will allow us to set the Results Format to PHP array data and it will then convert this and display it as HTML on your page. This HTML can then be easily manipulated using CSS.
You then simply need to add the ‘format’ attribute in your shortcode and set it to ‘HTML’ as shown below.
[wpgetapi_endpoint api_id='quotable' endpoint_id='random' format='html']Note: This feature will ‘flatten’ any multidimensional arrays so that each item is all on the same top level. It does not keep any arrays within the data nested.
Endpoint settings
In the endpoint settings page, the Results Format should be set to PHP array data.
Shortcode attributes
There 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']The HTML output
The output of a standard JSON API might look something like in the image below.
Using the format=’html’ attribute, our output will now look something like in this image:
This looks a little better but it still doesn’t look amazing.
When we look at the source code of our new little piece of 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 formatted data look anyway 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 output from above can now be easily styled using CSS. This is the result:
And below is the CSS that was used.
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 done some simple styling to the rest.
.wpgetapi__id,
.wpgetapi_0,
.wpgetapi_authorSlug,
.wpgetapi_length,
.wpgetapi_dateModified {
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::before,
.wpgetapi_content::after {
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: bold;
display: inline-block;
color: #040404;
}
.wpgetapi_dateAdded {
display: inline-block;
font-size: 14px;
margin-left: 12px;
color: #888;
}Optional shortcode attributes
We haven’t yet touched on how to use the 2 optional shortcode attributes: html_tag and html_labels
html_tag attribute
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 attribute
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: Camel Case
