Copy CodePen HTML/CSS/JS to WordPress

Published: April 27, 2022By Sebastian

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
});

Copy CodePen HTML/CSS/JS to WordPress

Docs index