WordPress Theme Update Broke Website - Rollback Steps

You click "Update Theme" and the dashboard says "Theme updated successfully." You go look at your site. The homepage looks fine. Then you check another page.

The layout is broken. Sidebar is on top. Custom styling is gone. A plugin that was working is now showing errors. Your contact form is laid out weird. A few pages have white space where content should be.

You panic. You try deactivating plugins. Nothing helps. The theme broke something and you don't know how to fix it.

This happened to a client last month. They updated their theme, their entire site's styling broke, and custom code they had from the developer stopped working. We rolled it back in 3 minutes. Their panic was worse than the actual problem.

Most theme updates cause zero issues. But when one does break, you need to know exactly what steps to take to recover. This guide is those steps.

Why Theme Updates Break Sites

When you update a theme, you're replacing two things:

  1. The template files (header.php, footer.php, functions.php, etc.)
  2. The stylesheet and JavaScript files (style.css, custom.js, etc.)

If you've customized the theme directly (edited files in the theme folder), those customizations get overwritten. The update doesn't know about your changes.

Specific things that break:

  • Custom functions you added to functions.php: The update replaces the entire functions.php, deleting your custom code
  • Custom CSS you added to style.css: Overwritten in the update
  • Custom template files you edited: If you modified page.php or single.php, the update replaces it
  • Plugin compatibility: A plugin hooks into the old theme structure. The update changes that structure and the plugin breaks
  • JavaScript changes: The update changes how the theme handles events. Custom scripts that relied on the old behavior fail
  • Responsive design changes: The update rewrites the media queries. Your custom responsive code conflicts
  • WooCommerce compatibility: If you're using WooCommerce, theme updates can break product pages, cart, checkout
  • Menu/widget display: The update changes how menus and widgets render. Custom display code breaks

The real issue: When you edit a theme's files directly, you're creating a time bomb. Any update will overwrite your changes. It's not a question of if your customizations will break, it's when.

Quick Diagnosis: What Broke?

Before rolling back, understand what's broken so you can prevent it happening again.

Check which pages are broken

  1. Visit your homepage — broken or OK?
  2. Visit a blog post — broken or OK?
  3. Visit a page — broken or OK?
  4. Visit WooCommerce product page (if you use it) — broken or OK?
  5. Visit contact form or custom page — broken or OK?

Pattern spotting: If ALL pages are broken, the theme's main layout is broken. If only some pages are broken, specific template files are the issue. If only WooCommerce is broken, it's a WooCommerce template incompatibility.

Check browser console for errors

  1. Visit a broken page
  2. Press F12 (open Developer Tools)
  3. Go to Console tab
  4. Look for red error messages (JavaScript errors)

JavaScript errors tell you which script is broken. Copy the error message—you might need it later.

Check admin debug log

  1. Edit wp-config.php
  2. Add: 
    define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
  3. Visit a broken page on the frontend (this generates PHP errors)
  4. Download wp-content/debug.log
  5. Search for "error" or "warning"

PHP errors tell you if a function is missing, if a hook changed, or if the theme and a plugin are conflicting.

Emergency Rollback: The Fastest Fix

The fastest fix is rolling back to the theme version that was working. This takes 5 minutes and you get your site back immediately.

We'll fix the root cause afterward. Right now, get your site stable.

Option A: Rollback via WordPress Admin (Easiest)

Only works if your admin is still accessible. If pages are broken but admin works, try this first.

  1. Go to Appearance > Themes
  2. Find your current broken theme
  3. Click "Details"
  4. Look for a link to view the theme on wordpress.org
  5. On wordpress.org, look for the Changelog or Versions section
  6. Find the previous version number (e.g., if current is 2.5, go to 2.4)
  7. Download version 2.4 as a .zip file
  8. Back in WordPress, go to Appearance > Themes > Add New
  9. Upload the .zip file of the previous version
  10. Activate the older version
  11. Visit your site—it should work again

Option B: Rollback via FTP (Best if admin is broken)

If your admin is inaccessible or completely broken:

  1. Connect via FTP to your server
  2. Navigate to wp-content/themes/
  3. Find your theme's folder (e.g., mytheme)
  4. Download the entire folder to your computer (this is your backup)
  5. Go to the theme's website or wordpress.org and download the previous version
  6. Extract the previous version on your computer
  7. Upload the extracted folder to wp-content/themes/ via FTP (overwrite the current folder)
  8. Visit your site—it should work again

Why this works: You're replacing the broken theme with the version that was working. You get your site back. Done.

