Footnotes Shortcode
Adds a [ref] shortcode for footnotes: each note becomes a numbered superscript link, and all notes are listed at the end of the post with links back.
Opens WPIDE on
Code
$wpide_footnotes = array();
add_shortcode( 'ref', function ( $atts, $content = '' ) use ( &$wpide_footnotes ) {
$post_id = (int) get_the_ID();
$content = trim( (string) $content );
if ( '' === $content ) {
return '';
}
$wpide_footnotes[ $post_id ][] = $content;
$number = count( $wpide_footnotes[ $post_id ] );
$id = $post_id . '-' . $number;
return '<sup class="wpide-fn-ref" id="fnref-' . esc_attr( $id ) . '"><a href="#fn-' . esc_attr( $id ) . '">' . $number . '</a></sup>';
} );
add_filter( 'the_content', function ( $content ) use ( &$wpide_footnotes ) {
$post_id = (int) get_the_ID();
if ( empty( $wpide_footnotes[ $post_id ] ) ) {
return $content;
}
$html = '<ol class="wpide-footnotes" style="font-size:.9em;">';
foreach ( $wpide_footnotes[ $post_id ] as $index => $note ) {
$id = $post_id . '-' . ( $index + 1 );
$html .= '<li id="fn-' . esc_attr( $id ) . '">' . wp_kses_post( $note ) . ' <a href="#fnref-' . esc_attr( $id ) . '" aria-label="Back to the text">↩</a></li>';
}
unset( $wpide_footnotes[ $post_id ] );
return $content . '<hr class="wpide-footnotes-separator" />' . $html . '</ol>';
}, 12 );Notes
Example: The study found this.[ref]Smith, 2024, page 12.[/ref] Notes can contain links and basic formatting.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.