Help

Documentation

Settings

Debugger

Designer

Developer

Customizer

Code editor

Help

Docs: Help

About Help

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Admin panel page with help listed in categories.

Settings Dashboard

Go to option

Child theme dashboard that provides quick options, current status and general information.

Settings Edit child theme

Go to option

Edit the current child's theme basic information, like name, version, template and author.

Theme name: Name of current child theme.
Theme version: Version of current child theme. Used for cache purposes on assets enqueue.
Theme description: Short description for current child theme.
Theme template: Parent theme used by current child theme. Select any installed theme to use as template.
Theme url: Website related to current child theme.
Theme auhor: Child theme author name and website.

On update: Child theme base style.scss file will be updated and compiled with new theme information.
On reset: Child theme base style.scss file will be reset and compiled with default settings and template twentytwentyfive

Settings Child theme screenshot

Go to option

Update the current child theme preview screenshot, used in menu Appearance: Themes.

Click on preview image to select/upload a custom image from the media library.
Recommended image format and size: JPG | 1200 x 900px

On update/reset: Selected/default image will be copied to child theme's folder, replacing current file screenshot.jpg

Settings Status

Go to option

Child theme and SCSS compiler current status, general information and tools.

Settings Tools: Reset theme mods

Go to option

Remove current child theme mods fields from database and regenerate with default values.

Select a group type or single theme mod to reset, useful when changing template to remove parent theme related fields.

On update: Selected theme mods will be deleted, and regenerated with default values on next load if required.

Settings Tools: Reset custom fields

Go to option

Delete custom files and reset to default templates.
Select a group type or single custom file to reset.

All custom files are organized by extension subfolders in the child theme custom folder.: wp-content/themes/dct-child-theme/custom/
Any custom file or extension subfolder deleted with FTP will be regenerated with the default template on next load.

On update: Selected custom files will be deleted and regenerated with default template.

Debugger Debugger options

Go to option

Enable debug mode to use debugger panel for administrators and related functions during development.

The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.

Debug mode: Enables debugger panel for administrators in frontend and admin panel, with PHP and JS logs, post queries, child theme status and other information.
Recommended only in development.
Debug mode advanced: Adds more verbose to PHP and JS logs and enables developer mode in admin panel.
Recommended only in development, for advanced users.

Debugger How to debug

Go to option

Use debugger panel log for PHP and JS

Add an entry to the debugger panel log in PHP and JS custom files code:

dct_debug(text, variable, level, advanced);

Use this function to debug any variable type with a custom level when debug mode is enabled. In JS, also logs to the browser console.

text: Text to debug. Default: empty.
var: Variable to debug (any type). Default: empty.
level: Level of log entry, allows filtering. Options: "log" (default), "info", "success", "warning", "error".
advanced: Only log when debug mode advanced is enabled. Default: false.
var_table: Only for JS. Log variable to console in table format. Default: false.

How to use dct_debug function with custom files code:

Use $dct object in PHP and JS

Object $dct contains information about your child theme, environment and current page that can be used in custom JS and PHP code.

How to use global $dct object with custom files code:

Current $dct object contents:

{
    "debug": {
        "enabled": true,
        "advanced": false,
        "maintenance": false
    },
    "scss_compiler": {
        "minify": true,
        "autocompile": false
    },
    "colors": {
        "primary": "#3fa6a5",
        "primary-dark": "#2a6e6d",
        "primary-darker": "#153736",
        "primary-light": "#6bc6c5",
        "primary-lighter": "#a2dbda",
        "primary-comp": "#a63f40"
    },
    "fonts": [],
    "sizes": [],
    "assets": {
        "css": [
            "dct-style-admin",
            "dct-style"
        ],
        "js": [
            "dct-base-js",
            "dct-admin-js",
            "gsap-min-js",
            "ScrollTrigger-min-js",
            "Draggable-min-js",
            "InertiaPlugin-min-js",
            "custom-js"
        ]
    },
    "customizer": {
        "preloader": false,
        "admin_panel": true,
        "login_page": false
    },
    "theme": {
        "Name": "DCT for WP",
        "Version": "1.1.2",
        "Description": "Dynamic Child Theme for WordPress",
        "ThemeURI": "https://www.dctforwp.com",
        "Author": "Estudi FGH.net",
        "AuthorURI": "https://www.estudifgh.net",
        "Template": "Divi",
        "TextDomain": "dct",
        "DomainPath": "",
        "Status": "publish",
        "Stylesheet": "dct-child-theme",
        "StylesheetURI": "https://www.dctforwp.com/wp-content/themes/dct-child-theme"
    },
    "post": {
        "post_title": "Help",
        "post_id": 163,
        "post_type": "page",
        "post_status": "publish",
        "post_date": "10/06/2026",
        "post_author": ""
    },
    "user": {
        "user_login": false,
        "user_id": 0,
        "user_name": false,
        "user_email": false,
        "user_roles": null
    },
    "conditionals": {
        "is_admin": false,
        "is_blog_admin": false,
        "is_login": false,
        "is_front_page": false,
        "is_home": false,
        "is_singular": true,
        "is_single": false,
        "is_page": true,
        "is_archive": false,
        "is_category": false,
        "is_tag": false,
        "is_date": false,
        "is_attachment": false,
        "is_author": false,
        "is_page_template": false,
        "is_paged": false,
        "is_post_type_archive": false,
        "is_search": false,
        "is_404": false,
        "is_ssl": true
    },
    "environment": {
        "Site URL": "https://www.dctforwp.com",
        "Theme basepath": "https://www.dctforwp.com/wp-content/themes/dct-child-theme",
        "Theme name": "DCT for WP",
        "Theme version": "1.1.2",
        "Wordpress version": "6.9.4",
        "PHP version": "8.2.31"
    },
    "language": {
        "locale": "en_US",
        "user_locale": "en_US"
    }
}

Debugger Debugger panel options

Go to option

Set options for debugger panel, available in frontend and admin panel when debug mode is enabled.

Debugger Maintenance mode

Go to option

Enable maintenance mode to disable the website for all users except administrators with a customizable page during development.
Recommended only in development.
Site will be disabled to users.

On update: Related theme mod will be updated. If maintenance mode is enabled, site will be disabled for all users except administrators.
On reset: Related theme mod will be reset to default values. Maintenance mode will be disabled.

Designer SCSS Compiler options

Go to option

Set options for the SCSS compiler of child theme custom styles files.

SCSS Compiler minify: Minify CSS output when compiling SCSS files.
Recommended in production.
SCSS Autocompile: Check for SCSS files updates and compile CSS output if required. Useful for editing custom files in an external editor and update them with FTP.
Recommended only in development.

Designer Global variables: Colors

Go to option

Add & edit global color variables to use in customizer and child theme custom files code.
Optionally add automated color shades (light & dark versions) and complementary color.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

How to use global colors variables with custom files code:

Designer Global variables: Fonts

Go to option

Add & edit global fonts variables to use in child theme custom files code.
Optionally add @import rule on top of SCSS code, useful if font is not already imported.

How to use global fonts variables with custom files code:

Designer Global variables: Sizes

Go to option

Add & edit global sizes variables to use in child theme custom files code.

How to use global sizes variables with custom files code:

Developer Enqueue assets

Go to option

Enqueue local or external assets with a version cache to the child theme frontend pages and admin panel.

Allowed assets types to enqueue: JS, CSS and local SCSS (will be compiled to CSS).

Select custom url, a local asset (uploaded to child theme custom assets folder) or a CDN url. Assets will be enqueued in order before child theme custom files, so enqueued assets can be used in custom code. Useful to add external libraries that can be used in JS custom code, or styles that can be overwritten in SCSS custom code.

Asset options:

Asset source: Upload your custom assets to use them as local assets, use a external CDN or custom url.
URL: Asset URL or relative path to custom assets folder.
Asset version: Asset version, which is added to the URL as a query string for cache busting purposes.
Enqueue on frontend: Enqueue asset on frontend, used for public site.
Enqueue on admin panel: Enqueue asset on admin panel, used for administrators.

On update:
Basic mode: New code will be generated to update the related PHP file. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related PHP file. Related theme mod will not be updated.

On reset:
No assets will be enqueued.
Related PHP file will reset to default template. Related theme mod will reset to default values.

Developer Custom local assets

Go to option

Upload allowed assets to use them as local assets in assets source selector.

Upload your own SCSS / CSS / JS files or folders to child theme custom assets folder:: wp-content/themes/dct-child-theme/custom/assets/

Developer Post types

Go to option

Post type options:

