BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty fourteen

Troubleshooting Common Twenty Fourteen Theme Slider Issues

16 threads Sep 16, 2025 Theme → Twenty fourteen

Content

The Twenty Fourteen theme's featured content slider is a popular design element, but it can sometimes be a source of frustration. Based on community reports, here are the most common slider problems and their potential solutions.

1. Slider Not Showing or Disappearing

The Problem: The slider fails to appear on the page, only shows a grid, or disappears after navigating away from the homepage.

Why It Happens: This is frequently caused by caching, either from a plugin or your hosting provider. The cached version of the page may not include the dynamic JavaScript that powers the slider. Plugin conflicts can also prevent the slider from initializing correctly.

How to Fix It:

  • Clear All Caches: Clear any caching from your plugins (e.g., W3 Total Cache, WP Super Cache) and your server/hosting dashboard.
  • Disable Caching Temporarily: Deactivate your caching plugin entirely to see if the slider appears. If it does, you'll need to reconfigure your cache settings or add an exclusion for the homepage.
  • Check for Plugin Conflicts: Deactivate all plugins except Twenty Fourteen's core 'Featured Content' functionality. If the slider works, reactivate your plugins one by one to identify the culprit.
  • Verify Post Settings: Ensure your slider posts are tagged correctly (the tag must match the one set in Appearance → Customize → Featured Content) and are marked as 'Sticky'.

2. Slider Not Working on Mobile Devices

The Problem: The slider appears broken, frozen, or is not responsive on phones and tablets. It may appear as a thin strip or have a large gap.

Why It Happens: This is a known issue with the FlexSlider library in certain versions of the theme and can be exacerbated by custom CSS or other scripts.

How to Fix It:

  • Use a Custom CSS Snippet: A common fix for slider positioning on mobile is to adjust its z-index property, which controls its stacking order. Try adding this CSS (via a child theme or a custom CSS plugin): 
    .rev_slider_wrapper {
    z-index: 1;
}
  • Consider Hiding the Slider on Mobile: If a fix proves too difficult, a common workaround is to disable the slider on small screens using CSS media queries, forcing the grid view instead.

3. Unwanted White Space or Grey Overlay

The Problem: Excess white space appears around or below the slider, or a grey overlay appears on images when hovering.

Why It Happens: White space is often a layout issue caused by the theme's structure or content below the slider (like widgets). The grey overlay is a default design feature of the theme.

How to Fix It:

  • Remove the Hover Overlay: To remove the grey overlay on hover, add this CSS: 
    .featured-content .post-thumbnail:hover:after {
    display: none;
}
  • Reduce White Space: Inspect your page using a browser tool (like Chrome DevTools) to identify the HTML element causing the space. You can then target it with custom CSS to reduce its margin or padding.
  • Use Larger Images: Ensure your slider images are high-resolution and properly sized for the theme's layout to prevent gaps on the sides.

4. Slider Images Not Loading (Width of Zero)

The Problem: Slider images fail to load, and inspecting the page shows the image URL has a parameter like ?w=0.

Why It Happens: This is almost always a conflict with the Jetpack plugin's Photon module, which serves images from its CDN and can sometimes interfere with the slider's image sizing.

How to Fix It: Go to Jetpack → Settings and disable the 'Speed up images and photos' (Photon) module. Clear your cache and check if the slider images load correctly.

If you continue to experience issues, the WordPress support forums for the Twenty Fourteen theme are an excellent resource for getting help from the wider community.

Related Support Threads Support