Adding footnotes in HTML

  • ecabral

    (@ecabral)


    1 year, 1 month ago

    I’m preparing a .csv of posts to import into a new WordPress install where I’m using the block editor. Posts content is in HTML format. There are currently a lot of footnotes embedded in the post content. Is there a way to format the footnotes so that after upload the footnotes block gets inserted into the post content?

    I’ve used plugins in the past where all l’d have to do was to add the footnote inside [ ] and the footnote would be added. As this new site is to be built using the block editor only (I was previously using a classic theme and a builder) I’d like to use the block editor’s native functionality, if possible.

    Thanks!

    PS: If possible, I’d like to avoid adding the block manually to each post…

    • This topic was modified 1 year, 1 month ago by ecabral.
Viewing 2 replies - 1 through 2 (of 2 total)
  • calc20

    (@calc20)

    1 year, 1 month ago

    To auto-insert footnotes in the block editor after a CSV import:

    1. Pre-process the CSV: Modify your post content in the CSV to include footnote block syntax (e.g., <!-- wp:footnote -->).
    2. Use a Plugin: Consider using plugins like Modern Footnotes to handle [footnote] syntax automatically in the block editor.
    3. Custom Script: Write a custom PHP script to replace footnote markers (e.g., [1]) with the proper footnote block structure during import.

    These approaches will let you avoid manually adding footnote blocks after import.

    These approaches will help, just like my approach with the (Calcvat uk) site:

    • This reply was modified 1 year, 1 month ago by calc20.
    Thread Starter ecabral

    (@ecabral)

    1 year, 1 month ago

    I tried #1 by editing a test post on the code editor :

    <ol>
      <li>This is the first item.
        <!-- wp:footnote -->
        <p>This is your footnote content for item 1.</p>
        <!-- /wp:footnote -->
      </li>
      <li>This is the second item.</li>
      <li>This is the third item.</li>
    </ol>

    … and I get this message in the visual editor:

    Your site doesn’t include support for the “core/footnote” block. You can leave it as-is, convert it to custom HTML, or remove it.

    How should I implement it?

    As a side note, when I manually add the footnote block I see that there’s a lot more going on in the code:

    <sup data-fn="652a5e8c-3be6-437d-b170-9068ce035379" class="fn"><a href="#652a5e8c-3be6-437d-b170-9068ce035379" id="652a5e8c-3be6-437d-b170-9068ce035379-link">1</a></sup>
    	<a href="#652a5e8c-3be6-437d-b170-9068ce035379" id="652a5e8c-3be6-437d-b170-9068ce035379-link">1</a>
    </sup>

    … and then further down:

    ol class="wp-block-footnotes"><li id="652a5e8c-3be6-437d-b170-9068ce035379">Footnote text. <a href="#652a5e8c-3be6-437d-b170-9068ce035379-link" aria-label="Jump to footnote reference 1">↩︎</a></li></ol>

    # 2 – This is what I was trying to avoid with this setup if possible…

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

The topic ‘Adding footnotes in HTML’ is closed to new replies.