Skip to main content

Boards Wordpress Installation Instructions

Installing Disqus Boards on your Wordpress site

Written by Ryan

Below are Wordpress-specific installation instructions for Boards. Please read through our Disqus Boards article for additional instructions and information on Boards.

The first step for installing Boards is getting in touch with our team for initial setup steps. If you are on the Preferred or Business plans, please reach out to your account manager. If not on one of these plans please reach out to us at publisher-success@disqus.com or through our Disqus For Business form. Please let us know which site or sites you'll be looking to set Boards up for.
​
Before you can begin installing Boards, our team will complete the Disqus-side setup steps, including creating a new Boards-specific shortname for each site that you'll be enabling Boards for. Typically the new shortname value will have a "boards-" prefix before the existing site's shortname value, such as "boards-SHORTNAME". Once our team has indicated that these steps have been completed, you may proceed with the installation steps below.

Installing Boards

  1. Create the page that Boards will live on

    1. In the WP internal admin, click Pages → Add New

    2. Give it the title and slug that you want (note: the slug will match this.basePath later)

      1. I.e. if the slug is “boards”, the URL will be something like https://yoursite.com/boards/

  2. Add the Boards embed

    1. Click + to add a block

    2. Search for and choose Custom HTML

    3. Paste this (replace shortname with the Disqus Boards shortname and slug with the page’s slug if not using hash mode):

<script>
window.disqus_boards_config = function () {
this.basePath = '/{slug}'; // this is optional for hash mode
};
</script>

<div id="disqus-boards-host"></div>

<script>
(function() {
if (document.getElementById('disqus_boards_script')) return;
var d = document, s = d.createElement('script');
s.id = 'disqus_boards_script';
s.src = 'https://{shortname}.disqus.com/boards.js';
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view this widget powered by Disqus.</noscript>

If you are using Boards in Hash Mode, stop here, everything is set up.
If you aren't sure if you are using Hash Mode or History Mode, please see our guide here.


3. If your setup is using History Mode, then the boards embed code will look something like this:

<script>
window.disqus_boards_config = function () {
this.routerMode = 'history';
this.basePath = '/{slug}';
};
</script>

<div id="disqus-boards-host"></div>

<script>
(function() {
if (document.getElementById('disqus_boards_script')) return;
var d = document, s = d.createElement('script');
s.id = 'disqus_boards_script';
s.src = 'https://{shortname}.disqus.com/boards.js';
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view this widget powered by Disqus.</noscript>


​

Configuring History Mode

There is an additional step required to set up History Mode: WordPress needs to serve the Boards page for all paths under /{slug}/, not just /{slug}/
​

1. Install a plugin like WPCode: https://wpcode.com/

2. After it’s installed, activate it in the plugin menu:

3. Go to the plugin in the WP Admin:

4. There are two options for this step: Import our snippet OR manually add a new custom snippet.

a. Importing our snippet

i. Go to Code Snippets → Tools

ii. Under “WPCode Snippet Import” click “Choose a file…”

iii. Download the file at the link below, add it to the WPCode Snippet Import, and and click “Import” right below it.


iv. Now when you go back to “Code Snippets”, you should see the new snippet.

v. Click into the Snippet and update SLUG twice to where Disqus Boards lives on your site.

vi. Set the snippet to “Active” and click “Update”.

b. Manually add a custom snippet (skip this if you already imported the snippet above)

i. In WPCode, click +Add Custom Snippet

ii. Select "PHP Snippet"

iii. Replace SLUG in the code below with your website’s boards slug. Once this has been done, Paste this code, select auto-insert, and select “run everywhere”. Also make sure the snippet is “Active”.

add_action('init', function () {
add_rewrite_rule('^SLUG/.+?', 'index.php?pagename=SLUG', 'top');
});

5. Flush permalinks by logging into the wp-admin, then going to Settings -> Permalinks and then click "Save Changes" to flush permalinks (WP will rebuild permalinks upon save). This step should be completed whether you are using our snippet or your own custom snippet.

Did this answer your question?