feat: add WordPress integration guide and demo section

- Added a new 'WordPress Integration' section to index.html with step-by-step instructions.
- Included PHP code snippets for enqueuing assets in unctions.php via standard WordPress hooks (wp_enqueue_scripts, wp_footer).
- Implemented copy-to-clipboard functionality for the new code blocks.
- Updated README.md to list WordPress as a formally supported platform.

Fixes AOSSIE-Org#52, Fixes AOSSIE-Org#112

Author: amankv1234

README.md

@@ -72,7 +72,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr
 
 - 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest
 - 🎯 Zero dependencies - pure vanilla JavaScript
-- ⚛️ Framework support: React, Preact, Next.js, Qwik, Vue, Angular, or plain HTML
+- ⚛️ Framework support: React, Preact, Next.js, Qwik, Vue, Angular, WordPress or plain HTML
 - 🔄 Auto-detects current URL and page title
 - 📱 Fully responsive and mobile-ready
 - 🎨 Customizable themes (dark/light)
@@ -105,9 +105,9 @@ No matter which framework you use, integration always follows the same 3 steps:
 
 | Step                 | What to do                                                   | Where                                                                                          |
 | -------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
-| **1️⃣ Load Library**  | Add CSS + JS (CDN links)                                     | Global layout file — `index.html` / `layout.tsx` / `_document.tsx`                             |
-| **2️⃣ Add Container** | Place `<div id="share-button"></div>`                        | The UI component where you want the button to appear                                           |
-| **3️⃣ Initialize**    | Call `new SocialShareButton({ container: "#share-button" })` | Inside that component, after the DOM is ready (e.g. `useEffect`, `mounted`, `ngAfterViewInit`) |
+| **1️⃣ Load Library**  | Add CSS + JS (CDN links)                                     | Global layout file — `index.html` / `layout.tsx` / `_document.tsx` / `functions.php`           |
+| **2️⃣ Add Container** | Place `<div id="share-button"></div>`                        | The UI component or WordPress `wp_footer` hook                                                 |
+| **3️⃣ Initialize**    | Call `new SocialShareButton({ container: "#share-button" })` | Inside that component or WordPress `wp_footer` hook                                            |
 
 > 💡 Pick your framework below for the full copy-paste snippet:
 
@@ -486,6 +486,52 @@ export default function Header() {
 
 </details>
 
+<details>
+<summary><b>🔷 WordPress</b></summary>
+
+### Step 1: Enqueue in `functions.php`
+
+Add the following to your theme's `functions.php` to load the library from CDN:
+
+```php
+function enqueue_social_share_button() {
+    wp_enqueue_style(
+        'social-share-button',
+        'https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css'
+    );
+    wp_enqueue_script(
+        'social-share-button',
+        'https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js',
+        [],
+        null,
+        true // Load in footer
+    );
+}
+add_action('wp_enqueue_scripts', 'enqueue_social_share_button');
+```
+
+### Step 2: Initialize in `functions.php` (Footer Hook)
+
+You can use the `wp_footer` hook to inject the container and initialization script:
+
+```php
+function init_social_share_button() { ?>
+    <div id="share-button"></div>
+    <script>
+      new SocialShareButton({
+        container: '#share-button',
+        url: window.location.href,
+        title: document.title,
+        theme: 'dark',
+        buttonText: 'Share'
+      });
+    </script>
+<?php }
+add_action('wp_footer', 'init_social_share_button');
+```
+
+</details>
+
 ---
 
 ## Configuration

index.html

@@ -476,6 +476,61 @@ <h2>⚛️ Preact Integration</h2>
           </code>
         </div>
       </div>
+
+      <!-- WordPress Integration -->
+      <div class="demo-section">
+        <h2>🔷 WordPress Integration</h2>
+        <p>Integrate SocialShareButton into your WordPress theme without any extra plugins.</p>
+
+        <p><strong>Step 1:</strong> Enqueue the CSS and JS in <code>functions.php</code></p>
+        <div class="code-block">
+          <button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
+          <span
+            class="copy-status"
+            aria-live="polite"
+            style="position: absolute; left: -9999px"
+          ></span>
+          <code>
+function enqueue_social_share_button() {
+    wp_enqueue_style(
+        'social-share-button',
+        'https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css'
+    );
+    wp_enqueue_script(
+        'social-share-button',
+        'https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js',
+        [],
+        null,
+        true // Load in footer
+    );
+}
+add_action('wp_enqueue_scripts', 'enqueue_social_share_button');</code>
+        </div>
+
+        <p><strong>Step 2:</strong> Initialize the button in the footer</p>
+        <div class="code-block">
+          <button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
+          <span
+            class="copy-status"
+            aria-live="polite"
+            style="position: absolute; left: -9999px"
+          ></span>
+          <code>
+function init_social_share_button() { ?&gt;
+    &lt;div id="share-button"&gt;&lt;/div&gt;
+    &lt;script&gt;
+      new SocialShareButton({
+        container: '#share-button',
+        url: window.location.href,
+        title: document.title,
+        theme: 'dark',
+        buttonText: 'Share'
+      });
+    &lt;/script&gt;
+&lt;?php }
+add_action('wp_footer', 'init_social_share_button');</code>
+        </div>
+      </div>
       <!-- CTA Section -->
       <div class="cta-section">
         <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>