Reputation: 577

Wordpress does not properly display CSS file

I have a crazy problem happening and it is blowing my mind. I installed Wordpress on my Localhost and began developing. I modified the standard twenty twelve theme and add custom HTML and CSS to the whole site (4 or 5 pages.) The site shows up great on my local machine (Mac OSX - Safari 6.0.5, Firefox 23.0. Chrome 29.0).

I transferred my site to my live host (under GoDaddy) and I migrated the database by dumping it and then importing it. Now I can pull my site up under both my localhost and by going to the live host URL and the site looks exactly like it should. However, when I crosscheck the CSS via sites like (browsershots.org and browserstack) the site look terrible. Its almost like the main style.css file is not being linked properly. These browser check sites shows the site in ruins on all operating systems and all browsers. Still though when I bring the site up on my personal machine it looks just as it should. My client pulled the site up from their machine and it looked in ruins, just as the css checking sites depicted it.

I have cleared my browser cache thinking I may be reloading a cached version of the site (giving me false hope that it looks good) however it still appears just like it should while viewing the remote version through my local machine.

Side note:All elements of the page appear to be loading fine. The menu bar is there. The text and content is there. It's just not styled.

Does anyone have any idea what may be going on?

Upvotes: 0

Answers (4)

Ennui

Reputation: 10190

You need to update all instances of the site URL in your database. Partially this can be acccomplished by going into the admin panel and changing the site and home urls in Settings->General (or by a number of other methods like adding code to wp-config).

See here for details: Changing The Site URL (WP Codex)

That will probably fix your CSS problem (assuming you used get_stylesheet_directory_uri() or 'wp_enqueue_style` or any of the similar functions in your template call to it).

My preferred way of doing it is using this great serialized string find and replace script for WP. This will go through your entire database (or whichever tables you select - the important ones are usually wp_options and wp_posts) and update all instances of the old url (e.g. localhost/whatever) and update it to the new web url.

It also has the advantage of not breaking serialized strings, which makes it better than doing a basic UPDATE SQL query through phpMyAdmin or similar. Serialized strings are used by some things in WordPress like text widgets and many plugins.

Just upload the searchreplacedb2.php script to your web directory root (where wp-config.php lives) and go to it in your browser.

Upvotes: 1

JP Lew

Reputation: 4439

it's still linking to localhost. Here is your stylesheet URL:

http://localhost/Sites/michael/wp-content/themes/twentytwelve/style.css?ver=3.6

You need to search & replace your DB and replace the localhost address. Use this: http://interconnectit.com/products/search-and-replace-for-wordpress-databases/

Upvotes: 0

djphinesse

Reputation: 979

Looks like you haven't updated the settings in WP and everything is still pointing to localhost. Once you do that, everything should work out fine!

Upvotes: 0

Nick Tomlin

Reputation: 29251

The site is trying to serve the files from your localhost.

From the WP Codex:

When your domain name or URLs change - i.e. from http://example.com/blog to http://example.com, or http://example.com to http://example.net - there are additional concerns. The files and database can be moved, however references to the old domain name or location will remain in the database, and that can cause issues with links or theme display. You need to change the site urls in your database before moving to a new host.

You will need to change those hardcoded urls, either by manually searching and replacing them in your database, or using this script.

Wordpress does not properly display CSS file

Answers (4)

Related Questions