Lately, I got a bit annoyed manually typing LaTeX-style references — as for example done for the 40+ references on the Superpixel Benchmark page. So I implemented a simple and quick solution in jQuery and integrated it into WordPress. In this article, I shortly want to present the plugin.
The jQuery plugin and the corresponding WordPress plugin can both be found on GitHub:
jQuery Plugin WordPress PluginjQuery Reference Plugin
After including jquery-references.js
, the following listing shows a simple usage example:
<script type="text/javascript"> $(document).ready(function() { // label will set up the labels, similar to \bibitem // reference will set up the references, similar to \cite // in both cases, a domain can be given in order to have different // counters on the same page (references, figures, tables ...) $('.lbl').reference('label', 'domain'); $('.ref').reference('reference', 'domain'); }); </script> <p> A longer sentence referencing [<span id="ref1" class="ref"></span>] as well as [<span id="ref2" class="ref"></span>] and [<span id="ref3" class="sp-ref"></span>]. </p> <ul class="list-unstyled small"> <li>[<span id="ref1" class="lbl"></span>] Reference 1.</li> <li>[<span id="ref2" class="lbl"></span>] Reference 2.</li> <li>[<span id="ref3" class="lbl"></span>] Reference 3.</li> </ul>
In general, this is still not very comfortable, as a span
element is necessary for each label or reference. However, as done below this can easily be mitigated in WordPress using shortcodes.
As seen in the example, span
elements with class .lbl
will create new labels (i.e. every such element gets a unique number). The .ref
elements will then reference these labels based on the id of the span
elements — it does not matter where on the page labels and references are placed. In the jQuery calls, a domain is supplied as additional parameters; this allows to have different counters for different categories (e.g. for referencing references, figures, tables and so on).
WordPress Reference Plugin
Integrating the above plugin into WordPress is simple and additionally allows to make it even easier by using shortcodes. The plugin can easily be installed by creating a new directory, e.g. wordpress-references
, in wp-content/plugins
to checkout the GitHub repository to. After activating the plugin in the backend, the following two shortcodes are provided:
[refb ref1 domain] | <span id="ref1" class="ref"></span> | reference ref1 in domain domain |
[lblb ref1 domain] | <span id="ref1" class="ref"></span> | create label ref1 in domain domain |
Example:
Let's quickly reference [refb ref1 domain]
.
[lblb ref1 domain]
Reference 1.
Let's quickly reference []. [] Reference 1.