Quickstart
Start new website development
- Install DCT by uploading zip file through WordPress admin panel Appearance > Themes > Add theme > Upload theme or uploading dct-child-theme folder to WordPress /wp-content/themes/ directory with FTP.
- Activate DCT for WP in Appearance > Themes (check default template twentytwentyfive is installed).
- Edit child theme info in Child theme > Settings > Edit child theme info. Update child theme name, version, author info, screenshot and select parent theme to use from installed templates selector.
- Enable debug mode to start development in Child Theme > Debugger > Debugger settings. Allowed logged users can toggle the debugger panel through the top bar button in the admin panel and frontend.
- Enable maintenance mode during development in Child Theme > Debugger > Maintenance mode. The site will be disabled for all users except allowed logged users with a customized page and message.
- In Child Theme > Designer > SCSS Compiler disable minify during development for easy debugging and enable autocompile to update custom files with an external editor and upload them via FTP (will check custom files and compile if required).
- Set your global variables in Child theme > Designer > Global variables. Add colors with shade versions, fonts with optional import, numbers and sizes. These global variables will be available in child theme custom files code and customizer panels.
- Select all assets to enqueue you need on the frontend and/or admin panel in Child theme > Developer > Assets enqueue. Use the selector for external CDN (like gsap or three.js), add a custom url or upload assets to directory /dct-child-theme/custom/assets/ to use them as local assets.
- Register all custom post types you need (posts and pages) in Child theme > Developer > Post Types. Edit options, labels and admin panel sidebar menu.
- Register all taxonomies you need (categories and tags) in Child theme > Developer > Taxonomies. Associate them with your registered CPT or default post types, edit options and labels.
- Register all custom fields metabox you need in Child Theme > Developer > Custom fields. Associate metabox to any registered post type and edit custom fields list and options.
- Enable and customize a page preloader for frontend pages in Child Theme > Customizer > Page preloader. Select an animated svg or image from media library.
- Customize admin panel sidebar colors and logo, top bar colors and links and admin panel footer credits in Child theme > Customizer > Admin panel
- Customize the login page for all users: background, form styles, footer links and add custom JS in Child theme > Customizer > Login page.
- Create your contents. Use the debugger panel and functions to debug your PHP and JS code. Edit any child theme custom file with integrated code editor or with external editor and upload them with FTP to /dct-child-theme/custom/ extension subfolder. SCSS autocompile will check for partials files updates and compile all if required.
- Use custom files code (SCSS / JS / PHP) to add functionality and styles to child theme:
Deploy website to production
- Disable debug mode in Child theme > Debugger > Debugger settings. The debugger panel and related functions will be disabled.
- Disable maintenace mode in Child theme > Debugger > Maintenance mode. Site will be enabled again for all users.
- Edit child theme info in Child theme > Settings > Edit child theme info to update child theme version, for cache purposes on assets enqueue.
- In Child theme > Designer > SCSS Compiler enable minify and disable autocompile. On save all SCSS files will be recompiled and minified.
- It is recommended to update permalinks in Settings > Permalinks and check that Discourage search engines from indexing this site is disabled in Settings > Reading.
Update and debug live websites
- To debug a live site, enable debug mode in Child theme > Debugger > Debugger settings to enable the debugger panel and related functions on frontend check theme status, current query and PHP/JS logs.
- Enabling maintenance mode in Child theme > Debugger > Maintenance mode is optional, recommended if it is going to take too long to fix or update the website.
- Update your custom files code with the integrated code editor or with an external editor and upload them via FTP to the corresponding folder. Use SCSS Compiler to update all styles or enable autocompile.
- Once all errors are fixed and contents updated, disable debug mode in Child Theme > Debugger > Debugger settings. Also, disable maintenance mode if needed in Child theme > Debugger > Maintenance mode.
- Edit child theme info in Child theme > Settings > Edit child theme info to update child theme version, for cache purposes on assets enqueue.
- In Child theme > Designer > SCSS Compiler enable minify and disable autocompile. On saving, all SCSS files will be recompiled and minified to styles.css file.
Documentation modules
This documentation is separated into eight different modules, corresponding to child theme overview, settings, debugger, designer, developer, customizer, code editor and help center.
The contents of all the documentation panels and debugger panel are real, used by this website.
All screenshots and demo panels are from this same site, and show real data used to debug, design, develop and code all the dctforwp.com site.
Also, debug mode is enabled and the debugger panel is available for all users at any time, not only administrators, through top right button.
By default, all custom file buttons allow editing via the code editor in admin panel. For this documentation, they will open on the documentation code editor page, with the current content used for this website.

General features
Child theme to use with any installed template.
Basic mode and advanced mode with a code editor for every panel.
Contextual help for panels and options with links to Codex.
Help summary, code snippets and developer options.
Settings module
Child theme dashboard with quick options and current status.
Edit child theme info, version, parent theme, author and screenshot.
Child theme status and tools for theme mods and custom files.
Debugger module
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.
Designer module
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.
Developer module
Enqueue local/external assets to the frontend and admin panel.
Register custom post types (posts/pages), options and labels.
Register taxonomies (categories/tags), options and labels.
Register custom fields meta box, fields and options.
Advanced mode to edit related PHP code.
Customizer module
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 module
Integrated code editor to update custom files:SCSS / CSS / JS / PHP / HTML / JSON
Includes autocomplete, dark/light mode and search options.
Custom files buttons and list to edit directly with code editor.
Code editor integrated in advanced mode panels.
Help center module
Contextual help for panels and options with links to Codex.
Help summary with all child theme panels and options.
Code snippets examples list to use with the code editor.
Developer utilities for advanced customizations.
