View my “Be Right Back” page

Enough of this blank “Be Right Back” pages we usually throw together when we need to do website updates. It is time for a nicer, more web 2.0 savvy under construction. Next time I do an update to WordPress, I’ll be replacing my index.php file with this one, and then switch back when all is ready to go.

Here’s what I have:

1. Links to my other web sites and web services.

2. Flickr gallery via the flickr.com’s Make a Badge tool

3. Twitter updates via twitter.com’s Make a Badge tool

4. Last.fm gallery via Jeroen’s Last.fm Records standalone version which grabs images from amazon.com. I actually copied the whole script and included it in the PHP file so that it is not dependent in other files. I also disabled album art caching since this page is really going to be up for a few minutes. If you are going to use it for longer, then you should consider enabling caching the images. Consult the original script for more info on this.

To do this yourself:

1. Download my “Be Right Back”. Note, PHP 5 is required for the Last.fm portion to work. 

2. Open it in a file editor and change the following items:

• The page title
• The site links should point to your of course
• The Flickr user number in the Flickr javascript link. It might be best to create your own Flickr badge, grab the javascript and replace this one.
• The Twitter username in the javascript url.
• The last.fm username in the PHP code, right after $lfm->username.
• The footer info.

This is a quick tutorial on how to have WordPress show a custom error page when there’s a database connection error. This tutorial covers WordPress 2.0.1.

The database connection error occurs when WordPress tries o connect to the database but does not succeed at it. When you are first installing WordPress, it can mean that your settings are incorrect. i.e. the username/password are wrong. However, if your WordPress installation is running smoothly but for some reason MySQL goes down on your server then WordPress will show that huge “WordPress, Error Establishing a Database Connection” error page that looks nothing like the rest of your site. The error page is great when you are first setting up WordPress but it is not the most ideal for a professional website. It creates confusion for the visitor that might not even know what WordPress is. What’s worst, the web developer might not even find out for hours.

We’re going to solve this by doing a very small hack to WordPress that will tell it to show a static page instead of the default WordPress page. And we’ll also have it send an email to the administrator alerting with the error. Don’t get scared away by the word hack. Hacking is part of the WordPress culture and even encouraged. And besides, a hack is the only way around this because plugins are detected by settings stored in the database that we can not access to begin with.

STEP 1: Hack WordPress

Note: If you are running WordPress 2.0.1 you can download the hacked file here and just replace original ‘/wp-includes/wp-db.php’ and skip to step 2.

Open ‘wp-includes/wp-db.php’ in a code editor. If you don’t have one, you can try the free Text Wrangler or my favorite, SKEdit. This file is the one that handles the database connections that WordPress makes. We’ll look at the last function around line 305. This function is called bail and it is called when a database connection error is found. It does what it’s name implies, it bails out and displays an error. Now, the error it shows follows up but before it gets to that point, we’ll have it show a custom page we created and have it email us the error found. Enter the code bellow as pictured above.

/* custom error page hack
shows a custom error page and emails error instead of
showing the default wordpress database error page */

/* end custom error page hack */

The code Explained

include('wp-content/themes/themename/dbase-error.php');
This tells it to include the page dbase-error.php located in your theme folder. Replace the themename with the folder name of your theme.

$error = ( !$this->show_errors ) ? '' : $this->show_errors ;
mail('webmaster@domain.com', 'WordPress Error', $error);
This emails the webmaster with the actual database error if there is one. Replace webmaster@domain.com with the email address of the webmaster.

die;
This tells the script to end and not execute anything further, like the default error it normally outputs.

STEP 2: Create the error page.

Create a custom error page that contains no WordPress code, name it ‘dbase-error.php’ and save it in your theme folder.

The whole point of this tutorial is for you to have an error page that looks like the rest of your site. But that really depends on what theme you use. In this example I started by duplicating ‘index.php’ from my theme folder and naming it ‘dbase-error.php’. Then I replaced the header, sidebar and footer code with the actual code found in the header, sidebar and footer. To do this, first open ‘header.php’ in a text editor, copy all it’s content and paste in ‘dase-error.php’ replacing < ?php get_header(); ?>. Do the same for the sidebar and footer.

Now proceed to remove all WordPress code since WordPress does not have access to your database it doesn’t know the website name or what theme to use. To help you out, I’ve included a custom error page for the default WordPress template. You can download it here and just change a few things like the website name and description. Pictured below is the one I used on the Mosaic site.

