Spaces:

dewaldpetzer
/

wordpress-wizardry-wand

Running

How do i use this script in wordpress so that i can do design changes

2f7542e verified 11 months ago

1.76 kB

// 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');
    });
}

	// 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');
	});
	}