Skip to main content

Working with JavaScript Snippets

Image to be inserted in the near future: Screenshot of the JavaScript snippet editor in Flexcode

JavaScript snippets allow you to add interactive features and functionality to your WordPress site without editing theme files. This is perfect for adding analytics, custom interactions, form validations, or any dynamic behavior your theme doesn't natively support.

info

JavaScript snippets are executed in the front-end of your website and can interact with any element on your page. This makes them incredibly versatile for enhancing user experience.

Creating a JavaScript Snippet​

  1. Navigate to Flexcode
  2. Select the page where you want the JavaScript to run from the page selector at the top (choose "Global" for all pages)
  3. Click Add File and name it with a .js extension (e.g., "script.js")
  4. Enter your JavaScript code in the editor
  5. Click Deploy Changes

Image to be inserted in the near future: Screenshot showing the process of adding a JavaScript file in Flexcode

tip

Use descriptive file names that indicate the purpose of your JavaScript snippet (e.g., "smooth-scroll.js" instead of "script1.js"). This makes it easier to manage multiple snippets.

JavaScript Loading Options​

When adding JavaScript files, you can set the loading type to "deferred" which ensures your code runs after the DOM is loaded. This is often more efficient than using document.addEventListener('DOMContentLoaded', function() {...}).

note

The "deferred" loading option adds the defer attribute to the script tag, which tells the browser to load the script in parallel with HTML parsing and execute it after the HTML is fully parsed.

warning

Scripts that modify the DOM should always use deferred loading or wait for the DOM to be ready. Otherwise, they might try to access elements that don't exist yet.

Practical JavaScript Snippet Examples​

Example 1: Smooth Scroll to Anchors​

File name: smooth-scroll.js

// Set loading type to "deferred" for this file

// Get all links that have a hash
const links = document.querySelectorAll('a[href^="#"]');

// Add click event to each link
links.forEach(link => {
  link.addEventListener('click', function(e) {
    // Prevent default behavior
    e.preventDefault();
    
    // Get the target element
    const targetId = this.getAttribute('href');
    if (targetId === '#') return;
    
    const targetElement = document.querySelector(targetId);
    if (!targetElement) return;
    
    // Scroll smoothly to the target
    window.scrollTo({
      top: targetElement.offsetTop - 100, // Offset for fixed headers
      behavior: 'smooth'
    });
  });
});

Page Selection: Global Purpose: Make all anchor links scroll smoothly to their target sections

Suggested animation: GIF showing smooth scrolling in action

tip

The -100 offset in the scroll calculation accounts for fixed headers. Adjust this value based on your theme's header height to ensure sections aren't hidden behind your header.

Example 2: Simple Image Lightbox​

File name: image-lightbox.js

// Set loading type to "deferred" for this file

// Add lightbox functionality to images in content
const contentImages = document.querySelectorAll('.entry-content img');

// Create lightbox elements
const lightbox = document.createElement('div');
lightbox.className = 'simple-lightbox';
lightbox.innerHTML = `
  <div class="lightbox-content">
    <img src="" alt="Lightbox Image">
    <button class="close-lightbox">×</button>
  </div>
`;
document.body.appendChild(lightbox);

// Get lightbox elements
const lightboxImg = lightbox.querySelector('img');
const closeBtn = lightbox.querySelector('.close-lightbox');

// Add click event to images
contentImages.forEach(img => {
  // Make images look clickable
  img.style.cursor = 'pointer';
  
  img.addEventListener('click', function() {
    // Set lightbox image source
    lightboxImg.src = this.src;
    lightboxImg.alt = this.alt;
    
    // Show lightbox
    lightbox.style.display = 'flex';
    document.body.style.overflow = 'hidden';
  });
});

// Close lightbox when clicking close button or outside the image
closeBtn.addEventListener('click', closeLightbox);
lightbox.addEventListener('click', function(e) {
  if (e.target === lightbox) {
    closeLightbox();
  }
});

// Close lightbox function
function closeLightbox() {
  lightbox.style.display = 'none';
  document.body.style.overflow = '';
}

// Close on escape key
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && lightbox.style.display === 'flex') {
    closeLightbox();
  }
});

Page Selection: Global Purpose: Add a simple lightbox effect to content images

info

This lightbox implementation includes keyboard accessibility (Escape key to close) and prevents scrolling of the background content while the lightbox is open for better user experience.

Note: This example requires a corresponding CSS file for styling the lightbox.

File name: lightbox-styles.css

.simple-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  display: block;
  margin: 0 auto;
}

