The target of this short HowTo is to show, how a table of contents section can be added with the help of the HTML-XML-utils to a WordPress.com page. This overcomes the fact that the Wordpress.com free Blog Site does not offer the popular Table of Contents Plus Plugin, as far as I know.

Prerequisites

• I assume that a Docker host is available. If not, either install a Docker host e.g. by following Appendix A below, or install HTML-XML-utils on Linux natively.

Step 1: Open WordPress Blog Post in the WP Admin Editor

Log into WordPress, if you have not done already. Goto My Sites -> WP Admin -> App Posts -> click on edit of the page you want to improve by adding a table of contents.

Step 2: Goto Text View

Choose „Text“ tab on the right upper corner of the edit field.

Step 3: Copy Text

Cut&Paste the whole text (<ctrl>-a <ctrl>-c) to a file named source.html (in my case: „D:\veits\downloads\HTML-XML-utils\source.html“).

Step 4: Add <!--toc-->

Add following comment in source.html on the place, where you want the table of contents to be located:

<!--toc-->

save the changed file.

Step 5: Apply hxtoc

On a docker host, run

cat source.html |  docker run -i jezzay/html-xml-utils hxtoc > destination.html

If you have no Docker host at hand, you either can follow Appendix A below, or you can try to install and run HTML-XML-utils on Linux natively. See e.g. the article „How to Manipulate HTML and XML Files from the Command Line„.

Step 6: Paste changed Text to Editor

Cut & Paste the text of  destination.html to the text tab of the WordPress post

Step 7 (optional): Preview

Click on Preview button on the upper right of the Editor page and preview the results.

Step 8: Save Changes

If you are happy with the results, click „Save Draft“ (if it is a draft) or „Update“ (if it is published already).

Step 9: View you Blog Post

If you had updated are working on a published post, you now can view the post:

I have applied the HowTo to the current Blog Post, and this is the table of contents it has produced:

• Prerequisites
• Step 1: Open WordPress Blog Post in the WP Admin Editor
• Step 2: Goto Text View
• Step 3: Copy Text
• Step 4: Add <!--toc-->
• Step 5: Apply hxtoc
• Step 6: Paste changed Text to Editor
• Step 7 (optional): Preview
• Step 8: Save Changes
• Step 9: View you Blog Post
• Appendix A: Install a Docker Host via Vagrant and Connect to the Host via SSH
  • Prerequisites:
  • Steps to install a Docker Host VirtualBox VM:
  • Resolve Virtualbox Installation Problems
    • Resolution of the “Setup Wizard ended prematurely” Problem

Appendix A: Install a Docker Host via Vagrant and Connect to the Host via SSH

If you are new to Docker, you might want to read this blog post.

Installing Docker on Windows and Mac can be a real challenge, but no worries: we will show an easy way here, that is much quicker than the one described in Docker’s official documentation:

Prerequisites:

• I recommend to have direct access to the Internet: via Firewall, but without HTTP proxy. However, if you cannot get rid of your HTTP proxy, read this blog post.
• Administration rights on you computer.

Steps to install a Docker Host VirtualBox VM:

1. Download and install Virtualbox (if the installation fails with error message „Oracle VM Virtualbox x.x.x Setup Wizard ended prematurely“ see Subsection below („Resolve Virtualbox Installation Problems“)
2. Download and Install Vagrant (requires a reboot)
3. Download Vagrant Box containing an Ubuntu-based Docker Host and create a VirtualBox VM like follows:

(basesystem)# mkdir ubuntu-trusty64-docker ; cd ubuntu-trusty64-docker
(basesystem)# vagrant init williamyeh/ubuntu-trusty64-docker
(basesystem)# vagrant up
(basesystem)# vagrant ssh
(dockerhost)$

Now you are logged into the Docker host and we are ready for the next step: to create the Ansible Docker image.

Note: I have experienced problems with the vi editor when running vagrant ssh in a Windows terminal. In case of Windows, consider to follow Appendix C of this blog post and to use putty instead.

Resolve VirtualBox Installation Problems

• Download the VirtualBox installer. Easy.
• When I start the installer, everything seems to be on track until I see “rolling back action” and I finally get this:
  “Oracle VM Virtualbox x.x.x Setup Wizard ended prematurely”

Resolution of the “Setup Wizard ended prematurely” Problem

Let us try to resolve the problem: the installer of Virtualbox downloaded from Oracle shows the exact same error: “…ended prematurely”. This is not a docker bug. Playing with conversion tools from Virtualbox to VMware did not lead to the desired results.

The Solution: Google is your friend: the winner is:https://forums.virtualbox.org/viewtopic.php?f=6&t=61785. After backing up the registry and changing the registry entry

HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Network -> MaxFilters from 8 to 20 (decimal)

and a reboot of the Laptop, the installation of Virtualbox is successful.

Note: while this workaround has worked on my Windows 7 notebook, it has not worked on my new Windows 10 machine. However, I have managed to install VirtualBox on Windows 10 by de-selecting the USB support module during the VirtualBox installation process. I remember having seen a forum post pointing to that workaround, with the additional information that the USB drivers were installed automatically at the first time a USB device was added to a host (not yet tested on my side).