Skip to content

Aaron Yang | UI/UX Designer, User Researcher, Website Developer

Embed Custom Code into a WordPress Post/Page: a Better Approach

I am maintaining a WordPress website for my department. As a part of that, sometimes I need to add custom code into the webpages to automize some work. At the beginning, it was not too hard. First, I finish all the code locally with a single HTML document and make sure it works properly. Second, I copy all the code in <style>, <body>, and <script> tags, and pasted them into a Custom HTML block. It works pretty well, just like the native WordPress element.

Custom HTML block of WordPress

The following two functions were inspired by the solution I found on Stackoverflow. The original answer was a little bit more complex, which considered compatibility for the old browsers.

function sendHeightForIframe(mainContainer){
    parent.postMessage(document.querySelector(mainContainer).offsetHeight + 50, '*');
}

function getHeightForIframe(trackedIframe) {
    // Listen for a message from the iframe.
    window.addEventListener("message", function (e) {
        if (isNaN(e.data)) return;
        // replace #iTweeContainer with what ever what ever iframe id you need
        const trackedElement = document.querySelector(trackedIframe);
        trackedElement.style.height = e.data + 'px';
        trackedElement.style.width = "1px";
        trackedElement.style.minWidth = "100%";
    }, false);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embeded Page</title>
</head>

<body id="contentBody">
    
  <div>
  	page content
  </div>

	<script>
      	sendHeightForIframe("body");

		function sendHeightForIframe(mainContainer){
            parent.postMessage(document.querySelector(mainContainer).offsetHeight + 50, '*');
        }

    </script>

</body>

</html>
<iframe src="url_of_the_embeded_page" id="trackedIframe" frameborder="0" width="100%" style="min-height: 100vh"></iframe>

<script type="text/javascript">
	getHeightForIframe("#trackedIframe");

  	function getHeightForIframe(trackedIframe) {
		// Listen for a message from the iframe.
    	window.addEventListener("message", function (e) {
      		if (isNaN(e.data)) return;
      		// replace #iTweeContainer with what ever what ever iframe id you need
      		const trackedElement = document.querySelector(trackedIframe);
      		trackedElement.style.height = e.data + 'px';
      		trackedElement.style.width = "1px";
      		trackedElement.style.minWidth = "100%";
    	}, false);
    }
</script>

I wrote the entire project in VS code and hosted it on GitHub.

Then, I created a short code and pasted the embedding code.

On the WordPress page, I inserted the Shortcode.

In the end, instead of maintaining thousands of lines of code without highlight on WordPress page, I can easily update the program to GitHub and insert the Shortcode anywhere I like.

Another challenge: popup window

Leave a Reply

Your email address will not be published.

%d bloggers like this: