# Embedding JavaScript and HTML code in WordPress

> Add custom JavaScript or HTML, such as widgets or tracking scripts, to your WordPress site with a plugin or manually.

Source: https://helpcenter.ruachost.com/wordpress/guides/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.

##