Set up Related Articles

Want to save you or your writers some time? Let the knowledge base automatically suggest up to ten related articles, either from across the entire knowledge base or only from within the same top-level category as the current content.

This can be a great time-saving feature if you've inherited a knowledge base or imported content from another tool, before you've had a chance to manually suggest related articles.

To enable automatic Related Articles:

1. Go to Settings > Basic.
2. In the Website Settings section, look for the Related article suggestions.
3. Check the box to Automatically suggest related articles based off of the article titles.
   
   Check the box to Automatically suggest related articles based off of the article titles
   
4. Optional: Related Articles will automatically suggest articles across the entire knowledge base. If you would like 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, you'd only see automatic related articles from within the Features category.)
5. Optional: If you still plan to manually add some related articles, we recommend you check the box to Backward suggest articles. Refer to Backward suggest Related Articles for more information.
6. Optional: Use the Related articles limit dropdown to change how many automatically-suggested related articles are displayed. Refer to Set the number of Related Articles to automatically display for more information.
7. Once you've finished making your selections, be sure to Save your changes.

If you're using manually suggested 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 manually, you're only editing the article you're viewing. To create a perfect experience, you'd also need to go edit the related article to add the first article as related.

The Backward suggest articles setting basically does this for you.

For example, I edit Article A and 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. Article A won't show in the article editor for Article B, but it will show in the live knowledge base.

Basically, this setting makes the live knowledge base 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, look for the Related article suggestions section.
3. Check the box next to Backward suggest articles which list the current articles as related.
   
   Check the box to Backward suggest articles which list the current article as related
   
4. Be sure to Save your changes.

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.

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.

What if, instead of showing this in all articles, you just want to show Related Articles in specific articles?

You can remove the merge code that generates the list from your Custom HTML, create a snippet to format a Related Articles section with the merge code, and then add that snippet to articles. More detailed instructions follow:

Step 1: Remove the merge code from Custom HTML

First, remove the merge code and any headings or surrounding divs from Settings > Style > Custom HTML > Article.

If you're unfamiliar with this HTML, see Default Article HTML, rows 26-29 for our default placement to help you find it so you can remove it.

Step 2: Create a snippet

Next, create a snippet that will format the section and add the merge code:

1. Create a snippet. We recommend using "Related Articles section" or something similar as the Snippet Name.
2. In the Snippet Content dropdown, select Code Editor.
   
   Switch to Code Editor
   
3. Copy the code below and paste it into the Code editor.

<div class="ko-related-articles text-center">
    <h3>Related Articles</h3>
    [template("related")]
</div>

4. You can toggle back to the WYSIWYG editor using the Snippet Content dropdown if you'd like to make further changes to the Related Articles header, add explanatory text, etc. We recommend keeping the div wrapped around the whole section to guarantee the text stays centered, though!
5. In the right column of the snippet editor, in the Visibility section, check the box to Hide from PDFs. Here's what your snippet might look like now:
   Sample Related Articles snippet, though your header likely looks different!
6. Once you're done editing the snippet, select the Create button to fully create it!

Step 3: Use the snippet

With your snippet created, you can now add that snippet into the articles where you'd like to display this section.

See Add snippets in content for full steps on how to do this.

You can also add the snippet merge code into a topic display category Category Description or the body of a custom content category!

If you have a customized theme, the Related Articles section might have been removed entirely. Below, we offer instructions on how to re-add it to your main article body or the right column. Choose the implementation that makes sense for you!

Add the Related Articles List to all articles

If for some reason you don't see the Related Articles list, it's probably previously been removed in custom theme work. You can place the related articles merge code in the HTML of all articles to get it back. See Default Article HTML, rows 26-29 for our default placement.

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

By default, we also include the Related Articles in the right column (which is generally only used/displayed in our older themes).

If you're using one of our older themes that displays the right column and you're not seeing Related Articles there, you can grab some HTML from our Default Right Column HTML to re-add it, see rows 14-16.

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

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.

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.
7. Be sure to Save your changes.