Insert elements when writing a WordPress article

Insert a codepen iframe in a WordPress article

July 11, 2023 · 5 minutes

You are a good developer and you want to share your skills. You have started writing your first articles in a WordPress blog and you need to show some examples. You have already created pens on codepen that you want to insert in your article… Every thing is perfect. Except you do not know how to insert them! You are used to add text and formatting it. You know how to insert a link. You know also how to insert a media (picture, video). All the needed tools are in the WordPress interface but where is the one to insert iframes? Do not loose time looking for it any longer: there is no tool to insert an iframe! Read the article below to discover how to display your pen in your WordPress article via an iframe!

Summary

Get the pen from codepen before inserting it in a WordPress article

If the pen already exits go directly to the Get your codepen pen in an iframe in order to insert it in a WordPress article section.

Create a pen on codepen

  1. Create a codepen account on the codepen platform: it is free! or log in your account if you already have one.
  2. Click on  “Pen” button on the left side. A pen named “untitled” will appear.
  3. Give it a title and save.
  4. Click on the “Settings” button to add more… settings like a description and tags. Save.
  5. Code your example.

That is very simple to create a pen, isn’t it? Now, let’s see how to get this codepen pen as an iframe to be able to insert it in a WordPress article.

Get your codepen pen in an iframe in order to insert it in a WordPress article

Note: The below steps are available whether you are connected to your codepen account.

  1. Go to the requested pen on codepen.
  2. At the bottom of the webpage, on the right side, there buttons like “Delete”, “Add to collection”, “Fork”… Click on the “Embed” button.
  3. Then, click on the “HTML (Recommended)” tab on the modal box which has appeared.
  4. Click on the “Copy Code” button on the top right side, above the HTML code.

Okay, we have copied the code to be inserted. Now, we have to paste it in the right place.

Insert the codepen pen in the WordPress article your are writing

Note: We suppose that you are already connected to the WordPress interface. In case, you are not, log in your blog and go to your article (in the dashboard, Posts > All > select the specific article > Edit).

  1. In the right menu bar, click on the three dots.
  2. Then, click on “Code Editor“.
  3. In the article, in HTML version which has appeared, look for the exact place your pen should be displayed. Click there.
  4. Paste.
  5. Save by clicking on the “Save Draft” ou “Update” or “Schedule” button on the top right of the screen, depending on the article status.
  6. You can click on the “preview article” or “view article” link to control how the pen is displayed. Note: if the iframe is not displayed go directly to the last section of this article.
  7. Do not forget to click on Exit Code Editor at the top of the article or Visual Editor on the right menu bar to go back to the classic editor to end the writing of your article.

The code has been inserted and the iframe is displayed in the article but is the result exactly the one you expected? Some adjustments can be applied; discover in the next section how to modify the height or the position of the iframe in the WordPress article.

Modify the aspect of the codepen iframe in a WordPress article

Modify the height of the codepen iframe in a WordPress article

The height of the codepen iframe is 300px by default. sometimes we could want to modify it to show more of the result (see how to modify the codepen iframe height before copying its code) or to respect a specific height (see how to modify the codepen iframe height after having inserted it in the article code).

Modify the height of the codepen iframe before copying the iframe code

  1. In the modal box which appears after clicking on the “Embed” button (step 2 of the Get your codepen pen in an iframe in order to insert it in a WordPress article), move (click and move the mouse) the bottom of the displayed result via the anchor until you obtain the correct : the height measurement is modified to correspond the new preview.
  2. Go back to the step 3 of the Get your codepen pen in an iframe in order to insert it in a WordPress article.

This solution gives the possibility to choose what to show, the entire result for example. But, what if we want to get exactly the same height on all the codepen iframes and that height is not the standard one written in the given code (I mean 300px)? Let’s find a second solution below.

Give a specific height measurement to a codepen iframe

Giving every time the same height measurement to a codepen iframe is not difficult. As indicated in the introduction, it is possible to modify the codepen iframe height directly in its code.

Note: You have already pasted the code in the article when being in the Code Editor mode.

  1. In the code Editor mode, look for the iframe code.
  2. In the iframe code, look for the “data-height” attribute.
  3. Modify the “300” value to anyone you prefer. Note: the value is in pixels.
  4. Save the article.
  5. Go to the preview if you want to control the final aspect.
  6. Go back to the classic mode by clicking on “Exit Code Editor” or “Visual Editor”.

One example of the iframe code proposed by codepen after data-height modification.

<p class=”codepen” data-height=”600“ data-default-tab=”html,result” data-slug-hash=”qBJzQLV” data-user=”coding-tricks” style=”height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;”>
<span>See the Pen <a href=”https://codepen.io/coding-tricks/pen/qBJzQLV”>
HTML elements with a negative CSS order value are displayed first</a> by Coding-Tricks (<a href=”https://codepen.io/coding-tricks”>@coding-tricks</a>)
on <a href=”https://codepen.io”>CodePen</a>.</span>
</p>
<script async src=”https://cpwebassets.codepen.io/assets/embed/ei.js”></script>

Modify the aspect of the displayed codepen iframe in a WordPress article

You have already fixed the codepen iframe height problem, to modify the width or the position (left, center, right, margin, padding…) of the iframe you will have to write a little bit of CSS code.

A trick to be sure of the element to select to apply the CSS rules:

  1. Preview the article with the inserted iframe.
  2. Click right on the iframe and select Inspect.
  3. In the Inspector, have a look at the HTML code and choose the best selector depending on which element you need to modify. As you can see the iframe is inserted in a div.

Then, write CSS rules:

  • in the theme customizer if you are not the one who have written the code of the theme,
  • in the custom theme CSS file if you have created that custom theme!

Damn! The codepen iframe result is not displayed in the WordPress article

This is the last trick to display a codepen pen in a WordPress article.

If the pen is not displayed but a link to it is, the cause is that the <script> element at the end of the code has not been copied and paste. Have a look to the article in the Code Editor mode and control if there is a script included in the iframe code you have pasted. If there is not, just re-do all the steps and control that the script has been pasted this time.

Maybe there are some other bugs but I had to face that one and found that cause.

In conclusion

Finally, insert a codepen pen as an iframe in WordPress articles is very easy. So do not hesitate to use pens as examples in your next articles.

In the next episode of this series “Insert elements when writing a WordPress article”, I will give some tricks to insert code examples in your WordPress articles.

< Previous Post
Next Post >
Haut de page