How to Create a Wiki Knowledge Base Using WordPress

Are you looking to add knowledgebase to your website? We are ready to show you how to build a Wiki site with WordPress. There are three known ways to do that.

Using Wiki theme

The easiest way to use Wiki on your site is to use WordPress knowledge base theme.

Please, note that is has to be installed to some subdirectory on your server. The main disadvantage of this method is that you cannot use it in case you have working site already.

Many websites have their knowledgebases on subdomains. That is normal practice.

Adding Wiki knowledgebase using plugin

If your theme doesn’t contain Wiki knowledgebase by default you can easily insert it using a WordPress wiki knowledgebase plugin. You can find several plugins available on WordPress official website. We recommend using Knowledge Base by PressApps one.

All that is required is plugin installation. Do that as usually under the Plugins > Installed Plugins > Add New section in your admin panel.

Once it’s installed your have Knowledge page in your WordPress backend. This area is a set of custom posts that allows you to organize your own knowledgebase.

Code Snippet Method of inserting Wiki knowledgebase on WordPress website

Another way to add Wiki knowledgebase to website is to create dedicated website using the code method.

This method is more flexible. But remember it requires some code knowledge. Here are step by step instructions:

1. Navigate to Plugins > Add New page in your WordPress backend. Enter Knowledge Base CPT to the search field. Activate theme after upload.

2. After plugin activation you will have custom post type called knowlage_base and it is called a taxomony in your admin panel.

3. You can easily add and organize articles in your admin panel under the Knowledge Base tab.

4. Once you have several articles ready you will need to organize your knowledgebase page.

5. To start doing that insert following snippet code in to the functions.php file:

   function my_knowledgebase() {
   			// Get Knowledge Base Sections
   			$kb_sections = get_terms('section','orderby=name&hide_empty=0');
   			// For each knowledge base section
   			foreach ($kb_sections as $section) :
   			$return .= '<div class="kb_section">';
   			// Display Section Name
   			$return .= '<h4 class="kb-section-name"><a href="'. get_term_link( $section ) .'" title="'. $section->name .'" >'. $section->name .'</a></h4><ul class="kb-articles-list">';
   			
   			// Fetch posts in the section
   			$kb_args = array(
   			'post_type' => 'knowledge_base',
   			'posts_per_page'=>-1,
   			'tax_query' => array(
               array(
   			'taxonomy' => 'section',
   			'terms'    => $section,
               )       ,
   			),
   			);
   			
   			$the_query = new WP_Query( $kb_args );
   			if ( $the_query->have_posts() ) : 
               while ( $the_query->have_posts() ) : $the_query->the_post(); 
   			$return .=  '<li class="kb-article-name">';
   		$return .=  '<a href="'. get_permalink( $the_post->ID ) .'" rel="bookmark" title="'. get_the_title( $the_post->ID ) .'">'. get_the_title( $the_post->ID ) .'';
   		$return .=  '</li>';
   		endwhile; 
   		wp_reset_postdata(); 
   		else : 
   		$return .= '<p>No Articles Found</p>';
           endif; 
   		$return .=  '</ul></div>';
   		endforeach;
   		return $return;
   		}
   		// Create shortcode 
   		add_shortcode('knowledgebase', 'my_knowledgebase');

   This code lists all the articles under the section they are added into.

6. Next step is page creation. That is usual procedure. Do that under Pages > Add New page in your backend.

7. Use the following shortcode to insert your knowledgebase posts to page [knowledgebase]

8. Save the page and check your site.

9. You will see that page has no style. It can be easily managed in CSS code. Paste following rule to Additional CSS field under Appearance > Customizer page in your backend:

   .kb_section {
   	float: left;
   	width: 280px;
   	max-width: 280px;
   	margin: 10px;
   	background-color: #f5f5f5;
   	border: 1px solid #eee;
   }
   h4.kb-section-name {
   	background-color: #eee;
   	margin: 0;
   	padding: 5px;
   }
   ul.kb-section-list {
   	list-style-type: none;
   	list-style: none;
   	display: inline;
   }   
   li.kb-section-name {
   	list-style-type: none;
   	display: inline;
   }
   ul.kb-article-list {
   	list-style-type: none;
   	list-style: none;
   }   
   li.kb-article-name {
   	list-style-type: none;
   }
   div.kb_section:nth-of-type(3n+1) {clear:left;}

   Please, note! CSS code may differ for the theme you use. Each theme has specific CSS classes.

We hope this article was helpful. If more help is required you can check our tutorials.

If you’re looking for a professional template to build a website, view WordPress Themes.