Related Articles

How it works

When you use related articles, behind the scenes, KnowledgeOwl searches and displays up to ten articles that have content related to the content you're looking at.

By default, this will happen automatically based on article title.

You can choose to only automatically suggest articles that are within the same top-level category of the current article.

You can also specify which articles or categories should be displayed within an article by using the Add Related Article option in the editor.

If you don't want to use automatic suggestions, you can disable the automatically suggested articles across your entire knowledge base.

If you keep automatically suggested articles and use some manually specified articles, the knowledge base will always try to display the number of articles you've specified. Let's say you've kept it at the default (5):

  • When you have 0 manually specified Related Articles, up to 5 automatically suggested articles will be displayed.
  • When you have 1-4 manually specified Related Articles, it will display a maximum of 5 articles, filling in the empty slots with automatic suggestions (where it can find them).
  • When you have 5 or more manually specified Related Articles, only those will be displayed.

Note: automatic suggestions are created using keyword matching between articles; if the system can't find enough matches, it won't display the full number of articles.

So, for example, let's say I've kept my Related Articles settings to display up to 5 articles.

I have an article which has three Related Articles manually specified:

Sample related articles in editor

When I view this in the knowledge base, I'll see those three articles first, in the order I selected. Automatic suggestions will try to fill the remaining two spots:

Sample shown on knowledge base

You'll see that the automatic suggestions help fill this to a total of five, but they aren't always the best resources to suggest. If you want to have total control over what's displayed, you'll want to disable the automatic suggestions across your entire knowledge base.

Where do Related Articles show up?

For all new knowledge bases, Related Articles are enabled and added to your global article template by default.

If you're using a custom theme, you may need to add the Related Articles section to all or specific articles. You'll need this merge code:

[template("related")]

You can add this merge code to all articles, the right column of your knowledge base, or to specific individual articles. Instructions for each are below.

Add the Related Articles Widget to all articles

You can place the related articles merge code in the HTML of all articles:

  1. Go to Settings > Style.
  2. Below the preview window, click on Custom HTML and select Article
  3. You can place the merge code after the article body merge code or in the hg-article-footer div. Either of these locations will display at the bottom of each article. (The default placement is in the hg-article-footer div.)
  4. You'll probably also want to add a header to display above the related article links and perhaps a div with a class so that you can style the related articles widget. Something like this should do:
    <div class="ko-related-articles">
     <h3>Related Articles</h3>
     [template("related")]
     </div>
    So your completed template might look like this:
    Sample of Related Articles template in Article Custom HTML
  5. Be sure to Save after you've added the template.

Add the Related Articles Widget to the right column of your knowledge base

If you're using the right column of your knowledge base, you can also display the Related Articles widget there. This column was designed for this kind of content. To add it here:

  1. Go to Settings > Style.
  2. Below the preview window, click on Custom HTML and select Right Column
  3. You can place the merge code after the article body merge code or in the hg-article-footer div. Either of these locations will display at the bottom of each article. (The default placement is in the hg-article-footer div.)
  4. You'll probably also want to add a header to display above the related article links and perhaps a div with a class so that you can style the related articles widget. KnowledgeOwl has some existing classes for styling the right column's panels, so something like this should do:
    <div class="panel panel-default right-col-panel related-panel">
        <div class="panel-heading">Related Articles</div>
         [template("related")]
    </div>
    Your completed template might look like this:
    Sample of Related Articles template in Right Column Custom HTML
  5. Be sure to Save after you've added the template.

Add the Related Articles Widget to individual articles

If you only want to display the related articles widget in certain articles you can place the related article merge code at the bottom of individual articles. To do so:

  1. Open the article in edit mode.
  2. You can place the merge code anywhere in the article, though most folks put it at the bottom of the article: 
    [template("related")]
  3. You'll probably also want to add a header to display above the related article links. You can style this section using the WYSIWYG editor or the Code View--whatever you're more comfortable with.
    Your completed article might look like this:
  4. Remember to Save the changes to your article.

