This post is all about how to create WordPress knowledge base or documentation site without installing any extra knowledge base themed plugin. We are going to do it with the help of a custom post type, Gutenberg editor and a Ajax Search Lite plugin.
So, if you’re interested then jump in. First, take a look at the video here and then go through the tutorial below the video.
Video: How to create WordPress Knowledge base site with Live search for free
What theme to use?
Basically, you can use this solution with every decent theme out there. It would help if your theme has a built in hooks you can use. For example: Kadence theme has Elements, Blocksy has Content Blocks and Astra has Page Layouts you can use to insert your own content conditionally on different part of the sites.
Therefore, here are some themes that are the best ones out there at the moment.
Astra theme
Step 1: Create a Knowledge base custom post type
I have made a thorough post on “How to Create Custom Post Type in WordPress Without a Plugin Within Couple of Minutes?” Therefore I’m not going to in detail in this part. Instead, I’ll give you a code snippet which will createa Knowledge Base custom post type for you.
Add this code inside your child theme’s function.php file or better yet – use Code Snippets plugin for it. If you need to rename menu item names then do it accordingly.
// Register Custom Post Type
function knb_function() {
$labels = array(
'name' => _x( 'Docs', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'Doc', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'Knowledge base', 'text_domain' ),
'name_admin_bar' => __( 'Docs', 'text_domain' ),
'archives' => __( 'Documents archives', 'text_domain' ),
'attributes' => __( 'Item Attributes', 'text_domain' ),
'parent_item_colon' => __( 'Parent Item:', 'text_domain' ),
'all_items' => __( 'All Items', 'text_domain' ),
'add_new_item' => __( 'Add New Doc', 'text_domain' ),
'add_new' => __( 'Add New', 'text_domain' ),
'new_item' => __( 'New doc', 'text_domain' ),
'edit_item' => __( 'Edit Item', 'text_domain' ),
'update_item' => __( 'Update Item', 'text_domain' ),
'view_item' => __( 'View Item', 'text_domain' ),
'view_items' => __( 'View Items', 'text_domain' ),
'search_items' => __( 'Search Item', 'text_domain' ),
'not_found' => __( 'Not found', 'text_domain' ),
'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ),
'featured_image' => __( 'Featured Image', 'text_domain' ),
'set_featured_image' => __( 'Set featured image', 'text_domain' ),
'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),
'use_featured_image' => __( 'Use as featured image', 'text_domain' ),
'insert_into_item' => __( 'Insert into item', 'text_domain' ),
'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),
'items_list' => __( 'Items list', 'text_domain' ),
'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
'filter_items_list' => __( 'Filter items list', 'text_domain' ),
);
$rewrite = array(
'slug' => 'docs',
'with_front' => true,
'pages' => true,
'feeds' => true,
);
$args = array(
'label' => __( 'Doc', 'text_domain' ),
'description' => __( 'This is your knowledgebase custom post type', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'thumbnail', 'revisions' ),
'taxonomies' => array( 'doc_category', 'doc_tag' ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-media-document',
'show_in_admin_bar' => true,
'show_in_nav_menus' => true,
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'rewrite' => $rewrite,
'capability_type' => 'page',
'show_in_rest' => true,
);
register_post_type( 'post_knb', $args );
}
add_action( 'init', 'knb_function', 0 );Step 2: Create a Taxonomy for the Knowledge Base custom post type
Since I’m going to use Categories for my kowledge base documents I’ll have to create a category taxonomy for it. Therefore, use this snippet here below.
// Category taxonomy for Knowledge base
function custom_taxonomy() {
$labels = array(
'name' => _x( 'Categories', 'Taxonomy General Name', 'text_domain' ),
'singular_name' => _x( 'Category', 'Taxonomy Singular Name', 'text_domain' ),
'menu_name' => __( 'Categories', 'text_domain' ),
'all_items' => __( 'All Items', 'text_domain' ),
'parent_item' => __( 'Parent Item', 'text_domain' ),
'parent_item_colon' => __( 'Parent Item:', 'text_domain' ),
'new_item_name' => __( 'New Item Name', 'text_domain' ),
'add_new_item' => __( 'Add New Item', 'text_domain' ),
'edit_item' => __( 'Edit Item', 'text_domain' ),
'update_item' => __( 'Update Item', 'text_domain' ),
'view_item' => __( 'View Item', 'text_domain' ),
'separate_items_with_commas' => __( 'Separate items with commas', 'text_domain' ),
'add_or_remove_items' => __( 'Add or remove items', 'text_domain' ),
'choose_from_most_used' => __( 'Choose from the most used', 'text_domain' ),
'popular_items' => __( 'Popular Items', 'text_domain' ),
'search_items' => __( 'Search Items', 'text_domain' ),
'not_found' => __( 'Not Found', 'text_domain' ),
'no_terms' => __( 'No items', 'text_domain' ),
'items_list' => __( 'Items list', 'text_domain' ),
'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
'show_in_rest' => true,
);
register_taxonomy( 'doc_category', array( 'post_knb' ), $args );
}
add_action( 'init', 'custom_taxonomy', 0 );Step 3: Re-save your permalinks
Now go to the Settings >> Permalinks and click on Update button. This will ensure that all the links will work without issues.
Step 4: Create categories and add posts
Since we have a WordPress knowledge base or documentation site, we need to create a content for it. So, next task is a bit tidious because you will need to create a content for your knowledge base.
Therefore, create your topic categories and add post.
Step 5: Create a WordPress knowledge base or documentation site front page
The end result will be similar to this one here shown in the screenshot below.
Install Kadence Blocks plugin
So, in order to accomplish that I’m going to use a Kadence Blocks plugin (it’s free). If you want to create a layout like the one on the screenshot you can use whatever page builder or Gutenberg plugin as long as it allows you to create posts lists.
Now, after installing/activateing Kadence Blocks I’m going to create a page header row with background, suitable padding and a heading.
Next I will create a three-column row layout and add these blocks inside columns:
- Advanced heading
- Spacer
- Posts block
- Advanced button block
Take a look at the video above to see how to accomplish all that. If you want to use my layout then just create a page, download this file, open it up, copy the code and paste it to your site. PS! It works only with Kadence blocks plugins instaleld and activated.
Custom CSS for icons before post titles:
If you want to use icons before post titles then add this small bit af CSS insideo your Additonal CSS (Customizer >> Additional CSS).
.kb-posts h6.entry-title:before {
font-family: 'Dashicons';
content: "\f123";
padding-right: 7px;
color: #888888;
vertical-align: middle;
}It uses default Dashicons but if your theme already laods Font Awesome font then you can modify this code snippet to use Font Awesome. Just find the right icon and modify this part: content: “\f123”;
.kb-posts h6.entry-title:before {
font-family: 'Font Awesome 5 Free';
}If you’re going to use Dashicons then you also need to add this small code snippet here below. This loads Dashicons on frontend.
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}Just find the right icon and modify this part: content: “\f123”;
Step 6: Add ajax search to your site
Every good WordPress knowledge base or documentation site should have a great live search option. If your theme already has it and allows you to add search form using shortcodes then you’re good to go and can skip this part.
If you theme does not have this option then got to plugins >> Add new and search for Ajax Search Lite plugin. Install and activate it. Go to settings and customize the look and other stuff you need. If you need a detail tutorial then see this tutorial I made on “How to add Ajax Live Search to the Kadence Theme?”
Next, grab the Ajax search shortocode, go to the Front page and add it in the header below the title. This creates nice live search boxk on the frontend.
Step 7: Add Table of Contents
It would be good user experience to show table of contents on your documents. Therefore you have three options:
- Add Table of Content block manually to your documents.
- Add Table of Contents block to your sidebar
- Add Table of Content block automatically on top of the document
In this tutorial I’ll show you options 2 an 3.
Install Reusable Blocks Extended plugin
Pay attention that if you are using a theme which has a easy way to add content using hooks/blocks then you don’t need to use this plugin. For example:
- Blocksy Pro theme allows you to use Content Blocks (Blocksy PRO with discount: https://wpsimplehacks.com/blocksy (SAVE 10% Coupon WPSH10)
- Kadence Pro theme allows you to use Elements (Kadece PRO with discount: https://wpsimplehacks.com/kadence (SAVE 10% Coupon SIMPLEHACKS)
- Astra Pro allows you to use Page Layouts (Astra Pro ise here https://wpsimplehacks.com/astra)
But, if your theme has no such options then install a Reusable Blocks plugin and create a new reusable block called “Table f Contents”. Full tutorial on how to use Reusable Blocks extended plugin is here.
Create a Table of Content with Kadence Blocks
Go to Reusable Blocks >> Add new and create a TOC using Kadence blocks Table of Contents blocks.
Optional: Add reusable block to your sidebar
Next, grab the reusable blocks shortcode, got to Apperance >> Widgets and using Custom HTML widget paste the code in suitable widget area.
NB! If your theme does not support shortcodes in the widgets then paste this code here below to your Code Snippets.
add_filter( 'widget_text', 'do_shortcode' ); Add TOC on top of the documents content
If you would like to show the TOC on top of the documents content then this aprt is a bit tricky because your theme would need to use hooks. For example:
- Blocksy theme uses hooks (Pro version has a visual hooks buil-in)
- Kadence theme uses hooks (Visual hooks guid plugin is here)
- Astra tehe uses hooks (Visual hooks guide is here)
So, in this example I am using Blocksy theme and therefore I use blocksy:single:content:top hook. If you are using any other theme then just change this part in the snippet below. Also, replace your reusable block shortcode.
Add this snippet and your TOC is placed on top of the content.
add_action( 'blocksy:single:content:top', 'toc' );
function toc() {
if ( is_singular( 'post_knb' ) ) {
echo do_shortcode('[reblex id="1582"]'); // CHANGE REUSABLE BLOCKS SHORTCODE
}
}Add live search on archive and single document pages
Previously we added ajax search only on frontpage but if you need to add it to your archive or single doc pages then once more we’re going to use hooks. OR: if you are using Blocksy Pro, Kadence Pro or Astra Pro then use their built in options to add it accordingly.
Just create a Content Block (Element, Page Layout) and add Ajax search Lite shortcode there. Now add conditions wheere you would want to show this shortcode and save.
Create a live search block
Go to Reusable Blocks >> Add new and create a heading similar to your front page. Add Ajax Search Lite shortcode inside this ehader section. Save and grab the Reusable Blocks shortcode.
Add shortcode using your theme hooks
As said before: with Bocksy Pro, Kadence Pro and Astra Pro you can skip this part. Otherwise find out a suitbla hook position and paste this snippet inside Code Snippet code box.
I am using Blocksy hook blocksy:header:after but you change it accordingly. Also, chanfe Reusable blocks shortcode.
add_action( 'blocksy:header:after', 'search' );
function search() {
if ( is_singular( 'post_knb' ) ) {
echo do_shortcode('[reblex id="1590"]'); // CHANGE REUSABLE BLOCKS SHORTCODE
} elseif ( is_archive( 'post_knb' ) ) {
echo do_shortcode('[reblex id="1590"]'); // CHANGE REUSABLE BLOCKS SHORTCODE
}
}Add accordion menu in sidebar
Well, almost done. Since I want to add a accordion menu in sidebar I’ll go to Plugins >> Add new and search for Bellows Accordion Menu plugin. After installing it I’ll create a menu for it and add it to sidebar.
Just go to Appearance >> Bellows menu and customize it. Next go to Appearance >> Widgets and add Bellows Menu Accrodion widgets in sutiable widget area.
Final words on How to create WordPress Knowledge base or Documentation site?
It may seem a hard work but actually it is very easy. Writing this tutorial on “How to create WordPress Knowledge base or Documentation site?” took me 90 minutes but creating a site like described above took me ca 30 minutes + content adding time.
