How to create WordPress Knowledge base or Documentation site?

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.

Blocksy theme


Kadence theme


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.

How to create WordPress Knowledge base or Documentation site?

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:

  1. Add Table of Content block manually to your documents.
  2. Add Table of Contents block to your sidebar
  3. 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: (SAVE 10% Coupon WPSH10)
  • Kadence Pro theme allows you to use Elements (Kadece PRO with discount: (SAVE 10% Coupon SIMPLEHACKS)
  • Astra Pro allows you to use Page Layouts (Astra Pro ise here

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:

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.

Useful tips

Here are some of my favorite WordPress tools

Thanks for reading this article! I hope it's been useful as you work on your own websites and e-commerce sites. I wanted to share some tools I use as a WordPress developer, and I think you'll find them helpful too.

Just so you know, these are affiliate links. If you decide to use any of them, I'll earn a commission. This helps me create tutorials and YouTube videos. But honestly, I genuinely use and recommend these tools to my friends and family as well. Your support keeps me creating content that benefits everyone.

Themes: Over the past few years, I've consistently relied on two primary themes for all sorts of projects: the Blocksy theme and the Kadence Theme. If you explore this website and my YouTube channel, you'll come across numerous tutorials that delve into these themes. If you're interested in obtaining a 10% discount for both of these themes, then:

Code Snippets Manager: WPCodeBox allows you to add code snippets to your site. Not only that, but it also provides you with the capability to construct and oversee your WordPress Code Snippets library right in the cloud. You can grab it with the 20% discount here (SAVE 20% Coupon: WPSH20).

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get a 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration, and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get a 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: If you would like to have a really fast and easy-to-use managed cloud hosting, then I recommend Verpex Hosting (see my review here). Btw, this site is hosted in Verpex.)

To see all my most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Donation Form (#2)

Best selling plugins

Janek T.
Janek T.

I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce.
If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here
Follow me in Twitter here

Articles: 102