How to Troubleshoot and Fix your WordPress Website

by kristarella · 24 comments

Picture this:

You find and install your favorite WordPress theme. It’s almost perfect, but you’d like to make a few quick and simple changes to your design. You fire up your custom file editor, add some code, press save, and bam! Your WordPress website is broken.

Sound familiar?

It happens to all of us. I design websites powered by WordPress for a living and it happens to me, too! The trick is, when you break your website, you must learn how to fix it.

“But I don’t even know what I did wrong!”

Don’t panic. Keep reading to learn about two awesome tools that help you troubleshoot your WordPress website. Plus, as a bonus, I included 3 examples of common problems and how to fix them.

Tool 1: Troubleshoot your WordPress Design with W3C Validator

The W3C, the World Wide Web Consortium, promotes web standards and they have a bunch of tools to help you with that. For the purpose of this tutorial, I’d like to introduce you to the W3C Markup Validator.

w3c validator picture

Figure 1:This is what the W3C Markup Validator looks like. Visit the site, enter your url, and they show you the errors on your site

Personally, I recommend opening up the “More Options” section of the validator and selecting the option to show source. When that option is checked, the line number in the error message links to the corresponding line in the source code, which makes it easier to inspect where the error is occurring.

w3c validator more picture

Figure 2:When you click more options, you want to click the show source option.

There is also CSS validator. This tool helps you find errors in your CSS files, which is particularly useful when you make CSS changes and nothing happens to your site. Here’s what the CSS validator looks like:

css validator

Figure 3:See how the CSS validator looks? This great tool will troubleshoot your CSS.

Tool 2: Tweak Your Website Design with Firebug

Firebug is a Chrome or Firefox add-on that lets you inspect the HTML, CSS, and Javascript on your site. You already learned how Firebug helps you design your website, but it’s also indispensable for troubleshooting your website, too.

Without going into specifics here, I’d like to point you to two videos that show you how Firebug works when you use it to inspect your website’s code.

  1. Firebug Overview: Watch the video on the top right.
  2. How to Use Firebug for CSS

When is the ideal time to use Firebug? It’s great in a few specific cases:

  • Want to check out what CSS is being applied to an element on a website? Instead of digging through the code to figure out the CSS specificity, Firebug does that for you.
  • Let’s say your HTML markup isn’t matched up correctly. Firebug will help you find the errors so you can fix them in your custom_functions.php file.
  • Did you add a new piece of Javascript to your website? If it’s not working correctly, Firebug can help you figure out what’s wrong with Javascript, too.

Common Website Errors / FAQ

As an active participant on Twitter, I see tons of distressed bloggers who broke their website, and they often have one of the three following problems:

1. Why Are My Sidebars Below the Content?

If you tweaked your code and find your sidebars below your content, there are likely two reasons for this.

The most likely reason is a <div> tag without the corresponding </div> tag. Why does this cause your sidebars to drop below your content? Well, when you forget to close the <div>, your sidebar ends up inside your content layer, hence why your sidebars drop.

Let’s say you weren’t messing with your custom_functions.php. Then, this probably means there is a stray <div> in one of your most recent. Note, if you’re using Firebug, you can use the HTML tree to help find that stray <div> tag.

The second likely cause for sidebars to drop below the content is that the sidebars are too wide, which can be caused by adding borders, margins, or padding to #sidebars in the Thesis Theme Framework without adjusting the width accordingly.

To fix it, use Firebug to find the width of the #sidebars, subtract the width of your border, padding, or margins, and assign the new width to that element. Alternatively, it might work just as well to apply your custom styles to ul.sidebar_list instead because it doesn’t have a specific width and it only fills the available space in the #sidebars.

2. Why Aren’t My Changes to CSS Being Applied to the Page?

If you added some some CSS to your custom.css file, and nothing shows up on your page, there are two potential problems.

1. Errors in your CSS file

If there are certain errors in your file, CSS won’t work. These errors include a missing } at the end of a declaration, or an extra { or } somewhere in the file.

Then, if there’s a missing semi-colon at the end of a property:value pair, this will cause the next property:value pair to not be recognized.

Lastly, and least likely, you could have a spelling error. If it weren’t for Coda’s excellent auto-complete I would probably spell “color” as “colour” far more often (that’s how you spell it in Australia).

2. Your CSS isn’t specific enough

If your CSS is not being applied, there might be some other CSS that is taking priority. You can use Firebug to find what that CSS is. For more information about how to make your CSS more specific, check out my previous article on CSS specificity.

3. I edited my custom_functions.php and now my site has an error message!

When you add code into your WordPress theme with the theme editor, a tiny mistake can blow up your entire website. In Thesis, it’s no different. If you use the custom file editor to tweak your custom_functions.php, a code mistake will cause your entire website to turn into a blank white screen with an error message.

