littlefoot.js and wordpress

[kadso]

I presently use bigfoot.js extensively in my wordpress site (www.agneic.com)

I am designing new website and thinking of using little foot.js.

Do you know of anyone/anywhere I might reference how to install littlefoot.js in a wordpress environment?

being really new to coding, I'm presently unsure of what goes where when it comes to installing littlefoot.js into a word press environment...

[goblindegook]

If the HTML is built in a way littlefoot expects it (check the README for an example), even pulling its files from a CDN should work:

• https://unpkg.com/littlefoot/dist/littlefoot.css
• https://unpkg.com/littlefoot/dist/littlefoot.min.js

Be sure to call littlefoot() somewhere in your JavaScript code to initialize it.

There are other, more efficient ways to integrate littlefoot into WordPress, but it depends on your asset bundling strategy, so I can't help you further.

[goblindegook]

I've set up a simple demo on Codepen that you can follow as reference for your generated page. Hope this helps.

[goblindegook]

I haven't tested it, but adding the following to your theme's functions.php file should work:

function littlefoot() {
  wp_enqueue_style( 'littlefoot-style', 'https://unpkg.com/littlefoot@1.0.5/dist/littlefoot.css', array(),  '1.0.5' );
  wp_enqueue_script( 'littlefoot-script', 'https://unpkg.com/littlefoot@1.0.5/dist/littlefoot.min.js', array(), '1.0.5', true );
  wp_add_inline_script( 'littlefoot-script', 'littlefoot.default()' );
}

add_action( 'wp_enqueue_scripts', 'littlefoot' );

Please correct me if this doesn't work. Just make sure the HTML conforms to the examples provided in the README.

[kadso]