Post type label: Name of the post type shown in the menu. Usually plural.
Post type key: Key name of the custom post type. Will be sanitized, must not exceed 20 characters. Leave blank to generate from post type label.
Description: Short descriptive summary about this post type.
Post type supports: Core feature(s) the post type supports.

Post type parameters:

Hierarchical: Whether the post type is hierarchical. Enable to create pages. Disable to create posts.
Public: Whether a post type is intended for use publicly either via the admin interface or by front-end users.
Publicly queryable: Whether queries can be performed on the front end for the post type as part of parse_request().
Show UI: Whether to generate and allow a UI for managing this post type in the admin.
Show in REST: Whether to include the post type in the REST API. Enable for the post type to be available in the block editor.
Show in navigation menus: Makes this post type available for selection in navigation menus.
Has archive: Whether there should be post type archives.
Can export: Whether to allow this post type to be exported.
Exclude from search: Whether to exclude posts with this post type from front end search results.

Post type rewrite:

Rewrite: slug: Customize the permastruct slug. Leave blank to default to post type key.
Rewrite: feeds: Whether the feed permastruct should be built for this post type.
Rewrite: with front: Whether the permastruct should be prepended with WP_Rewrite::$front.
Post type capability: The string to use to build the read, edit, and delete capabilities Leave blank for default post / page.

Post type menu:

Menu icon: The icon for the post type in admin menu.
Menu name: Label for the menu name. Default is same as post type name (plural).
Menu position: The position in the menu order the post type should appear. Set to 0 for default position.

Post type labels:

Post type name (plural): General name for the post type, usually plural. Default is same as post type label.
Post type name (singular): Name for one object of this post type. Default is "Post" / "Page".
Add new: Label for adding a new item. Default is "Add Post" / "Add Page".
Add new item: Label for adding a new singular item. Default is "Add Post" / "Add Page".
New item: Label for the new item page title. Default is "New Post" / "New Page".
Edit item: Label for editing a singular item. Default is "Edit Post" / "Edit Page".
View item: Label for viewing a singular item. Default is "View Post" / "View Page".
View items: Label for viewing post type archives. Default is "View Posts" / "View Pages".
All items: Label to signify all items in a submenu link. Default is "All Posts" / "All Pages".
Archives: Label for archives in nav menus. Default is "Post Archives" / "Page Archives".
Search items: Label for searching plural items. Default is "Search Posts" / "Search Pages".
Not found: Label used when no items are found. Default is "No posts found" / "No pages found".
Not found in Trash: Label used when no items are in the Trash. Default is "No posts found in Trash" / "No pages found in Trash".
Parent item: Label used to prefix parents of hierarchical items. Not used on non-hierarchical post types. Default is "Parent Page".

On update:
Basic mode: New code will be generated to update the related PHP file. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related PHP file. Related theme mod will not be updated.

On reset:
No custom post types will be registered.
Related PHP file will reset to default template. Related theme mod will reset to default values.

Developer Taxonomies

Go to option

Taxonomy options:

Taxonomy label: Name of the taxonomy shown in the menu. Usually plural.
Taxonomy key: Key name of the taxonomy. Will be sanitized, must not exceed 32 characters. Leave blank to generate from taxonomy label.
Description: Short descriptive summary about this taxonomy.
Associated post types: Post types with which the taxonomy should be associated. Single, multiple, and empty values are allowed.

Taxonomy parameters:

Hierarchical: Whether the taxonomy is hierarchical. Enable to create categories. Disable to create tags.
Public: Whether a taxonomy is intended for use publicly either via the admin interface or by front-end users.
Publicly queryable: Whether the taxonomy is publicly queryable.
Show UI: Whether to generate and allow a UI for managing terms in this taxonomy in the admin.
Show in REST: Whether to include the taxonomy in the REST API. Enable for the taxonomy to be available in the block editor.
Show admin column: Whether to display a column for the taxonomy on its post type listing screens.
Show in menu: Whether to show the taxonomy in the admin menu. If enabled, the taxonomy is shown as a submenu of the object type menu. If disabled, no menu is shown.
Show in navigation menus: Makes this taxonomy available for selection in navigation menus.

Taxonomy labels:

Taxonomy name (plural): General name for the taxonomy, usually plural. Default is same as taxonomy label.
Taxonomy name (singular): Name for one object of this taxonomy. Default is "Tag" / "Category".
Add new item: Label for adding a new singular item. Default is "Add Tag" / "Add Category".
New item: Label for the new item name. Default is "New Tag Name" / "New category Name".
Edit item: Label for editing a singular item. Default is "Edit Tag" / "Edit category".
View item: Label for viewing a singular item. Default is "View Tag" / "View Category".
Update item: Label for updating a singular item. Default is "Update Tag" / "Update Category".
Back to items: Label displayed after a term has been updated. Default is "Back to tags" / "Back to categories".
All items: Label to signify all items in a submenu link. Default is "All Tags" / "All Categories".
Search items: Label for searching plural items. Default is "Search Tags" / "Search Categories".
Not found: Label used when no items are found. Default is "No tags found" / "No categories found".
Parent item: This label is only used for hierarchical taxonomies. Default is "Parent Categoriey".
Menu name: Label for the menu name. Default is same as taxonomy name (plural).

On update:
Basic mode: New code will be generated to update the related PHP file. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related PHP file. Related theme mod will not be updated.

On reset:
No taxonomies will be registered.
Related PHP file will reset to default template. Related theme mod will reset to default values.

Developer Custom fields

Go to option

Meta box options:

Meta box title: Title of the meta box with custom fields group.
Associated post type: Post type with which the meta box and custom fields should be associated. Only one meta box for post type is allowed.
Meta box context: The context within the screen where the box should display. Available contexts vary from screen to screen.
Meta box priority: The priority within the context where the box should show.

Custom field options:

Custom field label: Label of the custom field input in meta box.
Custom field key: Key name of the custom field, used to display the field value on the front end. Will be sanitized. It is recommended to use post type as a prefix. Add an underscore in first place to make this custom field private and not shown in the admin UI. Leave blank to generate from post type & label.
Type: Type of input for this custom field. Available tpes: Text, Textarea, Number, Date, Color, Image / File, Select option, Checkbox list.
Options list: Comma separated list of options for select and checkboxes custom field types. Option 1, Option 2, Option 3

On update:
Basic mode: New code will be generated to update the related PHP file. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related PHP file. Related theme mod will not be updated.

On reset:
No custom fields will be registered.
Related PHP file will reset to default template. Related theme mod will reset to default values.

Developer How to use custom fields

Go to option

To display the custom fields for each post, you have to use a template tag that customizes your theme.
get_post_meta($post->ID, $field_key, true);

In visual builders, use dynamic content and custom field name to display the value.
Private custom fields (with field key starting with underscore) will not be shown in the admin UI and visual builders.

Customizer Preloader

Go to option

Show a customizable preloader when loading frontend pages.

Enable page preloader to customize background, border, image and animations.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Preloader will be disabled.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Customizer Admin panel

Go to option

Customize admin panel colors, logos and other options.

Enable to customize admin panel sidebar colors and logo, admin topbar styles and admin panel footer info and credits.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Admin panel will reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Customizer Dashboard custom widget

Go to option

Add a custom widget panel with html contents to admin panel dashboard.

Enable dashboard custom widget to edit custom panel html contents.
Useful to add quicklinks to admin panel or forntend pages.

On update: Dashboard custom widget will appear in admin panel dashboard when enabled. Related theme mod will be updated.
On reset: Dashboard custom widget will be disabled and contents reset to default html. Related theme mod will reset to default values.

Customizer Login page

Go to option

Customize login page style, logo and other options.

Enable to customize login page background, border, logo, login form and links.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Login page wil reset to default styles.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Code editor Add & edit custom code

Go to option

Use the code editor to update any child theme custom file.

Select default child theme SCSS, JS or PHP file from the top submenu to add your custom code.
Select any custom file from the child theme custom files panel to edit the code directly.

On update: Custom file will be updated with code editor contents.
On reset: Custom file will be deleted and regenerated with default template.

Code editor File selector

Go to option

Select child theme file to edit with code editor or reset contents to default template.

Code editor Child theme functions and variables

Go to option

How to use global colors variables with custom files code:

How to use global fonts variables with custom files code:

How to use global sizes variables with custom files code:

How to use dct_debug function with custom files code:

How to use global $dct object with custom files code:

Code snippets

Admin panel page with code snippets listed in categories.

CSS Background frost blur

SCSS Background frost blur

JS GSAP Animations

