Tutorial: 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:

Find the right HTTP request

 

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:

Copy 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:

Copy JSON data

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:

Find data in JSON viewer

 

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:

Create new Twig Template

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:

Here is how this template renders:


No results

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.

That easy! Now our topic titles are clickable, check it right here:


No results

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:

Copy template slug

Alternatively, copy a ready-to-use shortcode from the Shortcode panel found to the right of your template code:

Copy shortcode

Now you can output your template wherever you need in WordPress: in posts, pages, widgets, footers etc.


Continue to the Download page or see more Discourse integration examples.