The Code Editor allows you to add custom JavaScript to your DigiFlash site without modifying theme files. JavaScript snippets add interactive functionality, dynamic behavior, and custom scripts to enhance your website.
Creating a JavaScript Snippet
Navigate to Code Snippets in your WordPress admin menu and click Add New. This opens the code snippet editor where you’ll create your custom JavaScript.
Enter a descriptive title for your snippet in the title field at the top. Use clear names that identify the script’s purpose, such as “Smooth Scroll Navigation” or “Custom Form Validation” for easy management.
In the Code Type dropdown, select JavaScript. This tells DigiFlash Pro to treat your code as a JavaScript script.
Configuring JavaScript Location
After selecting JavaScript as the code type, you must choose where the script loads on your site. The JavaScript Location dropdown appears with three options:
Head Section – Adds your JavaScript inline within <script> tags in the site header before the closing </head> tag. Use this when scripts need to load before page content renders.
Footer – Adds your JavaScript inline within <script> tags in the site footer before the closing </body> tag. This is the recommended location for most scripts as it allows page content to load first, improving performance.
Enqueue as File – Saves your JavaScript as a physical file in the uploads directory and enqueues it properly using WordPress standards. The script loads in the footer by default. This method enables browser caching and is ideal for larger scripts.
Select the location based on your script’s requirements. For most interactive features, choose Footer for better performance.
Writing Your JavaScript Code
Click into the large code editor area and write your JavaScript code. The editor provides syntax highlighting to make your code easier to read and spot errors.
Write standard JavaScript without opening or closing script tags. DigiFlash Pro automatically wraps your code in the appropriate tags.
Here are common JavaScript customization examples:
Smooth Scroll to Anchors
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});Add Active Class to Current Menu Item
const currentUrl = window.location.href;
const menuLinks = document.querySelectorAll('.wp-block-navigation a');
menuLinks.forEach(link => {
if (link.href === currentUrl) {
link.classList.add('current-page');
}
});Console Log for Debugging
console.log('DigiFlash custom script loaded');
console.log('Current page:', window.location.pathname);Simple Alert on Page Load
window.addEventListener('load', function() {
console.log('Page fully loaded');
});Toggle Element Visibility
const toggleButton = document.querySelector('.toggle-button');
const targetElement = document.querySelector('.target-element');
if (toggleButton && targetElement) {
toggleButton.addEventListener('click', function() {
targetElement.classList.toggle('hidden');
});
}Add External Script
const script = document.createElement('script');
script.src = 'https://example.com/external-script.js';
script.async = true;
document.body.appendChild(script);Publishing Your JavaScript Snippet
Once you’ve written your JavaScript code and selected the location, click Publish to activate the snippet. The script loads immediately on your site’s frontend and executes according to your code.
If you want to save the snippet without activating it yet, click Save Draft instead. This stores your JavaScript without loading it on the live site.
Testing Your JavaScript
After publishing, visit your site’s frontend and open your browser’s developer console (usually F12 or right-click > Inspect > Console) to check for JavaScript errors.
Test the functionality your script provides to ensure it works as expected. Check multiple pages if your script should work site-wide. Test on different devices and browsers to verify compatibility.
If the script doesn’t work correctly, return to Code Snippets, click Edit on your JavaScript snippet, and modify the code. Click Update to save changes.
Managing Multiple JavaScript Snippets
You can create unlimited JavaScript snippets, each handling different functionality. Organize snippets by purpose such as “Analytics Tracking”, “User Interactions”, “Custom Animations”, or “Form Enhancements”.
Each snippet can be independently enabled or disabled from the Code Snippets list. This makes it easy to troubleshoot issues by temporarily deactivating specific snippets.
JavaScript Execution Timing
Scripts in the Head Section execute before page content loads. Use this for scripts that must run immediately or affect initial page rendering.
Scripts in the Footer execute after page content loads. This is the recommended location as it prevents scripts from blocking page rendering and improves performance.
Scripts using Enqueue as File also load in the footer and benefit from browser caching across multiple page loads.
Using jQuery
If you need jQuery, ensure your script accounts for WordPress’s noConflict mode. Use this pattern:
jQuery(document).ready(function($) {
// Your jQuery code here using $
$('.my-element').click(function() {
$(this).toggleClass('active');
});
});Or use jQuery instead of $ throughout your code:
jQuery('.my-element').addClass('active');Error Handling
Always check that elements exist before manipulating them to prevent JavaScript errors:
const element = document.querySelector('.my-element');
if (element) {
// Safe to use element
element.classList.add('active');
}Performance Considerations
Large JavaScript snippets can impact page load times. Consider using Enqueue as File for substantial scripts to enable browser caching. Place scripts in the Footer when possible to prevent blocking page rendering. Test your site’s performance before and after adding scripts to measure impact.