DCT for WP

Dynamic Child Theme for WordPress


Debug

Design

Develop

Customize

Code

One child to rule theme all

Quick toggle to enable or disable debug mode.

Debugger panel on frontend and admin panel for administrators.

PHP and JS log with custom debug functions.

Maintenance mode with customizable page for users.

Advanced debug mode for developers.

SCSS Compiler with minify and autocompile options.

Global variables for colors, fonts and sizes.

Color shades generator and font import options.

Advanced mode to edit related SCSS code.

Enqueue local/external assets to the frontend and admin panel.

Advanced mode to edit related PHP code.

Add a custom preloader on frontend pages.

Customize admin panel colors, logo and text.

Add a custom widget to the admin panel dashboard.

Customize login page styles and add JS code.

Advanced mode to edit related SCSS/JS code.

Code editor to update custom files directly:
SCSS / CSS / JS / PHP / HTML / JSON

Includes autocomplete, dark/light mode and search options.

Custom files buttons and selector panel to edit with code editor.

Code editor integrated in advanced mode panels.

The debugger panel is enabled on this site for all users with real current data.

//////////////////////////////////////
// Custom child theme JS: Frontend
//////////////////////////////////////



// Register JS GSAP Plugins
// Default lets you set properties that should be inherited by all tweens unless overridden by that tween.
gsap.defaults({
	ease: "power3.inOut",
	duration: 0.2,
});

// Registering a plugin with the GSAP core ensures that the two work seamlessly together and also prevents tree shaking issues.
// You only need to register a plugin once before using it. List multiple plugins to register:
gsap.registerPlugin(Draggable, ScrollTrigger, InertiaPlugin, SplitText);

// Debug to log registered GSAP and plugins version
dct_debug('Registered GSAP', gsap.version, 'info');
dct_debug('Registered GSAP Draggable', Draggable.version, 'info');
dct_debug('Registered GSAP ScrollTrigger', ScrollTrigger.version, 'info');
dct_debug('Registered GSAP InertiaPlugin', InertiaPlugin.version, 'info');
dct_debug('Registered GSAP SplitText', SplitText.version, 'info');