Personally, when I make changes to the custom_functions.php, I use FTP because a small error can be fixed with a simple “undo.” However, if you like the custom file editor, it’s no problem. Just make sure you have access to FTP in case you make an error.

So let’s talk about the error. Chances are, it will look something like this:

Parse error: syntax error, unexpected T_STRING in /path_to_your_thesis_folder/custom/custom_functions.php on line 25

At first, this error message seems like jibberish, right? It’s scary, too. You just want your site back!

However, while this may look scary, there’s actually a lot of information in that error that will help you fix your website. For example, the error says there is a syntax error on line 25 of your custom_functions.php.

What does this mean, specifically?

Quite simply, a syntax error means you made a mistake while creating your PHP structure; for example, individual lines/commands should end with a semi-colon, the contents of a function should be enclosed by curly braces, and some things should be wrapped in parentheses or quote marks.

Then, if you proceed further into the error, you see “unexpected T_STRING.” What’s the deal with that, you ask?

A T_STRING is essentially a “string,” that is, a group of characters. Usually a string is unexpected because a character that is crucial to PHP being parsed correctly is missing—sometimes the error will say which character was expected, but not always.

To find the missing character, look for a stray quote mark, bracket, or semi-colon in the line mentioned, or even more likely, the line just before the error occurred.

Another example of an error message is this:

Fatal error: Call to undefined function function_name() in /path_to_your_thesis_folder/custom/custom_functions.php on line 32

In this example, a function name is being requested that doesn’t exist. This tends to happen when yhou misspell a function name, or if you used a function from a plugin that is now deactivated.

To fix this error, remove the offending code, or to avoid running into the issue, when calling functions that you haven’t written yourself, you can use if (function_exists('function_name')) function_name(); to call the function, instead of just Function_name();.

When you use that piece of code, PHP will only run the function when it exists. If it doesn’t exist, it won’t run the function, meaning your site won’t break if you subsequently lose the ability to run that function.

Getting More Help

If you’ve exhausted the tools above, and still, you can’t fix your site, hit up the DIYthemes forums and/or Twitter. There’s loads of people in the Thesis community willing to help, and the excellent forums are part of what you paid for when you bought your DIYthemes membership.

Also, don’t forget to use the #thesiswp hashtag on Twitter. There’s always a lot of people interacting there (asking for help, giving help, and sharing advice).

Also, if you have any questions, please feel free to leave a comment!

About the Author: Kristarella is the mastermind behind Kristarella Studios, a Thesis Theme Design company. You can follow her on Twitter here or read some of her other tutorials at her blog.

If you enjoyed this article, enter your email below to get free updates!

{ 24 comments }

Barbara @ VinoLuciStyle

Even easier fix? Always save your current custom files as OLD; for instance customOLD.css and custom_functionOLD.php – amazing how much easier it is to revert back to that saved file than have to do a bunch of tests to figure out where you messed up!

JR Fent

Great information! Thank you so much for compiling this. I’ve had little issues in my blog that have been piling up. With this as a guide- I’m jumping in this weekend to do the fixes. Really appreciate the Effort you put into this.

JR

Mark Binder

Thanks for this. It’s very helpful.

I really miss being able to tell somebody to go to either
http://www.markbinder.com/store/

or

http://markbinder.com/store

Is there any way to be able to have wordpress parse both?

Noah Walker

Looks like a job for the 301 redirect available for wordpress as a plugin…

Joshua Robbins

Exactly what I had to do with Bluehost. I started looking into modifying the DNS records but instead did just as you said and used the 301 redirect to permanently forward no www. to the same address adding the www. Not sure why they didn’t do this by default. Wish I had seen the plugin and saved myself the 25 minutes.

Bill Hely

Mark, with or without the www should work just fine, and it is negligence on the part of your host if that’s not the case.

First step should be to contact them and ask for the situation to be rectified.

If you get back some gobbledygook reason as to why they can’t do it, your next step should be to change hosts.

If you have a reason to want to do so, the “with www” and “without www” can even point to different IP addresses. Modification of the DNS A Record is the usual way to set this up properly at the host end. Some hosts provide a control panel that allows you to do this yourself, or you might have to contact them with the request.

If your domain is on a UNIX/Linux server you can implement redirection between the two via the .htaccess file.

Depending on the circumstances this MIGHT be a little more complex than suggested here, but the bottom line is that with or without www should work just fine, and your host should be able to make it so.

kristarella

Mark, if you haven’t solved this already, try looking in your host’s FAQ or knowledge base, or wherever their help info is. Hosts usually have a reason for not automatically redirecting the www. So, there’s a good chance they have it addressed in the help section.

katepickle

