B – The Shortcodes

Each shortcode is listed with any relevant parameters, CSS classes and usage notes.

Page Progress

[tws-page-progress] is the primary shortcode that shows radio buttons on the page with the current progress level, if any, checked and the ability for the user to set their progress level by clicking another radio button.

This shortcode should normally be used on course pages, not module or course home or overview pages. It is for pages where the user will learn something, do an activity or otherwise have a need to know if they completed the page’s intent.

[tws-page-progress] accepts one parameter, “title” to override the default label for the radio buttons. The default label says “Mark your progress for this page:”. To change it to “Set your status:” you would add the title parameter like this:
[tws-page-progress title=”Set your status:”]

There are no special styling notes. This element is a form with a class of tws-page-progress and an id of twspageprogressform. You can use either to apply styles or you can enclose the form in a div and style from there.

Child Pages Progress

[tws-childpages-progress] returns a number between 0 and 100 that represents progress for all pages that are children of the current page. This shortcode is typically used on a course or module home page to show the user their progress therein.

This shortcode accepts no parameters at this time.

Because this shortcode returns only a number, it can be used many creative ways. You can insert it in a sentence such as:

You have completed [tws-childpages-progress]% of this course.

Or you can do something much more elaborate such as show a progress meter using the output
of the shortcode as a styling value:

.meter {position:relative; background-color:#555; height:30px; padding:2px;}
.meter > span {display:block; height:100%; position:relative; overflow:hidden; background-color:#ffa500; background-image: linear-gradient(to bottom, #ffa500, #ffa555);}
<div class="meter">
<span style="width: [tws-childpages-progress]%;"></span> </div>

Note that WordPress doesn’t process shortcodes properly is they span a line. By keeping most of the CSS in the style section (or, better yet, a stylesheet for the site), we keep the shortcode intact as part of the span that fills the meter and get this:


User Page Progress

[tws-user-pageprogress] lists the pages the user has completed by default. Through various parameter values it can list pages at one or more specific levels.

[tws-user-pageprogress] accepts one parameter called progresslevel. This parameter indicates the level of progress you want to display the current user’s pages for.

0 = In-progress
1 = Completed + Bookmarked 2 = Completed

To show all the pages the user has marked as started but not completed:
[tws-user-pageprogress progresslevel=”0”]

[tws-user-pageprogress&brack; outputs a plain, unordered HTML list. You can style it by placing it in a div and applying styling to the <ul> and <li> elements therein:

.no-bullets > ul {list-style:none;}
<div class="no-bullets">
<h3>My Bookmarks</h3> [tws-user-pageprogress progresslevel="1"] </div>

Table of Contents

[tws-toc] shows a table of contents by listing the current pages child pages or, optionally, its children and grandchildren. For pages where the current user has marked their status it will be shown next to the page’s name in the table of contents.

[tws-toc] accepts several parameters:
all_levels determines whether the immediate children are listed or all children and grandchildren are listed:

[tws-toc all_levels=”0″] shows immediate children only such as showing module home pages on a course home page.

[tws-toc all_levels=”1″] shows all levels of children below the current page such as showing the entire course outline on the course home page. Grandchildren are indented under their respective parents.

heading allows you to override the default heading of Table of Contents with something else: [tws-toc heading=”<h3>Course Contents</h3>”]

sort_column allows you to override the default sort order of alphabetical by title. For example to sort by WordPress’ Order field so you can manually set the order of pages:
[tws-toc sort_column=”menu_order”]
Other options for sort_column are “post_date” and “post_author”.

sort_order is either “asc” or “desc” for ascending or descending order and defaults to ascending. To change it to descending:
[tws-toc sort_order=”desc”]

The default heading is enclosed with HTML <h3> tags. To override this styling, supply a new heading with the heading parameter and enclose it with different heading tags such as:
[tws-toc heading=”<h2>Module Contents</h2>”]

tws-toc outputs a plain, unordered HTML list. You can style it by placing it in a div and applying styling to the <ul> and <li> elements therein. See the example in the User Page Progress section.

Previous Next

[tws-prevnext] shows links to the previous and next pages among the current page’s siblings with optional dots for each sibling. Use it for easy page-to-page navigation within a module’s pages, for example. At the first page, previous will not be shown and next will not be shown on the last page.

[tws-prevnext] accepts two parameters. “dots”, that determines whether or not dots are shown for each sibling page. “parentlink” includes the output of the Parent Link shortcode between the previous and next links, in place of previous on the first page or in place of next on the last page of a set of sibling pages.

[tws-prevnext dots=”0″] is the default and will show only the previous and next links.
[tws-prevnext dots=”1″] will show the dots to navigate to sibling pages.
[tws-prevnext parentlink=”0″] is the default and will not show the Parent Link.
[tws-prevnext parentlink=”1″] will show a link to the current page’s parent page. When parentlink = 1, dots will not show.

If parentlink = 1, the prefix, title and suffix parameters for [tws-parentlink] will also be accepted. See Parent Link for more details.

By default, the previous link is floated to the left and the next link is floated to the right. The entire previous-dots-next content is enclosed in a div with a class of tws-prevnext. The previous link is in a div with a class of tws-previous and the next link is in a div with a class of tws-next.

If enabled, the Parent Link is in a div with a class of “tws-parentlink”. On the first page it is floated left, on the last page it is floated right and on all other pages it has no float property.

Dots are spans with a class of tws-pagelink-dot except for the dot representing the current page with has a class of tws-pagelink-dot-current. To change the dots to blue and red for the current page:

.tws-pagelink-dot {color:blue;}
.tws-pagelink-dot-current {color:red;}
[tws-prevnext dots="1"]

Parent Link

[tws-parentlink] provides a link to the current page’s parent page. It is used to show a “return to module home” link from a module page.

[tws-parentlink] accepts three parameters, a prefix, title and suffix for the link. The defaults are up arrows for the prefix and suffix and the parent page’s name for the title. To show just “Module Home” with no up arrows:
[tws-parentlink prefix=”” title=”Module Home” suffix=””]