Test for Theme or Plugin Conflicts

Overview

WordPress websites often combine:

• A theme
• Multiple plugins
• Custom CSS
• Custom JavaScript
• Caching
• Security tools
• CDN services
• Hosting-level optimization

A conflict can occur when another component changes the scripts, styles, markup, dimensions, permissions, or scrolling behavior required by a KineticHub block.

Possible symptoms include:

• A block is missing from Gutenberg
• The editor preview is blank
• The frontend block is invisible
• An animation does not start
• Media does not load
• Sticky behavior fails
• Buttons or controls cannot be clicked
• A block works for administrators but not visitors
• The problem appears only on mobile
• The issue begins after activating or updating another plugin
• Browser errors reference several different plugins

Conflict testing should be performed methodically.

Do not deactivate several systems and then reactivate them randomly. That makes the result difficult to interpret.

Create a backup first

Before changing plugins, themes, or optimization settings, create a complete backup containing:

• WordPress database
• Plugin files
• Theme files
• Uploads
• Configuration files
• Custom code

Confirm that the backup can be restored.

Conflict testing normally does not delete content, but disabling plugins can temporarily change:

• Shortcodes
• Forms
• Membership access
• Ecommerce behavior
• Cached pages
• Theme layouts
• Scheduled tasks
• Custom post types

A tested backup provides a safe rollback point.

Use a staging website

Perform conflict testing on staging whenever possible.

A staging website allows you to:

• Deactivate plugins without affecting visitors
• Change themes safely
• Disable caching
• Inspect errors
• Reproduce the page
• Test simplified layouts
• Enable debugging
• Compare configurations

The staging website should resemble production closely enough to reproduce the issue.

Copy:

• The affected page
• The active theme
• Relevant plugins
• KineticHub settings
• Media files
• Custom CSS
• Cache and optimization configuration

A staging copy that does not reproduce the issue may be missing the actual conflicting condition.

Record the original setup

Before testing, record:

• Active theme
• Active child theme
• Active plugins
• KineticHub version
• Free or PRO edition
• WordPress version
• PHP version
• Affected block
• Page URL
• Browser and device
• Current cache settings
• Current optimization settings
• Relevant custom CSS or JavaScript

Take screenshots of important settings.

This makes it easier to restore the original configuration.

Reproduce the issue consistently

Before deactivating anything, confirm the exact steps required to reproduce the problem.

For example:

1. Open the affected page
2. Scroll to Kinetic Split Scroll
3. Observe that media does not pin
4. Reload the page
5. Confirm the problem occurs again

A good reproduction should describe:

• Expected behavior
• Actual behavior
• Desktop or mobile
• Logged-in or logged-out state
• Required interaction
• Whether the problem occurs every time
• Whether it began after a recent change

Do not begin conflict testing when the issue cannot be reproduced reliably.

Check KineticHub first

Before testing other plugins, confirm:

• KineticHub is active
• The affected block is enabled
• The correct Free or PRO package is active
• Free and PRO are not active simultaneously
• The page is updated
• Required media or content exists
• The current KineticHub version is installed
• The issue continues after clearing caches

A missing required setting is not a plugin conflict.

Clear caches before testing

Clear:

• Browser cache
• WordPress page cache
• Object cache
• Generated CSS
• Generated JavaScript
• Server cache
• CDN cache
• Separate mobile cache
• Guest optimization cache

Then reproduce the problem again.

An outdated generated asset can resemble a plugin conflict.

After changing any plugin during testing, clear relevant caches again.

Start with optimization plugins

Caching and optimization tools are frequent sources of frontend differences.

Test these features first:

• Delay JavaScript
• Combine JavaScript
• Defer JavaScript
• Remove Unused CSS
• Critical CSS
• Combine CSS
• Asynchronous CSS
• Guest Mode
• Mobile cache
• Lazy loading
• Script manager
• CDN rewriting

Disable one feature at a time.

Purge all generated assets after every change.

Recommended order

