Copy CodePen HTML/CSS/JS to WordPress

Learn how to copy a CodePen example that uses HTML, CSS, or JavaScript over to your WordPress site using Gutenberg (for the HTML) and Microthemer (for the CSS and JS).

00:00 Start of video
00:32 Copy HTML code and insert into WordPress using Gutenberg
1:06 Copy the CSS code to Microthemer's full code editor
2:04 Copy the JavaScript code to Microthemer and use "Ctrl + S" to save
2:33 Optionally load Microthemer's JavaScript file in the footer
2:52 Optionally wrap JavaScript code in a "docReady" function

Code for the document ready function shown in the video:

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);

Use the document ready function:

docReady(function() {
    // DOM is loaded and ready for manipulation - add your code here