////////////////////////////
// GSAP Options & 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, TextPlugin);

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



// Inici pàgina llesta
/////////////////////////////////////
jQuery(document).ready( function($) {
	
	
	///*********************************///
	/// ANIMACIONS GSAP Scroll seccions ///
	///*********************************///
		
	/////////////////////////////////////////
	// Seccions amb SCROLL horitzontal gsap //
	/////////////////////////////////////////
	if ($('.seccio-scroll-horitzontal').length && is_frontend && is_asset_loaded('gsap'))  {
		
		// Afegir a grup responsive
		mm.add("(min-width: "+mm_breakpoint+"px)", () => {			

			// Posició inicial panells scroll horitzontal
			function panells_scroll_horitzontal_reset() {
				let pos_x = '45%';
				if ($(window).width() <= mm_breakpoint) { pos_x = '0'; }
				gsap.to($('.seccio-scroll-horitzontal .panell-scroll'), { x: pos_x, duration:0.2, ease:"power3.out" } );
				dct_debug('Actualitzada posició inicial '+pos_x+' de tots els panells scroll horitzontal');
			}
			panells_scroll_horitzontal_reset();
			// Actualitzar pos inicial on resize
			$(window).resize(function() {  panells_scroll_horitzontal_reset(); });

			// Per cada fila scroll horitzontal
			$('.seccio-scroll-horitzontal').each(function() {
				let $seccio = $(this),
					$panells = $(this).find(".panell-scroll");

				// Crear scroll horitzontal seccio
				gsap.to($panells, {
					xPercent: -100 * ($panells.length - 1),
					duration:0.2,
					ease: "none",
					scrollTrigger: {
						trigger: $seccio,
						toggleClass: 'panell-scroll-actiu',
						invalidateOnRefresh: true,
						pin: true,
						pinSpacing: true,
						start: "top center",
						end: "+="+($panells.length * 250),
						scrub: 0.2, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
						snap: {
							snapTo: 1 / ($panells.length - 1),
							duration: 0.7, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
							delay: 0.1, // wait 0.2 seconds from the last scroll event before doing the snapping
							ease: "power3.inOut", // the ease of the snap animation ("power3" by default)
							directional: true,
							onComplete: function() { dct_debug('Scroll horitzontal Snap completat', $seccio); },
						},					
						// debug scroll
						markers: scrolltrigger_markers,
						onEnter: () => dct_debug("Scroll horitzontal enter", $seccio),
						onLeave: () => dct_debug("Scroll horitzontal leave", $seccio),
						onEnterBack: () => dct_debug("Scroll horitzontal enterBack", $seccio),
						onLeaveBack: () => dct_debug("Scroll horitzontal leaveBack", $seccio),
						//onToggle: self => dct_debug("Scroll horitzontal active: " + self.isActive, $seccio),
						//onUpdate: self => dct_debug("Scroll horitzontal progress: " + self.progress, $seccio)
					}
				});

				dct_debug('Enabled horizontal scroll section with '+$panells.length+' panels', $seccio);

			}); // Fi each seccio-panell-scroll-horitzontal

		}); // FI afegir a grup mm


	} // Fi tenim panells scroll horitzontal


	///////////////////////////////////
	// Seccions amb DRAG horitzontal //
	///////////////////////////////////
	if ($('.seccio-draggable-horitzontal').length && is_frontend && is_asset_loaded('Draggable'))  {
		
		// Crear un div per slider horitzontal amb els panells i fletxes
		$('.seccio-draggable-horitzontal').each(function() { 
			let $seccio = $(this),
				html_actual = $seccio.html(),
				fletxes_classe = 'slider-drag-fletxes';

			if ($seccio.hasClass('draggable-fletxes-inferior')) { fletxes_classe += ' fletxes-posicio-inferior'; }
			$seccio.html('<div class="'+fletxes_classe+'">' +
						 '<div class="slider-drag-fletxa-esq"><span></span></div>' +
						 '<div class="slider-drag-fletxa-dret"><span></span></div>' +
						 '</div>' +
						 '<div class="seccio-draggable-horitzontal-slider">'+html_actual+'</div>');
		});
		
		// A partir de secció calcula mides drag min/max
		function calcular_mides_seccio_draggable($seccio) {
			let $slider = $seccio.find('.seccio-draggable-horitzontal-slider'),
				$panells = $seccio.find('.panell-scroll');
			// Si no tenim panells utilitzar mòduls
			if ($panells.length < 1) {  $panells = $seccio.find('.et_pb_module'); }
			
			let panells_amplada = $panells.innerWidth(),
				panells_quant = $panells.length,
				amplada = panells_amplada * panells_quant,
				marge = panells_amplada * 1.25;

			let mides = { 'Panells quantitat': panells_quant,
						  'Panells amplada': panells_amplada,
						  'Amplada': amplada, 
						  'Marge': marge,
						  'Amplada min': -amplada + marge,
						  'Amplada max': $slider.innerWidth() - marge };
			return mides;
		}

		// Moure slider a dreta i esquerra amb btns
		function move_horizontal_section_draggable($seccio, $slider, move_to='right') {
			let mides = calcular_mides_seccio_draggable($seccio),
				pos_x = Math.round($slider.position().left),
				pos_limit = mides['Amplada max'];
			
			if (move_to.toLowerCase() === 'left') {
				pos_x = pos_x - mides['Panells amplada'];
				pos_limit = mides['Amplada min'];
				if (pos_x < pos_limit) { pos_x = pos_limit; }
			} else {
				move_to='right';
				pos_x = pos_x + mides['Panells amplada'];
				if (pos_x > pos_limit) { pos_x = pos_limit; }
			}
			// Move slider to pos_x
			gsap.to($slider, {  x: pos_x, duration:0.3, ease:'power3.out' } );
			dct_debug ('Move '+move_to.toLowerCase()+' horizontal dragabble section to position '+pos_x+'px (limit '+pos_limit+'px)', $slider);
		}

		// Afegir a grup responsive
		mm.add("(min-width: "+mm_breakpoint+"px)", () => {

			// Per cada secció draggable horitzontal
			$('.seccio-draggable-horitzontal').each(function() { 
				let $seccio = $(this),
					$slider = $seccio.find('.seccio-draggable-horitzontal-slider');

				let mides = calcular_mides_seccio_draggable($seccio);					
				
				// Pos inicial
				gsap.set($slider, { x: $seccio.innerWidth() * 0.2 });

				// Crear drag a slider
				let drag_horitzontal = Draggable.create($slider, {
					type: "x",
					bounds: { minX: mides['Amplada min'], maxX: mides['Amplada max'] },
					//bounds: $seccio,
					//trigger: $seccio, // child on permetre drag
					dragResistance:0.1,
					edgeResitance:0.9,
					allowContextMenu : true,
					//cursor: 'ew-resize',
					// Debug Draggable
					onClick: function () { 		dct_debug('Horizontal dragabble section onClick', mides); },
					onDragStart: function () { 	dct_debug('Horizontal dragabble section onDragStart direction '+this.getDirection()+' '+Math.round(this.x)+'px', $slider); },
					//onDrag: function () { 	dct_debug('Horizontal dragabble section onDrag direction '+this.getDirection()+' '+Math.round(this.x)+'px', $slider); },
					onDragEnd: function () { 	dct_debug('Horizontal dragabble section onDragEnd direction '+this.getDirection()+' '+Math.round(this.x)+'px', $slider); },
				});

				// Afegir interactivitat a fletxes esq/dret
				let $btn_esq = $seccio.find('.slider-drag-fletxa-esq'),
					$btn_dret = $seccio.find('.slider-drag-fletxa-dret');
				
				$btn_dret.on('click', function() { move_horizontal_section_draggable($seccio, $slider, move_to='right') });
				$btn_esq.on('click', function() {  move_horizontal_section_draggable($seccio, $slider, move_to='left') });

				dct_debug('Enabled horizontal draggable section with '+mides['Panells quantitat']+' panels', $seccio);

			}); // FI Cada secció draggable horitzontal
		
		}); // FI afegir a grup mm
	
	} // FI Seccions draggable horitzontal



	
	///////////////////////////////////////////
	// SECCIONS .fullheight scroll navegació //
	///////////////////////////////////////////
	if ($('#et-main-area .seccio-navegacio-fullheight').length && is_frontend && is_asset_loaded('gsap')) {
		
		// Recollir totes les seccions/row de la pàgiona que contenen .seccio-navegacio-fullheight
		let $seccions = $('#et-main-area .seccio-navegacio-fullheight'),
			marge_trigger = 10; // % viewport (top/bottom)
		
		// Activar seccions individuals	scroll	
		$seccions.each(function(i, seccio) {
			let $seccio = $(this);
			
			// Scrolltrigger inferior: anar a secció SEGÜENT
			ScrollTrigger.create({
				trigger: $seccio,
				start: "top "+(100-marge_trigger)+"%", // Quan top trigger arribi a 90% top viewport
				end: "+=5",
				onEnter: () => scroll_seccio_fullheight(i, true),								
				// debug scroll
				markers: scrolltrigger_markers,
				//onEnter: () => dct_debug("Scroll a secció anada "+i+" enter", $seccio),
				//onLeave: () => dct_debug("Scroll a secció anada "+i+" leave", $seccio),
				//onEnterBack: () => dct_debug("Scroll a secció anada "+i+" enterBack", $seccio),
				//onLeaveBack: () => dct_debug("Scroll a secció anada "+i+" leaveBack", $seccio),
				//onToggle: self => dct_debug("Scroll a secció anada "+i+" active: " + self.isActive, $seccio),
				//onUpdate: self => dct_debug("Scroll a secció anada "+i+" progress: " + self.progress, $seccio),
			});
			
			// Scrolltrigger inferior: anar a secció ANTERIOR
			ScrollTrigger.create({
				trigger: $seccio,
				start: "bottom "+marge_trigger+"%", // // Quan bottom trigger arribi a 10% top viewport
				end: "+=5",
				onEnterBack: () => scroll_seccio_fullheight(i, false),								
				// debug scroll
				markers: scrolltrigger_markers,
				//onEnter: () => dct_debug("Scroll a secció anada "+i+" enter", $seccio),
				//onLeave: () => dct_debug("Scroll a secció anada "+i+" leave", $seccio),
				//onEnterBack: () => dct_debug("Scroll a secció anada "+i+" enterBack", $seccio),
				//onLeaveBack: () => dct_debug("Scroll a secció anada "+i+" leaveBack", $seccio),
				//onToggle: self => dct_debug("Scroll a secció tornada "+i+" active: " + self.isActive, $seccio),
				//onUpdate: self => dct_debug("Scroll a secció anada "+i+" progress: " + self.progress, $seccio),
			});

			dct_debug('Enabled fullheight section '+i+' navigation', $seccio);
			
		}); // FI Cada secció scroll


		// Animació scroll anar a següent/anterior secció
		function scroll_seccio_fullheight(i, anim_entrada) {
			if (i < 0) { dct_debug('És la primera secció, no fem scroll a anterior', i); }
			else if (i > ($seccions.length-1)) { dct_debug('És la darrera secció, no fem scroll a següent', i); }			
			else {
				if (scrolling_animation === true) { dct_debug('Animació Scroll ACTIVA, no canviem secció.'); }
				else {
					let $seccio = $($seccions[i]);
					scroll_to_element($seccio);
					// Si és entrada o tornada
					if (anim_entrada === true) { dct_debug('Animació seccio '+i+' anada navegació fullheight',  $seccio); }
					else { 						 dct_debug('Animació secció '+i+' tornada navegació fullheight', $seccio); }
				}	
			}			
		}	
		dct_debug('Enabled navigation for '+$seccions.length+' fullheight sections', $seccions);
	
	} // FI Seccions .fullheight scroll
		

	/////////////////////////////
	// TICKER horitzontal loop //
	/////////////////////////////
	if ($('.fila-ticker-horitzontal').length && is_frontend && is_asset_loaded('gsap')) {
		// Recollir totes les seccions/row de la pàgina que contenen .fila-ticker-horitzontal
		let $tickers = $('.fila-ticker-horitzontal');

		// Activar files individuals ticker	
		$tickers.each(function(i, ticker) {
			let $ticker = $(this),
				$text =  $ticker.find('.et_pb_text_inner'),
				$ul = $text.find('ul');

			// Velocitat animació (temps per cada ul)
			let durada_anim = 20,
				copies_ul = 4,
				window_mida_actual = jQuery(window).width();
			if (window_mida_actual < 1200) { durada_anim = durada_anim*0.8; }
			if (window_mida_actual < 500) { durada_anim = durada_anim*0.6; }
			
			// Afegir X còpies de ul i calcular durada anim total
			for (let copia=0; copia < copies_ul; copia++) {
				$text.append($ul.clone());
			}
			$text = $ticker.find('.et_pb_text_inner');
			let durada_anim_total = durada_anim * copies_ul,
				pos_anim_final = -110 * (copies_ul+2);
			
			gsap.timeline({repeat:-1 } )
				.to($text,{ xPercent: pos_anim_final, duration: durada_anim_total, ease:'none' })
				.to($text, { xPercent:0, duration: 1, ease:'power3.inOut' });
			
			dct_debug('Enabled row with horizontal ticker with duration '+durada_anim_total+'s', $ticker);

		}); // FI Each fila ticker

	} // FI Fila ticker horitzontal loop


	////////////////////////////////////////
	// GSAP Draggable element dins secció //
	////////////////////////////////////////
	if ($('.element-draggable').length && is_frontend && is_asset_loaded('gsap')) {

		let $elements = $('.element-draggable');

		// Animació rotació segons direction drag
		function animacio_drag_rotacio_direccio($elem, direccio, drag_escala) {
			if (direccio.includes('right') || direccio.includes('up')) {
				gsap.to($elem, { scale:drag_escala, rotation: gsap.utils.random(5, 20, 1, true), duration:0.2, ease:'power3.inOut'} );
			} else {
				gsap.to($elem, { scale:drag_escala, rotation: gsap.utils.random(-5, -20, 1, true), duration:0.2, ease:'power3.inOut'} );
			}
		}
		
		// Per cada element arrossegable
		$elements.each(function(i, elem) {
			let $elem = $(elem),
				$seccio = $elem.closest('.et_pb_section'),
				drag_escala = 1.1,
				drag_dir = false;
			

			let drag_element = Draggable.create($elem, {
				type: "x,y", // "x", "y", "x,y", "rotation"
				bounds: $seccio,
				//trigger: $elem.find('.trigger-element'), // child on permetre drag
				dragResistance:0, // 0 - 1
				edgeResitance:0,  // 0 - 1
				allowContextMenu : true,

				deltaX:0,
				deltaY:0,
				//cursor: 'ew-resize',
				// Debug Draggable
				onClick: function () {
					gsap.timeline()
						.to($elem, { scale:drag_escala, rotation: 0, duration:0.2, ease:'back.out(2)'} )
						.to($elem, { scale:1, rotation: 0, duration:0.3, delay:1, ease:'back.out(2)'} );
					dct_debug('Draggable element onClick', $elem); 
				},
				onDragStart: function () { 	
					drag_dir = this.getDirection();
					animacio_drag_rotacio_direccio($elem, drag_dir, drag_escala);
					dct_debug('Draggable element onDragStart direction '+drag_dir+' '+Math.round(this.x)+'px', $elem); 
				},
				/*
				onDrag: function () { 
					// Afegir rotació segons direction drag
					if (this.getDirection() != drag_dir) {
						drag_dir = this.getDirection();
						animacio_drag_rotacio_direccio($elem, drag_dir, drag_escala);
					}					
					dct_debug('Draggable element onDrag direction '+this.getDirection()+' '+Math.round(this.x)+'px', $elem); 
				},
				*/
				onDragEnd: function () { 
					gsap.killTweensOf($elem);
					gsap.to($elem, { scale:1, rotation: 0, duration:0.3, delay:0.2, ease:'back.out(2)'} );
					dct_debug('Draggable element onDragEnd direction '+this.getDirection()+' '+Math.round(this.x)+'px', $elem); 
				},
			});

			dct_debug('Enabled draggable element', $elem);		
			dct_debug('Draggable element bounds', $seccio);		
		});

	} // FI Elements draggable


});