STEP 3: TEST

To test this, there’s no other way than to put your site down temporarily. First upload the new wp-db.php file then the new custom error page. Now, edit ‘wp-config.php’ so that it has the wrong database name and upload the file. Once you upload the edited config file, check your site through your browser. You should now see your new error page and receive a new email shortly alerting you there was a database error. Your can re-edit the config file and re-upload to bring your site back up.

CONCLUSION

Hopefully WordPress will create an easier way to do this, perhaps by including a new setting in the settings file. But for now, hacking it is our best choice. But do remember, when you upgrade WordPress for the next version you will need to reapply the hack.

FILES USED:

WordPress Hack
Custom Error

Let’s face it, Mac applications are cool. Even when the task is as geeky as editing html files by hand, we do it with style. There are many apps out there that do this job on the Mac, and I will probably be in the eternal hunt for the perfect one, but for now skEdit is probably the closest I’ve gotten to it. I must admit, I do end up launching TextWarngler for the occasional trip to edit hidden files or to edit actionscript files but for the most part I use skEdit for all my PHP/HTML/CSS editing.

I’ve been enjoying beta testing the new version for a whie and I’m happy to share that it is finally out and it’s a sweet update. Some of my personal favorite features include code completion, hinting and highlighting (extremely useful for css), html tidy integration, snippets (on steroids), code navigation(customizable through regular expression), user scripts, integrated ftp/sftp/webdav and site view. And let’s not forget the option to edit using Lucida Grande instead of Courier. Fixed width fonts, although practical for editing, cramp my style.

skEdit is the brain child of Sean Kelly, a computer science student who was lucky enough to intern at Apple last summer. So go give skEdit a try and give Sean some love.

Link: skti.org

The steps we’ll take:

Step 1: Download and Install CocoaMySQL
Step 2: Create Database
Step 3: Download WordPress
Step 4: Install WordPress
Step 5: Permalinks

Step 1: Download and Install CocoaMySQL

WordPress will create the necessary database tables but we do need to create a database for it to do this. We’ll do this with CocoaMySQL, a cocoa application for editing the MySQL database content.

Download CocoaMySQL
Go to CocoaMySQL’s website and choose the latest binary file for download. On the next page, choose the file icon to download the file from the closest server.

Once downloaded, double click the disk image file if it hasn’t mounted yet. From the mounted disc, drag the CocoaMySQL application icon to your Applications folder, unmount the disk icon from the sidebar and delete the disk image you downloaded.

Step 2: Create Database

From the Application’s folder in the Finder, double-click CocoaMySQL to launch it.

The firs this you’ll see once you launch CocoaMySQL is the connection window. To connect to your local MySQL database use the following settings.

host: localhost
user: root
password: blank (unless you password protected it)

CocoaMySQL is a very cool app but for now, all we need to do is create a database. From the Databases area, clik on the “Add database” on the right. From the pop up window, write the name you would like for your database. I’m using wordpress for this example but I usually use the name of my project if the database will hold all things regarding a project, not just wordpress. Once you add the new database, quit the CocoaMySQL.

Step 3: Download WordPress

Point your browser to the WordPress website and download the latest version of WordPress (1.5.2 at the moment).

Move the contents of the WordPress folder to the location you specified in the sub-domain. Check out WordPress on Mac Part 2: Sub-Domains if you haven’t read it yet. In our example, we created a sub-domain called http://wordpress.localhost and linked it to the folder “/Users/myusername/Sites/Projects/wordpress”. So all the wordpress files go in that folder.

Step 4: Install WordPress

First, we’ll need a proper configuration file. In the WordPress folder, find the file “wp-config-sample.php” and rename it to “wp-config.php” and open it for editing. You can edit this file in TextWrangler or any other text editing app. The part we’re concered about is the MySQL settings area. In there enter the database name, database username, password and host like the example bellow.

