Title: [footnotes] breaks side widget
Last modified: August 17, 2026

---

# [footnotes] breaks side widget

 *  Resolved [chervnsik](https://wordpress.org/support/users/chervnsik/)
 * (@chervnsik)
 * [2 weeks, 6 days ago](https://wordpress.org/support/topic/footnotes-breaks-side-widget/)
 * I’ve tried many footnotes plugins, and this is by far the best one, but I’m having
   trouble with the display of my footnotes on the bottom of the breaking my side
   page widget. I’m not sure if using the Divi theme is the issue, but I would like
   to resolve this rather than continue trying to find one that works.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffootnotes-breaks-side-widget%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [chervnsik](https://wordpress.org/support/users/chervnsik/)
 * (@chervnsik)
 * [2 weeks, 6 days ago](https://wordpress.org/support/topic/footnotes-breaks-side-widget/#post-18995806)
 * I was able to fix using some PHP snippet and Custom CSS:
 * /**
    - DIVI + CITEKIT RICH FOOTNOTE FIX
      *
    - Use:
    - [footnote]Your footnote…[/footnote]
      *
    - At bottom:
    - [safe_footnotes]
      *
    - CiteKit remains installed, but we replace its “footnote”
    - shortcode renderer because its popup markup does not handle
    - multi-paragraph / block-level footnotes safely.
      */
 * /* ==========================================================
    - 1. REPLACE CITEKIT’S INLINE [footnote] SHORTCODE
    - ========================================================== */
 * add_action( ‘init’, function() {
 *     ```wp-block-code
       /*
        * CiteKit has already registered its shortcode by this point.
        * Remove only the footnote shortcode and replace it.
        */
       remove_shortcode( 'footnote' );
   
       add_shortcode( 'footnote', function( $atts, $content = null ) {
   
           static $footnote_number = 0;
           $footnote_number++;
   
           if ( $content === null ) {
               $content = '';
           }
   
           /*
            * wpautop() may already have changed a multiline shortcode
            * into something resembling:
            *
            * first paragraph</p><p>second paragraph
            *
            * We DO NOT output that HTML in the inline popup.
            * Convert it to readable plain text instead.
            */
   
           $popup = $content;
   
           // Add spaces where WordPress may have inserted block tags.
           $popup = preg_replace(
               '#</?(?:p|div|li|ul|ol|blockquote|table|tbody|thead|tfoot|tr|td|th|figure|figcaption|h[1-6])\b[^>]*>#i',
               ' ',
               $popup
           );
   
           $popup = preg_replace(
               '#<br\s*/?>#i',
               ' ',
               $popup
           );
   
           // Remove shortcodes from the popup copy.
           $popup = strip_shortcodes( $popup );
   
           // Remove remaining HTML.
           $popup = wp_strip_all_tags( $popup, true );
   
           // Normalize spaces.
           $popup = preg_replace( '/\s+/', ' ', $popup );
           $popup = trim( $popup );
   
           /*
            * Keep popup reasonably short.
            * The COMPLETE rich footnote appears at the bottom.
            */
           if ( mb_strlen( $popup ) > 500 ) {
               $popup = mb_substr( $popup, 0, 497 ) . '…';
           }
   
           $number = (int) $footnote_number;
   
           $output  = '<sup class="ck-footnote safe-ck-footnote"';
           $output .= ' id="fnref-' . esc_attr( $number ) . '"';
           $output .= ' tabindex="0">';
   
           $output .= '<a href="#fn-' . esc_attr( $number ) . '"';
           $output .= ' class="ck-footnote-ref">';
           $output .= esc_html( $number );
           $output .= '</a>';
   
           if ( $popup !== '' ) {
               $output .= '<span class="ck-footnote-popup">';
               $output .= esc_html( $popup );
               $output .= '</span>';
           }
   
           $output .= '</sup>';
   
           return $output;
   
       } );
       ```
   
 * }, 999 );
 * /* ==========================================================
    - 2. CREATE THE SAFE BOTTOM FOOTNOTE LIST
    - ========================================================== */
 * add_shortcode( ‘safe_footnotes’, function( $atts = array() ) {
 *     ```wp-block-code
       if ( ! is_singular() ) {
           return '';
       }
   
       $post_id = get_the_ID();
   
       if ( ! $post_id ) {
           return '';
       }
   
       /*
        * Read the ORIGINAL database content.
        *
        * This is important: we don't want the version that has
        * already passed through wpautop(), CiteKit, or Divi.
        */
       $raw_content = get_post_field( 'post_content', $post_id, 'raw' );
   
       if ( ! $raw_content ) {
           return '';
       }
   
       /*
        * Extract the original [footnote]...[/footnote] contents.
        */
       preg_match_all(
           '#\[footnote(?:\s+[^\]]*)?\](.*?)\[/footnote\]#is',
           $raw_content,
           $matches
       );
   
       if ( empty( $matches[1] ) ) {
           return '';
       }
   
       $atts = shortcode_atts(
           array(
               'title' => 'Notes',
           ),
           $atts,
           'safe_footnotes'
       );
   
       $output = '<section class="safe-citekit-footnotes">';
   
       if ( $atts['title'] !== '' ) {
           $output .= '<h3 class="safe-citekit-footnotes-title">';
           $output .= esc_html( $atts['title'] );
           $output .= '</h3>';
       }
   
       $output .= '<ol class="ck-footnotes safe-footnotes-list">';
   
   
       foreach ( $matches[1] as $index => $raw_footnote ) {
   
           $number = $index + 1;
   
           /*
            * Start with the ORIGINAL raw footnote.
            */
           $footnote = trim( $raw_footnote );
   
   
           /* --------------------------------------------------
            * PROTECT BLOCK-LEVEL HTML
            *
            * The footnotes contain captions, images, lists,
            * tables, etc. We don't want wpautop() wrapping those
            * incorrectly.
            * -------------------------------------------------- */
   
           /*
            * First process genuine WordPress shortcodes that may
            * exist inside the footnote, such as [caption].
            */
           $footnote = do_shortcode( $footnote );
   
   
           /*
            * Now add paragraphs intelligently.
            *
            * wpautop() converts:
            *
            * Paragraph one.
            *
            * Paragraph two.
            *
            * into separate <p> elements.
            */
           $footnote = wpautop( $footnote, true );
   
   
           /*
            * WordPress sometimes produces:
            *
            * <p><div ...>
            *
            * or:
            *
            * </div></p>
            *
            * around existing block markup. Remove those invalid
            * paragraph wrappers.
            */
   
           $block_tags =
               'address|article|aside|blockquote|div|dl|fieldset|' .
               'figure|figcaption|footer|form|h[1-6]|header|hr|' .
               'main|nav|ol|pre|section|table|ul';
   
           // <p> immediately before a block element.
           $footnote = preg_replace(
               '#<p>\s*(<(' . $block_tags . ')\b)#i',
               '$1',
               $footnote
           );
   
           // </p> immediately after a block element.
           $footnote = preg_replace(
               '#(</(' . $block_tags . ')>)\s*</p>#i',
               '$1',
               $footnote
           );
   
           // Empty paragraphs.
           $footnote = preg_replace(
               '#<p>\s*(?:&nbsp;|\xC2\xA0)?\s*</p>#i',
               '',
               $footnote
           );
   
   
           /*
            * Balance this individual footnote only.
            */
           $footnote = force_balance_tags( $footnote );
   
   
           /* --------------------------------------------------
            * BUILD THE FOOTNOTE
            * -------------------------------------------------- */
   
           $output .= '<li id="fn-' . esc_attr( $number ) . '"';
           $output .= ' class="safe-footnote-item">';
   
           $output .= '<div class="safe-footnote-body">';
   
           $output .= $footnote;
   
           $output .= '<div class="safe-footnote-return">';
   
           $output .= '<a href="#fnref-' . esc_attr( $number ) . '"';
           $output .= ' class="ck-footnote-back safe-footnote-back"';
           $output .= ' aria-label="Return to footnote reference ';
           $output .= esc_attr( $number ) . '">';
           $output .= '&#8617;';
           $output .= '</a>';
   
           $output .= '</div>';
   
           $output .= '</div>';
           $output .= '</li>';
       }
   
   
       $output .= '</ol>';
       $output .= '</section>';
   
       return $output;
       ```
   
 * } );
 *     ```wp-block-code
       /* =====================================================DIVI + CITEKIT SAFE FOOTNOTES===================================================== */.safe-citekit-footnotes {display: block;width: 100%;max-width: 100%;box-sizing: border-box;}.safe-footnotes-list {display: block;width: 100%;max-width: 100%;box-sizing: border-box;}.safe-footnote-item {display: list-item;width: auto;max-width: 100%;margin-bottom: 1.5em;box-sizing: border-box;}.safe-footnote-body {display: flow-root;width: 100%;max-width: 100%;box-sizing: border-box;}/* ---- PARAGRAPHS ---- */.safe-footnote-body p {display: block !important;float: none !important;width: auto;margin-top: 0;margin-bottom: 1em;}.safe-footnote-body p + p {margin-top: 1em;}/* ---- LISTS ---- */.safe-footnote-body ul,.safe-footnote-body ol {display: block;margin-top: 1em;margin-bottom: 1em;}/* ---- CAPTIONS / IMAGES ---- */.safe-footnote-body .wp-caption,.safe-footnote-body figure {display: block;float: none;width: auto !important;max-width: 100% !important;box-sizing: border-box;}.safe-footnote-body img {max-width: 100% !important;height: auto !important;}/* ---- TABLES ---- */.safe-footnote-body table {width: 100%;max-width: 100%;}/* ---- LONG URLS ---- */.safe-footnote-body a {overflow-wrap: anywhere;}/* ---- RETURN ARROW ---- */.safe-footnote-return {display: block;clear: both;margin-top: .5em;}.safe-footnote-back {display: inline-block;}
       ```
   
 *  Plugin Author [CiteKit](https://wordpress.org/support/users/writerspress/)
 * (@writerspress)
 * [2 weeks, 3 days ago](https://wordpress.org/support/topic/footnotes-breaks-side-widget/#post-18998955)
 * Hi chervnsik,
 * Thanks for the kind words, and for taking the time to share your workaround. 
   It helped make the underlying issue clearer.
 * The footnote feature was originally designed around inline content, which works
   well for normal text and lightweight formatting but can break when richer content
   like multiple paragraphs, images, captions, or lists is added.
 * This has now been addressed in CiteKit 4.0, which should make richer content 
   types more reliable and fix the layout issue you experienced.
 * Please give it a try when you get a chance, and feel free to share any feedback
   here.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffootnotes-breaks-side-widget%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.

 * ![](https://ps.w.org/citation-reference-manager/assets/icon-256x256.gif?rev=3657311)
 * [CiteKit – Footnotes, Tooltips, Citations, Bibliography & References Manager](https://wordpress.org/plugins/citation-reference-manager/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/citation-reference-manager/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/citation-reference-manager/)
 * [Active Topics](https://wordpress.org/support/plugin/citation-reference-manager/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/citation-reference-manager/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/citation-reference-manager/reviews/)

## Tags

 * [divi](https://wordpress.org/support/topic-tag/divi/)

 * 3 replies
 * 2 participants
 * Last reply from: [CiteKit](https://wordpress.org/support/users/writerspress/)
 * Last activity: [2 weeks, 3 days ago](https://wordpress.org/support/topic/footnotes-breaks-side-widget/#post-18998955)
 * Status: resolved