dewaldpetzer's picture
How do i use this script in wordpress so that i can do design changes
2f7542e verified
// WordPress Theme Customizer Integration
document.addEventListener('DOMContentLoaded', function() {
// Apply color scheme from WordPress customizer
function applyColorScheme() {
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim();
const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary').trim();
// You would typically get these from WordPress customizer settings
console.log('Applying color scheme:', {primaryColor, secondaryColor});
// Example of dynamic color application
document.documentElement.style.setProperty('--primary', primaryColor || '#3b82f6');
document.documentElement.style.setProperty('--secondary', secondaryColor || '#10b981');
}
// Initialize color scheme
applyColorScheme();
// Watch for changes in WordPress customizer (simulated)
if (window.wp && wp.customize) {
wp.customize('primary_color', function(value) {
value.bind(function(newval) {
document.documentElement.style.setProperty('--primary', newval);
});
});
wp.customize('secondary_color', function(value) {
value.bind(function(newval) {
document.documentElement.style.setProperty('--secondary', newval);
});
});
}
// Initialize all feather icons
feather.replace();
});
// WordPress Gutenberg Block Enhancer
function enhanceGutenbergBlocks() {
document.querySelectorAll('.wp-block').forEach(block => {
// Add enhancement classes to blocks
block.classList.add('transition', 'duration-200', 'ease-in-out');
});
}