Are you a WordPress blogger looking to improve your blog’s appearance by 10x?
If you want your users to be able to try code snippets or write code directly in your Wordpress blog or website, this is for you.
So stick around and see how you can make your blogs a coding haven!
Note: You can use similar steps with other popular CMSs like Webflow, Squarespace, Wix, Ghost, etc that will give the same result.
Making your blogs interactive with JDoodle Embeds
JDoodle is the one-stop destination for all things coding. We are an AI-powered coding platform that is made by developers for developers. We offer everything from powerful IDEs that support over 85 programming languages to fun Embeds and robust Compiler APIs.
In this blog, we will focus on how you can add JDoodle embeds to your wordpress site to transform it into a fully functional IDE.
What are JDoodle Embeds?
JDoodle embeds are specialized IDEs you can integrate into your platform (website, course materials, LMS) to let users run code instantly. By adding basic HTML, you can combine IDEs with embeds. JDoodle offers three types of embeds:
- Basic embed: Free, limited customization, supports one programming language.
- Premium embed: Paid, highly customizable, supports multiple languages.
- Ultra embed: Fully customizable, available on request.
Now that you know the basics, let’s explore how to add JDoodle embeds to your WordPress blog.
Adding JDoodle Embeds to your WordPress blog
Adding JDoodle embeds is a fairly simple process which we have demonstrated here. Take a look:
- Log into JDoodle
- Next, navigate to the “Solutions” drop-down at the top left of the screen and select “Integrate IDE.”
- Click on “Create Embed.”
For this example, we’ll use the Basic embed and name it something like “WordPress JavaScript Blog.” Choose the language you want—here, we selected Node.js for JavaScript—and click “Preview” to see how the code window will appear.
- Once satisfied, click on “Download the code” to generate the HTML for the embed.
- Log in to your WordPress account, navigate to your site’s dashboard, and create a new post.
- If not already chosen, then choose a theme for your blog.
- Go back to JDoodle, copy the generated HTML code, and paste it into the HTML block in WordPress.
Now comes the tricky part:
When you preview the post, the embed might appear as expected. However, upon publishing, you might notice that WordPress only shows a hyperlink instead of the JDoodle code window. This happens because WordPress strips out any JavaScript for security reasons on its free and premium plans.
Solution:
To enable JavaScript embeds, you’ll need to upgrade to the WordPress Business plan.
Now let’s move on to adding the JDoodle Embed:
- Once upgraded, install the WP Code plugin. This plugin allows you to add custom HTML with JavaScript into the header, footer, or body of your site.
- After activating the WP Code, go to the “Add Snippets” section and select the “Header and Footer” option.
- Paste the JavaScript part of the JDoodle embed code into the body section and save your changes.
Once everything is set, you should see the JDoodle code window fully functional in your WordPress blog, allowing your readers to run code directly from your site.
Here is our developer explaining the same:
Prerequisites for adding Embeds to your WordPress blog
To make the process simple and easy here are a few things you should get ready before you jump into adding embeds to your blog:
JDoodle account
Having a free JDoodle account lets you access unlimited basic embeds that you can use. Here’s a link to our documentation on how to open a JDoodle account.
WordPress account
We’ve used wordpress.com as our Wordpress host. You may prefer to use other hosts like WPEngine, self-host with something like DigitalOcean or Netlify, or even a local server.
IF you use wordpress.com, you will need their Business plan to allow you to install plugins. You won’t experience this limitation if you’re self-hosting.
Ready to hop on the JDoodle express?
Adding JDoodle embeds to your WordPress blog is a simple yet powerful way to enhance interactivity and engage your readers with live coding. With just a few steps and the right setup, you can transform your blog into a dynamic coding environment that will captivate your audience.