1. Disable JavaScript delay
2. Disable JavaScript combination
3. Disable Remove Unused CSS
4. Disable Critical CSS
5. Disable CSS combination
6. Disable third-party lazy loading
7. Disable guest-specific optimization
8. Purge page and CDN caches

When the problem disappears, re-enable the settings individually to identify the exact feature.

Test security plugins

Security plugins can interfere with:

• REST API requests
• External media
• YouTube or Vimeo embeds
• Inline configuration
• Administrator settings
• JavaScript requests
• File access
• Freemius license communication
• Plugin updates

Check security logs before disabling anything.

Look for:

• Blocked REST endpoints
• Blocked scripts
• Firewall rules
• Content Security Policy restrictions
• Upload restrictions
• Hotlink protection
• External request blocking
• Nonce or permission failures

Temporarily disable the specific rule on staging.

Do not permanently disable the entire security system without identifying the exact conflict.

Test animation and scrolling plugins

Plugins that modify page movement can affect:

• Scroll-triggered animations
• Sticky positioning
• Intersection Observer
• Scroll progress
• Pointer events
• Viewport calculations
• Parent transforms

Pay particular attention to:

• Smooth-scroll plugins
• Page-transition systems
• Animation libraries
• Parallax plugins
• Sticky-header plugins
• Scroll-snap plugins
• Cursor plugins
• Popup and modal plugins

Temporarily disable these plugins on staging and test again.

A plugin may create a transformed page wrapper or custom scroll container even when no visible effect is selected on the affected page.

Test other block collections

Other Gutenberg block plugins may add:

• Global editor CSS
• Global frontend CSS
• Block restrictions
• Custom wrappers
• JavaScript libraries
• Broad SVG rules
• Button resets
• Overflow rules
• Editor filters

When a KineticHub block works outside a third-party container but fails inside it, the conflict may be limited to that parent block.

Test:

1. KineticHub at the top level
2. Inside a normal WordPress Group
3. Inside the third-party container

This distinguishes a global plugin conflict from a nesting compatibility issue.

Test visibility and membership plugins

Visibility, membership, and personalization plugins can hide content based on:

• User role
• Login status
• Device
• Date
• Location
• Membership level
• Query parameter
• Cookie
• Consent state

When a block works for administrators but not visitors, check these plugins before changing KineticHub.

Inspect both the KineticHub block and its parents.

The parent section may contain the actual visibility condition.

Test media and privacy plugins

Media-related plugins can alter:

• Image URLs
• Video markup
• Audio access
• Lazy loading
• YouTube iframes
• Vimeo embeds
• CDN domains
• Consent placeholders

Test plugins providing:

• Image optimization
• WebP or AVIF conversion
• Media offloading
• Private media
• Cookie consent
• Video privacy
• CDN integration
• Hotlink protection

Disable the relevant transformation or exclusion on staging.

Do not assume that the KineticHub media source itself is incorrect when another plugin replaces it.

Test custom CSS plugins

Custom CSS can interfere with KineticHub through broad selectors.

Common examples include rules targeting:

button

svg

canvas

video

.wp-block-group

[class*="kh-"]

Temporarily disable the custom stylesheet or comment out the suspected section on staging.

Check:

• Theme Additional CSS
• Site Editor CSS
• Child theme styles
• Custom CSS plugins
• Page-level CSS
• Custom HTML blocks
• Code-snippet plugins

Restore the CSS in smaller sections until the conflicting rule is found.

Test custom JavaScript

Custom JavaScript may:

• Stop after an error
• Modify KineticHub markup
• Remove classes
• Replace media
• Capture clicks
• Add overlays
• Change scrolling
• Reuse internal KineticHub class names
• Initialize duplicate components

Temporarily disable custom JavaScript from:

• Code-snippet plugins
• Theme options
• Child theme files
• Tag managers
• Custom HTML blocks
• Analytics integrations
• Header and footer script plugins

Check the browser Console after each change.

The first JavaScript error is usually more useful than later errors.

