Contents8 sections
You installed a new theme, WordPress said it was activated, and then the site looked wrong. Maybe the text has no styling, the layout looks nothing like the theme’s demo, or the menu has vanished. When a theme looks broken like this, it is a very common surprise, and the theme itself is rarely at fault.
Work through the six checks below in order. They start with the quickest and most likely causes. You do not need to edit any code.
Two words you will see a lot. A theme is the design package that controls how your whole site looks. A plugin is an add-on that gives WordPress an extra feature, such as a contact form or a shop. You manage both from the dashboard, the admin area at your site address followed by /wp-admin.
Before you start
- Make a backup: a saved copy of your files and content that you can restore if something goes wrong. Many hosts offer one-click backups in their hosting dashboard.
- Keep two browser tabs open, one on the dashboard and one on the public site. After each check, reload the public tab.
Check 1: You are seeing an old saved copy (cache)
A cache is a stored copy of your pages, kept so the site loads faster. After a theme change, the stored copy can still show the old design, or a mix of old and new. Your browser keeps one, and your host or a caching plugin may keep another.
- Open your site in a private window, which ignores your browser’s saved copy. In Chrome choose New Incognito window from the three-dot menu, in Firefox New private window, and in Safari File › New Private Window.
- If the site looks right there, only your own browser is behind. Clear its cached images and files in the browser’s settings.
- If it still looks wrong, look in the black toolbar at the top of the dashboard for a button such as Clear cache or Purge all, which caching plugins add. Click it.
- If your host has its own cache, clear it in the hosting dashboard too, usually under Caching or Performance. Then reload the private window.
Our tutorial Speed Up WordPress: 8 Checks That Actually Move the Needle explains page caching in more detail.
Check 2: The homepage and menus are not set up yet
A theme’s demo is a fully built example site. Your site starts with only your own content, which may be one sample post and no menu. So the homepage often shows a plain list of posts. Nothing is broken. The theme is waiting for you to tell it what to show.
Example. Before: the homepage shows your latest blog posts in a long column. After: you choose a page called Home as the front page, and the theme’s designed homepage appears.
- In the dashboard, go to Settings › Reading.
- Find Your homepage displays.
- If your theme’s guide says it uses a page as the homepage, choose A static page (select below), then pick your homepage in the Homepage list. If you have no such page yet, create one first under Pages › Add Page.
- Click Save Changes and reload your site.
Next, set up the menu. The steps depend on your kind of theme.
If your theme is a block theme
A block theme lets you design every part of the site in a visual editor. If the Appearance menu shows Editor, you have one.
- Go to Appearance › Editor.
- Click Navigation to see and edit your menus.
- To change the homepage layout, click Templates and open the homepage template. Many block themes include ready-made layouts called patterns.
Our guide Block Theme Patterns Explained shows how to use them.
If your theme is a classic theme
A classic theme is the older style. Its Appearance menu shows Customize and Menus.
- Go to Appearance › Menus.
- Build your menu, then tick where it should appear, such as Primary, under Menu Settings.
- Click Save Menu.
Check 3: The theme needs a companion plugin
Some themes rely on a partner plugin for parts of their design, such as extra blocks or sliders. Without it, those parts are missing or show as plain text. Themes usually say so in a notice at the top of the dashboard.
- Read any notice at the top of the dashboard and note the plugin it names. If there is none, check the theme’s documentation for “required” or “recommended” plugins.
- Go to Plugins › Add Plugin, search for the plugin by name, click Install Now, then Activate.
- Reload your site.
Some themes also offer a demo import, which adds the sample pages and images from the demo. It is optional. On a site with real content, try it on a test copy first.
Check 4: A child theme is missing its parent theme
A child theme is a small theme that borrows its design from another theme, called the parent. It only works when the parent is installed too. If the parent is missing, the site can lose its styling completely.
- Go to Appearance › Themes and scroll to the bottom.
- If you see a section called Broken Themes, read the description. It will say something like: The parent theme is missing. Please install the “Name” parent theme.
- Click Add Theme at the top of the screen, search for the parent theme by the name shown, and click Install. Do not activate the parent. Your child theme stays active and now has what it needs.
A related mix-up: some downloads are a bundle holding the real theme ZIP file plus documentation. Our tutorial How to Install a WordPress Theme from a ZIP File shows which file to upload.
Check 5: Another plugin is clashing with the theme
Sometimes a plugin and a theme try to control the same thing. The usual suspects are optimisation plugins, which shrink and combine your site’s style files so pages load faster. If they combine the new theme’s files the wrong way, the design falls apart.
To find out, switch plugins off and see whether the design comes back. Switching off (deactivating) does not delete a plugin, and its settings are normally kept. On a shop, do this on a test copy (a staging site, which many hosts provide) or at a quiet time, because checkout may stop while plugins are off.
- If you use an optimisation plugin, first turn off its options to combine or minify (shrink) CSS. CSS is the code that holds your design. Clear the cache as in check 1 and reload.
- If not, go to Plugins › Installed Plugins.
- Tick the checkbox at the top of the list to select all plugins.
- In the Bulk actions menu, choose Deactivate, then click Apply.
- Reload your site in a private window. If it now looks right, a plugin was the cause.
- Reactivate the plugins one at a time, reloading after each. When the design breaks again, the plugin you just activated is the one clashing.
- Leave that plugin off and tell its author, or the theme’s author, what you see.
Check 6: The site address does not match
A site address starts with http:// or the secure https://. If WordPress thinks the address is http but visitors arrive on https, browsers block the theme’s style files for safety, and the page loads as plain text.
Example. Your browser shows https://example.com, but WordPress Address (URL) says http://example.com. They do not match, so the styling is blocked.
- Go to Settings › General.
- Look at WordPress Address (URL) and Site Address (URL).
- Compare them with the address in your browser bar when you visit the site.
- If they differ only by http and https, ask your host to set both to the https address.
Please be careful here. A wrong value in these two boxes can lock you out of the dashboard, so let your host make the change. It is a routine request.
Still looks broken?
If all six checks are clear, the theme may not suit your WordPress or PHP version. PHP is the programming language your web server uses to run WordPress. Compare the theme’s requirements with your versions under Tools › Site Health › Info. Before you launch, our free Before-You-Launch Checklist is a good final pass.
If you are using a Locker Forge theme, Contact support and tell us which checks you have already done.