Hello friends,

Have you ever felt the need to embed some sort of HTML or JavaScript code in any WordPress page or post? If the answer is yes and you haven’t found a solution to this problem yet, then it will be a privilege for me to provide you with one.

It is called Code Embed and it is the proper way to add code to your WordPress website posts and pages.

Why would I need a stand-alone solution when I can just use the WordPress text editor?

In most cases you will be right. The out-of-the-box WordPress text editor is a powerful way to add code to your posts and pages. However sometimes it just cannot stand up to the task. Some codes cannot be accepted with simple copy/paste since they will cause problems with the HTML structure of the page and simply won’t work.

That is why you need a separate solution like Code Embed that will allow you to add any code without problems.

How does Code Embed work?

Begin by installing the plugin and then activating it. As usual you can grab it from WordPress.org or use the plugin installer in your own dashboard.

When you are done with these steps you should go to Settings -> Code Embed menu in the admin panel of your WordPress website. Click on it and you will see some settings.

The idea is to define the way that Code Embed functions. You can show or hide debug HTML comments in source and also allow or deny embedded code to be shown in excerpts.

The keyword that you see on the screenshot above is a random string that you can type. This keyword is needed for the embedding procedure on the WordPress posts and pages. The opening and closing identifiers are characters that tell WordPress that here a code should be embedded when they surround the keyword that you have provided.

So if the keyword is WEAT (as in the screenshot above) then you can embed the code by using %WEATx% in your content. The “x” stands for the desired suffix. For example, you may add a custom field named WEAT1, where the value is the code you wish to embed. You can then add %WEAT1% in the post or page you are editing/creating. You should place this keyword with its identifiers in the desired part of your content and the embedded code will appear there. More instructions are provided on the Settings page of Code Embed.

It may sound a little confusing right now, so let’s see how we can actually achieve this effect.

Open any post/page and start editing it. You can also start creating a new one. At the end of this screen you should be able to see the Custom Fields meta box. If you don’t see it you need to click on Screen Options at the beginning of the screen and check the Custom Fields checkbox. You need to repeat this step for pages (if you are creating a post) and vice versa.

Now you should click on the Enter new link under the dropdown menu in the Name section of the Custom Fields meta box. Type your keyword – in our case WEAT. Next to it is the field where the value (i.e. the code you wish to embed) should be placed. Do this now. For example you may add a sample H1 text (see the screenshot below).

Click on Add Custom field and you will see that your code has been created. You can update it or delete it – as you wish. Now head to the visual editor and type %WEAT%. Preview this page and you will see the H1 text that you have just embedded.

Simple, right?

What if Code Embed does not work?

Try checking the code that you have placed. If it contains the following characters ]]> then most likely WordPress has discarded them. Always verify the source of the page and if the embedded code matches 1:1 with what you intended to embed then your code is wrong and you need to modify it. If some characters (like the above ones) are missing then it is likely that WordPress doesn’t like them and you need to figure out different solutions.

What else I need to know about Code Embed?

You can also use it for widgets combined with the Widget Logic plugin.

That’s all friends! Share any questions and thoughts in the comment section below. See you soon!