This plugin comes with a pre-configured CSS stylesheet within its plugin folder (styles.css). Feel free to adjust it to your needs. However, before updating the plugin, make a backup of your customized CSS file.


You’ll find a settings page for ByTheWay in WordPress’s admin backend (Settings→ByTheWay) with the following options.

Plugin options
Plugin options

Default Annotation Attribute Values

ByTheWay uses default values for annotation attribute. You can change these defaults here. Quotes or HTML tags are not allowed. Use HTML entities such as " for displaying special HTML characters. Remember that these default values can be overriden by specifying the respective attributes in the shortcodes.

Option Description
Initial annotation state Decide if you want annotations expanded or collapsed after the page has loaded.
Additional button CSS class Here you can specify a custom classname that is additionally assigned to each annotation toggle button.
Additional annotation CSS class Same as above, but for annotations instead of toggle button.
Label on expanded annotations Text shown on expanded annotation toggle buttons.
Label on collapsed annotations Text on collapsed annotation toggle buttons.
Tooltip for expanded buttons Html title of expanded annotation toggle buttons.
Tooltip for collapsed buttons Html title of collapsed annotation toggle buttons.

Default Attribute Values for Global Hide/Show/Reset buttons

These are the default values for the switches that globally show, hide or reset annotations and their respective toggle buttons. Again, quotes or HTML tags are not allowed, but HTML entities are. Remember that these default values can be overriden by specifying the respective attributes in the shortcodes.

Option Description
Html tag for mode switches. Decide which html tags the switches are enclosed in. Since actions are triggered by clicking on the switch using jQuery, any html tag seems possible (I prefer "a" or "button". Do not use angle brackets, these are added automatically.
Label for show all annotations switch Default text to be displayed on the switch that hides all annotation buttons and expands all annotations.
Label for hide all annotations switch Text on the switch that hides all annotations and toggle buttons.
Label for reset all annotations switch The text shown on the switch for resetting toggle buttons and annotations to their initial states.

General Settings

Messing around with these options can lead to unexpected behavior, so do not change if you do not know what you are doing.

Option Description
Html tag for buttons and annotations. The tag that all annotations and toggle buttons are enclosed in. Without angle brackets.
jQuery toggling effect type Annotations are collapsed and expanded using jQuery effects. At this time, only fade and slide are supported.
jQuery toggling options The respective options for the effect. For the slide effect, this would be the direction (up, left, down, right) and for the fade effect the speed in milliseconds.
Replace paragraphs with line breaks? By default, ByTheWay uses non-block elements and styles for toggle buttons and annotations. This might lead to some issues when you use multiple subsequent paragraphs within annotations, for the DOM does not allow block elements (such as paragraphs) within non block elements. To make things even more complicated, WordPress automatically converts two line breaks into paragraphs, so you might not even realize that your annotation contains block elements. This ByTheWay option fixes this issue by radically converting all paragraphs into line breaks. This is not the most elegant way to deal with this problem, so enable only if you really need to.