Import data from Discourse to WordPress
Anything you can see on the Discourse website you can also get in JSON format – because Discourse is backed by a complete JSON api.
To retrieve information from Discourse and output it in WordPress, here are some steps you can follow. In our example, let us fetch the results of searching for the “image” keyword and display the list of topics in WordPress.
Step 1. Find data that you want to display in WordPress
First, open your forums home page. For demonstration purposes, we will use the Discourse Meta home page. Open Developer Tools: Ctrl+Shift+J (Window) or Command+Option+i (MacOS) or Menu -> More Tools -> Developer Tools.
Now switch to the Network tab to show HTTP requests, then click on the XHR tab. Now search for the “Image” keyword and watch for a new HTTP request appearing in the Developer Tools:
Now click on the HTTP request on the left and a lot of details will appear on the right. All you need is to copy the Request URL:
In our example, the request URL is:
https://meta.discourse.org/search/query?term=image&include_blurbs=true&_=1436341924674
Next, remove the &_=1436341924674 part from the URL and add .json right before the question mark – you will get the JSON endpoint URL that outputs the search results in the JSON format:
https://meta.discourse.org/search/query.json?term=image&include_blurbs=true
Now, open the URL in your browser and copy all the output – Right Click, then Select All, then Right Click, then Copy:
Open this tiny nline JSON editor and paste the JSON text into the left panel, so that you can see the data in a structured way on the right panel:
Finally, you will find all the data that you want to fetch and display on your website, so let us proceed to the following step.
Step 2. Create a new Twig Template
Click on the “Add New” menu under the “Twig Templates” menu and configure from where data should be retrieved:
The next step is to enter the template that will display your data the way you want it. The template is simply HTML with some Twig syntax in it.
To output any field from the data, use the {{data.field1.field2.etc}} syntax. data is a starting point keyword that is always passed to Twig and holds the whole JSON data.
In our example, we want to loop through the topics array. We should also check if there are any results available to output. So our first version of the template looks like this:
{% if data.topics is iterable %}
{% for topic in data.topics %}
- {{ topic.title }}<br/>
{% endfor %}
{% else %}
No results
{% endif %}
Here is how this template renders:
[twig-anything] shortcode error: Cannot json-decode the data retrieved. The json_decode() PHP function returned NULL.
Step 3. Make topic titles clickable
Let us make topic titles clickable. For this, we will need to use the <a> HTML tag and build a topic link with using topic id and topic slug.
{% if data.topics is iterable %}
{% for topic in data.topics %}
- <a target="_blank"
href="https://meta.discourse.org/t/{{topic.slug}}/{{topic.id}}">
{{ topic.title }}
</a>
<br/>
{% endfor %}
{% else %}
No results
{% endif %}
That easy! Now our topic titles are clickable, check it right here:
[twig-anything] shortcode error: Cannot json-decode the data retrieved. The json_decode() PHP function returned NULL.
Step 4. Embed the template anywhere in WordPress
To output your template in WordPress, just use the standard WordPress shortcodes mechanism:
[twig-anything slug="abc"]
Replace abc by the slug found under the template title:
Alternatively, copy a ready-to-use shortcode from the Shortcode panel found to the right of your template code:
Now you can output your template wherever you need in WordPress: in posts, pages, widgets, footers etc.