Back to DigiFlash

Debugging DigiFlash Issues

Debugging block themes requires understanding both WordPress core functionality and browser-based block editor behavior. DigiFlash issues typically stem from conflicts with plugins, theme customizations, or server configuration rather than the theme itself.

Enabling WordPress Debug Mode

Enable WordPress debugging by editing wp-config.php in your site’s root directory. Add these constants before the “That’s all, stop editing!” line:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
define('SCRIPT_DEBUG', true);

WP_DEBUG: Enables debugging mode
WP_DEBUG_LOG: Writes errors to /wp-content/debug.log
WP_DEBUG_DISPLAY: Prevents errors from displaying on frontend (recommended)
SCRIPT_DEBUG: Loads unminified CSS and JavaScript files

After adding these, WordPress logs all PHP errors, warnings, and notices to the debug log file.

Checking the Debug Log

Access the debug log at /wp-content/debug.log via FTP or file manager. Look for errors related to:

  • DigiFlash functions
  • Template loading issues
  • Pattern registration problems
  • Block rendering errors

Network Tab

Monitor file loading in the Network tab:

  1. Open Network tab
  2. Refresh the page
  3. Look for files with status codes:
    • 404: File not found (missing CSS/JS)
    • 500: Server error
    • CORS errors: Cross-origin issues

Filter by file type (JS, CSS, Img) to identify specific problems.

Elements Tab

Inspect rendered HTML to verify:

  • Block classes are applied correctly
  • CSS variables are defined
  • Theme styles are loading
  • Inline styles from theme.json are present

Right-click any element and select “Inspect” to view its HTML and applied styles.

Debugging Block Editor Issues

Checking Block Validity

Invalid blocks appear with warning messages in the editor. Open the block, click the three dots, and select “Attempt Block Recovery” to fix validation issues.

If blocks consistently become invalid:

  1. Deactivate all plugins
  2. Test if blocks remain valid
  3. Reactivate plugins one by one to identify the conflict

Block Pattern Debugging

When patterns fail to appear or render incorrectly:

Check pattern registration in functions.php:

function debug_registered_patterns() {
    $patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();
    error_log('Registered Patterns: ' . print_r($patterns, true));
}
add_action('init', 'debug_registered_patterns', 999);

This logs all registered patterns to debug.log. Verify your DigiFlash patterns appear in the list.

Check pattern categories:

function debug_pattern_categories() {
    $categories = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered();
    error_log('Pattern Categories: ' . print_r($categories, true));
}
add_action('init', 'debug_pattern_categories', 999);

Site Editor Not Loading

If the Site Editor displays a blank screen or fails to load:

  1. Check browser console for JavaScript errors
  2. Disable all plugins
  3. Switch to a default WordPress theme (Twenty Twenty-Four)
  4. If the Site Editor works, the issue is with DigiFlash or a plugin conflict
  5. Reactivate DigiFlash and test again

Clear browser cache and disable browser extensions that might interfere with the editor.

Debugging Template Issues

Template Not Applying

Verify template exists and is assigned correctly:

function debug_current_template() {
    if (is_admin()) return;
    global $template;
    error_log('Current Template: ' . $template);
    error_log('Template Hierarchy: ' . print_r(get_body_class(), true));
}
add_action('wp', 'debug_current_template');

This logs which template file WordPress is using and the body classes applied.

Template Parts Not Displaying

Check if template parts are registered:

function debug_template_parts() {
    $template_parts = get_block_templates(array('post_type' => 'wp_template_part'));
    error_log('Template Parts: ' . print_r($template_parts, true));
}
add_action('init', 'debug_template_parts');

Verify header and footer template parts exist in /parts directory:

  • header.html
  • footer.html

Debugging Style Issues

Styles Not Applying

Check if theme.json is valid JSON:

  1. Copy your theme.json content
  2. Paste into jsonlint.com
  3. Fix any syntax errors reported

Common JSON errors:

  • Missing commas between properties
  • Trailing commas (not allowed in JSON)
  • Incorrect quote types (use double quotes)
  • Missing closing brackets

CSS Not Loading

Verify stylesheets are enqueued:

function debug_enqueued_styles() {
    global $wp_styles;
    error_log('Enqueued Styles: ' . print_r($wp_styles->queue, true));
}
add_action('wp_print_styles', 'debug_enqueued_styles');

Check if DigiFlash stylesheets appear in the list:

  • digiflash-style
  • digiflash-css

CSS Variables Not Available

Inspect the page source and verify CSS variables are defined in the <style> tag within <head>:

:root {
  --wp--preset--color--primary: #0066cc;
  --wp--preset--font-size--medium: 1rem;
  --wp--preset--spacing--40: 1rem;
}

If missing, theme.json is not loading correctly. Check for PHP errors in the debug log.

Debugging JavaScript Issues

Scripts Not Loading

Verify scripts are enqueued:

function debug_enqueued_scripts() {
    global $wp_scripts;
    error_log('Enqueued Scripts: ' . print_r($wp_scripts->queue, true));
}
add_action('wp_print_scripts', 'debug_enqueued_scripts');

jQuery Conflicts

If jQuery-dependent scripts fail, ensure jQuery is loaded:

function ensure_jquery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'ensure_jquery', 1);

Check browser console for:
$ is not defined
jQuery is not defined

These indicate jQuery isn’t loaded or is loading after scripts that need it.

Plugin Conflict Detection

Conflicts with plugins are the most common cause of DigiFlash issues.

Systematic Plugin Testing

  1. Deactivate all plugins
  2. Test if the issue persists
  3. If resolved, reactivate plugins one by one
  4. Test after each activation
  5. Identify the problematic plugin

Common Conflict Types

Caching Plugins: Clear cache after any theme changes
Page Builders: Can conflict with Site Editor (Elementor, WPBakery)
SEO Plugins: Rarely cause conflicts but may modify output
Security Plugins: May block Site Editor AJAX requests

Logging Plugin Conflicts

Add this to functions.php to log active plugins:

function debug_active_plugins() {
    $active_plugins = get_option('active_plugins');
    error_log('Active Plugins: ' . print_r($active_plugins, true));
}
add_action('init', 'debug_active_plugins');

Server Environment Debugging

PHP Version Issues

DigiFlash requires PHP 7.4 or higher. Check your PHP version:

function debug_php_version() {
    error_log('PHP Version: ' . PHP_VERSION);
}
add_action('init', 'debug_php_version');

If below 7.4, contact your hosting provider to upgrade.

Memory Limit Issues

Low memory can cause Site Editor failures. Check memory limit:

function debug_memory_limit() {
    error_log('Memory Limit: ' . WP_MEMORY_LIMIT);
    error_log('Max Memory: ' . WP_MAX_MEMORY_LIMIT);
}
add_action('init', 'debug_memory_limit');

Increase memory limit in wp-config.php:

define('WP_MEMORY_LIMIT', '256M');
define('WP_MAX_MEMORY_LIMIT', '512M');

Server Response Time

Slow servers affect Site Editor performance. Test server response:

function debug_server_time() {
    $start = microtime(true);
    // Simulate database query
    get_posts(array('posts_per_page' => 1));
    $end = microtime(true);
    error_log('Query Time: ' . ($end - $start) . ' seconds');
}
add_action('init', 'debug_server_time');

Response times over 1 second indicate server performance issues.

Database Debugging

Query Monitor Plugin

Install Query Monitor plugin for detailed database debugging:

  1. Go to Plugins > Add New
  2. Search for “Query Monitor”
  3. Install and activate

Query Monitor shows:

  • Database queries per page
  • Slow queries
  • Duplicate queries
  • PHP errors
  • HTTP requests

Access it via the admin bar while logged in.

Manual Query Debugging

Enable query logging in wp-config.php:

define('SAVEQUERIES', true);

Then add this function:

function debug_database_queries() {
    if (!is_admin() && defined('SAVEQUERIES') && SAVEQUERIES) {
        global $wpdb;
        error_log('Total Queries: ' . count($wpdb->queries));
        error_log('Query Details: ' . print_r($wpdb->queries, true));
    }
}
add_action('shutdown', 'debug_database_queries');

This logs all database queries to debug.log. High query counts (100+) indicate optimization needs.

Child Theme Debugging

When using a DigiFlash child theme:

Verify Parent Theme Loading

function debug_parent_theme() {
    $parent = wp_get_theme()->parent();
    if ($parent) {
        error_log('Parent Theme: ' . $parent->get('Name'));
        error_log('Parent Version: ' . $parent->get('Version'));
    } else {
        error_log('ERROR: No parent theme detected');
    }
}
add_action('after_setup_theme', 'debug_parent_theme');

If no parent theme is detected, check the Template: header in your child theme’s style.css.

Template Override Issues

Log which templates are loading:

function debug_template_loading() {
    error_log('Template: ' . get_page_template());
    error_log('Stylesheet Directory: ' . get_stylesheet_directory());
    error_log('Template Directory: ' . get_template_directory());
}
add_action('template_redirect', 'debug_template_loading');

This shows whether child or parent templates are being used.

AJAX Debugging

Block editor uses AJAX extensively. Debug AJAX requests:

function debug_ajax() {
    if (defined('DOING_AJAX') && DOING_AJAX) {
        error_log('AJAX Action: ' . $_REQUEST['action']);
        error_log('AJAX Data: ' . print_r($_REQUEST, true));
    }
}
add_action('init', 'debug_ajax');

Disabling All Debugging

After resolving issues, disable debugging in wp-config.php:

define('WP_DEBUG', false);
define('WP_DEBUG_LOG', false);
define('WP_DEBUG_DISPLAY', false);
define('SCRIPT_DEBUG', false);

Delete the debug.log file to remove logged errors. Leaving debugging enabled in production impacts performance and can expose sensitive information.

Similar Articles

Back to DigiFlash