Codepen WordPress – Adding Codepen Projects To WordPress

If you want to integrate projects from Codepen with WordPress, then look no further.

If you don’t know, Codepen is a place where developers can test and share snippets of HTML, CSS and Javascript which you can then add to your site.

The tricky part is getting them to work properly in WordPress. The Codepen we will use in this example is called Terminal Text Effect and original project in code is here.

I’m including the code on the blog just in case Codepen or the author changes the project in the future and renders this tutorial inaccurate.

Watch the video to see exactly how I include the 3 components (HTML/CSS/Javascript) to make this Codepen work in WordPress.

Here is the Codepen HTML

<div class="console-container"><span id="text"></span>
<div id="console" class="console-underscore">_</div>
</div>

Here is the Codepen CSS

@import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
  background: #111;
}
.hidden {
  opacity:0;
}
.console-container {
 
  font-family:Khula;
  font-size:4em;
  text-align:center;
  height:200px;
  width:600px;
  display:block;
  position:absolute;
  color:white;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
   display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}

Here is the Codepen JavaScript

// function([string1, string2],target id,[color1,color2])    
 consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','lightblue']);

function consoleText(words, id, colors) {
  if (colors === undefined) colors = ['#fff'];
  var visible = true;
  var con = document.getElementById('console');
  var letterCount = 1;
  var x = 1;
  var waiting = false;
  var target = document.getElementById(id)
  target.setAttribute('style', 'color:' + colors[0])
  window.setInterval(function() {

    if (letterCount === 0 && waiting === false) {
      waiting = true;
      target.innerHTML = words[0].substring(0, letterCount)
      window.setTimeout(function() {
        var usedColor = colors.shift();
        colors.push(usedColor);
        var usedWord = words.shift();
        words.push(usedWord);
        x = 1;
        target.setAttribute('style', 'color:' + colors[0])
        letterCount += x;
        waiting = false;
      }, 1000)
    } else if (letterCount === words[0].length + 1 && waiting === false) {
      waiting = true;
      window.setTimeout(function() {
        x = -1;
        letterCount += x;
        waiting = false;
      }, 1000)
    } else if (waiting === false) {
      target.innerHTML = words[0].substring(0, letterCount)
      letterCount += x;
    }
  }, 120)
  window.setInterval(function() {
    if (visible === true) {
      con.className = 'console-underscore hidden'
      visible = false;

    } else {
      con.className = 'console-underscore'

      visible = true;
    }
  }, 400)
}