A – Usage

To use Page Progress Tracker, you place shortcodes on the pages that need tracking and on pages that show a table of contents or provide a user with an overview of their progress.

Progress levels are stored as numerical values in the database and these values are used as parameters to some of the shortcodes:
0 = In-progress
1 = Completed + Bookmarked 2 = Completed

In-progress means the user has started working on the page but doesn’t consider it completed.

Completed + Bookmarked means the user consider the page completed but wants an easy way to revisit it later.

Completed means the user is completely done with the page.

Shortcodes are bracketed text that tell WordPress to replace themselves with the output of a plugin or other custom code when rendering the page. Shortcodes look like this:

[prefix-action parameter=”value”]

The prefix is usually a unique identifier the producer of the plugin uses to reduce the chances their shortcodes will use the same names as other shortcodes. Ours all use “tws”.

The action is usually words or abbreviations that give some idea what the shortcode does. “[tws-prevnext]” is our shortcode for showing links to move back and forth through a page’s sibling pages, for example.

Parameters are a way of passing information to the shortcode that affect its output. We use parameters to turn optional features on and off and to allow you to override our default titles such as the heading for a table of contents.

Styling Shortcode Output

Most of our shortcodes use CSS classes to allow you to add styling. We provide minimal styling in most cases so you can take control of how things look on the page. For example, our previous and next links are in an HTML div with a class of “tws-prevnext”. The next link is in a div with a class of “tws-next” and the previous link is in a div with a class of “tws-previous”.

You can save a lot of typing by setting up your preferred styling for these classes in a stylesheet or your theme’s custom CSS settings. For example, to always center the link to the next level up in a course and make sure it has some breathing room on top:

.tws-parentlink {
text-align:center;
margin-top:15px;
}