Mamp, Backupbuddy, WordPress and the dreaded HTTP Error 500 Internal Server Error

I have been battling this issue for weeks and I finally got it sorted due to a really helpful article.

If a site needs work, once its been launched, I like to create a local version to edit rather than risk making any change to a live site.

My workflow for this has been to install BackupBuddy (An AMAZING tool for migrating and backing up WordPress Sites), Download a complete copy of the site and install it locally using Mamp Pro.

Recently at the end of the process I have been running into this error:

HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.

After a great deal of resetting and messing around in setting I found this great article over on Mamp’s official blog.

It turns out that it is a PHP Memory issue.

The article, Increase the PHP memory limit with MAMP PROruns you through the exact process needed update the memory_limit in the PHP.INI file and you will be back up and running in 5 minutes.

You should note that as the article was written in 2009 the names of your PHP.ini files maybe different, at the time of writing this mine are:

PHP 5.2.17 php.ini

PHP 5.3.6 php.ini

As I knew I have my sites set to run the latter I just edited that file, but you can edit them both to be sure.

Highlighting in WordPress Menus, current pages and parent pages

This is another post written because I was struggling for a while with an issue, so I thought I would post my solution here.

Often on a WordPress site you want to have a menu that highlights the current page. Assuming you are using the WordPress custom menus, then WordPress is smart enough to add classes to the menu items that represent where they fit in the scheme of things.

For instance:

  • li.current_page_item = The page that you are currently on (Obviously)
  • li.current-post-ancestor = Any page above in the hierarchy of the current page

What threw me for a few hours was the use of underscore _ and dash – at differing times.

If you are having trouble I would suggest going back and checking these linking symbols.

For the record, I usually set the basic color for an unselected menu item: #nav li a{ color:#fff} and then I use the following with a feature color to cover the current page, the hover state and any pages that may fall into this like parents and ancestors:


#nav li a:hover,
#nav li.current_page_item a,
#nav li.current-menu-item a,
#nav li.current-menu-parent a,
#nav li.current-post-ancestor a  {
color: featurecolor;
}

Using less.js with WordPress

Over the last few weeks I have been reading more and more about speeding up your workflow by using augmented CSS.

For those of you not familiar with LESS, or {less} as its branding suggests, it is a ‘Dynamic stylesheet language’. Allowing you to use variables, mixins, operations and functions with in your CSS. There are plenty of article preaching the advantages of using less.

There are a couple of different flavours of LESS. Server side, an osx app (LESS.APP) and a client side alternative, using less.js.

Most of my work is with in WordPress on a development server, I decided that the best option for me was to use the client side less.js while developing sites and then compile the css stylesheet before launching a clients site.

The problem I ran into was that WordPress needs a Style.css file for the theme to be accepted. I tried installing the theme with this file and then swapping it out for a style.less file, however I kept running into issues and theme would break.

After googling and trying all sorts of things, @importing and all sorts of work arounds, I finally came up with a solution. I thought I would post it here in case there are others struggling with this.

In order for less.js to work it must be downloaded and installed on your server.

For non WordPress sites you can then in the <head> you reference your less file, followed by calling the less.js:

<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>

For WordPress all you need to do is have a style.css as normal with all the theme information, and then a separate for for .less. We will call it main_styling.less.

As follows:

Style.css

/*
Theme Name:Your Theme
Theme URI: http://testing.com
Description: A Theme
Verision:1.0
Author:Matt Edwards
Auther URI:http://www.emptyhead.dev
*/

Then in the <head>:


<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css">
<link rel="stylesheet/less" type="text/css" href="<?php bloginfo('template_directory'); ?>/main_styling.less">
<script src="<?php bloginfo('template_directory'); ?>/js/less-1.1.3.min.js" type="text/javascript">

and its all up and running.

Hope this saves you some time if you were stuck where I was.