Documentation

Instructions

1. Upload the plugin file to your WordPress /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Navigate to Settings > ScatterBytes in your WordPress admin panel

1. Global Code Injection

Add code that runs on every page of your website.

How to Add Global Code:

1. Go to the "Global Code Injection" section
2. Enter a descriptive Script Name (e.g., "Google Analytics Tracking")
3. Select Code Type:
   • 📜 JavaScript - For tracking codes, analytics, custom scripts
   • 🎨 CSS - For global styling, fonts, layout tweaks
4. Enter your Code Content with proper tags:

   <!-- For JavaScript -->
   <script>  console.log('Global script loaded!');</script>
   
   <!-- For CSS -->
   <style>  body { font-family: Arial, sans-serif; }</style>

5. Choose Position:
   • Header - Loads early, good for CSS and critical scripts
   • Footer - Loads after content, good for analytics and non-critical scripts
6. Click "🌐 Save Global Code"

2. Page-Specific Code Rules

Add code that only runs on selected pages or posts.

How to Create a Rule:

1. Go to the "Add New Code Rule" section
2. Enter a Rule Name (e.g., "Contact Form Styling")
3. Select Code Type (JavaScript or CSS)
4. Enter your Code Content
5. Select Target Pages from the checkbox list:
   • 🏠 Home Page - Your site's front page
   • 📄 Pages - Individual WordPress pages
   • 📝 Posts - Individual blog posts
6. Click "💾 Save Code Rule"

Managing Your Code

Viewing Active Code

Both global and page-specific code are displayed in tables showing:

• Name - Your descriptive title
• Type - JavaScript or CSS badge
• Position (Global only) - Header or Footer
• Target Pages (Rules only) - Which pages it affects
• Status - Active (green ✓) or Inactive (red ✗)

Managing Code

For each code entry, you can:

• Activate/Deactivate - Toggle without deleting
• Delete - Permanently remove the code

Security

• Only add code from trusted sources
• Test code on a staging site first
• Keep backups of your code snippets

Performance

• Use Footer position for non-critical JavaScript
• Use Header position for CSS and critical scripts
• Minimize the amount of code when possible

Organization

• Use descriptive names for your rules
• Group related functionality together
• Regularly review and clean up unused code

Practical examples of JavaScript and CSS code injection scenarios.

Google Analytics

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Custom CSS for Contact Page

<style>
  .contact-form {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
  }
  .submit-button {
    background: #667eea;
    color: white;
  }
</style>

Facebook Pixel

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

Script not showing on page: Clear the cache

Can't make changes: Only available to Administrators.

Version history:

June 14 2025 - Version 2.0.0 Added support for CSS