.close-lightbox {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
tip

The high z-index: 9999 ensures your lightbox appears above other elements on the page. If your theme has elements with high z-index values, you might need to adjust this value accordingly.

Example 3: Google Analytics Implementation​

File name: google-analytics.js

// Google Analytics tracking code
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');

Page Selection: Global Purpose: Add Google Analytics tracking to your site

danger

Remember to replace 'UA-XXXXXXXX-X' with your actual Google Analytics tracking ID. Using the placeholder will not track any data.

warning

Adding analytics tracking may require user consent in many jurisdictions. Consider implementing a cookie consent mechanism to comply with privacy regulations like GDPR and CCPA.

Example 4: Form Validation​

File name: form-validation.js

// Set loading type to "deferred" for this file

const form = document.querySelector('#contact-form');

if (form) {
  form.addEventListener('submit', function(e) {
    let isValid = true;
    
    // Get form fields
    const nameField = form.querySelector('#name');
    const emailField = form.querySelector('#email');
    const messageField = form.querySelector('#message');
    
    // Validate name
    if (!nameField.value.trim()) {
      showError(nameField, 'Please enter your name');
      isValid = false;
    } else {
      removeError(nameField);
    }
    
    // Validate email
    if (!emailField.value.trim() || !isValidEmail(emailField.value)) {
      showError(emailField, 'Please enter a valid email address');
      isValid = false;
    } else {
      removeError(emailField);
    }
    
    // Validate message
    if (!messageField.value.trim()) {
      showError(messageField, 'Please enter your message');
      isValid = false;
    } else {
      removeError(messageField);
    }
    
    // Prevent form submission if validation fails
    if (!isValid) {
      e.preventDefault();
    }
  });
}

// Helper functions
function showError(field, message) {
  // Remove any existing error
  removeError(field);
  
  // Add error class to field
  field.classList.add('error-field');
  
  // Create error message element
  const error = document.createElement('div');
  error.className = 'error-message';
  error.textContent = message;
  
  // Insert error after field
  field.parentNode.insertBefore(error, field.nextSibling);
}

function removeError(field) {
  // Remove error class
  field.classList.remove('error-field');
  
  // Remove error message if it exists
  const error = field.nextElementSibling;
  if (error && error.classList.contains('error-message')) {
    error.remove();
  }
}

function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

File name: form-validation.css

.error-field {
  border: 2px solid #ff6b6b !important;
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 5px;
}

Page Selection: Contact (or the page containing your form) Purpose: Add client-side validation to a contact form

Suggested animation: GIF showing form validation in action

note

This script looks for a form with the ID contact-form. If your form has a different ID, you'll need to update the selector in the first line of the script.

info

Client-side validation improves user experience by providing immediate feedback, but it should always be paired with server-side validation for security. Client-side validation can be bypassed by malicious users.

Example 5: Back to Top Button​

File name: back-to-top.js

// Set loading type to "deferred" for this file

// Create the button element
const backToTopBtn = document.createElement('button');
backToTopBtn.innerHTML = '&uarr;';
backToTopBtn.className = 'back-to-top';
backToTopBtn.title = 'Back to Top';
document.body.appendChild(backToTopBtn);

// Show/hide the button based on scroll position
window.addEventListener('scroll', function() {
  if (window.pageYOffset > 300) {
    backToTopBtn.classList.add('show');
  } else {
    backToTopBtn.classList.remove('show');
  }
});

// Scroll to top when clicked
backToTopBtn.addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

File name: back-to-top.css

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #333;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, background-color 0.3s;
  z-index: 999;
}

.back-to-top.show {
  opacity: 0.7;
}

.back-to-top:hover {
  opacity: 1;
  background-color: #555;
}

Page Selection: Global Purpose: Add a "Back to Top" button that appears when scrolling down

tip

The button only appears after scrolling down 300 pixels. You can adjust this threshold by changing the value in the if (window.pageYOffset > 300) condition.

warning

Make sure the z-index value (999) is high enough to ensure the button appears above other fixed elements on your page, but doesn't conflict with critical UI elements like modals.

Working with jQuery​

If your site uses jQuery, you can use it in your snippets:

File name: accordion.js

// Set loading type to "deferred" for this file

// Check if jQuery is available
if (typeof jQuery !== 'undefined') {
  jQuery(document).ready(function($) {
    // Your jQuery code here
    $('.accordion-header').click(function() {
      $(this).next('.accordion-content').slideToggle();
      $(this).toggleClass('active');
    });
  });
} else {
  console.error('jQuery is not loaded');
}

Page Selection: The page containing your accordion Purpose: Create a simple accordion effect

info

The code checks if jQuery is available before attempting to use it. This prevents JavaScript errors if jQuery isn't loaded on your site.

Best Practices for JavaScript Snippets​

  1. Use deferred loading: Set your JavaScript files to load as "deferred" instead of using DOMContentLoaded event listeners
  2. Avoid conflicts: Use anonymous functions to avoid global namespace pollution
  3. Check for elements: Verify elements exist before trying to manipulate them
  4. Handle errors: Use try/catch blocks for error-prone operations
  5. Optimize performance: Minimize DOM manipulations and use efficient selectors
tip

Wrap your code in an Immediately Invoked Function Expression (IIFE) to avoid polluting the global namespace:

(function() {
  // Your code here
})();

This prevents your variables and functions from conflicting with other scripts.

warning

Avoid using document.write() as it can cause serious performance issues and can completely replace the content of your page if called after the page has finished loading.

Troubleshooting JavaScript Snippets​

Common Issues​

  • Script not running: Check browser console for errors
  • Conflicts with other scripts: Your code might conflict with theme or plugin scripts
  • Performance issues: Scripts might slow down page loading

Solutions​

  • Use browser developer tools to debug JavaScript issues
  • Test your scripts on different browsers and devices
  • Keep your code modular and focused on specific tasks
danger

Never include sensitive information like sensitive API keys directly in your JavaScript code. JavaScript runs on the client side and can be viewed by anyone visiting your site. Use server-side methods to handle sensitive operations.

info

Most browsers have developer tools that can help you debug JavaScript issues. Press F12 or right-click and select "Inspect" to open the developer tools, then navigate to the "Console" tab to see JavaScript errors.