Wiki Styled references (Better than any plugin you’ll find)

Hello! I’m absolutely in love with this plugin!

So much so that I’ve decided to make my own custom code to make your wordpress wiki more “wiki-like” ??

Any serious wiki needs to have references and that’s exactly what this code does! It creates two shortcodes for you to use:

1. The first shortcode is [ref][/ref] which creates a superscripted number that links to its corresponding item on the reference list. Example: [ref]This is a reference[/ref] -> a [1] will show up next to the text in the front-end, clicking on it will scroll the page to its corresponding item in the reference list.
2. The second shortcode is [reflist]. Contrary to all of the plugins I tested, which are really strict with the placement of their footnotes, this baby right here enables you to insert the reference list anywhere you want on the page! Just simply plop down the [reflist] shortcode and watch it grow as more and more references are added! Each item on the list also has “↑” before it. Clicking it will bring you back up to it’s corresponding reference on the article! Cool, right?

Here’s the code:

// Initialize global variable and counter to hold the references
$wiki_references = array();
$reference_counter = 0;

// Shortcode for the references
function wiki_ref_shortcode($atts, $content = null) {
    global $wiki_references, $reference_counter;

    // Increment the reference counter
    $reference_counter++;

    // Generate a unique identifier for this reference
    $reference_id = 'ref_' . $reference_counter;

    // Add the reference content to the global variable
    $wiki_references[$reference_id] = $content;

    // Generate a link to the reference list item
    $reference_link = '<a href="#reflist_' . $reference_counter . '">[' . $reference_counter . ']</a>';

    return '<sup><span id="' . $reference_id . '">' . $reference_link . '</span></sup>';
}
add_shortcode('ref', 'wiki_ref_shortcode');

// Shortcode for the reference list
function wiki_ref_list_shortcode() {
    global $wiki_references;

    if (empty($wiki_references)) {
        return 'No references found.';
    }

    $output = '<ol>';
    foreach ($wiki_references as $reference_id => $reference) {
        $output .= '<li id="reflist_' . substr($reference_id, 4) . '"><a href="#' . $reference_id . '">↑</a> ' . $reference . '</li>';
    }
    $output .= '</ol>';

    return $output;
}
add_shortcode('reflist', 'wiki_ref_list_shortcode');

Just copy/paste the code into your theme’s/child theme’s functions.php and that’s it!

If you want even MORE wiki like functionality for the links though, I’ve also altered the code and added some CSS so the links also display a tooltip containing the reference text on hover.

PHP Code:

// Initialize global variable and counter to hold the references
$wiki_references = array();
$reference_counter = 0;

// Shortcode for the references
function wiki_ref_shortcode($atts, $content = null) {
    global $wiki_references, $reference_counter;

    // Increment the reference counter
    $reference_counter++;

    // Generate a unique identifier for this reference
    $reference_id = 'ref_' . $reference_counter;

    // Add the reference content to the global variable
    $wiki_references[$reference_id] = $content;

    // Generate a link to the reference list item with a data attribute for the tooltip content
    $reference_link = '<sup><a href="#reflist_' . $reference_counter . '">[' . $reference_counter . ']</a></sup>';

    return '<span class="custom-ref-wrapper"><span id="' . $reference_id . '">' . $reference_link . '</span><span class="custom-tooltip">' . $content . '</span></span>';
}
add_shortcode('ref', 'wiki_ref_shortcode');

// Shortcode for the reference list
function wiki_ref_list_shortcode() {
    global $wiki_references;

    if (empty($wiki_references)) {
        return 'No references found.';
    }

    $output = '<ol>';
    foreach ($wiki_references as $reference_id => $reference) {
        $output .= '<li id="reflist_' . substr($reference_id, 4) . '"><a href="#' . $reference_id . '">↑</a> ' . $reference . '</li>';
    }
    $output .= '</ol>';

    return $output;
}
add_shortcode('reflist', 'wiki_ref_list_shortcode');

Now add the following to your custom CSS:

/* Custom Tooltip Styles */
.custom-ref-wrapper {
  position: relative;
  cursor: pointer;
}

.custom-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  padding: 5px;
  width: 500px; /* Adjust the width as needed */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  white-space: normal; /* Allow text to wrap */
  z-index: 123;
}

.custom-ref-wrapper:hover .custom-tooltip {
  display: block;
  opacity: 1;
  visibility: visible;
}

Note that I used 500px as the width, but you can use any value that’s best for you! Also the z-index is a random number because I just want the tooltips to show up above everything else, you can also change it to whatever you see fit ??

Feel free to test it out yourself! And I hope this helps!

Much love!