{"id":1083,"date":"2025-01-02T15:40:05","date_gmt":"2025-01-02T20:40:05","guid":{"rendered":"https:\/\/cbgames.ca\/?p=1083"},"modified":"2025-01-22T18:45:18","modified_gmt":"2025-01-22T23:45:18","slug":"1083","status":"publish","type":"post","link":"https:\/\/cbgames.ca\/index.php\/2025\/01\/02\/1083\/","title":{"rendered":"How to embed Javascript in WordPress (including CSS\/HTML)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">No Plugins Required<\/h2>\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Adding JavaScript to WordPress can seem like a headache, but it doesn&#8217;t need to be. Unlike what some articles lead you to believe, I found that it can even be done without any plugins. <\/p><\/div>\n\n\n<p><\/p>\n\n\n<div class=\"gb-container gb-container-21575c49\">\n\n<style> \n\n.content-slider {\n  width: 100%;\n  height: 10em;\n}\n\n.slider {\n  height: 90%;\n  width: 80%;\n  margin: 40px auto 0;\n  overflow: visible;\n  position: relative;\n}\n\n.mask {\n  overflow: hidden;\n  height: 90%;\n}\n\n.slider ul {\n  margin: 0;\n  padding: 0;\n  position: relative;\n}\n\n.slider li {\n  width: 80%;\n  height: 90%;\n  position: absolute;\n  top: -325px;\n  list-style: none;\n}\n\n.slider .quote {\n  font-size: 40px;\n  font-style: italic;\n}\n\n.slider .source {\n  font-size: 20px;\n  text-align: right;\n}\n\n.slider li.anim1 {\n  animation: cycle 13s linear infinite;\n}\n\n.slider li.anim2 {\n  animation: cycle2 13s linear infinite;\n}\n\n.slider li.anim3 {\n  animation: cycle3 13s linear infinite;\n}\n\n.slider li.anim4 {\n  animation: cycle4 13s linear infinite;\n}\n\n.slider li.anim5 {\n  animation: cycle5 13s linear infinite;\n}\n\n@keyframes cycle {\n  0% {\n    top: 0px;\n  }\n  4% {\n    top: 0px;\n  }\n  16% {\n    top: 0px;\n    opacity: 1;\n    z-index: 0;\n  }\n  20% {\n    top: 325px;\n    opacity: 0;\n    z-index: 0;\n  }\n  21% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n  50% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n  92% {\n    top: -325px;\n    opacity: 0;\n    z-index: 0;\n  }\n  96% {\n    top: -325px;\n    opacity: 0;\n  }\n  100% {\n    top: 0px;\n    opacity: 1;\n  }\n}\n\n@keyframes cycle2 {\n  0% {\n    top: -325px;\n    opacity: 0;\n  }\n  16% {\n    top: -325px;\n    opacity: 0;\n  }\n  20% {\n    top: 0px;\n    opacity: 1;\n  }\n  24% {\n    top: 0px;\n    opacity: 1;\n  }\n  36% {\n    top: 0px;\n    opacity: 1;\n    z-index: 0;\n  }\n  40% {\n    top: 325px;\n    opacity: 0;\n    z-index: 0;\n  }\n  41% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n  100% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n}\n\n@keyframes cycle3 {\n  0% {\n    top: -325px;\n    opacity: 0;\n  }\n  36% {\n    top: -325px;\n    opacity: 0;\n  }\n  40% {\n    top: 0px;\n    opacity: 1;\n  }\n  44% {\n    top: 0px;\n    opacity: 1;\n  }\n  56% {\n    top: 0px;\n    opacity: 1;\n    z-index: 0;\n  }\n  60% {\n    top: 325px;\n    opacity: 0;\n    z-index: 0;\n  }\n  61% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n  100% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n}\n\n@keyframes cycle4 {\n  0% {\n    top: -325px;\n    opacity: 0;\n  }\n  56% {\n    top: -325px;\n    opacity: 0;\n  }\n  60% {\n    top: 0px;\n    opacity: 1;\n  }\n  64% {\n    top: 0px;\n    opacity: 1;\n  }\n  76% {\n    top: 0px;\n    opacity: 1;\n    z-index: 0;\n  }\n  80% {\n    top: 325px;\n    opacity: 0;\n    z-index: 0;\n  }\n  81% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n  100% {\n    top: -325px;\n    opacity: 0;\n    z-index: -1;\n  }\n}\n\n@keyframes cycle5 {\n  0% {\n    top: -325px;\n    opacity: 0;\n  }\n  76% {\n    top: -325px;\n    opacity: 0;\n  }\n  80% {\n    top: 0px;\n    opacity: 1;\n  }\n  84% {\n    top: 0px;\n    opacity: 1;\n  }\n  96% {\n    top: 0px;\n    opacity: 1;\n    z-index: 0;\n  }\n  100% {\n    top: 325px;\n    opacity: 0;\n    z-index: 0;\n  }\n}\n<\/style>\n<h3>Sample Embed Example:<\/h3>\n\n<div class=\"content-slider\">\n  <div class=\"slider\">\n    <div class=\"mask\">\n      <ul>\n        <li class=\"anim1\">\n          <div class=\"quote\">Hello, this is an example Javascript embed.<\/div>\n          <div class=\"source\">&#8211; Person<\/div>\n        <\/li>\n        <li class=\"anim2\">\n          <div class=\"quote\">Hello, this is an example CSS embed.<\/div>\n          <div class=\"source\">&#8211; Another person<\/div>\n        <\/li>\n        <li class=\"anim3\">\n          <div class=\"quote\">Hello, this is an example HTML embed.<\/div>\n          <div class=\"source\">&#8211; Animal<\/div>\n        <\/li>\n        <li class=\"anim4\">\n          <div class=\"quote\">Hello, this is an example CSS embed.<\/div>\n          <div class=\"source\">&#8211; Another person<\/div>\n        <\/li>\n        <li class=\"anim5\">\n          <div class=\"quote\">Hello, this is an example HTML embed.<\/div>\n          <div class=\"source\">&#8211; Animal<\/div>\n        <\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/div>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Step by Step<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add a <code>Custom HTML<\/code> block.<\/h3>\n\n\n\n<p>From the editing dashboard for your page, add a new block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"216\" height=\"51\" src=\"https:\/\/cbgames.ca\/wp-content\/uploads\/2025\/01\/image-2.png\" alt=\"\" class=\"wp-image-1109\"\/><\/figure>\n\n\n\n<p>Choose the <code>Custom HTML<\/code> block from the menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"233\" src=\"https:\/\/cbgames.ca\/wp-content\/uploads\/2025\/01\/image-1.png\" alt=\"\" class=\"wp-image-1108\" srcset=\"https:\/\/cbgames.ca\/wp-content\/uploads\/2025\/01\/image-1.png 350w, https:\/\/cbgames.ca\/wp-content\/uploads\/2025\/01\/image-1-300x200.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add code to the <code>Custom HTML<\/code> block.<\/h3>\n\n\n\n<p>In your new HTML block, paste your code in the following order:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>CSS: wrapped in <code>&lt;style&gt; &lt;\/style&gt;<\/code> tags.<\/li>\n\n\n\n<li>HTML: plain, not wrapped in anything.<\/li>\n\n\n\n<li>Javascript Script: wrapped in <code>&lt;script&gt; &lt;\/script&gt;<\/code> tags.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2.5: Short Example<\/h3>\n\n\n\n<p>Paste all the code into a single <code>Custom HTML<\/code> block for it to render in your page.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-1 wp-block-group-is-layout-constrained\" style=\"min-height:2em\">\n<style>\n#centeralign {\n}\n<\/style>\n<div id=\"table\">\n  <div id=\"centeralign\">\n    <h5 id=\"sample\">Sample typing effect.<\/h5>\n  <\/div>\n<\/div>\n<script>\nfunction typeEffect(element, speed) {\n    var text = element.innerHTML;\n    element.innerHTML = \"\";\n    var i = 0;\n    var timer = setInterval(function() {\n      if (i < text.length) {\n        element.append(text.charAt(i));\n        i++;\n      } else {\n        clearInterval(timer);\n      }\n    }, speed);\n}\n\n\/\/ application\nvar speed = 75;\nvar h3 = document.querySelector(\"#sample\");\nvar delay = h3.innerHTML.length * speed + speed + 1500;\n\n\/\/ type affect to body\nsetInterval(function(){\n  typeEffect(h3, speed);\n}, delay);\n<\/script>\n<\/div>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>CSS<\/summary>\n<pre class=\"wp-block-code\"><code>&lt;style>\nbody, html {\n  margin: 0;\n  height: 100%;\n  text-align: center;\n  font-family: 'Oxygen Mono', monospace;\n  color: #999;\n}\n\nh1 {\n  text-transform: uppercase;\n  letter-spacing: 1pt;\n  font-size: 30pt;\n  margin-bottom: 15px;\n}\n\np {\n  text-align: left;\n  margin: 0;\n  text-transform: lowercase;\n  font-size: 10pt;\n  font-weight: 900;\n  width: 50%;\n  display: none;\n}\n\n#table {\n\tdisplay: table;\n\twidth: 100%;\n\theight: 100%;\n  background-color: #e5e5e5;\n}\n\n#centeralign {\n\tdisplay: table-cell;\n\tvertical-align: middle;\n}\n&lt;\/style>&lt;style>\nbody, html {\n  margin: 0;\n  height: 100%;\n  text-align: center;\n  font-family: 'Oxygen Mono', monospace;\n  color: #999;\n}\n\nh1 {\n  text-transform: uppercase;\n  letter-spacing: 1pt;\n  font-size: 30pt;\n  margin-bottom: 15px;\n}\n\np {\n  text-align: left;\n  margin: 0;\n  text-transform: lowercase;\n  font-size: 10pt;\n  font-weight: 900;\n  width: 50%;\n  display: none;\n}\n\n#table {\n\tdisplay: table;\n\twidth: 100%;\n\theight: 100%;\n  background-color: #e5e5e5;\n}\n\n#centeralign {\n\tdisplay: table-cell;\n\tvertical-align: middle;\n}\n&lt;\/style><\/code><\/pre>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>HTML<\/summary>\n<pre class=\"wp-block-code\"><code>&lt;div id=\"table\"&gt;\n  &lt;div id=\"centeralign\"&gt;\n    &lt;h1&gt;Sample typing effect.&lt;\/h1&gt;\n    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante arcu, dignissim non risus id, posuere efficitur felis. Vestibulum arcu diam, semper non ipsum quis, dictum ultricies diam. Suspendisse vel luctus sapien. Mauris tristique condimentum velit tincidunt pharetra. Curabitur ut lectus eleifend, malesuada lorem eget, consectetur augue. Nunc scelerisque nisi in lacus eleifend eleifend. Praesent blandit ex at nunc maximus, ut sodales ante auctor. Nunc elementum eros sit amet malesuada facilisis. Morbi eget elit consequat, sodales urna in, lobortis nisi. Morbi dapibus velit eu mattis bibendum. Nulla et nisi eget turpis vulputate suscipit eu nec nunc. Pellentesque ut pulvinar quam.&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Javascript<\/summary>\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nfunction typeEffect(element, speed) {\n\tvar text = element.innerHTML;\n\telement.innerHTML = \"\";\n\t\n\tvar i = 0;\n\tvar timer = setInterval(function() {\n    if (i &lt; text.length) {\n      element.append(text.charAt(i));\n      i++;\n    } else {\n      clearInterval(timer);\n    }\n  }, speed);\n}\n\n\n\/\/ application\nvar speed = 75;\nvar h1 = document.querySelector('h1');\nvar p = document.querySelector('p');\nvar delay = h1.innerHTML.length * speed + speed;\n\n\/\/ type affect to header\ntypeEffect(h1, speed);\n\n\n\/\/ type affect to body\nsetTimeout(function(){\n  p.style.display = \"inline-block\";\n  typeEffect(p, speed);\n}, delay);\n&lt;\/script&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<p>I hope my short post helped you out. If any questions come up, feel free to leave a comment!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding JavaScript to Wordpress can seem like a headache, but it doesn&#8217;t need to be. Unlike what some articles lead you to believe, I found that it can even be done without any plugins.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1083","post","type-post","status-publish","format-standard","hentry","category-tech"],"_links":{"self":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/posts\/1083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/comments?post=1083"}],"version-history":[{"count":103,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/posts\/1083\/revisions"}],"predecessor-version":[{"id":1245,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/posts\/1083\/revisions\/1245"}],"wp:attachment":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/media?parent=1083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/categories?post=1083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/tags?post=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}