Knowledge Base
  1. Home
  2. Knowledge Base
  3. Advanced Topics
  4. Integrating Heroic Knowledge Base with your theme

Integrating Heroic Knowledge Base with your theme

This section details advanced topics for developers wishing to integrate the standalone Heroic Knowledge Base with a third party theme.

These notes are provided for guidance only, due to the vast array of themes and configurations, we are unable to assist with theme integrations.

If you require further assistance with theme development and integration, consider using a specialist from a service such as Codeable or WP Kraken.

Overview

For those wishing to customize their knowledge base beyond the knowledge base plugin settings, using a modified version of the templates in a (child) theme is the most straightforward way to override the default behaviour.

You can read more about child theming in the WordPress codex.

The hkb-templates folder in the plugin contains the templates for the knowledge base content output, which are used by the plugin by default. These can be copied to a (child) theme so they can be modified without editing the plugin files directly. This ensures the plugin can be updated without overwriting any modifications.

Fundamentals

There are 4 core templates – which control knowledge base content of the page, including loading the header and footer, these are:-

hkb-archive, the main knowledge base archive (home) page. When the page set as the knowledge base homepage is loaded, this template will be used.

hkb-taxonomy-category, for the display of a knowledge base category listing.

hkb-single, for the display of a single knowledge base article page.

hkb-search, used for the knowledge base search results page.

There are calls several sub-templates that are called to render smaller parts of the output, which can be edited and reused.

Getting started with Theme Templates

  • Copy the template(s) to be modified from the hkb-templates folder in the knowledge base plugin to a hkb-templates folder in the (child) theme.
    • For example, to edit the archive page template, copy hkb-archive.php from plugins/ht-knowledge-base/hkb-templates/ to themes/twenty-twenty-one-child/hkb-templates/
  • Ensure styles are loaded (unless they are overridden), see styles notes.
    • In the child theme’s functions file -eg twenty-twenty-one-child/functions.php file, add the code snippet below.
  • Perform modifications to the template(s) as required

Using Knowledge Base styles

If you wish to use the default knowledge base styles, to override later, you need to enqueue the styles in your child theme, for example:-

if( HT_KB_MAIN_PLUGIN_FILE ){
  wp_enqueue_style( 'hkb-style', plugins_url( 'css/hkb-style.css', HT_KB_MAIN_PLUGIN_FILE ), array(), HT_KB_VERSION_NUMBER );
}

An example using the Twenty Twenty One Theme

A simple example, adding a call to action from the knowledge base homepage.

In this example, we’ve added a simple call to action to the knowledge base homepage, this demonstrates how to edit the default templates to output custom content.

The default look with the fresh Twenty Twenty One theme
Adding our custom CTA section to the archive template

First, create a hkb-templates folder in the child theme

Then, add custom CTA template to this folder and name it hkb-custom-cta.php, adding required content

The hkb-archive template is copied from the plugin’s hkb-templates folder, to the child theme’s hkb-templates folder.

The hkb-archive.php template is edited to include a call to the custom CTA content.

<!-- custom cta call -->
<?php hkb_get_template_part('hkb-custom', 'cta'); ?>

Download Example

You can review and download this example from the HeroThemes Twenty Twenty-One Child Theme Example Integration on Github here.

Was this article helpful?
Yes No
Related Articles