Embedding JavaScript and HTML codes in WordPress

Sometimes you may want to embed custom JavaScript or HTML code into your WordPress site—for example, to add widgets, forms, or third‑party scripts. On ruachost.com, this can be done safely using plugins or manual methods.

Why Embed Custom Code?

• Add interactive features (sliders, popups, chat widgets).

• Integrate third‑party services (analytics, ads, maps).

• Customize site behavior beyond themes and plugins.

Method 1: Using the Code Embed Plugin (Recommended)

1. Log in to WordPress with an administrator account.

2. In the dashboard, go to Plugins → Add New.

3. Search for Code Embed.

4. Click Install Now, then Activate.

5. Go to Settings → Code Embed.

6. Configure a keyword (e.g., CODE1) for embedding.

7. In the WordPress editor, enable Custom Fields under Screen Options.

8. Add a new custom field → Enter your keyword as the name, and paste your JavaScript/HTML code as the value.

9. Save the post → Insert the keyword (CODE1) where you want the code to appear.

✅ The plugin will automatically replace the keyword with your embedded code.

Method 2: Embedding Code Manually

1. In the WordPress editor, switch to Text/HTML view.

2. Paste your JavaScript or HTML code directly into the post or page.

   • Example:

     <div id="custom-widget">
         <script type="text/javascript">
             alert("Hello, Ruachost!");
         </script>
     </div>
     

3. Save and publish the post.

⚠️ Note: Some themes or WordPress security settings may block inline JavaScript. Use a plugin if manual embedding doesn’t work.

Important Notes

• Always test embedded code on a staging site before publishing.

• Improper code may break your layout or cause security issues.

• Use plugins for complex integrations to avoid conflicts.

• Avoid embedding code in the header.php or footer.php unless necessary—use a child theme if editing theme files.