PHP Header meta viewport accessibility

PHP Images sizes

PHP SVG images media library upload support

PHP Search results post types

PHP Shortcode custom with options

PHP WooCommerce products grid adjustments

PHP WooCommerce single product gallery adjustments

Developers

Admin panel page with customized components code to create own admin contents.

Demo Contents

Demo toggle

Help contents not found: help-developer-demo-contents

Content row featured

Content title

Content subtitle

Sues grandíssimes virtuts e cavalleries se fa singular. Amor que li portava; la feminil condició promptament no pogué. Valent cavaller d'honor e glòria e la fama d'aquell no. E als servidors la sua. E sants actes dels sants pares del noble Josuè. Fugir vergonyosament La santa dona.

Enginy havia servit per llong temps l'art de cavalleria ab.
E molt més de virtuts lo que. Felicitat no pot ésser atesa sens mitjà. Condecent útil e expedient deduir. Feta la deliberació en la. En la Santa Escriptura les històries e sants actes.

Content row default

Content title

Content subtitle

Buttons default

dct_button(icon:'', label:'', tooltip:'', tooltip_position:'', options:'type="button"', data_action:'', classes:'');

Buttons sizes & colors

Use button group

Transparent buttons

Use button group

Buttons links

dct_button_link(icon:'', label:'', link:'', blank:false, classes:'');