Option C: Rollback from Backup (Fastest if available)

If you have automatic backups via UpdraftPlus, BackWPup, or your hosting:

  1. Find the backup from just before the theme update (likely yesterday or earlier today)
  2. Restore the theme folder only (not the whole site)
  3. Visit your site—it should work again

This is the fastest method if you have backups. Most backup plugins let you restore individual folders.

Step 2: Understand What Went Wrong

Now that your site is stable on the old version, let's figure out why the update broke things.

Check if you edited the theme directly

This is the most common cause. If you used a theme customization plugin (like Elementor, Divi, or a page builder), customizations should be safe. But if you edited the theme's PHP files, those edits got overwritten.

Questions to ask yourself:

  • Did I add custom code to functions.php?
  • Did I edit header.php or footer.php?
  • Did I add custom CSS to style.css?
  • Did I create custom template files?

If yes to any of these, that's your problem. Direct edits don't survive updates.

Check if a plugin is incompatible with the new theme

  1. Activate the new theme version again (temporarily)
  2. Go to Plugins
  3. Deactivate all plugins
  4. Visit your site—does it work now?
  5. If yes, reactivate plugins one-by-one, testing after each
  6. When it breaks again, you've found the incompatible plugin
  7. Roll back to the old theme version
  8. Keep that plugin deactivated until it's updated

Check the theme's changelog

On wordpress.org or the theme developer's site, look at what changed in the update:

  • Did they change the hook/filter names? (Your custom code hooked into the old names)
  • Did they change the template structure? (Your template overrides no longer work)
  • Did they change CSS class names? (Your custom CSS targets the old class names)
  • Did they drop support for something you use? (WooCommerce, custom post types, etc.)

The changelog often explains breaking changes.

Step 3: Decide: Stay Old or Fix and Update

You now have a choice:

Choice A: Stay on the Old Version (Short-term Safe)

Keep using the version that works. Don't update.

Pros:

  • Your site works right now
  • No more surprises
  • You have time to figure out the real fix

Cons:

  • You miss security updates and bug fixes
  • Eventually the old version becomes incompatible with WordPress core or plugins
  • This is a band-aid, not a solution

How to do this: Some themes have a "lock to version" option in their settings. Or disable automatic updates for that theme and ignore the "update available" notice.

Choice B: Fix the Issue and Update (Long-term Solution)

This is the right choice. Figure out what broke and fix it properly.

How:

  1. Use a child theme for future customizations (see "Step 4" below)
  2. Move any custom code from the parent theme to the child theme
  3. Test the new theme version with all your customizations in the child theme
  4. Update to the new version

This solves the problem forever. Theme updates won't touch your child theme, so your customizations survive.

Step 4: Use a Child Theme to Protect Customizations

A child theme is a lightweight theme that inherits from your main theme but doesn't get overwritten on updates.

This is the WordPress-approved way to customize a theme without breaking on updates.