fabulous post… I’m still learning so much about site design and coding. I’m book marking this article for later, because I know I’m gonna need it!

Jennifer

I needed this last weekend when I got a parse error. In the end, I had to have my web host restore my site to an earlier point.

Will save this article for sure. Thanks!

Jay Thompson

“Why Aren’t My Changes to CSS Being Applied to the Page?”

My most common reason for this?

Forgetting to turn off the cache… I make CSS changes willy-nilly, press “refresh” and nothing. Because WP is serving up the page that was cached prior to my changes…

Makes me feel like an idiot.

Great article Kristarella!

kristarella

Heh, yeah. I run into the cache problem occasionally too. Most cache plugins don’t present cached versions when you’re logged in, which makes it extra confusing when you can see the changes and others can’t!

Theo Steward

This post I read a second time, wow!

Don’t get good stuff such as this often in my mailbox, but this one deserves a “thumbs up”.

Checked a couple of my websites with the W3C tool and, naturally, my Thesis driven websites.

Funny thing is, not ONE mistake appeared from Thesis itself. Sure, my own “fly by night” coding and the CUSTOM THEME contained more than I would care to see appear…

That says a lot about Thesis.

Mohzy

Hello i have an question if i installed Thesis can i use any plug-in from wordpress.org/extend/plugins/ ?
Thanks

kristarella

Mohzy — Yes, you should be able to.

Prakash

Hi Kristarella,

Thank you very much for share this stuff which was more helpful to us & also for all wordpress users. Now i’m clear with how to fix our wordpress site by looking on your effective & useful notes with the proper & clear illustrations.

Some here was i already known, but lot of unknown & useful informative steps are also here. I agree with the problem solving techniques with different awesome tools.

Thx again for this nice sharing. Keep on posting great things like this. Congrats.

Caroline

Ok, I’ve searched the net, read articles and watch videos, but I still can’t work out what to do! I tried to switch the header and nav menu around and I swear I got the code right, but I still got the “Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/smartwom/public_html/wp-content/themes/thesis_182/custom/custom_functions.php on line 12′

As a complete novice (three days), I am bamboozled because I can’t work out how to remove the offending code and I can’t access my website. The web host won’t reset my URL, so what do I do (apart from busrt into flames and hump out the window???).

HELP! Please?

Thanks

Chris Pearson

Caroline, you’re going to need an FTP client in order to access your server and fix your custom_functions.php file.

Since this will be your first time working with an FTP client, you’ll probably experience a bit of frustration, but fear not! Our excellent support staff is here to help you out, and if you have specific questions, be sure to ask them in the forums.

kristarella

Yep, Caroline. The error is in line 12 of your file, which as Chris mentioned you need to access via FTP. If you can’t see what’s wrong with line 12 then backup the file and delete all the file contents. Then you will be able to access your site and gradually add code back in.

Billy

I am having the same problem as Caroline, but I can access my FTP. I see the error log describing the error on Line 31. My question is how specifically do I remove the line while I’m in my FTP?

CAL

i need help! ive found out my errors.. i downloaded filezilla.. but i dont know how to go about editing my errors.

i pasted the codes at custom_fuctions instead of custom.css

Please help!

kristarella

Cal — grab your custom_functions.php from Filezilla, make a copy of it and delete everything except <?php from the top of the file and upload that clean file to Thesis. That should get your site back up and running. Then you can gradually add back your functions (also via FTP, rather than the Custom File Editor in the dashboard, so that it’s easy to go back on any mistakes) to the functions file until it’s all back to normal and working, then add that CSS mistakenly put into the functions file into custom.css.

Kathy

Hi- I am using W3C Markup Validator. It came back with 16 errors. Here is one example.
Line 15, Column 18: document type does not allow element “div” here; assuming missing “object” start-tag

where do I find this error? You mentioned source code. Where do I find that.
Thanks :)

Jasjot

Hi.
Whenever I edit under the “manage options” and hit the save button, I get the following errors:

Warning: Invalid argument supplied for foreach() in /home/wwwjasjo/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php on line 468

Warning: Invalid argument supplied for foreach() in /home/wwwjasjo/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php on line 489

Warning: Cannot modify header information – headers already sent by (output started at /home/wwwjasjo/public_html/wp-content/themes/thesis_18/lib/classes/options_design.php:468) in /home/wwwjasjo/public_html/wp-includes/pluggable.php on line 866

AFAIK I havent installed any extra code/script in the custom or custom_functions file other than suggested here on DIYthemes. I use (or used to) Thesis on 3 blogs, but its now down to one due to this error.

Plus, the breadcrumb code is also not working fine ( colours not changing, text to small)

Fernando

I have this weird error. Comments made using name/email/website don’t show up in my admin panel. Testes it myself in another computer and it’s a weird error.