Use dct_get_admin_page_url(slug:'', tab:'') to get link to admin page.

Use button group

Edit child theme Link Link Link Link Link Link Link

Buttons toggle

dct_button_toggle(icon:'', label:'', icon_enabled:'', label_enabled:'', enabled:false, auto_enable:true, options:'type="button"', data_action:'', classes:'');

Use button group

Buttons custom files

Custom file button

dct_button_file(file:'', label:'', file_description:'', action_edit:false, tooltip_position:'left-bottom', classes:'');

Use file with custom file name: dct-functions.php or relative path to file from child theme folder: /custom/php/dct-functions.php

Use button group

Custom files buttons list

dct_group_list_custom_files(file_type:array('scss','js','php'), title:true, action_edit:true, enable_form:true, classes:'');

Custom files list with action edit action_edit:true

Partials styles: SCSS

Custom files: JS

Custom files: PHP

Custom files list with link action_edit:false

Sections tabs

dct_button_tab(icon:'', label:'', section:'', classes:'')

Content section 1

Content title

Content subtitle

Content section 3

Icons

dct_dashicon(icon, classes:'');

Use icon code, prefix dashicons- not required.

Selected icon: dashicons-admin-generic

Admin Menu

menu
dashicons-menu

menu (alt)
dashicons-menu-alt

menu (alt2)
dashicons-menu-alt2

menu (alt3)
dashicons-menu-alt3

site
dashicons-admin-site

site (alt)
dashicons-admin-site-alt

site (alt2)
dashicons-admin-site-alt2

site (alt3)
dashicons-admin-site-alt3

dashboard
dashicons-dashboard

post
dashicons-admin-post

media
dashicons-admin-media

links
dashicons-admin-links

page
dashicons-admin-page

comments
dashicons-admin-comments

appearance
dashicons-admin-appearance

plugins
dashicons-admin-plugins

plugins checked
dashicons-plugins-checked

users
dashicons-admin-users

tools
dashicons-admin-tools

settings
dashicons-admin-settings

network
dashicons-admin-network

home
dashicons-admin-home

generic
dashicons-admin-generic

collapse
dashicons-admin-collapse

filter
dashicons-filter

customizer
dashicons-admin-customizer

multisite
dashicons-admin-multisite

Welcome Screen

write blog
dashicons-welcome-write-blog

add page
dashicons-welcome-add-page

view site
dashicons-welcome-view-site

widgets menus
dashicons-welcome-widgets-menus

comments
dashicons-welcome-comments

learn more
dashicons-welcome-learn-more

Post Formats

aside
dashicons-format-aside

image
dashicons-format-image

gallery
dashicons-format-gallery

video
dashicons-format-video

status
dashicons-format-status

quote
dashicons-format-quote

chat
dashicons-format-chat

audio
dashicons-format-audio

camera
dashicons-camera

camera (alt)
dashicons-camera-alt

images (alt)
dashicons-images-alt

images (alt2)
dashicons-images-alt2

video (alt)
dashicons-video-alt

video (alt2)
dashicons-video-alt2

video (alt3)
dashicons-video-alt3

Media

archive
dashicons-media-archive

audio
dashicons-media-audio

code
dashicons-media-code

default
dashicons-media-default

document
dashicons-media-document

interactive
dashicons-media-interactive

spreadsheet
dashicons-media-spreadsheet

text
dashicons-media-text

video
dashicons-media-video

playlist audio
dashicons-playlist-audio

playlist video
dashicons-playlist-video

play
dashicons-controls-play

pause
dashicons-controls-pause

forward
dashicons-controls-forward

skip forward
dashicons-controls-skipforward

back
dashicons-controls-back

skip back
dashicons-controls-skipback

repeat
dashicons-controls-repeat

volume on
dashicons-controls-volumeon

volume off
dashicons-controls-volumeoff

Image Editing

crop
dashicons-image-crop

rotate
dashicons-image-rotate

rotate left
dashicons-image-rotate-left

rotate right
dashicons-image-rotate-right

flip vertical
dashicons-image-flip-vertical

flip horizontal
dashicons-image-flip-horizontal

filter
dashicons-image-filter

undo
dashicons-undo

redo
dashicons-redo

Databases

database add
dashicons-database-add

database
dashicons-database

database export
dashicons-database-export

database import
dashicons-database-import

database remove
dashicons-database-remove

database view
dashicons-database-view

Block Editor

align full width
dashicons-align-full-width

align pull left
dashicons-align-pull-left

align pull right
dashicons-align-pull-right

align wide
dashicons-align-wide

block default
dashicons-block-default

button
dashicons-button

cloud saved
dashicons-cloud-saved

cloud upload
dashicons-cloud-upload

columns
dashicons-columns

cover image
dashicons-cover-image

ellipsis
dashicons-ellipsis

embed audio
dashicons-embed-audio

embed generic
dashicons-embed-generic

embed photo
dashicons-embed-photo

embed post
dashicons-embed-post

embed video
dashicons-embed-video

exit
dashicons-exit

heading
dashicons-heading

HTML
dashicons-html

info outline
dashicons-info-outline

insert
dashicons-insert

insert after
dashicons-insert-after

insert before
dashicons-insert-before

remove
dashicons-remove

saved
dashicons-saved

shortcode
dashicons-shortcode

table col after
dashicons-table-col-after

table col before
dashicons-table-col-before

table col delete
dashicons-table-col-delete

table row after
dashicons-table-row-after

table row before
dashicons-table-row-before

table row delete
dashicons-table-row-delete

TinyMCE

bold
dashicons-editor-bold

italic
dashicons-editor-italic

unordered list
dashicons-editor-ul

ordered list
dashicons-editor-ol

ordered list RTL
dashicons-editor-ol-rtl

quote
dashicons-editor-quote

align left
dashicons-editor-alignleft

align center
dashicons-editor-aligncenter

align right
dashicons-editor-alignright

insert more
dashicons-editor-insertmore

spellcheck
dashicons-editor-spellcheck

expand
dashicons-editor-expand

contract
dashicons-editor-contract

kitchen sink
dashicons-editor-kitchensink

underline
dashicons-editor-underline

justify
dashicons-editor-justify

text color
dashicons-editor-textcolor

paste word
dashicons-editor-paste-word

paste text
dashicons-editor-paste-text

remove formatting
dashicons-editor-removeformatting

video
dashicons-editor-video

custom character
dashicons-editor-customchar

outdent
dashicons-editor-outdent

indent
dashicons-editor-indent

help
dashicons-editor-help

strikethrough
dashicons-editor-strikethrough

unlink
dashicons-editor-unlink

RTL
dashicons-editor-rtl

LTR
dashicons-editor-ltr

break
dashicons-editor-break

code
dashicons-editor-code

paragraph
dashicons-editor-paragraph

table
dashicons-editor-table

Posts Screen

align left
dashicons-align-left

align right
dashicons-align-right

align center
dashicons-align-center

align none
dashicons-align-none

lock
dashicons-lock

unlock
dashicons-unlock

calendar
dashicons-calendar

calendar (alt)
dashicons-calendar-alt

visibility
dashicons-visibility

hidden
dashicons-hidden

post status
dashicons-post-status

edit
dashicons-edit

trash
dashicons-trash

sticky
dashicons-sticky

Sorting

external
dashicons-external

arrow up
dashicons-arrow-up

arrow down
dashicons-arrow-down

arrow right
dashicons-arrow-right

arrow left
dashicons-arrow-left

arrow up (alt)
dashicons-arrow-up-alt

arrow down (alt)
dashicons-arrow-down-alt

arrow right (alt)
dashicons-arrow-right-alt

arrow left (alt)
dashicons-arrow-left-alt

arrow up (alt2)
dashicons-arrow-up-alt2

arrow down (alt2)
dashicons-arrow-down-alt2

arrow right (alt2)
dashicons-arrow-right-alt2

