Workflow: Display an article or section in multiple sections or categories

<div class="p"><div class="note">
<span class="notetitle">Important note: </span>Zendesk has a native feature that allows placement of one article in up to 10 different sections across all brands in your help center. This powerful feature makes it possible to create content once and share it between multiple sections and brands. See <a href="https://support.zendesk.com/hc/en-us/articles/7867489163930-Placing-articles-in-multiple-sections-with-article-multiplacement" target="_blank" rel="noopener noreferrer">Placing articles in multiple sections with article multiplacement</a> to know more about this feature. Meanwhile as a secondary option, you may proceed with the following instructions covered in this article. </div></div><p>Help center content is organized in a <strong>Home</strong> &gt; <strong>Categories</strong> &gt; <strong>Sections</strong> &gt; <strong>Articles</strong> structure. By default, each section belongs to only one category, and each article is assigned to a single section.</p><p>Alternatively, you can display links to specific articles or sections on the page you want them to be available by <a href="https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme" target="_blank" rel="noopener noreferrer">customizing the template</a> for that section or category. Use the <code>is</code> property in the code to display the content in an additional section or category.</p><p>To do this, you need the ID of the section or category. The section or category ID is at the end of the URL. For example, this article is published in the category: <code>https://support.zendesk.com/hc/en-us/categories/4405298745754</code>. The category ID is <code>4405298745754</code>.</p><div class="note">
<span class="notetitle"><strong>Disclaimer</strong></span>: This article is provided for instructional purposes only. Zendesk doesn't support or guarantee the code. Post any issues in the comments section or search for a solution online.</div><p>This article contains instructions for the following:</p><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><h3 id="h_01KXPFN6Y1RZ26A1VVXN5QVARA">Add an article to a section</h3></div><div class="panel">
<p>To add an article to a section:</p>
<ol>
<li data-list-item-id="ef87e5aba5c4dd5fbca7a2b98cca5ba3d">In Knowledge, select <strong>Knowledge admin</strong>
</li>
<li data-list-item-id="e13bad0f7b51a2fab52eafca651c2e2bd">Click the Customize design icon (<img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar</li>
<li data-list-item-id="e6e967759223b2aafda7c2972ac1555fb">From the theme you want to work with, click <strong>Customize</strong>
</li>
<li data-list-item-id="e3a80530b3ec164aa6c4773dbc8da7c5e">Click <strong>Edit code</strong>
</li>
<li data-list-item-id="ecf960b0f9d1841d10d58e6663d67d71d">In the template editor, under <strong>Files</strong>, open <strong>section_page.hbs</strong>
</li>
<li data-list-item-id="e05bc3185bcd7c5dc47dcf90bdd433bbb">
<p>Place the code below the <code>&lt;ul class= "article-list"&gt;</code> element, which belongs to the <code>{{#if section.articles}}</code> helper.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">{{#is section.id ######}}
&lt;a href="article URL without the text slug"&gt;Title of the article&lt;/a
{{/is}}</code></pre>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856678559258" alt="place article in section"></p>
</li>
<li data-list-item-id="ed6421b350aedbdff54bc156cf2a8399f">Click <strong>Publish</strong>
</li>
</ol>
</div><div class="accordion"><h3 id="h_01KXPFN6Y1G48E7DF87RHEJWKY">Add a section to a category</h3></div><div class="panel">
<p>To add a section to a category:</p>
<ol>
<li data-list-item-id="e7e0c4cc11a5e5ba99e1bcdf1f9e79ec0">In Knowledge, select <strong>Knowledge admin</strong>
</li>
<li data-list-item-id="e1e022df1439eb2552dd7780aa0d4ac84">Click the Customize design icon (<img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar</li>
<li data-list-item-id="e8ed650ff59ba256dd0ef5da45411d17c">From the theme you want to work with, click <strong>Customize</strong>
</li>
<li data-list-item-id="edd7297e821a733318d7ca424703aed21">Click <strong>Edit code</strong>
</li>
<li data-list-item-id="e6f64778542599674e129220fde6a5597">In the template editor, under <strong>Files</strong>, open <strong>category_page.hbs</strong>
</li>
<li data-list-item-id="e33dbb5e2b0ce2324faca2782d45e6adf">
<p>Place the code below the <code>&lt;div id="main-content" class="section-tree"&gt;</code>.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">{{#is category.id ######}}
&lt;a href="section URL without the text slug"&gt;Title of the section&lt;/a
{{/is}}</code></pre>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856673228186" alt="place section in category page" width="588" height="72"></p>
</li>
<li data-list-item-id="e83009401c1fe5da827d5dae82408d392">Click <strong>Publish</strong>
</li>
</ol>
</div><div class="accordion"><h3 id="h_01KXPFN6Y1YMV34HV6H3YA3NBJ">Add an article to a category</h3></div><div class="panel">
<p>To add an article to the category page within the {{#each section}} helper:</p>
<ol>
<li data-list-item-id="e0846a7194512f722271b29f2ffe51716">In Knowledge, select <strong>Knowledge admin</strong>
</li>
<li data-list-item-id="eb8105ea47131871d1290229a6f87bcb0">Click the Customize design icon (<img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar</li>
<li data-list-item-id="e9e2e5f5da1ad24ceaac78423d3739bf1">From the theme you want to work with, click <strong>Customize</strong>
</li>
<li data-list-item-id="eb01f410e982438d9bf790e3dc9d9d4e2">Click <strong>Edit code</strong>
</li>
<li data-list-item-id="ef251ba9438c320416b26124c9c6cc6a5">In the template editor, under <strong>Files</strong>, open <strong>category_page.hbs</strong>
</li>
<li data-list-item-id="e9579170e8b575c5243a8cc712fb1bbdf">
<p>Place the code below the <code>{{#each sections}}</code> <a href="https://developer.zendesk.com/documentation/help_center/help-center-templates/helpers/" target="_blank" rel="noopener noreferrer">helper</a>.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">{{#is id ######}}
&lt;a href="article URL without the text slug"&gt;Title of the article&lt;/a
{{/is}}</code></pre>
</li>
<li data-list-item-id="e5d7f4ef62f77d06738cd3820a428eea2">Click <strong>Publish</strong>
</li>
</ol>
</div><div class="accordion"><h3 id="h_01KXPFN6Y278Q9E7GBG5J2BXBE">Add an article to an empty section</h3></div><div class="panel">
<p>The workflow is different because the code incorporates the <code>else</code> <code>/if</code> statement that displays an empty link within the section.</p>
<p>To add an article to an empty section:</p>
<ol>
<li data-list-item-id="e31711721fc83cc83eb7a4266d8ac9054">In Knowledge, select <strong>Knowledge admin</strong>
</li>
<li data-list-item-id="e6e81c3bc634281db455762160b527af6">Click the Customize design icon (<img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar</li>
<li data-list-item-id="e1e889db4fc5a2ea084954fbfdcfcd7a0">From the theme you want to work with, click <strong>Customize</strong>
</li>
<li data-list-item-id="e72152c393bef89b77a564bfe3c6687c3">Click <strong>Edit code</strong>
</li>
<li data-list-item-id="e47d23b2e78525417d5972d58329ff7f2">In the template editor, under <strong>Files</strong>, open <strong>section_page.hbs</strong>
</li>
<li data-list-item-id="e9424f35d8225e04a3a8eff49a4c52950">
<p>Replace the code that goes from <code>{{else}}</code> to <code>{{/if}}</code> with the code below.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">{{else}}
{{#is section.id ######}}
&lt;ul class="article-list"&gt;
&lt;li class="article-list-item"&gt;
&lt;a href="article URL without the text slug"&gt;Title of the article&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
{{else}}
&lt;i class="section-empty"&gt;
&lt;a href="{{section.url}}"&gt;{{t 'empty'}}&lt;/a&gt;
&lt;/i&gt;
{{/is}}
{{/if}}</code></pre>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856673228314" alt="Add article to empty section"></p>
</li>
<li data-list-item-id="e369535f32915b75f9f749e19c1e08b76">Click <strong>Publish</strong>
</li>
</ol>
</div><div class="accordion"><h3 id="h_01KXPFN6Y2KGVTKT118JT3EEBQ">Add a section to an empty category</h3></div><div class="panel">
<p>The workflow is different because the code incorporates the <code>else</code> <code>/if</code> statement that displays an empty link within the category.</p>
<p>To add a section to an empty category:</p>
<ol>
<li data-list-item-id="ea376d57dcfbf539998d6d2a66aee8559">In Knowledge, select <strong>Knowledge admin</strong>
</li>
<li data-list-item-id="e810f5418125e410f038c710268fe92af">Click the Customize design icon (<img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar</li>
<li data-list-item-id="e601a37ad45d7571a6337cdafc613ffd0">From the theme you want to work with, click <strong>Customize</strong>
</li>
<li data-list-item-id="e356c90c7b2b32cb86458e97f73695abc">Click <strong>Edit code</strong>
</li>
<li data-list-item-id="e294d60ca0c0d1585389d0816aa8aeef8">In the template editor, under <strong>Files</strong>, open <strong>category_page.hbs</strong>
</li>
<li data-list-item-id="ec431fedba0acbb092ff4d71df53bda49">
<p>Replace the code that goes from <code>{{else}}</code> to <code>{{/i}}</code> with the code below.</p>
<pre class="wysiwyg-code-block"><code class="language-auto">{{else}}
{{#is category.id ######}}
&lt;section class="section"&gt;
&lt;h3 class="section-tree-title"&gt;
&lt;a href="section URL without the text slug"&gt;Title of the section&lt;/a&gt;
&lt;/h3&gt;
&lt;/section&gt;
{{else}}
&lt;i class="category-empty"&gt;
&lt;a href="{{category.url}}"&gt;{{t 'empty'}}&lt;/a&gt;
&lt;/i&gt;
{{/is}}</code></pre>
<p><img src="https://support.zendesk.com/hc/article_attachments/7856678559514" alt="Add_section_to_an_empty_category.png" width="495" height="179"></p>
</li>
<li data-list-item-id="ebb70e4d0a3ddb1aa7729124d8471cd11">Click <strong>Publish</strong>
</li>
</ol>
</div>