Avoid internal KineticHub class names

Custom demos and components should not reuse classes beginning with KineticHub’s internal namespaces.

For example, a manually created audio preview using:

kh-ap-play
kh-ap-waveform
kh-ap-bar

can override the real Kinetic Audio Player on the same page.

Use a unique namespace such as:

site-audio-preview-
custom-doc-demo-
my-project-component-

A class collision can affect only one page, making it appear like an intermittent plugin conflict.

Basic plugin conflict test

On staging:

1. Create a backup
2. Confirm the problem
3. Keep KineticHub active
4. Disable caching and optimization
5. Deactivate all nonessential plugins
6. Clear all caches
7. Reload the affected page
8. Test the editor
9. Test the public frontend
10. Test while logged out

Do not deactivate plugins required to keep the site accessible unless you understand their function.

Examples include:

• Maintenance controls
• Required ecommerce components
• Hosting integration
• Critical security authentication
• Multilingual routing

Use a controlled staging environment.

Interpret the first result

The problem disappears

Another plugin or its configuration is causing the conflict.

Continue by reactivating plugins methodically.

The problem continues

The cause may involve:

• Active theme
• Child theme
• Custom code
• KineticHub configuration
• Saved block data
• Server environment
• Media source
• A KineticHub bug

Proceed to theme testing and simplified-page testing.

Reactivate plugins in groups

When many plugins are installed, reactivate them in small groups.

Example:

1. Forms and ecommerce
2. SEO and analytics
3. Caching and performance
4. Security
5. Gutenberg extensions
6. Media tools
7. Animation and scrolling
8. Membership and visibility
9. Custom-code plugins

Test after each group.

When the issue returns, deactivate that group and test its plugins individually.

This is faster than testing every plugin separately from the beginning.

Reactivate one plugin at a time

Within the suspected group:

1. Activate one plugin
2. Clear relevant caches
3. Reload the page
4. Reproduce the issue
5. Record the result
6. Continue with the next plugin

When the issue returns after activating one plugin, test it again to confirm.

Do not stop after one inconsistent result.

Check plugin configuration

A conflict may be caused by one setting rather than the complete plugin.

For the suspected plugin:

1. Keep the plugin active
2. Disable its relevant feature
3. Clear caches
4. Retest KineticHub
5. Re-enable the feature
6. Confirm the conflict returns

Examples:

• JavaScript delay
• Smooth scrolling
• Mobile cache
• YouTube consent blocking
• Block allowlist
• Custom cursor
• Overflow containment
• SVG sanitization
• Private media

A targeted setting change is preferable to permanently disabling a useful plugin.

Test the active theme

When the issue continues after disabling other plugins, test a default WordPress theme on staging.

Use a current standard theme available on the site.

Then:

1. Activate the default theme
2. Clear all caches
3. Open the affected page
4. Test the editor
5. Test the public frontend
6. Test desktop and mobile

Do not switch themes on a busy production website.

A theme change can alter menus, templates, widgets, global styles, and layout.

Interpret the theme test

The problem disappears with the default theme

The active theme or child theme is involved.

Inspect:

• Theme frontend CSS
• Editor CSS
• Theme JavaScript
• Template wrappers
• Content width
• Overflow
• Transforms
• Sticky headers
• Smooth scrolling
• Button and SVG styles
• Block allowlists
• Global animations

The problem continues

The cause may involve:

• KineticHub
• Server configuration
• Media source
• Saved page content
• Browser
• WordPress core
• Remaining required plugin
• Hosting optimization

Continue with a simplified test page.

Test the parent theme and child theme separately

A child theme may contain custom code not present in the parent theme.

When appropriate on staging:

1. Activate the parent theme
2. Clear caches
3. Test the issue
4. Compare with the child theme

If the parent works and the child fails, inspect:

• style.css
• functions.php
• Editor styles
• Custom templates
• Enqueued scripts
• Custom filters
• Additional block styles

Do not overwrite the child theme before identifying the change.

Create a simplified test page

