JavaScript Customization
The Phenix Starter Theme includes JavaScript functionality that can be customized to add interactive features to your website. This guide explains how to add and modify JavaScript in your theme.
Theme JavaScript Structure
The main JavaScript file in the Phenix Starter Theme is style.js
, which is compiled to assets/js/style.min.js
. This file is loaded on the front end and is the perfect place to add custom interactions, animations, or functionality.
How to Add Custom JavaScript
Edit the
style.js
file: Add your custom JavaScript code to this file.javascriptdocument.addEventListener('DOMContentLoaded', () => { // Your custom JavaScript here // Example: Add a scroll animation const animatedElements = document.querySelectorAll('.animate-on-scroll'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animated'); } }); }); animatedElements.forEach(element => { observer.observe(element); }); });
Create a Separate JavaScript File: For more complex functionality, you can create a separate JavaScript file and enqueue it in
functions.php
.javascript// In a new file: assets/js/custom.js (function() { // Your custom JavaScript here })();
Then enqueue it in
functions.php
:phpfunction theme_enqueue_scripts() { // Enqueue the main theme JavaScript wp_enqueue_script('theme-js', get_template_directory_uri() . '/assets/js/style.min.js', array(), '1.0.0', true); // Enqueue your custom JavaScript wp_enqueue_script('custom-script', get_template_directory_uri() . '/assets/js/custom.js', array(), '1.0.0', true); } add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
Using Phenix JavaScript Components
The Phenix framework includes several JavaScript components that you can use in your theme:
- Phenix Tabs: For tabbed content
- Phenix Accordion: For accordion/collapsible content
- Phenix Modal: For popup modals
- Phenix Slider: For image sliders and carousels
These components are automatically initialized for elements with the appropriate classes. You can customize their behavior by modifying the initialization options.
JavaScript Best Practices
Use Event Delegation: Attach event listeners to parent elements instead of individual elements for better performance.
javascript// Instead of this: document.querySelectorAll('.button').forEach(button => { button.addEventListener('click', handleClick); }); // Do this: document.addEventListener('click', event => { if (event.target.matches('.button')) { handleClick(event); } });
Avoid jQuery Dependency: The Phenix Starter Theme uses vanilla JavaScript instead of jQuery for better performance.
Use ES6+ Features: The theme's build process includes Babel, so you can use modern JavaScript features.
Modularize Your Code: Split complex functionality into separate functions or modules.
Add Comments: Document your code, especially for complex functionality.
Check for Element Existence: Always check if elements exist before manipulating them.
javascriptconst element = document.querySelector('.my-element'); if (element) { // Manipulate the element }
Example: Adding a Scroll-to-Top Button
Here's an example of adding a scroll-to-top button to your theme:
document.addEventListener('DOMContentLoaded', () => {
// Create the button element
const scrollToTopButton = document.createElement('button');
scrollToTopButton.classList.add('scroll-to-top');
scrollToTopButton.innerHTML = '<i class="fas fa-arrow-up"></i>';
document.body.appendChild(scrollToTopButton);
// Show/hide the button based on scroll position
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
scrollToTopButton.classList.add('show');
} else {
scrollToTopButton.classList.remove('show');
}
});
// Scroll to top when button is clicked
scrollToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
Add corresponding CSS in your SASS files:
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
background-color: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: 0.3s;
z-index: 999;
&.show {
opacity: 1;
visibility: visible;
}
}
Debugging JavaScript
Use Browser Developer Tools: Open your browser's developer tools (F12 or Ctrl+Shift+I) to debug JavaScript.
Console Logging: Use
console.log()
to output values during development.Error Handling: Wrap code in try-catch blocks to handle errors gracefully.
javascripttry { // Code that might cause an error } catch (error) { console.error('An error occurred:', error); }
Remember to remove or disable debug code before deploying to production.