This tutorial is part of a series on publishing a knowledge base on any topic with WordPress and the KnowHow theme. You can purchase this tutorial pre-configured for WPEngine and Digital Ocean.

Install the Theme

Once you’ve purchased the KnowHow theme, you can download it from the Envato website.

Note: If you purchased a ready made quick start setup from me, it’ll already be installed; however, you will be required to provide a proof of purchase from Envato before I share the image.

Visit the Appearance -> Theme page and click Add New:

Add a WordPress Theme

Add a WordPress Theme

Once you’ve purchased the KnowHow themevisit your downloads to get the files:

Know How Theme

Download the KnowHow Theme

Then, upload the zip theme archive:

Add Your Theme

Choose Your Theme to Upload

Once that’s complete, you can Activate the theme:

Activate Your WordPress Theme

Activate Your WordPress Theme

Your website home page will now begin to resemble our knowledge bases such as SimpleStart.io:

Know How Simple Start

Simple Start Basic Look

Customizing the KnowHow Theme

Now, we’re ready to begin customizing the theme. KnowHow has a number of elements such as a site title, navigation menus for the page header and footer and frequently asked questions (FAQs).

Configuring the Website Title

First, let’s configure the basic properties of the theme by setting the site title and secondary tagline. Using the WordPress Dashboard left sidebar, click on Appearance -> Customize:

WordPress site title

Customize Your Site Title in WordPress

Note to technical readers: I’ve also found that commenting this line in the KnowHow header.php theme file prevents duplication of my site title in the browser tab and search engine results:
<!– php bloginfo(‘name’); –>

Build Your Contact Page

Next, let’s create a contact page using Contact Form 7. The plugin settings page for Contact Form 7 provides a default shortcode for a basic contact form, you can use it as is:

Contact Form

Contact Form 7 – Default Form

Copy the shortcode of the default form to the clipboard. Then, using WordPress, add a new page called “Contact Us,” I like to change the URL to /contact. Write some preamble for your contact page and paste the shortcode beneath it like so:

Contact Page

Add a New Page: Contact Us

Note: As I expand this tutorial, I’ll provide additional help for using the Really Simple CAPTCHA to limit spammers from sending you email.

Contact page example

Example Contact Page

Now that the Mailgun plugin is operational, you should be able to test and send email to yourself from this page. You can also send me a note from my contact page.

Author Your About Page

Before we begin customizing our navigation menus, add a sample About page to your site as well using WordPress. i.e. Add New Page:

Example About Page

Example About Page

 

Configure Your Navigation Menus

Now that you’ve built a couple of pages, let’s configure our navigation menus within the Know How theme. I’ll show you how the basic are done, although we only have a few pages to begin with.

In addition to our About and Contact pages, we’ll add a link to my consulting site, Lookahead.io.

To begin, visit the Dashboard’s Appearance -> Menus page and create a menu called Header:

WordPress Create a menu

Create a Menu called Header

Check the boxes of the About and Contact page, then click Add to Menu. Then, check the box for Primary Menu at the bottom of the newly created menu configuration form; this will cause this menu to be loaded at the top of the page in the theme header. Finally, click Save Changes.

Add Navigation to a WordPress Menu

Add Navigation to a WordPress Menu

Finally, let’s add a Custom Link to my consulting site and add that to the menu:

Custom Links WordPress Navigation

Add Custom Links to a WordPress Menu

Here’s what the header navigation looks like now:

Navigation Menu in WordPress

Example Header Menu

Then, we’ll repeat the process for a Footer menu, this time selecting Footer Menu at the bottom of the form before saving it:

menu create footer

You can also configure what appears in the Footer area. Go to Appearance -> Theme Options, to the bottom of the General Options tab. You can edit the Footer there:

WordPress KnowHow Footer

Configuring the Footer

Here’s what it looks like when you’re done:

Customized WordPress Footer Menu

Example of Customized Footer Menu

Configure Categories for Your Knowledge Base

Since the home page of your knowledge base is organized around categories, it’s important to put some time into your topic’s category list and their order. Because the KnowHow theme doesn’t yet have a drag and drop category ordering capability, I use a two digit numbering prefix.

For Flee the Jungle, I began by creating a spreadsheet list of topics and then cutting and pasting the order of categories within. Then, it was easy to cut and paste the topics over to the WordPress category dashboard area. Let me show you.

Here’s an example of my Google Drive Spreadsheet:

WordPress categories

Organizing Your Categories

For the numbering of the first nine rows in column A, I used the formula below to add a leading zero:

=concatenate("0",row())

For the later rows, I just used:

=row()

For column D, I concatenated the entries with this formula:

=concatenate(A1," ",B1)

The spreadsheet helped me organize my categories before entering them into WordPress where it becomes more difficult to adjust the ordering.

To add categories, use the WordPress sidebar menu, Posts -> Categories:

Adding WordPress caegories

The Posts -> Categories Menu to Add Categories

As I add categories, I just paste column D from the spreadsheet one at a time. Ultimately, it will look something like this:

WordPress Categories

Adding Categories to Your Knowledge Base

You can also customize how categories are displayed on the homepage. Under Appearance -> Theme Options, you can remove the home page sidebar, turn off article counts in categories and hide the Miscellaneous category:

WordPress Home Page Customization

Customizing the Home Page and Categories

To hide a category from the homepage, you have to look at its ID by clicking edit and viewing it in the address bar.

Here’s what the Simple Start home page looks like after adding my categories:

WordPress KnowHow Categories

Simple Start Home Page with Categories

Enabling Live Search on the Home Page

You can enable and customize the query for the interactive live search which we mentioned above (it’s also called AJAX search). You can try out the live search operating from the home page.

interactive ajax search for wordpress

Enable Live Search for the Front Page

Continue reading: Authoring Your Knowledge Base

About The Author