// When page is ready
/////////////////////////////////////
jQuery(document).ready(function($) {

	// DEBUG On JS custom ready
	dct_debug('DCT JS Ready: custom.js', 'custom.js', 'info', true);	
	//$('img').on('click', function() {  dct_debug('Image clicked!',  $(this), 'success' );  });	

	
	// Detect if Divi builder is enabled or frontend
	//////////////////////////////////////////////////
	let divi_builder_enabled = false;
	if ($("#et-fb-app").length) {
		divi_builder_enabled = true; 
		dct_debug('Divi builder currently enabled', divi_builder_enabled); 
	}	


	/////////////////////////////
	// TOP MENU Effects
	/////////////////////////////
	// Animation split text logo on hover
	if (!divi_builder_enabled) {
		let split_logo_dct = SplitText.create($('#top-menu-main-logo-dct'), { type: 'chars' }),
			split_logo_dynamic = SplitText.create($('#top-menu-main-logo-dynamic'), { type: "words" }),
			split_logo_duration = 0.15,
			split_logo_pos_y = 12;
		
		// Hide subtitle logo on init and create timeline
		gsap.set(split_logo_dynamic.words, { y: split_logo_pos_y, autoAlpha: 0 });
		let tl_logo_split = gsap.timeline({ paused:true });
		tl_logo_split.to(split_logo_dct.chars, { y: -split_logo_pos_y, autoAlpha: 0, duration: split_logo_duration, stagger: 0.05, ease: "power3.inOut", })
		  			 .to(split_logo_dynamic.words, { y: 0, autoAlpha: 1, duration: split_logo_duration*1.2, stagger: 0.1, ease: "power3.inOut" }, '<0.2');
		
		// Play & reverse timeline on hover in/out
		$('#top-menu-main-logo-dct').on('mouseenter', function() {
			tl_logo_split.restart();
			dct_debug('Top menu logo split text animation enabled', split_logo_dct);
		}).on('mouseleave', function() {
			tl_logo_split.reverse();
			//dct_debug('Logo split animation disabled', split_logo_dct);
		});
	}
	


	/////////////////////////////////
	// HOME PAGE Top hero effects
	/////////////////////////////////
	if ($('#section-hero-top-home').length && !divi_builder_enabled) {
		let $hero_top = $('#section-hero-top-home'),
			$hero_title_dct = 	  $hero_top.find('.top-hero-title-dct-for-wp'),
			$hero_title_dynamic = $hero_top.find('.top-hero-subtitle-dynamic-child-theme'),
			$hero_subtitle =  	  $hero_top.find('.top-hero-subtitle-one-child'),
			$hero_labels_list =   $hero_top.find('#top-hero-labels-list li.et_pb_icon_list_item'),
			$hero_descriptions =  $hero_top.find('.top-hero-label-description'),
			$hero_interactives =  $hero_top.find('.top-hero-label-interactive'),
			$hero_color_title_input = $hero_top.find("#top-hero-input-color-title-text .dct-color-picker");
		
		// Create titles split anim
		let split_subtitle,
			split_stagger = 0.03;

		// Animation split text subtitle on init and disable click		
		function hero_subtitle_animate(anim_delay=1) {
			$hero_descriptions.hide();
			$hero_interactives.hide();

			if (typeof split_subtitle !== 'undefined') { split_subtitle.revert(); }
			split_subtitle = SplitText.create($hero_subtitle, { type: "words" });	
			gsap.from(split_subtitle.words, {
				y: -25,
				autoAlpha: 0,
				duration: 0.6, 
				stagger: 0.1,
				delay: anim_delay,
				ease: "power3.out",
			});
			dct_debug('Top hero subtitle animate with '+anim_delay+'s delay', split_subtitle);
		}
		
		// Animate titles on init
		gsap.from($hero_title_dct, { 	 y: 20, autoAlpha: 0, duration: 0.3, delay: 0.7, ease: "power3.out" });
		gsap.from($hero_title_dynamic, { y: 15, autoAlpha: 0, duration: 0.3, delay: 0.9, ease: "power3.out" });
		gsap.from($hero_top.find('#top-hero-labels-list'), { scale:0.7, autoAlpha:0, duration: 0.45, delay: 1, ease: "back.out" });
		hero_subtitle_animate(1.5);


		// Interaction click for each label on top hero
		/////////////////////////////////////////////////
		$hero_labels_list.each(function() {
			let $label = $(this),
				label_data = $label.data('label'),
				$label_description = $hero_top.find('.top-hero-label-description[data-label="'+label_data+'"]'),
				$label_interactive = $hero_top.find('.top-hero-label-interactive[data-label="'+label_data+'"]'),
				split_description = SplitText.create($label_description.find('.et_pb_text_inner'), { type: "lines, words" }),
				split_duration = split_description.words.length * split_stagger;
				
			// On click label update hero and label classes
			$label.on('click', function() {				
				// Reset labels and descs
				$hero_descriptions.hide();
				$hero_interactives.hide();
				$hero_subtitle.hide();				
				split_description.revert();
				split_description = SplitText.create($label_description.find('.et_pb_text_inner'), { type: "lines, words" });

				// Reset title interactives
				gsap.killTweensOf($hero_title_dynamic).to($hero_title_dynamic, { scale:1, autoAlpha:1, duration:0.3, delay:0.05, ease:'back.out' });
				$('#top-menu-btn-toggle-debugger-panel').removeClass('btn-enabled-top-hero-debug');
				$hero_color_title_input.wpColorPicker('color', '#ffffff');
				
				// Check if label is already selected (deselect all)
				if ($label.hasClass('label-list-enabled')) {
					$hero_labels_list.removeClass('label-list-enabled label-list-disabled');
					$hero_top.attr('data-label', 'none');					
					$hero_subtitle.show();
					hero_subtitle_animate(0.5);
					dct_debug('Top hero deselected label and reset: '+label_data, $label);
				} 
				// Select current hero label
				else {
					$hero_labels_list.removeClass('label-list-enabled').addClass('label-list-disabled');
					$label.removeClass('label-list-disabled').addClass('label-list-enabled');
					$hero_top.attr('data-label', label_data);
					$label_description.show();	
					// Animation split text description					
					gsap.from(split_description.words, {
						duration: split_duration, 
						ease: "power3.out",
						y: 20,
						autoAlpha: 0,
						stagger: split_stagger,
						mask: 'words'
					});					
					gsap.from(split_description.lines, {
						duration: split_duration*1.1, 
						ease: "power3.inOut",
						y: -25,
						autoAlpha: 0,						
					});	
					// Animation label modules 
					if ($label_interactive.length) {
						$label_interactive.show().css('cssText', 'display: flex !important');
						// Selected label customized interactive animations
						if (label_data === 'debug') { 
							$('#top-menu-btn-toggle-debugger-panel').addClass('btn-enabled-top-hero-debug'); 
							gsap.killTweensOf($label_interactive.find('.et_pb_text')).fromTo($label_interactive.find('.et_pb_text'), 
								{ scale:0, x:-20, autoAlpha:0, rotation:"random(-44,40)" },
								{ scale:1, x:0, autoAlpha:1, rotation:"random(-7,7)", duration:0.3, stagger:0.15, delay:0.3, ease: "power3.out" });
							gsap.killTweensOf($label_interactive.find('.et_pb_svg')).fromTo($label_interactive.find('.et_pb_svg'), 
								{ scale:0, autoAlpha:0, rotation:"random(20,60)", transformOrigin:'bottom left' },
								{ scale:1, autoAlpha:1, rotation:"random(-3,3)", duration:0.2, stagger:0.15, delay:0.4, ease: "back.out" });
						}
						else if (label_data === 'develop') { 
							gsap.killTweensOf($hero_title_dynamic).to($hero_title_dynamic, { scale:1.1, autoAlpha:0, duration:0.01 });
							gsap.killTweensOf(subtitle_develop_split.words).fromTo(subtitle_develop_split.words,
								{ x:0, y:0, rotation:0 },
								{ x:"random(-30, 30)", y:"random(-20, 25)", rotation:"random(-12, 12)", duration:0.45, stagger:0.15, delay:0.05, ease:'back.out' });
						} 
						else if (label_data === 'customize') { 
							let $buttons_change_bg = $label_interactive.find('.et_pb_button_module_wrapper');
							gsap.killTweensOf($buttons_change_bg).set($buttons_change_bg, { scale:0, autoAlpha:0 });
							//dct_array_randomize($buttons_change_bg);
							gsap.killTweensOf($buttons_change_bg).fromTo($buttons_change_bg, 
								{ scale:0, autoAlpha:0 },
								{ scale:1, autoAlpha:1, duration:0.25, stagger:0.07, delay:0.5, ease: "power3.out" });
						}						
						else {
							let $label_interactive_modules = $label_interactive.find('.et_pb_module');
							gsap.killTweensOf($label_interactive_modules).fromTo($label_interactive_modules,
								{ y:30, scale:0.8, autoAlpha:0 },
								{ y:0, scale:1, autoAlpha:1, duration:0.3, stagger:0.1, delay:0.5, ease: "power3.out" });
						}
					}
					
					dct_debug('Top hero selected label: '+label_data, $label);
				}
			}); // End single label click
		}); // End for each label

		// Top hero debug button menu top
		///////////////////////////////////////
		$('#top-menu-btn-toggle-debugger-panel').on('click', function() { $(this).removeClass('btn-enabled-top-hero-debug'); });
		

		// Top hero design change title color
		///////////////////////////////////////
		$hero_color_title_input.wpColorPicker('option', 'change', function(event, ui) {
			let hero_title_color = ui.color.toCSS('rgba');
			$hero_title_dct.find('h1').css('cssText', 'color:'+hero_title_color+' !important');
			$hero_title_dynamic.find('h2').css('cssText', 'color:'+hero_title_color+' !important');
			dct_debug('Top hero updated title color: '+hero_title_color);
		});

		// Top hero develop split subtitle & draggables
		/////////////////////////////////////////////////
		let subtitle_develop_split = SplitText.create($('.hero-top-subtitle-develop-draggable'), { type: "words" });	
		let subtitle_develop_draggable = Draggable.create(subtitle_develop_split.words, {
			bounds: $hero_top,
			inertia: true,
			onDragStart: function() { gsap.to(this.target, { rotation:"random(-7, 7)", scale:1.1 }); },
			onDragEnd: function() { gsap.to(this.target, { rotation:"random(-7, 7)", scale:1 }); }
		});
		

		// Top hero customizer change background efect
		////////////////////////////////////////////////
		let $btns_change_top_hero_bg = $('.hero-top-btn-change-background'),
			top_hero_image_number = 7;

		function hero_top_change_background(image_num=0) {
			// select random with image 0 (avoid repeated)
			image_num = parseInt(image_num);
			if (image_num === 0) { 
				do { image_num = dct_get_random_number(1, 8); }
				while(image_num === top_hero_image_number);
			}
			// Update selected image and update bg image url
			top_hero_image_number = image_num;
			$btns_change_top_hero_bg.removeClass('btn-hero-bg-enabled');
			$('.hero-top-btn-change-background[data-image="'+image_num+'"]').addClass('btn-hero-bg-enabled');
			let image_url = 'https://www.dctforwp.com/wp-content/uploads/2026/08/Gavarres-fogs-'+image_num+'.jpg';				
			$hero_top.css('cssText', 'background-image:url("'+image_url+'"),radial-gradient(circle at center,rgba(89,89,89,0.31) 30%,rgba(0,0,0,0.9) 100%) !important' );
			
			// Overlay effect
			let $hero_top_overlay = $hero_top.find('.et_pb_row');
			gsap.killTweensOf($hero_top_overlay);
			gsap.set($hero_top_overlay, { backgroundColor:'#111' } );
			gsap.to($hero_top_overlay, { backgroundColor:'transparent', duration:1, delay:0.2 } );
			dct_debug('Top hero updated background image number '+image_num, image_url);
		}

		// On init select image and button random bg
		hero_top_change_background();
		$btns_change_top_hero_bg.each(function() { 
			let $button_bg = $(this);
			$button_bg.on('click', function(e) {
				e.preventDefault();
				let image_num = $button_bg.data('image');
				hero_top_change_background(image_num);			
			});
		});

	}

	

	//////////////////////////////
	// DOCUMENTATION Sidebar Nav
	//////////////////////////////	
	if ($('#section-docs-sidebar-nav').length) {

		// Sidebar docs menu current url
		/////////////////////////////////
		let $docs_sidebar = $('#section-docs-sidebar-nav'),
			$docs_links = $docs_sidebar.find('.grup-menu-lateral-docs .et_pb_link'),
			current_url = window.location.href;			
		$docs_links.each(function() {
			let $link = $(this),
				link_url = $link.attr('href');
			if (link_url === current_url) {
				$link.addClass('menu-docs-enabled');
				dct_debug('Sidebar menu docs current link enabled', link_url);
			}
		});

		// Toggle Docs menu sidebar nav with cookie
		//////////////////////////////////////////////
		// Get the cookie for sidebar nav ('true'/'false' or empty)
		let cookie_docs_name = 'dct-documentation-sidebar-nav-enabled',
			cookie_docs_sidebar = dct_get_cookie(cookie_docs_name);
		// If empty (no exists) set to true (enabled)
		if (cookie_docs_sidebar === '') { 
			cookie_docs_sidebar = 'true';
			dct_set_cookie(cookie_docs_name, 'true'); 
		}

		// Function to toggle sidebar and update cookie optional
		function dct_docs_toggle_sidebar(update_cookie=true) {
			if ($('body').hasClass('dct-docs-sidebar-nav-disabled')) {
				$('body').removeClass('dct-docs-sidebar-nav-disabled');
				$('.btn-toggle-docs-sidebar-nav').removeClass('btn-toggle-sidebar-featured');
				if (update_cookie) { 
					dct_set_cookie(cookie_docs_name, 'true'); 
					dct_debug('Sidebar menu docs nav enabled. Cookie updated to true');
				}				
			} else {
				$('body').addClass('dct-docs-sidebar-nav-disabled');
				$('.btn-toggle-docs-sidebar-nav').addClass('btn-toggle-sidebar-featured');
				if (update_cookie) { 
					dct_set_cookie(cookie_docs_name, 'false'); 
					dct_debug('Sidebar menu docs nav disabled. Cookie updated to false');
				}				
			}
		}
						
		// Hide on init for mobile or hide and keep cookie on desktop
		if ($(window).width() < 981) { 
			dct_set_cookie(cookie_docs_name, 'false');
			dct_docs_toggle_sidebar(false); 
			dct_debug('Sidebar menu docs nav disabled on init for mobile: '+ $(window).width()+'px');
		} else {
			if (cookie_docs_sidebar === 'false') { 
				dct_docs_toggle_sidebar(false); 
				dct_debug('Sidebar menu docs nav disabled on init from cookie', cookie_docs_sidebar);
			}
		}		
		// Toggle nav on button click and update cookie
		$('.btn-toggle-docs-sidebar-nav').on('click', function(e) {
			e.preventDefault();
			dct_docs_toggle_sidebar(true);			
		});
	
	} // End DOCS Sidebar nav


	// DOCS Shortcodes help and demo panels
	///////////////////////////////////////////
	// Disable links and buttons to admin panel from rendered panels in frontend
	//////////////////////////////////////////////////////////////////////////////
	$('.dct-custom-shortcode-form-disabled').each(function() { docs_disable_links_to_admin($(this)); });
	if ($('#dct-debug-panel').length) { docs_disable_links_to_admin($('#dct-debug-panel')); };

	// Disable forms and buttons on docs demo panels and debug panel
	function docs_disable_links_to_admin($panel) {

		// Disable forms inside panel
		$panel.find('form.dct-form-settings').each(function() {
			let $form_demo = $(this);
			// No submit forms with alert 
			$form_demo.removeAttr('method').removeAttr('action');			
			$form_demo.on('submit', function(e){ e.preventDefault(); alert('Documentation demo panels are disabled and cannot be updated or reset to default values.'); });
		});

		// Disable open media library from select image buttons / image preview
		$panel.find('button.dct-button-select-from-media-library, .dct-media-library-selected-image-preview').each(function() {
			$(this).on('click', function(e) { e.preventDefault(); alert('WordPress Media Library is not available in Documentation demo panels.'); });
		});
		
		// Convert buttons to code editor to links with query ?file
		$panel.find('button.dct-button-link-custom-file').each(function() {
			let $btn_file = $(this),
				btn_url = 'https://www.dctforwp.com/docs/code-editor/integrated-code-editor/?'+$btn_file.val()+'#code-editor-demo-panel';
			$btn_file.attr('type','button').removeAttr('formaction');
			$btn_file.on('click', function(e) { e.preventDefault(); window.location.href = btn_url; });
		});

		// Disable links to admin panel pages
		$panel.find('a').each(function() {
			let $link = $(this);
			if ($link.attr('href').startsWith('https://www.dctforwp.com/wp-admin')) {
				$link.removeAttr('href');
				$link.on('click', function(e) { e.preventDefault(); alert('Direct links to admin panel are disabled.'); });	
			}
		});
	}

	
});  // End JS Ready


