Migrating a WordPress website can sometimes lead to a distorted, collapsed, or disorganized homepage. This is especially common when moving a site from a subdirectory or local development environment to the root domain. In this guide, I’ll walk you through how to rectify this issue effectively.

This fix is ideal for:

• Websites previously built in a subdirectory: E.g., https://www.exampledomain.com/demo moved to https://www.exampledomain.com.
• Websites developed offline: E.g., websites designed on WAMP or XAMPP and then uploaded to the main domain.

Before the Fix

Below is a screenshot of how my WordPress site looked before applying the fix. It was disorganized and missing key elements after migration.

Here is what i always do

The Fix: Step-by-Step

Step 1: Update URLs in the WordPress Database

The most common cause of this issue is incorrect URLs in the database. To fix this:

1. Access the WordPress Database: Log in to your hosting control panel (e.g., cPanel) and open phpMyAdmin.
2. Find the Options Table: Navigate to the table called options. This table is typically prefixed with your database prefix, such as wpcg_options.
3. Update URLs:
   • Locate the following rows:
     • siteurl
     • home
   • Edit these rows to reflect the correct domain you have migrated to. For example:
     • From: http://localhost/demo
     • To: https://www.exampledomain.com

   

   Click browse and update the URLs to new website

   

4. Save your changes.

Step 2: Clear Browser and WordPress Cache

Cached data can sometimes prevent updates from appearing. Clear your browser cache and, if you use caching plugins, clear your WordPress cache as well.

Step 3: Regenerate Permalinks

• Log in to your WordPress dashboard.
• Go to Settings > Permalinks.
• Without changing any settings, click Save Changes.
  This refreshes your permalinks and resolves broken link issues.

After the Fix

Once you’ve updated the URLs and cleared your cache, your website should load correctly. Below is a screenshot of my website after applying these steps:

The New problem i got after fixing the disorganized collapsed  website was  “Internal Server Error”

HOW TO FIX Internal Server Error

let’s now look at how to fix Internal Server Error in the inner pages of the WordPress website.

The home  page was loading well, but the new pages where not working. what i did was to fix the .htaccess file. when designing a website from a sub folder, usually WordPress puts a folder name in the .htaccess file of the folder your working from.

Moving these files up outside folder you have been working from, means you need to edit .htaccess file manually

This was how the .htaccess file was looking before i fixed it

Then i edited and removed out the folder names in the .htaccess file., below is the final edited file

After the .htaccess file edit. All my pages loaded well

Related Questions to this Fix;
Why is my WordPress site messed up?
How do I redesign a WordPress site without going live?
Why is my WordPress site not showing the correct page?
Why does my WordPress site look different
WordPress home page not working
Why is my Elementor site not displaying correctly
Website will work in subdirectory but not root directory
How to Move WordPress from a Subdirectory to the Root