What are the benefits to create a knowledge base just with Joomla?
- Your knowledge base's content is powered by Joomla
You can manage it easlily, like any other content powered by Joomla. Adding and/or editing the content of your knowledge base is really simple.
- No need to install and maintain an extension
No extension to install and maintain. No learning curve to endure. Forget the heavy CCK and others page builders, you only need Joomla.
- Improve your Joomla skills with the overrides
All you'll have to do is to follow this tutorial to create your knowledge base in minutes. All the steps are fully explained and illustrated.
- You keep a perfect control on your SEO
Because your knowledge base is based on com_content, you'll be able to manage each title and description tags as per your SEO objectives.
- Joomla is free for everyone and forever.
Because of Joomla magic, creating this powerful knowledge base is free and you won't ever have to pay for a licence.
The structure of a knowledge base
Simply, a knowledge base is a list of articles displayed and grouped by their categories. To help the users to find quickly their answers, a search engine is oftenly used and displayed on the top of this kind of page.
Once we've defined this, it's easier to understand how we'll create this knowledge base just with Joomla. We'll have to create:
- the categories (and sub-categories if needed)
- the articles in each categories
- and the search module
To manage your knowledge base easily, I suggest you to create first a parent category named "Knowledge base" and create as many child categories you need. Add a short description to your categories. The structure of your categories should looks like this:
Then, you add your content by creating all your articles in each relevant categories.
Now, let's display your knowledge base
In this tutorial, we'll display the search bar on the top of the page and the categories below.
To acheive this, we need to create a new Smart search module to display the search bar. Maybe you don't know but Joomla have a very powerful internal search engine and we'll use it.
Setup the component Smart Search
To be very efficient, your knowledge base must have a dedicaced search engine. All the results from this search engine must be related to the content of the knowledge base and not from your blog or any other part of your website. That's possible with Joomla and that's what you'll setup now.
-
Open the Components Dashboard by clicking the icon in the left menu
-
In Smart Search, click Index.
-
In this page, all the contents indexed by this component are displayed. Click on the Index button on the top bar to index the latest content added.
-
In the left menu, click Filters.
-
Now, we gonna create the specific filter limited to the content of the knowledge base. Click the New button in the top bar.
-
First, indicate a name to your filter (Search KB in this example).
-
Click on Search by category and select only the categories of your knowledge base.
-
Once you're done, click the Save and close button in the top bar.
Create the module Smart Search
-
From the control panel, click on the + icon next to Module.
-
In the list, click the module Smart Search.
-
Indicate a title for your module (f.ex: Search Knowledge Base).
-
In the parameter Search filter, select the search filter you've created earlier (Search KB).
-
Adjust the others parameters accordingly to your needs:
-
Finally, select a module position above the component position of your template and assign it to the right page.
-
Once you're done, click Save and close button.
Create the menu item
From the control panel, click on Menus in the left menu.
Select your menu and click on the + icon to create a new menu item.
Indicate the title of your menu item (f.ex: Knowledge Base) and if needed, customize its alias.
In Menu Item Type *, select Articles and then List All Categories.
In Select a Top Level Category *, select the parent category Knowledge Base.
Now, adjust the parameters of your module accordingly to the following setup:
Categories tab
Category tab
Setup the options and the parameters in the others tabs.
Once you're done, click Save and close button.
Don't worry, be happy! All the content of your knowledge base is powered by com_content. You have to manage the SEO parameters (title and description tags) of this menu item, of the categories and of the articles of your knowledge base. The search engine crawlers will index all the content.
Let's play with the overrides
This is the technical point of this tutorial but don't panic, it's pretty simple :)
The module Smart Search
Let's start with the module Smart Search. We'll customize it with some CSS Bootstrap classes.
From the control panel, click on System in the left menu.
In the part dedicaced to the template, click on Site Templates.
Click on your frontend template (Cassiopeia, in our example).
Click on the tab Create Overrides.
In the modules list, click on mod_finder.
After the override creation processus, go back to the editor tab.
In the left list, click on html and then on mod_finder.
Here, you have one file:
default.php
Because you may want to create more than one override of this module, let's copy it!
- Copy the all code of the file default.php
- Click on the button New File on the top bar
- In the left of the popup window, click first on mod_finder to select the folder
- In the right of the window, fill the field with the name of your new file (override-kb for example)
- Select the type of the file: php and click on Create
- Now, your new file must be displayed below the Default.php file in the mod_finder folder
- Your Default.php file is now your master file if you need to create another override with mod_finder
-
Click on override-kb.php to open it in the editor. Your file must be empty.
-
Copy all the code below:
-
and paste it in your override-kb.php file.
-
Click on the Save button.
Some explanations about this code
-
Line 21: py-4 z-depth-2
I've added some CSS classes: some padding and a shadow all over the search bar. -
Line 21: placeholder
Don't hesitate to customize your placeholder (the text displayed inside the search bar) and its size (150 in this example). -
Line 26: text-center text-white pb-4 d-none d-sm-block h3
These CSS classes will be apply to the label text displayed above the search bar. In this example, the label is displayed in H3 with white and it will not be displayed on mobile. Adjust this accordingly to your needs. -
Line 61: mx-auto form-control-lg w-75
These CSS classes will be applied to the form: centered, displayed in large and with a width at 75%.
Looking for Joomla overrides?
If you need inspiration or tips on Joomla overrides, here are +50 free examples to help and inspire you.
Joomla OverridesThe content
Now take a deep breath, we'll override the category and categories views (hey, I'm kidding!).
As described earlier, create first the overrides of the com_content component with category and categories.
The categories
Just to remind you, categories is the view where all the categories of your knowledge base are displayed.
By default in the folder com_content / categories, you must have 2 files:
- default.php and default_items.php
- Open your default_items.php file
copy all the code below:
- and paste it in your default_items.php file.
- Once it's done, click the Save and close button.
Explanations. In this example, I've added some Bootstrap CSS classes to display 3 categories per row (line 22), some padding and margin (line 25) and a blue icon right before the title of each category (line 28). Of course, you can keep these changes or adapt them to the design of your website.
The category
Just to remind you, category is the view where all the articles of a single category of your knowledge base are displayed.
By default in the folder com_content / category, you have 7 files:
- For your information, the Default files will present your articles in a table. So, we'll only modify the Blog files to present the knowledge base. Copy each code below and paste them into their respective files (com_content / category / ...).
- The blog.php file
Explanations. Here, I've added some padding (lines 33 and 77), a blue CSS Class (line 41) and an icon right before the title of each category (line 43). I've also added some Bootstrap CSS classes to the list of the aricles (lines 96 and 98). Of course, you can keep these changes or adapt them to the design of your website. How to create a free Knowledge Base just with Joomla 4?
- The blog_children.php file
- The blog_item.php file
- The blog_links.php file
A last step...
Now, go back to the module Smart Search you've created earlier.
Open it and in the tab Advanced select override-kb (or the name given to your override) in the layout parameter.
Once it's done, click the Save and close button.
The frontend
I've added some additional CSS to my code but you have followed carefully all the steps of this tutorial, your knowledge base must looks like something like this:
The categories frontend view
The category frontend view
The Joomla Override Challenge
In association with Viviana Menzel, we've created the unofficial Joomla Override Challenge. The goal is to create each month an override based on an extension or on an project. If you want to participate, feel free to contact Viviana or me :)
How to create a free Knowledge Base just with Joomla 4?