Create a new staging page containing only:

1. A normal WordPress Group block
2. The affected KineticHub block
3. Required text or media
4. Default KineticHub settings

Avoid:

• Complex templates
• Custom classes
• Synced patterns
• Third-party containers
• Large Spacer blocks
• Custom HTML
• Additional animations
• Conditional visibility

Publish the test page and reproduce the issue.

Interpret the simplified-page test

The fresh block works

The problem is likely related to:

• Original page structure
• Parent container
• Saved block configuration
• Custom CSS
• Synced pattern
• Template
• Page-specific code

Compare the working and failing blocks one setting at a time.

The fresh block also fails

The conflict is probably global.

Continue checking:

• Theme
• Plugins
• Global settings
• Browser errors
• Server environment
• Missing KineticHub assets

Test outside the original parent

When a nested KineticHub block fails:

1. Duplicate the block
2. Move the duplicate to the top level
3. Place it inside a normal Group
4. Remove custom classes
5. Use default alignment
6. Test the frontend

If it works, inspect the original parent for:

• Overflow
• Transform
• Perspective
• Z-index
• Pointer overlays
• Fixed height
• Allowed inner blocks
• Inherited SVG or button styles

This is a nesting conflict rather than a general plugin failure.

Check block allowlists

Themes and plugins can limit allowed Gutenberg blocks through:

• Role settings
• Post-type settings
• Template restrictions
• Parent block restrictions
• Custom PHP filters
• Editorial plugins

When KineticHub is missing only from the inserter, test:

• A normal new page
• An administrator account
• A top-level block position
• The main inserter rather than a nested inserter

A block that appears at the top level but not inside one container is registered correctly.

Check browser extensions

Browser extensions can interfere with:

• YouTube and Vimeo
• Scripts
• Tracking
• Cookies
• Popups
• Media
• Page styling

Test in:

• A private browser window
• Another browser
• A browser profile without extensions

Pay attention to:

• Ad blockers
• Privacy extensions
• Script blockers
• Accessibility tools
• Dark-mode extensions
• Password managers
• Translation extensions

When the issue occurs only in one browser profile, it is not necessarily a WordPress plugin conflict.

Check logged-in and logged-out behavior

Caching and optimization often differ between administrators and visitors.

Test:

• Logged in as administrator
• Logged out
• Private browser window
• Different user role
• Real mobile device

Record whether the issue occurs in each state.

Works while logged in only

Check:

• Guest cache
• Guest JavaScript delay
• CDN HTML cache
• Membership visibility
• Consent tools
• Logged-out security restrictions

Works while logged out only

Check:

• Administration toolbar
• Editor/frontend scripts
• User-specific CSS
• Logged-in optimization exclusions
• Role-based visibility
• Preview mode

Check browser Console errors

Open developer tools and review the Console.

Record:

• First error
• File name
• Line number
• Plugin or theme path
• Whether the error occurs before KineticHub initialization

A conflict may be caused by another plugin even when the final error mentions KineticHub.

An earlier error can stop shared browser execution or leave the page in an incomplete state.

Check Network requests

Open the Network panel and confirm:

• KineticHub CSS loads
• KineticHub JavaScript loads
• Media loads
• REST requests succeed
• No required file returns 404
• No request returns 403
• No server response returns 500
• The active Free or PRO directory is correct
• Old generated files are not being served

Filter requests by:

kinetichub

Also inspect requests belonging to the suspected plugin or theme.

Check WordPress Site Health

Go to:

Tools → Site Health

Review critical issues involving:

• REST API
• Loopback requests
• PHP version
• File permissions
• HTTPS
• Scheduled events
• Persistent object cache
• Server communication

Site Health does not identify every conflict, but it can reveal environmental problems that affect several plugins.

Enable debugging on staging

For technical troubleshooting, enable WordPress logging on staging.

Use private logging rather than displaying errors publicly.

Review:

• WordPress debug log
• Hosting PHP error log
• Web server error log
• Security log
• Cache-plugin log

