WordPress Troubleshooting 101

I'm a semi-regular contributor on Wordpress Support Forums. & as you develop and assist more, you realize that theres a basic troubleshooting routine to solve almost all vague/inexplicable problems - you typically do the same things. These problems include;

  • /wp-admin/ not loading
  • Unable to drag and drop in dashboard
  • White screen instead of site
  • Unable to use Visual tab

Basically anything not normal or anything not working properly (that is not directly related to installing or using a new plugin. To get your Wordpress site back online, here's a breakdown of how to troubleshoot to find the issue:

  1. Visit your error log to reveal PHP errors
  2. Turn WP_DEBUG on to reveal MySQL + PHP errors on your Wordpress site
  3. Disable all plugins one-by-one to find the culprit
  4. Disable your theme, revert to Twenty-x
  5. Upload Wordpress to fix any permissions or file errors (except /wp-content/ and wp-config.php)
  6. Comment out any .htaccess firewalls or non-wordpress rewrites

If any of these techniques work, refer to basic Google'ing on how to resolve the issue. Open source software controlling 25% of the web, the odds are in your favour that someone experienced it too and wrote about it.

For overly basic example; if you discover plugin FooBar was not allowing drag and drop to work in the backend, search "Wordpress FooBar drag and drop not working" - and you should find your answer.

Doing the troubleshooting in the order should eliminate any "I know it's my theme, but I don't know what's not working" issues, your problem will likely spit out in PHP errors.

Quickly Toggle Hidden Files Mac OS X

Working with hidden files often in OS X? but not often enough to keep them on all the time? Me too. Here's a little edit to your bash profile to quickly toggle the visibility of hidden files with one word in terminal.

$ vi ~/.bash_profile

Press i to insert, use down key to reach the bottom, and add the following:

alias showhidden="defaults write com.apple.finder AppleShowAllFiles TRUE; killall Finder"
alias nohidden="defaults write com.apple.finder AppleShowAllFiles FALSE; killall Finder"

Exit insert mode with Esc save and close with ZZ

Restart your bash profile with:

$ source ~/.bash_profile

And now you have some beautiful simple commands:

$ showhidden
$ nohidden

Add or Remove WWW in WordPress

www is technically a sub-domain - but it usually shares the same /httpdocs/ or /public_html/ or /www/ folder on hosts as non-www, it also is configurable in many different places and varies from host-to-host, so it gets confusing at times.

As such, this question comes up daily on the Wordpress Support Forums and being that I'm tired of writing personalized responses to them - here's a quick and easy break down:

Site Address and Wordpress Address

When you're in Dashboard > Settings > General ensure you're changing both the "WordPress Address (URL)" and "Site Address (URL)" to include or exclude your www.

If you've locked yourself out of /wp-admin/ because of a www change and are seeing a white screen or experiencing a redirect loop: head to your database via phpMyAdmin, look for *_options and change the siteurl and home values to have or remove www.

If you have a Wordpress Network / Multisite setup - there's a few more steps for this:

  • in wp-config.php make sure the DOMAIN_CURRENT_SITE is set to your www preference
  • in *_blogs and *_site make sure everything's set to your www preference
  • in all *_*_options make sure home and site_url are also at your www preference

Check Your Web Host (control panel, plesk)

Changing www in Wordpress isn't always enough, sometimes your server needs adjustments. Any of the above hosting managers (often in the "domains" section) will have a question about your domain if you "want www prefix" to prepend to your domain. Select what you'd like!

You can see if www is enabled on your current domain's server/host/setup by going to your WordPress's readme.html file (which is an independent file that doesn't have anything to do with PHP, database, or your entered url's) Simply visit via your Wordpress install location (example: http://WWW.yoursite.com/wordpress/readme.html)

Force www Preference with .htaccess

If it's just being a pain, or perhaps your site is running www or non-www fine but the opposite is still rendering, make a redirect with .htaccess to immediately redirect users permanently (Search engines will respect this as they're 301's)

# Redirect non-www urls to www
RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.yoursite\.com/$
RewriteRule (.*) http://www.yoursite.com/$1 [R=301,L]
# Redirect www urls to non-www
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.yoursite\.com$
RewriteRule ^(.*)$ http://yoursite.com/$1 [R=301,L]

The three areas above, used independently or together (depending on your setup and host) should resolve your www headache.

Much More Modern & Micro Mobile Menu

Watch carefully - at department stores, restaurants, arenas, on the bus - you'll notice something. Something alarming. Every single freaking person is on a smart phone. Yes, everyone. Jess got a text from her Grandma yesterday. Her Grandma! If your website isn't responsive, easy, and quick to use on a mobile phone that all of these people have, you're doing something wrong.

I've used a few different ways of creating off-canvas navigations, making the website feel more like an app where the navigation is hidden "behind" the current viewport, and the active screen is animated, sliding out of the way. I like this, I do, but it's cumbersome - it often requires modernizer, lots of jQuery window calculations and event binding, CSS animations, and lots more. Typically it calls for building a second navigation, which defeats the "responsive" idea. Adding on, it's no longer the norm of popular apps to have off-canvas sliders, it's not a good direction.

Things are changing, getting simpler, and cleaner. Myself, I'm on a minimal binge - in both design and code, so I've written a new, much smaller and simpler responsive navigation:


  <input id="hamburger" type="checkbox" />
  <label for="hamburger" id="hamburger-icon"></label>
    Your navigation here


header input, header label { display: none }
header nav { /* your desktop navigation css */ }

@media screen and (max-width: 960px) {
    header label {
      display: block;
      width: 20px;
      height: 20px;
    header nav {
      display: none;
      position: absolute;
      background: white;
      /* your mobile navigation css */
    header input:checked ~ header nav {
      display: block;

Copy/paste this and it looks like crap, so lets focus on the functionality of it here.

The desktop and mobile nav are differentiated by our @media query. Normal desktop looks like a normal nav, when we're less than 960px wide, we're display a <label> as a navigation drawer, which when clicked, alters the input's :checked pseudo element and determines the visibility / drawer status of <nav>.

It doesn't get much more simpler than this for a responsive navigation.

Opengraph Image From Featured, Inline, or Attached

For opengraph and similar social sharing protocols, you'll want to include graphics with your post and pages whenever possible for blatantly obvious reasons. Often these images are scraped from the webpage and made selectable by the share'r, which is why you're able to specify which image you'd like to show when shared.

Sometimes (and with some Wordpress setups) it's hard to say whether the post will have a featured image, an inline image, an attached image, a gallery of images, or none at all. Furthermore, some featured images are on the webpage but shown with CSS instead of scrap-able <img alt="" /> tags.

For that problem, I wrote this solution:

function return_a_damn_image() {
global $post;

// try to get featured image
$ftr = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID()), 'medium' );

// try to get posts from post_content
preg_match_all('/\!\[(.+?)\]\((.+?)\)/i',$post-&gt;post_content, $result);

// try to get attached media
$get_attached_images = get_attached_media('image',get_the_ID());
foreach ($get_attached_images as $aattacheditem) {
$attached_img = wp_get_attachment_image_src($aattacheditem-&gt;ID,'medium');

// let's see: if featured image
if (is_single() &amp;&amp; isset($ftr[2]))
$image = $ftr[0];

// if an image from post_content
elseif (isset($result[2][0]))
$image = $result[2][0];

// if an image from an attached image (gallery)
elseif (isset($attached_img[2]))
$image = $attached_img[0];

// nothin! let's go default image
$image = get_bloginfo('stylesheet_directory')."/logo.png";

return $image; // send image back

Where logo.png is your fallback image, if your post/page has nothing else. You can change the order of the if/else conditions to prioritize what you'd like (i.e. attached images to be found before inline images).

Pro tip of the day: Need more images on your text-heavy blog? unsplash.com.

Made a Hanger

Apparently one wasn't enough. Found a few faucets in a antique store in Enderby & heckled down a deal for them. Installed one into some weathered lumber, and pieced on some shinny knobs I beat the crap out of to look worn. Going for the artsy fartsy look. Jess will be selling it here on Facebook or here on Etsy.



Restrict A WordPress User to one page without using a plugin

Don't want a huge plugin to restrict a single wordpress user to a single page?

Either did I, so I wrote this:

Where $restricted_user is the ID of the restricted user and $permitted is the ID of the only page the restricted user can access/edit.

function HR_user_lockout() {
  global $current_user, $menu, $submenu;
  $restricted_user = 123;
  // check for current user
  if ($current_user->data->ID == $restricted_user) {
    // remove admin menus
    $menu = array();
    $submenu = array();
    // redirect user to only permitted page
function HR_user_redirect() {
  $screen = get_current_screen();
  $permitted = 67;
  if (
  $screen->base == 'post' && $screen->id == 'page' &&
    (!isset($_POST['post_ID']) && $_GET['post'] == $permitted) ||
    (isset($_POST['post_ID']) && $_POST['post_ID'] == $permitted)
    $screen->base == 'upload' && $screen->id == 'upload' ||
    $screen->base == 'media' && $screen->id == 'media' ||
    $screen->base == 'async-upload' && $screen->id == 'async-upload'
  ) {
    // HR user is in the right places
  } else {
    // redirect to permitted page

jQuery Refresh Part of Page

Probably one of the better scripts to keep in your snippet drawer. & it's so simple.

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type='text/javascript'>
      $(document).ready(function() {
        setInterval(function() {
          var url = 'http://full_url_of_this_page.html';
          $('#refresh_zone-wrapper').load(url + ' #refresh_zone'); //note: space between intentional
        }, 2000); // milliseconds 

    <div id="refresh_zone-wrapper">
      <div id="refresh_zone">
        <?= rand(1,9999) ?>
No more posts.