Codepen WordPress – Adding Codepen Projects To WordPress

Updated June 10th, 2020
Updated June 10th, 2020
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print

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 &amp;&amp; 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 &amp;&amp; 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)
}
Share this post:
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on pinterest
Share on pocket
Share on email
Share on print
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Responses

Your email address will not be published. Required fields are marked *

  1. Hey Bjorn, GREAT tutorial again – thanks! Unfortunately, it’s not working for me and the best I can figure out is because I need to enqueue both the parent and child stylesheets – that’s what the Google Gods tell me. I have no idea how to do this, can you please help?

    I get the warning “…import not allowed here” when adding the code for fonts.googleapis…. in the Additional CSS area of the Customer. I had to leave the “at” symbol out from in front of the word “import” because it’s rejected when posting this comment.

    Big thanks!
    Julian

    1. Hi Julian,

      Depending on your setup @import doesn’t work. When you are on the “embed” tab for a Google font you’ll need to use the “standard” embed instead of the “@import”.

      To make the standard embed work you need to add the code to your header.php file. This is best done in a child theme. Just paste the tag somewhere on its’ own line. The standard embed looks like this:

      Yours will be slightly different because you’ll probably choose a different font.

      The CSS in the stylesheet to apply the font remains the same.

      Does that sound doable?

Do NOT follow this link or you will be banned from the site!