// When page is loaded
/////////////////////////////////////
jQuery(document).load(function($) {

	// DEBUG On JS custom load
	//dct_debug('DCT JS Loaded: custom.js', 'custom.js', 'info', true);   

});

dct-code-editor-dct-shortcode-code-editor-demo-file-name

dct-code-editor-dct-shortcode-code-editor-demo-file-path

DCT for WP

What is Dynamic Child Theme for WordPress?

A child theme designed to be used with any WordPress parent theme (template).

Includes all the tools you need to debug, design, develop, customize, and code your self-hosted WordPress websites without using additional plugins.

A must-have for freelancers and agencies, that has been developed and used in real-world cases for a long time.

Features

Everything you can do with a single child theme

Customize admin panel colors, sidebar logo and footer text.

Customize users login page styles and JS.

Quick selector to enqueue CDN assets, like gsap and three.js.

Use the code editor to update SCSS, CSS, JS and PHP custom files.

Use a complete debugger panel with its own functions to test your code.

Add a custom page preloader with animations.

Edit, compile and minify SCSS styles and enable autocompile to update custom files with external editor.

Change parent theme (template) and keep child theme modifications.

Update the website version for cache purposes on assets enqueue..

All this and much more is possible using only DCT for WP, without any extra plugin.

All features are available through its own menu in the WordPress admin panel, with contextual help in most options and panels, basic and advanced mode with code editor and integrated SCSS compiler.

Get started

Get on Gumroad