arrow left (alt2)
dashicons-arrow-left-alt2

sort
dashicons-sort

left right
dashicons-leftright

randomize
dashicons-randomize

list view
dashicons-list-view

excerpt view
dashicons-excerpt-view

grid view
dashicons-grid-view

move
dashicons-move

Social

share
dashicons-share

share (alt)
dashicons-share-alt

share (alt2)
dashicons-share-alt2

RSS
dashicons-rss

email
dashicons-email

email (alt)
dashicons-email-alt

email (alt2)
dashicons-email-alt2

networking
dashicons-networking

Amazon
dashicons-amazon

Facebook
dashicons-facebook

Facebook (alt)
dashicons-facebook-alt

Google
dashicons-google

Instagram
dashicons-instagram

LinkedIn
dashicons-linkedin

Pinterest
dashicons-pinterest

Podio
dashicons-podio

Reddit
dashicons-reddit

Spotify
dashicons-spotify

Twitch
dashicons-twitch

Twitter
dashicons-twitter

Twitter (alt)
dashicons-twitter-alt

WhatsApp
dashicons-whatsapp

Xing
dashicons-xing

YouTube
dashicons-youtube

WordPress.org

hammer
dashicons-hammer

art
dashicons-art

migrate
dashicons-migrate

performance
dashicons-performance

universal access
dashicons-universal-access

universal access (alt)
dashicons-universal-access-alt

tickets
dashicons-tickets

nametag
dashicons-nametag

clipboard
dashicons-clipboard

heart
dashicons-heart

megaphone
dashicons-megaphone

schedule
dashicons-schedule

Tide
dashicons-tide

REST API
dashicons-rest-api

code standards
dashicons-code-standards

Buddicons

activity
dashicons-buddicons-activity

bbPress
dashicons-buddicons-bbpress-logo

BuddyPress
dashicons-buddicons-buddypress-logo

community
dashicons-buddicons-community

forums
dashicons-buddicons-forums

friends
dashicons-buddicons-friends

groups
dashicons-buddicons-groups

pm
dashicons-buddicons-pm

replies
dashicons-buddicons-replies

topics
dashicons-buddicons-topics

tracking
dashicons-buddicons-tracking

Products

WordPress
dashicons-wordpress

WordPress (alt)
dashicons-wordpress-alt

Pressthis
dashicons-pressthis

update
dashicons-update

update (alt)
dashicons-update-alt

screen options
dashicons-screenoptions

info
dashicons-info

cart
dashicons-cart

feedback
dashicons-feedback

cloud
dashicons-cloud

translation
dashicons-translation

Taxonomies

tag
dashicons-tag

category
dashicons-category

Widgets

archive
dashicons-archive

Notifications

bell
dashicons-bell

yes
dashicons-yes

yes (alt)
dashicons-yes-alt

no
dashicons-no

no (alt)
dashicons-no-alt

plus
dashicons-plus

plus (alt)
dashicons-plus-alt

plus (alt2)
dashicons-plus-alt2

minus
dashicons-minus

dismiss
dashicons-dismiss

marker
dashicons-marker

star filled
dashicons-star-filled

star half
dashicons-star-half

star empty
dashicons-star-empty

flag
dashicons-flag

warning
dashicons-warning

Miscellaneous

location
dashicons-location

location (alt)
dashicons-location-alt

vault
dashicons-vault

shield
dashicons-shield

shield (alt)
dashicons-shield-alt

sos
dashicons-sos

search
dashicons-search

slides
dashicons-slides

text page
dashicons-text-page

analytics
dashicons-analytics

chart pie
dashicons-chart-pie

chart bar
dashicons-chart-bar

chart line
dashicons-chart-line

chart area
dashicons-chart-area

groups
dashicons-groups

businessman
dashicons-businessman

businesswoman
dashicons-businesswoman

businessperson
dashicons-businessperson

id
dashicons-id

id (alt)
dashicons-id-alt

products
dashicons-products

awards
dashicons-awards

forms
dashicons-forms

testimonial
dashicons-testimonial

portfolio
dashicons-portfolio

book
dashicons-book

book (alt)
dashicons-book-alt

download
dashicons-download

upload
dashicons-upload

backup
dashicons-backup

clock
dashicons-clock

lightbulb
dashicons-lightbulb

microphone
dashicons-microphone

desktop
dashicons-desktop

laptop
dashicons-laptop

tablet
dashicons-tablet

smartphone
dashicons-smartphone

phone
dashicons-phone

index card
dashicons-index-card

carrot
dashicons-carrot

building
dashicons-building

store
dashicons-store

album
dashicons-album

palm tree
dashicons-palmtree

tickets (alt)
dashicons-tickets-alt

money
dashicons-money

money (alt)
dashicons-money-alt

smiley
dashicons-smiley

thumbs up
dashicons-thumbs-up

thumbs down
dashicons-thumbs-down

layout
dashicons-layout

paperclip
dashicons-paperclip

color picker
dashicons-color-picker

edit large
dashicons-edit-large

edit page
dashicons-edit-page

airplane
dashicons-airplane

bank
dashicons-bank

beer
dashicons-beer

calculator
dashicons-calculator

car
dashicons-car

coffee
dashicons-coffee

drumstick
dashicons-drumstick

food
dashicons-food

fullscreen (alt)
dashicons-fullscreen-alt

fullscreen exit (alt)
dashicons-fullscreen-exit-alt

games
dashicons-games

hourglass
dashicons-hourglass

open folder
dashicons-open-folder

PDF
dashicons-pdf

pets
dashicons-pets

printer
dashicons-printer

privacy
dashicons-privacy

superhero
dashicons-superhero

superhero (alt)
dashicons-superhero-alt

Tooltips

dct_tooltip(text:'', label:'', position:'', link:'', blank:true, classes:'');

dct-debug-panel-action--name

dct-debug-panel-action--value

Demo Inputs

Default inputs

Useful demo of inputs by type.

dct_group_input(name:'input-name', value:'input-value', options:'', label:'', tooltip:'', help:'', classes:'')

Edit "dct-group-input" classes. Current classes:

Custom classes to add/remove

Input text

Help Text input

Input number

Help Text input

Input range

Help Text input

Input color with alpha and narrow button

Help Text input

Input color

Help Text input

Input toggle

Help Text input

Input select

Help Text input

Input textarea

Help Text input

Input Media Library

input-demo-name-media

input-demo-name-media-id

Help Text input

{
    "dct_pre_code_expand(code, expanded:false, classes)": "Creates debug pre code expand with code.",
    "dct_group_input_hidden(name, value, classes)": "Creates hidden input for debug or POST forms"
}

input-demo-name-hidden

dct-debug-panel-action--name

dct-debug-panel-action--value

Demo Code Editors

Code editor from file

dct_group_code_editor(name:'', file:'', code:'', lang:'', editable:true, toolbar:true, help:'', classes:'')

Use file with custom file name dct-functions.php or relative path from child theme folder /custom/php/dct-functions.php to use as source files.

/*!
Theme Name:     DCT for WP
Theme URI:      https://www.dctforwp.com
Version:        1.1.2
Description:    Dynamic Child Theme for WordPress
Author:         Estudi FGH.net
Author URI:     https://www.estudifgh.net
Template:       Divi
Text Domain:    dct
License:        GNU General Public License v2
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Requires PHP:   8.0
Tested up to:   6.4
Requires at least: 6.2
*/

// Import DCT partials files
///////////////////////////////
@import 'custom/scss/_colors';
@import 'custom/scss/_fonts';
@import 'custom/scss/_sizes';
@import 'includes/scss/_dct-functions';
@import 'custom/scss/_preloader';
@import 'custom/scss/_custom';


// Editing this file is not recommended. It is automatically regenerated when the child theme information is updated.
// Use SCSS partial file in '/custom/scss/_custom.scss' to add your own SCSS/CSS code.

Example of SCSS code extracted from file_path.

dct-code-editor-demo-file-scss-file-name