Hi Luís, I’ve loaded the script you sent into the functions.php file but it’s not working Like you said the .html has to be lined up and I don’t think it is. As a non-programer I’m caught between the app I use to make the the .html code for me (scrivener <https://www.literatureandlatte.com/>) and the .html code you need for littlefoot. I really like the bigfoot/littlefoot popup foot notes (i’ve put the bigfoot popups all over my site www.agnetic.com) and I’d like to update to littlefoot, to keep current. any way… I notice that both littlefoot and scrivener <https://www.literatureandlatte.com/> work with multi-markdown. any chance to get littlefoot to work in a wordpress environment via multi-markdown and say css? Again, I’m not a programer, just asking for the heck of it I’ve pasted in a sample of a post to show you the .html that scrivener is putting out Let me know what I can do to make the switch from bigfoot to littlefoot.. Best ∞ Russ Curry Lead Designer 317.696.2824 agnetic, llc: we design, develop, and deploy business systems for complex systems… It’s Not Complicated… <https://sloanreview.mit.edu/article/the-critical-difference-between-complex-and-complicated/> <meta charset="utf-8"> <title>quick writings</title> <meta name="author" content="Russ Curry"> <style> .infobox-f, .infobox-l, .infobox-a, .infobox-b, .infobox-s { width: 85%, margin: 1rem auto; } .infobox-f { background-color: #C3D0F6} .infobox-l { background-color: #FFDB9B} .infobox-a { background-color: #F7D7FE } .infobox-b { background-color: #E9F6C3} .infobox-s { background-color: #F6E9C3} .infobox-r {float:right; width: 35%; margin: 1rem auto; padding: 20px; font-size: 80%; background:#DDD;}</style> <div class="infobox-f"> This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text.<a href="#fn-1" id="fnref-1" title="see footnote" class="footnote">¹</a> This is regular text. This is regular text. This is regular text. This is regular text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <strong>This is apple list text.</strong> T<em>his is apple list text.</em> This is apple<a href="http://www.google.com"> list text.</a> This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> This is regular text. </div> <div class="infobox-l"> This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <strong>This is apple list text.</strong> T<em>his is apple list text.</em> This is apple<a href="http://www.google.com"> list text.</a> This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <ul> <li>This is apple list text. This is apple list text. <a href="#fn-2" id="fnref-2" title="see footnote" class="footnote">²</a> This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> This is regular text. </div> <div class="infobox-r"> This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text.<a href="#fn-3" id="fnref-3" title="see footnote" class="footnote">³</a> This is regular text. This is regular text. This is regular text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <strong>This is apple list text.</strong> T<em>his is apple list text.</em> This is apple<a href="http://www.google.com"> list text.</a> This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> This is regular text. </div> <div class="infobox-a"> <strong>This is regular text.</strong> This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <strong>This is apple list text.</strong> T<em>his is apple list text.</em> This is apple<a href="http://www.google.com"> list text.</a> This is apple list text. <ul> <li>This is apple list text. This is apple list text.<a href="#fn-4" id="fnref-4" title="see footnote" class="footnote">⁴</a> This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> This is regular text. </div> <div class="infobox-b"> This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text.<a href="#fn-5" id="fnref-5" title="see footnote" class="footnote">⁵</a> This is regular text. This is regular text. This is regular text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <strong>This is apple list text.</strong> T<em>his is apple list text.</em> This is apple<a href="http://www.google.com"> list text.</a> This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> This is regular text. </div> <div class="infobox-s"> This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text. This is regular text.<a href="#fn-6" id="fnref-6" title="see footnote" class="footnote">⁶</a> This is regular text. This is regular text. This is regular text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <strong>This is apple list text.</strong> T<em>his is apple list text.</em> This is apple<a href="http://www.google.com"> list text.</a> This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text. <ul> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text.</li> </ul> </li> <li>This is apple list text. This is apple list text. This is apple list text.</li> </ul> This is regular text. </div> <div class="footnotes"> <hr> <ol> <li id="fn-1">this is <strong>bold</strong> this is <em>italic</em> this is a <a href="http://www.googl.com">link</a> <a href="#fnref-1" title="return to body" class="reversefootnote">&nbsp;↩</a></li> <li id="fn-2">this is <strong>bold</strong> this is <em>italic</em> this is a <a href="http://www.googl.com">link</a> <a href="#fnref-2" title="return to body" class="reversefootnote">&nbsp;↩</a></li> <li id="fn-3">this is <strong>bold</strong> this is <em>italic</em> this is a <a href="http://www.googl.com">link</a> <a href="#fnref-3" title="return to body" class="reversefootnote">&nbsp;↩</a></li> <li id="fn-4">this is <strong>bold</strong> this is <em>italic</em> this is a <a href="http://www.googl.com">link</a> <a href="#fnref-4" title="return to body" class="reversefootnote">&nbsp;↩</a></li> <li id="fn-5">this is <strong>bold</strong> this is <em>italic</em> this is a <a href="http://www.googl.com">link</a> <a href="#fnref-5" title="return to body" class="reversefootnote">&nbsp;↩</a></li> <li id="fn-6">this is <strong>bold</strong> this is <em>italic</em> this is a <a href="http://www.googl.com">link</a> <a href="#fnref-6" title="return to body" class="reversefootnote">&nbsp;↩</a></li> </ol> </div>

…

On Aug 20, 2018, at 11:44 , Luís Rodrigues ***@***.***> wrote: I haven't tested it, but adding the following to your theme's functions.php file should work: function littlefoot() { wp_enqueue_style( 'littlefoot-style', ***@***.***/dist/littlefoot.css', '1.0.5' ); wp_enqueue_script( 'littlefoot-script', ***@***.***/dist/littlefoot.min.js', '1.0.5', true ); wp_add_inline_script( 'littlefoot-script', 'littlefoot.default()' ); } add_action( 'wp_enqueue_scripts', 'littlefoot' ); Please correct me if this doesn't work. Just make sure the HTML conforms to the examples provided in the README. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AcLIKoQWeqk-1bwdW3BLI3CnUM5fKMSQks5uStlXgaJpZM4WEDZQ>.

[goblindegook]

If Bigfoot works with your current HTML, littlefoot should too and you definitely do not need to change the document structure. I'm assuming this is an issue with either including the littlefoot script in your page or executing the main function to set it all up.

I haven't touched WordPress in a long time, and my only experience integrating the two was through a custom build setup, so I'm not sure how I can help you. Maybe other WordPress users can be of assistance?

[goblindegook]

The sample code I provided above is very likely not right, but I don't have a WordPress instance handy to test it out, I'm afraid.

[kadso]

Hi Luîs, thanks for looping me in » I appreciate the hospitality » I’ve moved forward with bigfoot.js » if any thing moves on your end, do keep me updated » I may be able to provide a testing localhost environment and more… Best ∞ Russ Curry Lead Designer 317.696.2824 agnetic, llc: we design, develop, and deploy business systems for complex systems… It’s Not Complicated… <https://sloanreview.mit.edu/article/the-critical-difference-between-complex-and-complicated/>

…

On Aug 30, 2018, at 06:41 , Luís Rodrigues ***@***.***> wrote: The sample code I provided above <#8 (comment)> is very likely not right, but I don't have a WordPress instance handy to test it out, I'm afraid. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AcLIKqL2xF-t-2Ui2TsoGg-x3u7wBDPhks5uV8FrgaJpZM4WEDZQ>.