Look for errors generated when:

• Opening Gutenberg
• Loading the affected page
• Activating the block
• Saving settings
• Triggering media or modal behavior

Do not leave public error display enabled on production.

Check PHP compatibility

A conflict may occur when a plugin or theme uses code incompatible with the current PHP version.

Possible symptoms include:

• White screen
• Partial page output
• Missing dynamic block
• REST request failure
• Plugin activation error
• PHP fatal error

Check:

• Current PHP version
• KineticHub requirements
• Theme requirements
• Suspected plugin requirements
• Hosting error logs

Do not change production PHP versions without testing all critical site functionality on staging.

Check WordPress compatibility

After a WordPress update, an older plugin or theme may produce editor errors.

Confirm that:

• KineticHub is current
• The active theme is current
• Gutenberg-related plugins are current
• The suspected plugin supports the installed WordPress version
• Browser caches were cleared

Do not update every component simultaneously while trying to identify one conflict.

Record the current state and change one variable at a time.

Check for incomplete updates

A failed plugin or theme update can leave:

• Missing JavaScript
• Missing CSS
• Old PHP with new assets
• New PHP with old assets
• Incomplete vendor files
• Broken generated files

Check the Network panel and server logs.

Reinstall a clean official package when files are missing.

Create a backup before replacing plugin or theme files.

Check plugin load order

WordPress plugins can register hooks at different priorities.

Conflicts may occur when another plugin:

• Deregisters a script
• Replaces a library
• Filters block registration
• Removes block types
• Alters content output
• Changes REST permissions
• Rewrites media URLs

Changing activation order is not a reliable permanent repair.

Identify the specific hook, setting, or compatibility issue instead.

Check duplicate libraries

Two plugins may load different versions of:

• Animation libraries
• Slider libraries
• Modal libraries
• Utility scripts
• Polyfills

Possible symptoms include:

• Duplicate initialization
• Console warnings
• Event handlers running twice
• Broken modal behavior
• Inconsistent animation
• Global variable conflicts

Record the loaded script URLs and report them to the relevant plugin developers.

Do not manually remove a dependency from plugin files because updates will overwrite the change.

Check duplicate Free and PRO installations

KineticHub Free and KineticHub PRO should not be active simultaneously.

Check Plugins → Installed Plugins for:

• KineticHub Free
• KineticHub PRO
• Old renamed copies
• Development copies
• Manually duplicated folders

Duplicate active packages can produce:

• Duplicate block registration
• Duplicate PHP classes
• Mixed assets
• Wrong dashboard status
• Inconsistent frontend behavior

Keep only the intended edition active.

Resolve the conflict safely

After identifying the cause, possible resolutions include:

• Disable one conflicting setting
• Add a targeted optimization exclusion
• Update the conflicting plugin or theme
• Replace broad custom CSS
• Rename custom internal classes
• Move the KineticHub block outside an incompatible parent
• Use native scrolling
• Allow required REST or external requests
• Repair missing files
• Report a compatibility bug
• Replace an abandoned plugin

Avoid modifying third-party plugin files directly.

Use:

• Child theme
• Site-specific plugin
• Documented filter
• Official settings
• Targeted CSS
• Vendor support

Verify the final solution

After applying the correction:

1. Restore all required plugins
2. Restore the intended theme
3. Clear all caches
4. Test the original page
5. Test the simplified page
6. Test Gutenberg
7. Test the public frontend
8. Test while logged out
9. Test mobile
10. Test related KineticHub blocks
11. Check Console and Network errors
12. Confirm no critical site feature was affected

A conflict is not fully resolved until the complete site configuration is restored and retested.

Keep a conflict log

Record:

• Date
• Affected page
• KineticHub version
• Conflicting plugin or theme
• Conflicting version
• Exact setting
• Reproduction steps
• Temporary workaround
• Permanent resolution
• Support ticket reference

This is useful when the conflict returns after a future update.

Report the issue to the correct developer