dct-code-editor-demo-file-scss-file-path

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


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


  // Check if Divi builder is enabled
  let divi_builder_enabled = false;
  if ($('body').hasClass('et_fb')) {  divi_builder_enabled = true; }	

  dct_debug('Is Divi builder enabled: '+ divi_builder_enabled );

  if (!divi_builder_enabled) {

  // Add toggle to text & images with data attr data-view-image
  function toggle_image_selector(data_name) {
     let $text = $('.et_pb_text[data-view-image="'+data_name+'"]'),
         $section = $text.closest('.et_pb_section'),
         $image = $section.find('.et_pb_image[data-view-image="'+data_name+'"]');
    
    // No text found
    if (!$text.length) {
      dct_debug('View image toggle not found: ',  data_name, 'warning' );
      return false;
    }
    
    // Text already toggled, no change
    if ($text.hasClass('toggle-image-enabled')) {
      return false;
    }
    
    // Reset btns and images
    $section.find('.et_pb_text[data-view-image]').removeClass('toggle-image-enabled');
    $section.find('.et_pb_image[data-view-image]').hide();    
    
    // Enable selected data_name image and text
    $text.addClass('toggle-image-enabled');
    $image.fadeIn(200);    
    dct_debug('View image toggle: '+  data_name);
    return true;
  }

  // Enable on click/hover text
  $('.et_pb_text[data-view-image]').on('mouseenter click', function() {
     let data_name = $(this).attr('data-view-image');
     toggle_image_selector(data_name);
  });
  
  // Enable first on start
  toggle_image_selector('debug mode toggle');
  toggle_image_selector('design scss compiler');


  } // End if not divi_builder_enabled
	
});


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


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

});

Example of JS code extracted from custom file.

dct-code-editor-demo-file-js-file-name

dct-code-editor-demo-file-js-file-path

<?php
////////////////////////////////////
// Child theme functions.php
////////////////////////////////////
dct_debug_php_file_init(__FILE__, advanced:true);


// Add here your custom PHP code for child theme (used as theme functions.php)
////////////////////////////////////////////////////////////////////////////////


// Add SVG support to media library
// Add code snippet to: dct-functions.php
////////////////////////////////////////////////////
add_filter('upload_mimes', 'dct_add_file_types_to_uploads');
function dct_add_file_types_to_uploads($file_types) {
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
    return $file_types;
}





///////////////////////////////////////////
// Enqueue JS & CSS assets for admin pages
//////////////////////////////////////////

add_action( 'wp_enqueue_scripts', 'dct_enqueue_child_theme_assets_admin_on_frontend', 100 );
function dct_enqueue_child_theme_assets_admin_on_frontend() {
    $child_version = wp_get_theme()->get('Version');

    // Add Child CSS/JS default admin
    dct_debug(text:__('Custom function to enqueue default admin assets on frontend.','dct'), advanced:false);

    // Add wp-color-picker with alpha
    wp_enqueue_style( 'wp-color-picker' );    
    wp_enqueue_script('dct-wp-color-picker-alpha', get_stylesheet_directory_uri().'/includes/vendor/wp-color-picker-alpha/wp-color-picker-alpha.min.js', array('jquery','wp-color-picker'), '3.0.4', array('strategy'=>'defer', 'in_footer'=>true) ); 
    
	// Add jquery default sortable & draggable
    wp_enqueue_script('jquery-ui-resizable');
    wp_enqueue_script('jquery-ui-sortable');
    
	// Add select from media library
    //wp_enqueue_media();
    
	// Add select2 css & js
    wp_enqueue_style('dct-select2-min-css', get_stylesheet_directory_uri().'/includes/vendor/select2/select2.min.css', array(), $child_version ); 
    wp_enqueue_script('dct-select2-min-js', get_stylesheet_directory_uri().'/includes/vendor/select2/select2.min.js', array('jquery'), $child_version, true ); 

    // Enqueue CodeMirror v6 custom bundle
    wp_enqueue_script( 'codemirror-dct-bundle', get_stylesheet_directory_uri().'/includes/vendor/codemirror6/codemirror-dct-bundle.min.js', array(), $child_version, true ); 
           
    // Add dct admin SCSS & JS
    dct_enqueue_asset(url: 'style-admin.scss', name:'dct-style-admin', requires: true, version: true);
    dct_enqueue_asset(url: 'includes/js/dct-base.js', requires: array('dct-wp-color-picker-alpha','jquery-ui-resizable','jquery-ui-sortable','dct-select2-min-js','codemirror-dct-bundle'), version:true);
    dct_enqueue_asset(url: 'includes/js/dct-admin.js', requires: array('dct-base-js'), version: true); 
 
}




// Shortcode to list single help panel contents in frontend documentation
// <div class="dct-custom-shortcode-help-panel-single"><div class="dct-panel-row dct-panel-row-collapse-help panel-row-help-contents-debugger-options" ><div class="dct-group dct-group-content "><p>Enable debug mode to use debugger panel for administrators and related functions during development.</p><p>The debugger panel can be accessed only by administrators in frontend and admin panel from the admin topbar button. It contains information about current post queries, theme status, PHP and JS logs and other information.</p><ul><li><b>Debug mode:</b> Enables debugger panel for administrators in frontend and admin panel, with PHP and JS logs, post queries, child theme status and other information.<br>Recommended only in development.</li><li><b>Debug mode advanced:</b> Adds more verbose to PHP and JS logs and enables developer mode in admin panel.<br>Recommended only in development, for advanced users.</li></ul><div class="dct-row-help-contents-related-info"><b>Related theme mods:</b><br><div class="dct-group dct-group-content dct-group-debug-field " data-mod-field="dct_debug_mode" data-mod-option=""><span class="debug-field-label"><div class="dct-tooltip dct-tooltip-left-top "><a class="dct-tooltip-btn" tabindex="-1" href="https://www.dctforwp.com/wp-admin/admin.php?page=dct-debugger"><span class="dashicons dashicons-editor-help "></span></a><span class="dct-tooltip-text"><code>dct_debug_mode</code><hr>Enables debugger panel for administrators in frontend and admin panel, with PHP and JS logs, post queries, child theme status and other information.<hr><b>Recommended only in development.</b></span></div> Debug mode <code>dct_debug_mode</code> <span class="dct-tag-count dct-tag-count-light">2</span></span><span class="debug-field-value"><pre class="dct-pre-code-expand ">{
    "enabled": true,
    "advanced": false
}</pre></span></div></div></div></div></div>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
add_shortcode( 'dct_docs_panel_help', 'dct_create_custom_shortcode_panel_help' );
function dct_create_custom_shortcode_panel_help( $atts ) {
	
	// Default options if no present and merge to get all
	$default_atts = array( 'slug'=>'', 'type'=>'row', 'title'=>'', 'collapsed'=>'false' );
	$attributes = shortcode_atts( $default_atts, $atts );
	
	// Create custom html to return
	$html_content = dct_create_panel_help_contents(slug:$attributes['slug'], type:$attributes['type'], title:$attributes['title'], collapsed:$attributes['collapsed'], panel_link:false);
	  
    dct_debug('Created shortcode html help panel '.$attributes['slug'], $attributes);
	return '<div class="dct-custom-shortcode-help-panel-single">'.$html_content.'</div>';	
}