Create a child theme (if you don't have one)

  1. Connect via FTP
  2. Navigate to wp-content/themes/
  3. Create a new folder called mytheme-child (replace "mytheme" with your theme name)
  4. Create a file called style.css in that folder with this content: 
    /*
Theme Name: My Theme Child
Template: mytheme
Version: 1.0
Text Domain: mytheme-child
Domain Path: /languages
*/

@import url("../mytheme/style.css");
  5. Create a file called functions.php in that folder with: 
    <?php
// Child theme setup
add_action( 'wp_enqueue_scripts', 'mytheme_child_enqueue_styles' );
function mytheme_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
  6. Upload both files
  7. Go to Appearance > Themes and activate the child theme

Your site looks exactly the same. But now all your customizations go in the child theme, not the parent.

Move custom code to child theme

Custom functions: Instead of editing the parent theme's functions.php, add them to the child theme's functions.php

Custom CSS: Instead of editing the parent theme's style.css, add it to the child theme's style.css (after the @import statement)

Custom templates: Instead of editing the parent theme's page.php, copy page.php to the child theme and edit the copy

Now when the parent theme updates, your customizations in the child theme are safe.

Step 5: Test the New Theme Version with Your Customizations

Before going live with the new theme version, make sure it works with your setup.

Option A: Test on Staging

If you have a staging environment:

  1. Clone your site to staging
  2. Update the theme version on staging
  3. Test every page type (homepage, blog posts, pages, WooCommerce, contact form)
  4. Test with all plugins active
  5. Test on mobile
  6. If everything works, update on production

Option B: Test Locally

If you don't have staging:

  1. Download your site using a plugin like All-in-One WP Migration or Duplicator
  2. Install a copy on your computer or a local development server
  3. Update the theme there
  4. Test everything
  5. If it works, update your live site

What to test

  • Homepage loads and looks right
  • Blog posts display correctly
  • Pages display correctly
  • WooCommerce pages (if you use it) work
  • Contact forms work
  • Custom post types display correctly
  • Navigation menus work
  • Sidebars and widgets display correctly
  • Images load
  • Links work
  • Search works
  • Mobile responsiveness
  • All plugins still work
  • No JavaScript console errors
  • No PHP errors in debug.log

If you find an issue, fix it before updating production.

Step 6: Update to the New Version

Once you've tested and fixed everything:

  1. Go to Appearance > Themes
  2. Click "Update" on your theme
  3. Wait for it to complete
  4. Visit your site and do a quick visual check
  5. Check debug.log for any new errors
  6. Done

This time, it should work. You've fixed the root cause and tested thoroughly.

Real-World Broken Theme Update Story

Scenario: A client's WordPress site was built with Elementor. They had a Genesis theme with a lot of custom functions added directly to functions.php. A major Genesis update came out. They updated it without testing. Everything broke.

What happened:

  • Genesis updated and removed several hooks they were using in functions.php
  • Their custom code tried to use those hooks but they no longer existed
  • PHP threw fatal errors
  • The entire site crashed with a white screen
  • Elementor pages showed as blank because the parent theme was broken

Our fix:

  1. Rolled back via FTP (3 minutes)
  2. Created a Genesis child theme
  3. Moved all their custom functions to the child theme's functions.php
  4. Checked Genesis's changelog to see what hooks changed
  5. Updated their custom code to use the new hooks (30 minutes)
  6. Tested thoroughly on staging (20 minutes)
  7. Updated the live site (2 minutes)

Total time: 1 hour. Their site was stable within 3 minutes. The rest was proper fixing.

When to Contact the Theme Developer

Contact the developer if:

  • The update broke something that was working and you didn't customize the theme
  • A WooCommerce page broke and you didn't edit WooCommerce templates
  • The developer's own documentation shows a feature that no longer works
  • You found what broke, but it's in the theme's code, not your customizations

What to send them:

  • Before/after screenshots
  • Which page it happens on
  • Theme version and WordPress version
  • List of active plugins
  • PHP errors from debug.log (if any)
  • JavaScript console errors (if any)

Most theme developers respond within 24 hours if there's a real bug.

Prevention: Stop Updates from Breaking Your Site

1. Use a child theme for all customizations

This prevents overwriting on updates. Non-negotiable.

2. Test on staging before production

Catch issues before they affect your live site.

3. Keep backups

Auto-backup daily. If an update breaks things, restore and try again.

4. Know what changed

Read the changelog before updating. If you see breaking changes that affect you, wait or prepare.

5. Update regularly

Don't let your theme get 10 versions behind. Big jumps are more likely to break things.

6. Use themes from trusted sources

Themes from wordpress.org and major theme companies test updates more thoroughly. Cheaply coded themes from sketchy marketplaces have more bugs.

Theme Update Broken Site Checklist

Site broken after theme update?

  • ✓ Note what's broken (which pages, which features)
  • ✓ Check browser console for JavaScript errors
  • ✓ Check debug.log for PHP errors
  • ✓ Roll back to previous version (FTP, admin, or backup)
  • ✓ Verify site works on old version

Now find the cause:

  • ✓ Did you edit the theme directly? (Move code to child theme)
  • ✓ Is a plugin incompatible? (Test with all plugins deactivated)
  • ✓ Is it a known issue? (Check theme changelog)
  • ✓ Contact theme developer if it's a bug

Before updating again:

  • ✓ Create/use a child theme
  • ✓ Move customizations to child theme
  • ✓ Test on staging or local
  • ✓ Update on production

The Real Talk

Theme updates are scary because they touch your entire site's layout. When one breaks things, it feels catastrophic.

But here's the reality: 99% of theme updates work fine. The 1% that breaks are usually caused by direct theme edits, where you modified files that shouldn't be modified. Or incompatible plugins. Or hosting environment issues.

You can prevent 100% of breaking theme updates by using a child theme. I'm not exaggerating. If you use a child theme, theme updates can't touch your customizations. Your site stays stable.

The reason most people have broken theme updates is they don't know about child themes. They edit the theme directly, and then get surprised when an update overwrites their work.

Use a child theme. Everything else gets easier.