WordPress for Online Documentation: How To Use Helpinator plugin and documentation themes

If you missed the post about setting up your own local testing environment for WordPress check it out before reading this one: https://www.helpinator.com/blog/2019/08/27/setting-up-xampp-to-test-wordpress-site-on-windows/

Upon completion of WordPress setup you get to the Dashboard. Go straight to the “Plugins” section, we need to install 2 plugins:

  1. Helpinator Quick Publish plugin – extends WordPress XML RPC API so it becomes possible to publish pages in “packages”, not one-be-one which is time-consuming.
  2. WP-Reset plugin. In case you f-ck up with content, it’s better to reset your WordPress to a state of brand new than to remove piece-by-piece content that is messy.

To install a plugin:

1. Go to “Plugins” section of the Dashboard

Plugins – Dashboard

2. Click “Add new” button at the top. Then start typing “Helpinator” into the “Search” field on the right

Helpinator plugin

3. Click “Install now” then “Activate”

Activate plugin

Repeat the steps for “WP Reset” plugin.

Now we need to install Helpinator documentation theme. You can omit installing Helpinator theme if you wish the published content to fit into your current theme – not a problem, Helpinator will do that. However it is more convinient to browse technical documentation in a specialized layout, and this is what Helpinator themes do.

Open Helpinator downloads page and scroll to “WordPress” section: https://www.helpinator.com/download.html We will use “Modern” theme for this tutrorial, so download it.

Extract theme files to WordPress themes folder, in our case it is “C:\xampp\htdocs\www\mydomain.com\wp-content\themes\“, complete theme folder.

Helpinator WordPress online documentation themes are made to be child themes of your main theme, but you can use them as standalone themes too. However, by default, there’s a setting that this theme is the child theme of “twentynineteen”, the default WordPress theme. If you use another theme, or you want to use Helpinator theme as a standalone, you have to make alterations to styles.css file.

/*
	Theme Name: Helpinator Modern
	Theme URI: http://www.helpinator.com
	Description: WordPress theme for use with Helpinator
	Version: 1.1
	Author: Dmitri Popov
	Author URI: http://www.dmitripopov.com
	Tags: HTML5, CSS3
        Template: twentynineteen
	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

See the “Template:” parameter that points to “twentynineteen” theme. Remove theme name if you plan to use Helpinator theme as a standalone theme, or change “twentynineteen” to the name of template you want other parts of your WordPress site to use.

All Helpinator themes only add one page template named “HelpinatorDocTemplate” (helpinator.php) that you need to choose as a page template when publishing content from Helpinator.

Let’s select Helpinator theme as our WordPress site theme. Open WordPress Dashboard and select “Appearance->Themes” from the left sidebar menu.

WordPress themes

Click on “Helpinator Modern” then “Activate”.

Activate Helpinator Theme

There’s one last thing left to do before we preceed to publishing. We need to add an empty root page for our documentation. You can skip this step if your create a documentation-only website, in other cases we will need to filter only documentation pages to show in our documentation Table Of Contents, and the easiest way to do it is to make all documentation pages children of one root page. So open “Pages” section of WP admin dashboard:

“Pages” section, “Add New”

We don’t need any specific content, so just name the new page “Documentation”, then click “Publish”.

Empty “Documentation” page

Now the initial setup is complete and you can move on and try to publish something from Helpinator.

Run Helpinator, open your project file and click “WordPress” icon on the toolbar:

“Publish to WordPress” on the main toolbar.

Click “+” sign to add a new WordPress site profile. Let’s name it XAMPP since we are going to publish to our tests site.

Fill in the “Host” name, in our case it is “mydoman.com” from this post: https://www.helpinator.com/blog/2019/08/27/setting-up-xampp-to-test-wordpress-site-on-windows/

We do not use SSL on our test site so do not check it.

Leave “Endpoint” field blank too, it is for complicated cases mostly. For example, when you rename your xmlrpc.php file to avoid problems or when your WordPress installation is in a subfolder (say “blog”), so in this case “Endpoint” should be “/blog/xmlrpc.php”

Fill your WordPress username and password. Note that Helpinator does not store your passwords, you will need to enter it on each session.

Fill in WordPress site details and check connection
Connection OK

Now we need to get the list of page templates and select “HelpinatorDocTemplate”. Leave “Parent” page empty because we do not want our docs to be attached to existing page. Check “WP site runs on Helpinator WordPress theme”, it will allow all dynamic content like step-by-step guides to appear correctly. They will work with other themes too, but as a static content only. Check “WP site has enabled Helpinator Quick Publish Plugin” because we have it. This will speed up publishing.

Page template, parent page, etc.

Now click “Save profile” – this will save you time because you will be able to use again the settings provided.

Click “Publish”. Note that it may take some time to finish.

When Helpinator finishes it will ask you to save your project. This is needed to store page ID’s of the published topics so Helpinator will be capable to update pages when you hit Publish button again and not create new ones.

When done head over to WordPress admin dashboard again. We need to do some settings customizations for our project to appear correctly. Remember empty “Documentation” page that we created to be the root page of documentation? Now we will set it to be the starting page of documentation theme, so WordPress will show only documentation pages in the documentation section.

Select “Appearance”->”Customize”.

Appearance->Customize

Then select “Helpinator settings”.

Helpinator theme settings

Select our “Documentation” page as the TOC root page, then click “Publish”.

Select “Documentation” as the root page

Now we can preview our documentation section. From the “Pages” section of WordPress admin dashboard, hover the mouse cursor over one of the pages and click “View”.

Preview the page

The page might look like this:

Publlished topic page

Now let’s take some time and create a test navigation for our site. By default “twentynineteen” template does not have navigation so the rest of your site is unaware about the existence of the “Documentation” section.

Select “Appearance”->”Menus”.

Appearance->Menus

Enter “mainmenu” as the menu name and click “Create Menu”.

Create a new menu named “mainmenu”

We are creating the primary site menu so select corresponding checkbox.

The primary menu

Select “View all” tab, then select “Home” page and the first page of our documentation (note that it’s NOT the “Documentation” page). Then click “Add to Menu”.

Now click on our first documentation page to roll down the settings and change navigation label to “Online Documentation” – this way it will appear in the menu. Then click “Save Menu”.

Alter navigation label

Now open the front page of our site. It should look like this, note the link to documentation section is now in the menu at the top of the page.

Front page menu

See that the rest of the site uses twentynineteen theme while documentation section uses Helpinator theme.

That’s all for this tutorial! Thank you for reading!

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.