// Shortcode to render panel in frontend documentation
// <div class="dct-custom-shortcode-panel-demo"><form method="post" class="dct-form-settings"><div class="dct-panel dct-panel-card  dct-panel-designer-options" data-panel="designer-options"><div class="dct-panel-title"><h4>SCSS Compiler settings</h4><div class="button-list"> <button type="button" data-action="panel-toggle-help" class="button dct-button dct-button-toggle button-small button-transparent dct-button-toggle-panel-help"><span class="button-label-show"><span class="dashicons dashicons-editor-help "></span> Show help</span><span class="button-label-hide"><span class="dashicons dashicons-editor-help "></span> Hide help</span></button></div></div><div class="dct-panel-content"><div class="dct-panel-row dct-panel-row-collapse-help panel-row-help-contents-designer-options" ><div class="dct-group dct-group-content "><p>Set options for the SCSS compiler of child theme custom styles files.</p><ul><li><b>SCSS Compiler minify:</b> Minify CSS output when compiling SCSS files.<br>Recommended in production.</li><li><b>SCSS Autocompile:</b> Check for SCSS files updates and compile CSS output if required. Useful for editing custom files in an external editor and update them with FTP.<br>Recommended only in development.</li></ul><div class="dct-row-help-contents-related-info"><b>Related custom files:</b><br><div class="button-list"><div class="dct-tooltip dct-tooltip-left-bottom "><a class="button dct-button button-small dct-button-link-custom-file dct-button-link-custom-file-scss" href="https://www.dctforwp.com/wp-content/themes/dct-child-theme/style.scss" target="_blank"><span class="dashicons dashicons-media-code "></span> <b>SCSS</b> style.scss</a><span class="dct-tooltip-text"><code>/style.scss</code><hr>Base SCSS to be compiled as child theme styles.<br><b>Editing this file is not recommended.</b><br>It is automatically regenerated when the child theme information is updated.<hr>Type: <b>SCSS</b><br>Size: 913 B<br>Modified: 2026/06/06 06:10:23<hr><small><span class="dashicons dashicons-external "></span> Open file in new tab</small></span></div><div class="dct-tooltip dct-tooltip-left-bottom "><a class="button dct-button button-small dct-button-link-custom-file dct-button-link-custom-file-scss" href="https://www.dctforwp.com/wp-content/themes/dct-child-theme/style-admin.scss" target="_blank"><span class="dashicons dashicons-media-code "></span> <b>SCSS</b> style-admin.scss</a><span class="dct-tooltip-text"><code>/style-admin.scss</code><hr>Base SCSS to be compiled as admin panel styles.<br><b>Editing this file is not recommended.</b><hr>Type: <b>SCSS</b><br>Size: 612 B<br>Modified: 2026/04/16 17:27:55<hr><small><span class="dashicons dashicons-external "></span> Open file in new tab</small></span></div><div class="dct-tooltip dct-tooltip-left-bottom "><a class="button dct-button button-small dct-button-link-custom-file dct-button-link-custom-file-css" href="https://www.dctforwp.com/wp-content/themes/dct-child-theme/style.css" target="_blank"><span class="dashicons dashicons-media-code "></span> <b>CSS</b> style.css</a><span class="dct-tooltip-text"><code>/style.css</code><hr>Compiled CSS child theme for frontend styles.<br><b>Editing this file is not recommended.<br>It will be overwritten by the SCSS compiler.</b><hr>Type: <b>CSS</b><br>Size: 3 KB<br>Modified: 2026/06/09 15:56:54<hr><small><span class="dashicons dashicons-external "></span> Open file in new tab</small></span></div><div class="dct-tooltip dct-tooltip-left-bottom "><a class="button dct-button button-small dct-button-link-custom-file dct-button-link-custom-file-css" href="https://www.dctforwp.com/wp-content/themes/dct-child-theme/style-admin.css" target="_blank"><span class="dashicons dashicons-media-code "></span> <b>CSS</b> style-admin.css</a><span class="dct-tooltip-text"><code>/style-admin.css</code><hr>Compiled CSS child theme for admin panel styles.<br><b>Editing this file is not recommended.<br>It will be overwritten by the SCSS compiler.</b><hr>Type: <b>CSS</b><br>Size: 120 KB<br>Modified: 2026/06/09 15:56:54<hr><small><span class="dashicons dashicons-external "></span> Open file in new tab</small></span></div></div><hr><b>Related theme mods:</b><br><div class="dct-group dct-group-content dct-group-debug-field " data-mod-field="dct_scss_compiler" data-mod-option=""><span class="debug-field-label"><div class="dct-tooltip dct-tooltip-left-top "><a class="dct-tooltip-btn" tabindex="-1" href="https://www.dctforwp.com/wp-admin/admin.php?page=dct-designer&tab=options"><span class="dashicons dashicons-editor-help "></span></a><span class="dct-tooltip-text"><code>dct_scss_compiler</code><hr>Set options for SCSS compiler of child theme custom files.</span></div> SCSS Compiler <code>dct_scss_compiler</code> <span class="dct-tag-count dct-tag-count-light">2</span></span><span class="debug-field-value"><pre class="dct-pre-code-expand ">{
    "minify": true,
    "autocompile": false
}</pre></span></div></div></div></div><div class="dct-panel-row dct-panel-row-settings" ><div class="dct-group dct-group-input dct-group-input-toggle dct-group-input-settings-fields"><label><input type="checkbox" name="dct_scss_compiler_minify"  checked class="dct-checkbox-toggle">SCSS Compiler minify<div class="dct-tooltip dct-tooltip-right "><span class="dashicons dashicons-editor-help "></span><span class="dct-tooltip-text"><code>dct_scss_compiler</code><hr>Minify CSS output when compiling SCSS files.<hr><b>Recommended in production.</b></span></div></label><p class="help-text">Recommended in production.</p></div><div class="dct-group dct-group-input dct-group-input-toggle dct-group-input-settings-fields"><label><input type="checkbox" name="dct_scss_compiler_autocompile"  class="dct-checkbox-toggle">SCSS Autocompile<div class="dct-tooltip dct-tooltip-right "><span class="dashicons dashicons-editor-help "></span><span class="dct-tooltip-text"><code>dct_scss_compiler</code><hr>Check for SCSS files updates and compile CSS output if required. Useful for editing custom files in an external editor and update them with FTP.<hr><b>Recommended only in development.</b></span></div></label><p class="help-text">Recommended only in development.</p></div></div></div><div class="dct-panel-footer"><div class="button-list btns-panel-footer-update-reset"><button type="submit" class="button dct-button dct-button-submit button-primary button-hero" name="dct-action-designer-options" value="update"  data-action="submit-form-update"><span class="dashicons dashicons-update-alt "></span> Update & Compile</button><button type="submit" class="button dct-button dct-button-submit button-danger" name="dct-action-designer-options" value="reset"  data-action="submit-form-reset"><span class="dashicons dashicons-trash "></span> Reset</button></div><div class="dct-debug-panel-action-inputs-hidden"><div class="dct-group dct-group-input dct-group-input-hidden "><label>dct-debug-panel-action--name</label><input type="hidden" name="dct-debug-panel-action--name" value="dct-action-designer-options" disabled></div><div class="dct-group dct-group-input dct-group-input-hidden "><label>dct-debug-panel-action--value</label><input type="hidden" name="dct-debug-panel-action--value" value="update/reset" disabled></div></div></div></div></form></div>
////////////////////////////////////////////////////////////
add_shortcode( 'dct_docs_panel_demo', 'dct_create_custom_shortcode_panel_demo' );
function dct_create_custom_shortcode_panel_demo( $atts ) {
	
	// Default options if no present and merge to get all
	$default_atts = array( 'slug'=>'', 'options'=>['type'=> 'card', 'collapsed'=>'false'] );
	$attributes = shortcode_atts( $default_atts, $atts );
	
	// Calls custom function name with attributes
	$html_content = $attributes['slug']($attributes['options']);
	
	dct_debug('Created shortcode panel demo '.$attributes['slug'], $attributes);
	return '<div class="dct-custom-shortcode-panel-demo">'.$html_content.'</div>';	
}

Example of PHP code extracted from custom file.

dct-code-editor-demo-file-php-file-name

dct-code-editor-demo-file-php-file-path

Error! File not found: /custom/php/no-file.php
Cannot get source file contents to use in code editor.

Example of file not found.

Code editor inline

dct_group_code_editor(name:'', file:'', code:'', lang:'', editable:true, toolbar:true, help:'', classes:'')

Use code and lang (scss/css/javascript/php/html/xml) for inline code editor.

dct-debug-panel-action--name

dct-debug-panel-action--value

Docs: Help

About Help

Help

Settings Dashboard

Settings Edit child theme

Settings Child theme screenshot

Settings Status

Settings Tools: Reset theme mods

Settings Tools: Reset custom fields

Debugger Debugger options

Debugger How to debug

Use debugger panel log for PHP and JS

Use $dct object in PHP and JS

Debugger Debugger panel options

Debugger Maintenance mode

Designer SCSS Compiler options

Designer Global variables: Colors

Designer Global variables: Fonts

Designer Global variables: Sizes

Developer Enqueue assets

Developer Custom local assets

Developer Post types

Developer Taxonomies

Developer Custom fields

Developer How to use custom fields

Customizer Preloader

Customizer Admin panel

Customizer Dashboard custom widget

Customizer Login page

Customizer Login page custom JS

Code editor Add & edit custom code

Code editor File selector

Code editor Child theme functions and variables

Code snippets

CSS Background frost blur

SCSS Background frost blur

JS GSAP Animations

PHP Header meta viewport accessibility

PHP Images sizes

PHP SVG images media library upload support

PHP Search results post types

PHP Shortcode custom with options

PHP WooCommerce products grid adjustments

PHP WooCommerce single product gallery adjustments

Developers

Demo Contents

Content row featured

Content title

Content subtitle

Content row default

Content title

Content subtitle

Buttons default

Buttons sizes & colors

Transparent buttons

Buttons links

Buttons toggle

Buttons custom files

Custom file button

Custom files buttons list

Partials styles: SCSS

Custom files: JS

Custom files: PHP

Sections tabs

Content title

Content subtitle

Icons

Admin Menu

Welcome Screen

Post Formats

Media

Image Editing

Databases

Block Editor

TinyMCE

Posts Screen

Sorting

Social

WordPress.org

Buddicons