Back to Community
Home / Community / Core → Localhost installs

Why Your Local WordPress Site Looks Broken: Fixing Missing CSS and Styling Issues

34 threads Sep 7, 2025 Core → Localhost installs

Content

If you've set up a local WordPress development environment using tools like XAMPP, MAMP, or Local by Flywheel, only to find your themes display as plain text without any styling, you're not alone. This is one of the most common issues faced when starting with local development. This guide will walk you through why this happens and the most effective solutions to get your site looking right.

Why Does This Happen?

The core of the problem almost always lies in how the browser is trying to load your site's assets, like CSS files, JavaScript, and images. On a live server, the website address (URL) is a fixed domain name. On your local machine, this address is often localhost or a specific IP address. If WordPress is configured to look for files in one place, but the browser is trying to load them from another, those requests fail, resulting in a broken, unstyled site.

How to Fix Missing CSS on Your Local WordPress Site

1. Check and Correct Your WordPress and Site Address URLs

This is the most common fix. If your WordPress Address and Site Address are set to something like http://localhost:8888 but you are accessing the site through a different URL (like your machine's IP address), the asset links will break.

  1. Log into your WordPress admin dashboard (e.g., http://localhost:8888/wp-admin).
  2. Navigate to Settings > General.
  3. Ensure both the WordPress Address (URL) and Site Address (URL) fields match the exact URL you are using to view your site in the browser's address bar.
  4. Save changes. You may need to log in again.

2. Investigate Using Your Browser's Developer Tools

Your browser's built-in developer tools are your best friend for diagnosing this issue. They will show you exactly which files are failing to load.

  1. Open your broken local site in Chrome or Firefox.
  2. Right-click on the page and select Inspect.
  3. Open the Console tab. Any errors loading CSS or JavaScript files will be listed here in red.
  4. Open the Network tab and reload the page. Look for any files (especially .css files) that have a status code like 404 (Not Found) or 403 (Forbidden). This tells you the server couldn't find the file or didn't have permission to serve it.

3. Verify File Permissions

Incorrect file permissions can prevent the local server (Apache/Nginx) from reading and serving your theme's CSS files. This is a common issue on Linux-based local setups (including Ubuntu in a virtual machine).

  • Navigate to your WordPress installation directory (e.g., /var/www/html/ or htdocs).
  • Run the following commands to reset permissions (you may need to use sudo):
    find /path/to/your/wordpress/ -type f -exec chmod 644 {} ;
    find /path/to/your/wordpress/ -type d -exec chmod 755 {} ;

4. Understand That Some "Missing" Images Are Normal

As seen in the sample threads, there is often confusion about demo content. Many themes showcase beautiful demo sites with placeholder images and sample pages. The theme itself often does not include these images; they are part of a separate demo content import process.

If you activate a new theme and see a basic, unstyled page with your site's title and a sample post, that is often the expected behavior until you add your own content or import the theme's demo data.

5. For Advanced Network Access

If you are trying to access your local site from another device on your network (e.g., viewing your VM's site from your host machine), you must change the WordPress Address and Site Address from localhost to the local IP address of the machine hosting the site (e.g., http://192.168.1.50). The 'Localhost Installs' team suggests this is a critical step for cross-network previewing.

When to Look Elsewhere

If the solutions above don't resolve your issue, the problem might be specific to your theme or a plugin. A recommended step is to temporarily switch to a default WordPress theme like Twenty Twenty-Two to see if the problem persists. If the default theme works, the issue is likely with your custom theme's configuration or a plugin conflict.

For theme-specific issues, such as missing social icons or customizer problems, it's best to seek help in that theme's dedicated support forum where its developers can provide specific guidance.

By methodically working through these steps—starting with your site's URL settings—you can almost always resolve the frustrating issue of a broken-looking local WordPress installation and get back to building your site.

Related Support Threads Support