// ** MySQL settings ** //
define(‘DB_NAME’, ‘wordpress’); // The name of the database
define(‘DB_USER’, ‘root’); // Your MySQL username
define(‘DB_PASSWORD’, ”); // …and password ( if you protected mysql )
define(‘DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value

Now, point you browser to your sub-domain. In my example it’s “http://wordpress.local”. The browser will give you the following statement:

It doesn’t look like you’ve installed WP yet. Try running install.php.

Click on the install.php link to begin the installation of the WordPress database.

Enter the title of your Blog an the admin’s email address. This can all be changed later.

This screen tell you weather the installation of the database was successful or not. If it was successful it will give you the username and password for the admin. These can be changed once you log in as well.

Click on the Login link to go to the admin login window.

That’s it. WordPress is installed! Click on the “Back to Blog” link to view your blog.

Your blog address is the sub-domain you selected. In our example it’s “http://wordpress.localhost”. To go to the WordPress admin area, add wp-admin to the URL “http://wordpress.localhost/wp-admin”.

On the next installment, we’ll cover configuring WordPress. Until then, happy blogging.

Step 1: Setting up Apache

Apache comes as part of Mac OS X and it can be easily activated by the click of a button. However there are a few tweaks we need to do to Apache before we can use it for WordPress. To modify the Apache settings we need to edit some configuration files that are in some hidden folders. Now here a nerd will tell you to open the command line and edit the files in some DOS looking environment. But since we’re not nerds here, just cool geeks, we’ll use the free text editing application Text Wrangler which allows you to edit hidden text files and takes care of file permissions when saving.

Download Text Wrangler.

User Apache file

First we’ll edit your apache user file so that we can use ModRewrite in WordPress. ModRewrite is what translates search friendly URLS to the true url. From Text Wrangler, select “File > Open Hidden…” , make sure you enable “All Files” and navigate to the folder “etc/httpd/users/” then open the file of the current logged in user. In my case it’s “melvin.conf”.

Comment out these lines within the directory lines by adding the # symbol at the beginning of the lines:

#Options Indexes MultiViews
#AllowOverride None

Then Add the following lines

AllowOverride All
Options Indexes MultiViews ExecCGI FollowSymLinks Includes
Order allow,deny
Allow from all

Close the file.

Mod-Rewrite Log

Now we’ll specify where to log any errors for Mod Rewrite. From Text Wrangler, select “File > Open Hidden…” and navigate to “etc/httpd/httpd.conf”. Go to the end of the file and add the following code:

# begin custom edit
# mod_rewrite
RewriteLog /var/log/httpd/rewrite.log
RewriteLogLevel 9
#end custom edit

Keep the file open for the next step.

Local Sub-Domains

Next we’re going to set up a local sub-domain. This will allow our site URl to be “http://blog.localhost” instead of “http://localhost/~username/blog”. A local sub-domain will allows us to set up our local blog in the same way we would if we had it hosted at a public server. For example we use absolute URLs like ‘/images/header.jpg’ and that code will work on both local or public servers. It also makes for a very short and manageable URLs.

From Text Wrangler, add the following code after the Rewrite segment we just added but before the “#end custom edit” line.

# virtual hosts
NameVirtualHost 127.0.0.1

# localhost

ServerName localhost
DocumentRoot /Users/melvin/Sites/

# wordpress.localhost

ServerName wordpress.localhost
DocumentRoot /Users/melvin/Sites/Projects/wordpress

# change the sub-domain name to your desired sub-domain name
# change to the name of your home folder
# change to the path of your project folder from the Sites folder

The first part will link “localhost” to your personal “SItes” folder. The second part is to specify the sub-domain. In this case I want the sub-domain “http://wordpress.localhost/” to test a custom version of wordpress, however you can rename this to whatever you want. Replace the path of DocumentRoot to the path to your site. In my case I put all my projects in a folder called Projects in the Sites folder in my home folder. For this example I am using the folder name wordpress but you can rename it according to your project name. Repeat this second block for each sub-domain needed.

Close the file.

Hosts File

Next we’ll add the sub-domains to the list of hosts. From Text Wrangler, select “File > Open Hidden…” and navigate to “etc/hosts”. Add the following line to the list. Make sure you specify the same sub-domain you did in the previews step:

127.0.0.1 wordpress.localhost

Restart the Apache Server

From the Finder select ‘Apple > System Preferences > Sharing > Services’ and Start ‘Personal Web Sharing’. Quit System Preferences.

Now point your browser to http://wordpress.localhost or whatever sub-domain name you chose.

If you don’t have anything in the folder you specified in the previews step you will get this 404 Not Found Error. This means it’s working. You can move any html files to that folder for testing. Or as we’ll do in the next Step of this tutorial, download WordPress and place the files on that folder.