Enable automatically suggested Related Articles

You can always manually add Related Articles to your content, but you can also opt to have the knowledge base automatically suggest up to 10 related articles, either from across the entire knowledge base or only from within the same top-level category as the current content.

To enable Related Articles:

  1. Go to Settings > Basic.
  2. In the Website Settings section, check the box next to Related Articles: "Automatically suggest related articles based off of the article titles."
  3. Optional: By default, Related Articles will automatically suggest articles across the entire knowledge base. If you would like it to only suggest related articles from within the same top-level category as the current article or category, check the box to "Only automatically suggest articles from the current top level category". (For example, if we use this setting for this page on Related Articles, you'd only see automatically suggested Related Articles from within the Features category.)
  4. Optional: You can also opt to Backward suggest Related Articles.
  5. Optional: Use the "Limit list to xx articles" dropdown to change how many automatically-suggested related articles are displayed.
  6. Once you've finished making your selections, be sure to Save your changes.

Adding related articles

You can specify which articles or categories KnowledgeOwl displays as related articles within an article or category. The steps differ slightly based on whether you're editing a category or article:

Article Editor

To add a related article in the Article Editor:

  1. Open the article in edit mode.
  2. In the Related Articles section, select Add article:
    Related Articles' Add article button
  3. Type the article or category title you want to add as a related article. The dropdown autosuggests articles or categories based on what you've typed.
  4. Select the article or category, then select Add Related Article.
    Example of adding a Related Article
  5. Save the article.

Category Editor

To add a related article in the Category Editor:

  1. Open the category in edit mode.
  2. In the Related Articles section, select Add Related Article:
    Category Editor, Add Related Article button
  3. Type the article or category title you want to add as a related article. The dropdown autosuggests articles or categories based on what you've typed.
  4. Select the article or category, then select Add Related Article.
    Example of adding a Related Article
  5. Save the article.

Reordering or removing Related Articles

Once you have two or more Related Articles added, you can reorder them.

In the article editor, reorder them by clicking on the article title and dragging it where you'd like it to go. Delete using the trashcan icon.

Sample reorder in article editor

In the category editor, reorder them by clicking on the arrow icon and dragging the it where you'd like it to go. Delete using the red X.
Reordering or removing Related Articles


Disable automatic suggestions for Related Articles

If you want to show only manually specified Related Articles, you can turn off automatic suggestions across your entire knowledge base. To do so:

  1. Go to Settings > Basic.
  2. In the Website Settings section, uncheck the box next to "Automatically suggest related articles based off of the article titles".
    Uncheck the Automatically suggest related articles based off of the article titles box
  3. Save.

Articles and categories will now only display related articles that you've manually added. See Adding related articles for more information.


Set the number of Related Articles to automatically display

By default, our knowledge bases are set to display 5 Related Articles.

You can set this to any number between 1-10:

  1. Go to Settings > Basic.
  2. Scroll to the Website Settings section.
  3. In the Related Articles section, click on the Limit list dropdown and select the number of articles you'd like the section to display (1-10).
  4. Be sure to Save your changes.

This setting only sets the list limit for automatically suggested related articles. You can always manually add more than this limit and they will display!

Backward suggest Related Articles

If you're using manually specified Related Articles, you can save yourself a little bit of work using a knowledge base-wide setting to "Backward suggest articles."

When you add a Related Article to an article, by default, that only edits the related articles section for one article: the one you're currently editing.

Backward suggest basically says:

I'm editing Article A. If I add Article B as a related article:

  • Without backward suggest, if I view Article B, I won't see Article A in the Related Articles section unless I specifically add it there.
  • With backward suggest, if I view Article B, I will see Article A in the Related Articles section, even though I never specifically added it there.

Basically, backward suggest says: I should mirror all related article relationships automatically.

Backward suggestions are disabled by default. If you'd like to turn them on:

  1. Go to Settings > Basic.
  2. In the Website Settings section, check the box next to "Backward suggest articles which list the current articles as related."
    Backward suggest articles setting in Settings > Basic
  3. Save.

Hide Related Articles section from a specific article

If you've added the Related Articles template to your article template globally, sometimes it's useful to be able to hide it from specific individual articles. For example, maybe you are using automatically suggested related articles overall, but this particular article, the suggestions don't make sense (perhaps this article contains your company W9 and everything it's suggesting as related is product documentation, for example).

