Understanding and resolving JavaScript and CSS conflicts in WordPress themes can be challenging, especially when working with third-party plugins like Twenty20. Below is a professional, comprehensive blog article rephrased from your Reddit post, focusing on diagnosing and resolving the issue with the Twenty20 slider images not displaying due to potential conflicts.

Troubleshooting Twenty20 Slider: Images Not Displaying in a Custom WordPress Theme

When integrating third-party plugins into custom WordPress themes, encountering conflicts that prevent desired functionality is not uncommon. One such scenario involves the Twenty20 Image Before-After plugin, where the slider interface appears correctly—showing the handle and labels—but the images themselves fail to display. This article discusses how to identify and resolve such issues, particularly when using Tailwind CSS within a custom theme.

The Issue at a Glance

Observation: The Twenty20 slider is visible on the page, complete with the handle and “Before” label. However, the actual images are missing or collapsed, making the slider ineffective.

Back-end Impact: Additionally, attempts to add a new before-after slider through the Advanced Custom Fields (ACF) WYSIWYG editor result in the “Add Twenty20” button not functioning, indicating JavaScript initialization problems.

Sample Screenshot:

Front-end slider showing controls but no images.

Back-end ACF dialog box failing to open media modal.

Contextual Setup

The site is built from scratch with a custom theme, styled primarily using Tailwind CSS. Images are managed through ACF and dynamically passed into the shortcode that renders the Twenty20 slider.

Key Components:

• Theme: Fully custom-built
• Styling: Tailwind CSS
• Functionality: Using shortcode [twenty20 img1="URL" img2="URL"] with dynamic URLs from ACF.

Troubleshooting Steps Undertaken

1. Verifying Shortcode Syntax: Confirmed accurate usage of the shortcode, with correct image URLs.
2. Ensuring Script Loading: Manually deregistered and re-registered the plugin’s JavaScript files in functions.php to control loading order.
3. Overriding CSS: Applied CSS overrides (e.g., max-width: none !important;) to fix container sizing issues.
4. Explicit Initialization: Used jQuery to initialize the plugin on window load:

“`javascript
jQuery(window).on(“load”, function() {