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

SAVE 10% COUPON: WPSH10

Kadence theme

SAVE 10% COUPON: SIMPLEHACKS

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: 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:

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

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

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 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 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: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of 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.

Choose amount

Best selling plugins

Default image
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: 72