[sc:khtutor][sc:khpreamble]
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
Once you’ve purchased the KnowHow theme, visit your downloads to get the files:
Download the KnowHow Theme
Then, upload the zip theme archive:
Choose Your Theme to Upload
Once that’s complete, you can Activate the theme:
Activate Your WordPress Theme
Your website home page will now begin to resemble our knowledge bases such as SimpleStart.io:
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:
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 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:
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.
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
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:
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
Finally, let’s add a Custom Link to my consulting site and add that to the menu:
Add Custom Links to a WordPress Menu
Here’s what the header navigation looks like now:
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:
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:
Configuring the Footer
Here’s what it looks like when you’re done:
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:
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:
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:
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:
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:
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.
Enable Live Search for the Front Page
Continue reading: Authoring Your Knowledge Base
