Easily Referencing Publications, Listings or Figures using jQuery and WordPress

This article presents a very simple jQuery plugin and the corresponding Wordpress plugin allowing to easily create and reference labels in a LaTeX-style fashion.

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 Plugin

jQuery 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');
    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>].
<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>

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


Let's quickly reference [refb ref1 domain]. [lblb ref1 domain] Reference 1.

Let's quickly reference []. [] Reference 1.

What is your opinion on this article? Let me know your thoughts on Twitter @davidstutz92 or LinkedIn in/davidstutz92.