For this scenario, we recommend creating a snippet that will hide the Related Articles section and then only adding that snippet to the specific articles where you want to hide the section. First, create the snippet:

  1. Go to Library > Snippets.
  2. Select + Create New Snippet.
  3. Give your snippet a name, like "Hide Related Articles."
  4. Give your snippet a description, like "Use this snippet in articles to hide the Related Articles section."
  5. Click the dropdown to change the editor to the Code Editor.
  6. Copy the code below and paste it into the Code Editor window in your snippet.
    <style>
      /* Hide related articles */
      .ko-related-articles {
        display:none;
      }
    </style>
    Your completed snippet should look something like this:
    Sample snippet to hide related articles
  7. Click the Create button.

Now that your snippet exists, any of your content writers or editors can add it to an article using the Insert snippet option.

Troubles creating your snippet? Review the instructions on creating a snippet for more help.

Optional tweak to hide horizontal line

If your Related Articles section is the only thing in your article footer, and hiding it leaves behind a mystery grey line, you can edit the snippet to include logic to hide that grey divider line, as well. The structure depends on your theme; you may need to right-click on the divider line and Inspect Element to see which classes to use, but here's a sample for our Minimalist theme:

<style>
  /* Hide related articles */
  .ko-related-articles {
    display:none;
  }
  /* Hide grey bottom border of article body */
  .hg-minimalist-theme .hg-article-body {
    border-bottom: none;
  }
</style>

Sample snippet to hide Related Articles and the grey line

Hide Related Articles when there are none

You can add some code to hide the Related Articles section when there are no Related Articles present.

  1. Go to Settings > Style.
  2. Click on the Custom HTML tab.
  3. Select Article from the dropdown.
  4. If your Related Articles section appears at the bottom of all articles, copy this code. Otherwise, skip to step 5:
    <script>
      //If Related Articles section at bottom of the article has no related articles, hide the section
      $(function() {
        if( $('.ko-related-articles ul li:eq(0)').text().trim() == "None" )  
          $('.ko-related-articles').hide();
      });
    </script>
  5. If your Related Articles section appears in the right hand column of all articles, copy this code:
    <script>
      //If Related Articles section in the righthand column is empty, hide the section
      $(function() {
        if( $('.related-panel ul li:eq(0)').text().trim() == "None" )  
          $('.related-panel').hide();
      });
    </script>
  6. Paste the code you copied above into the bottom of the Article Custom HTML code editor. For example:
    Example of the script added to hide the empty Related Articles section at the bottom of articles
  7. Be sure to Save your changes.

Hide Related Articles when there is only one or less

You can add some code to hide the Related Articles section when it contains 1 or 0 articles.

To do so:

  1. Go to Settings > Style.
  2. Click on the Custom HTML tab.
  3. Select Article from the dropdown.
  4. If your Related Articles section appears in the right hand column of all articles, copy this code. Otherwise, skip to step 5:
    <script>
      //If Related Articles section in righthand column has 1 or 0 articles, hide the section
      $(function() {
        if( $('.related-panel ul li').length < 2 )  
          $('.related-panel').hide();
      });
    </script>
  5. If your Related Articles section appears at the bottom of all articles, copy this code:
    <script>
      //If Related Articles section at bottom of article has 1 or 0 articles, hide the section
      $(function() {
        if( $('.ko-related-articles ul li').length < 2 )
          $('.ko-related-articles').hide();
      });
    </script>
  6. Paste the code you copied above into the bottom of the Article Custom HTML code editor. For example:
    Example of the script added to hide the Related Articles section at the bottom of articles
  7. Be sure to Save your changes.