When the cause is confirmed, contact:

• KineticHub support when KineticHub fails in a standard supported environment
• Theme developer when the theme introduces the conflicting layout or script
• Optimization-plugin developer when generated assets break the block
• Security-plugin developer when required requests are blocked
• Hosting provider when server responses or permissions fail
• Media provider when external playback is unavailable

A precise conflict report is more useful than stating that two plugins “do not work together.”

Recommended troubleshooting sequence

Use this order:

1. Create a backup
2. Reproduce the issue
3. Record the current setup
4. Clear all caches
5. Confirm KineticHub settings and version
6. Test while logged out
7. Disable optimization features
8. Test security restrictions
9. Test animation and scrolling plugins
10. Deactivate nonessential plugins on staging
11. Reactivate plugins in groups
12. Test the suspected plugin individually
13. Test a default WordPress theme
14. Test parent and child themes separately
15. Create a simplified test page
16. Move the block outside the original parent
17. Check Console and Network errors
18. Check Site Health and server logs
19. Apply the narrowest correction
20. Restore and retest the complete site

Troubleshooting

The problem disappears when all other plugins are disabled

Reactivate plugins in groups, then individually, until the problem returns.

Clear caches after each change.

The problem returns after enabling the cache plugin

Disable its optimization features individually.

Start with JavaScript delay and Remove Unused CSS.

The block works with a default theme

Inspect the original theme’s CSS, JavaScript, templates, overflow, transforms, and editor integrations.

The block works in the parent theme but not the child theme

Inspect the child theme’s CSS, functions.php, templates, and enqueued scripts.

The block works at the top level but not inside another block

The parent container is causing a nesting or layout conflict.

Inspect allowed blocks, overflow, transforms, dimensions, stacking, and inherited styles.

The block works for administrators but not visitors

Check guest cache, optimization, visibility rules, membership plugins, consent tools, and CDN HTML caching.

The issue occurs only in one browser

Test without browser extensions and in a clean browser profile.

Check browser-specific media or graphics support.

The issue occurs only on mobile

Check mobile cache, touch behavior, responsive CSS, Mobile Motion, Reduced Motion, and mobile optimization.

Disabling JavaScript delay fixes the issue

Exclude the affected KineticHub frontend script from delayed execution.

Retain other optimization settings when they continue working.

Disabling Remove Unused CSS fixes the issue

Exclude the relevant KineticHub stylesheet or selector namespace.

Regenerate the optimized CSS.

Disabling a security plugin fixes the issue

Review its logs and allow the specific REST, media, script, iframe, or external request.

Do not leave the complete security plugin disabled unnecessarily.

A custom HTML section breaks a KineticHub block

Check whether it reuses KineticHub internal class names or includes broad CSS selectors.

Rename the custom classes and scope the styles.

No plugin or theme conflict is found

Continue checking:

• Required block content
• Browser errors
• Server logs
• Media URLs
• Saved block attributes
• WordPress and PHP compatibility
• Missing plugin files
• A reproducible KineticHub bug

Collect diagnostic information before contacting support.

Information to collect for support

Before contacting KineticHub support, collect:

• KineticHub version
• Free or PRO edition
• WordPress version
• PHP version
• Affected block
• Page URL
• Expected behavior
• Actual behavior
• Reproduction steps
• Active theme and version
• Child theme status
• Active plugin list
• Suspected plugin and version
• Optimization settings
• Relevant custom CSS or JavaScript
• Browser and device
• Logged-in or logged-out result
• Console errors
• Failed Network requests
• WordPress or server log errors
• Whether the issue occurs with other plugins disabled
• Whether it occurs with a default theme
• Whether it occurs on a simplified test page
• Whether the block works outside its original parent
• Screenshot or short screen recording

Do not include:

• Passwords
• Complete license keys
• Payment information
• Private access credentials
• Sensitive customer information

Next step

Continue with Collect Information Before Contacting Support to prepare a complete report that allows KineticHub support to reproduce and investigate the problem efficiently.