diff --git a/layouts/shortcodes/codePen.html b/layouts/shortcodes/codePen.html
index a378c0a..b608953 100644
--- a/layouts/shortcodes/codePen.html
+++ b/layouts/shortcodes/codePen.html
@@ -1,7 +1,8 @@
-{{ if .Site.Params.codePenUser }}
-  <iframe height="300" scrolling="no" title="code demonstration with codePen" src="//codepen.io/{{ .Site.Params.codepenUser | lower }}/embed/{{ .Get 0 }}/?height=265&theme-id=dark&default-tab=result,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">
+{{ $pen := .Get 0 }}
+{{ with .Site.Params.codePenUser }}
+  <iframe height="300" scrolling="no" title="code demonstration with codePen" src="//codepen.io/{{ . | lower }}/embed/{{ $pen }}/?height=265&theme-id=dark&default-tab=result,result&embed-version=2" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">
     <div>
-      <a href="//codepen.io/{{ .Site.Params.codePenUser | lower }}/pen/{{ .Get 0 }}">See the demo on codePen</a>
+      <a href="//codepen.io/{{ . | lower }}/pen/{{ $pen }}">See the demo on codePen</a>
     </div>
   </iframe>
 {{ else }}