Graceful Sidebar Version 1.0.13 Released!

Support for the popular qTranslate plugin has been implemented inside the Graceful Sidebar Plugin. qTranslate enables bloggers to internationalize their content directly in the wordpress administrative console. qTranslate has a support forum that appears to be active with some good suggestions for using the plugin on your site. Cheers to Ozden for the suggestion to support this helpful plugin!

Graceful Sidebar Version 1.0.12 Released!

Some kind folks commented on the wordpress extend plugin page for the Graceful Sidebar Plugin requesting support for shortcodes. Ask and ye shall receive! Version 1.0.12 has been release with support for shortcodes. Shortcodes are tags that can be incorporated in wordpress pages or posts which get translated into different content. For example, I can include a shortcode which tells me what city you live in by leveraging my WP Geocode Plugin. This plugin populates a number of shortcodes that get translated into geography based information about the reader.

Your City: [wpgc_city]
Your State: [wpgc_state_code]
Your IP: [wpgc_ip]

Create a Custom Sidebar for Each Post or Page on Your WordPress Blog

Update: June 27th, 2011
Graceful Sidebar Plugin Version 1.0.11 Released

If you’ve been here before, this will be a review.  However, I think it bares mentioning in a new post.  Have you ever wanted to customize your blog such that the sidebar content displayed a different bit of content for each page on your site?  Well that’s the story behind the Graceful Sidebar Plugin.

The plugin works by extending the post and page editing screens with two additional fields.  Title, and Content.  The title field stores the content that will be displayed in the title of a widget on the post or page you’re editing.

Once you’ve installed the plugin, and have dragged the Graceful Sidebar Widget to the sidebar, you’ll begin to see this content displayed on your blog.

You may edit these fields for each post or page that you want to display different sidebar details or content.

To obtain this plugin, either visit the <a href=http://wordpress.org/extend/plugins/graceful-sidebar-plugin/>Wordpress Extend/Plugins; site and download, or you can install the plugin directly from within your administrative console.  Simply click Plugins->Add New->Search for “Graceful Sidebar”.

Graceful Sidebar Version 1.0.7 Released

** UPDATED 01/12/2011 – Graceful Sidebar Plugin is now at version 1.0.10 **

What’s the Graceful Sidebar Plugin?

The Graceful WordPress Plugin provides a convenient way to add a custom sidebar for each or any of the posts or pages on your WordPress blog.

The plugin presents two additional input fields when creating or editing a post or page. These fields are labeled Graceful Title and Graceful Content. Edit these to create the customized widget that will appear in the sidebar when readers are viewing this page or post. Be sure to drag the Graceful Sidebar Widget to the sidebar area for your theme by viewing Appearance->Widgets from your administration panel.

Where can I get it?

You may download the plugin from The WordPress Extends->Plugins page or by searching for ‘Graceful Sidebar’ from your administration panel’s plugins->Add New screen.

What’s New?

Issues were reported with funkiness when updating and saving posts. I surmised that this was related to the fact that I was storing the values for the graceful sidebar title and content in standard custom fields – which mean the edit screens showed two fields where you could edit these values – one in my own custom edit fields and another in the standard custom edit fields.

Please backup your database before upgrading to this version as it does change the names of the storage variables for your graceful sidebar title and content.

Are you using the plugin? Let us know by leaving a comment. Also, please leave a comment with any additional enhancements or modifications you might like to see with this plugin.

Create a custom sidebar for each page or post with this Graceful Sidebar WordPress Plugin

A friend and fellow poker fan recently reached out with a wordpress question… She was looking for a way to customize a client’s sidebar content based on the page or post currently being displayed.  Well – it seemed logical so I dug in for a few minutes and came up with the Graceful Sidebar Plugin.  The plugin is very simple – but accomplishes the initial goals.  To use the plugin, simply install it, activate it and drag the Graceful Sidebar widget to your theme’s sidebar.  Then, create two custom fields in the post or page whose sidebar you want to customize – “graceful_title” and “graceful_content”… that’s it.

[download id=”7”]

SOLVED: My WordPress Thumbnails Stopped Thumbnailing

The server where I host this blog experienced some oddness and the web server daemon (httpd) had to be restarted.  Once it came back up and it was determined that the primary DNS server on which we rely had crapped out, we were able to point to another DNS server and things seemed to get back to normal.  With a few minor exceptions that is… most notably, thumbnails were no longer thumbnailing.

This WordPress theme uses a

TimThumb script created by Tim McDaniels and Darren Hoyt with tweaks by Ben Gillbanks

. To diagnose the problem, the first place I looked (like every good web administrator) is the logs.

[Wed Jul 14 05:41:11 2010] [error] [client xx.xx.xx.xx] PHP Fatal error:  Allowed memory size of 31457280 bytes exhausted (tried to allocate 12288 bytes) in /path/to/my/web/home/httpdocs/wp-content/themes/mytheme/thumb.php on line 271, referer: http://www.mlynn.org/wp-admin/post.php?post=127&amp;action=edit&amp;message=1

AHA! The problem became obvious and easy to solve. The problem appears to be that the memory_limit value in the php configuration file (php.ini) has been set to low. Sure enough it was set to 4M.

A quick edit of the php.ini file…

;;;;;;;;;;;;;;;;;;;
; Resource Limits ;
;;;;;;;;;;;;;;;;;;;

max_execution_time = 30     ; Maximum execution time of each script, in seconds
max_input_time = 60     ; Maximum amount of time each script may spend parsing request data
memory_limit = 48M      ; Maximum amount of memory a script may consume</pre>
And a quick restart of apache...
<pre>/etc/init.d/httpd graceful

and blam-o… we’re back in business…. thumbnail’s a thumb’n.

If you don’t have root permissions – or don’t have access to your own php.ini file, you may need to contact the support team where you host your web site. Questions? Comments?

10 Tips to Help You Become a Better ExtJS, PHP, MySQL Developer

Before I begin, let me first say that I am not an expert ExtJS, PHP or MySQL developer. I have however, learned over the years from some basic design principles and tips gleaned far smarter and more talented developers than myself. I thought I’d create a post in the hope that you may benefit from what I have learned. Some of these tips will be pretty basic for most skilled developers, but it never hurts to review, right?

Audience – Who is This Article For?

This article was intended for the novice to intermediate web developer who specializes in use of the following technologies:

Tip 1 – Stop Using Print Statements to Debug

Developing solutions using the elegant Javascript framework ExtJS can be a mix of pleasure and pain.  While debugging the Javascript components is made easy with the handy Firefox extension FireBug, getting debug information back from the php side of your app can be tricky.  Especially if you’re expecting to maintain JSON communication with your javascript components. There are basically two methods of debugging the php side of your app.  You can either rely on JSON encoded strings sent back to your javascript components, decode them on the other side and display them either in and alert window, or in the console using console.log, or you can use print statements in your php.

The latter approach will commands will likely cause a javascript interpreter error and force you to reload the page to continue testing. I prefer the latter approach because its simpler.  However, instead of simply using the php echo or print commands, I like to create a logging function which uses file_print_contents to populate a debug log. Here’s my function:

function logit($text) {
    $now=date('Y-m-d h:m:s');
    $debugdata=debug_backtrace();
    $out=$now.' '.$_SERVER['SERVER_NAME'].' '.$_SERVER['PHP_SELF'].' '.$debugdata[2]['function'].' '.$text;
    file_put_contents('debug.log',$out,FILE_APPEND);
}

With this function, debugging is as easy as calling your logit() function instead of using print. I typically open another window and execute a tail -f debug.log to maintain a constant view of streamed debug data.

Tip 2 – Centralize your Database Updates

Creating a single reusable function to update your database can save your years of debugging.  It also provides a single place where you can add logging features to your updates.  For example, let’s say you want to create an update_log table for the database your updating.  This table will contain a record of every column, row and table that you’ve updated along with the mechanism used to update it and the date/time it was updated.

If you’ve got your mysql_query code scattered about your project, you’re going to need to add this logic all over the place.  If you’ve centralized your updates into a single function, you merely need to add the update_log logic to your update function.

Tip 3 – Borrow Heavily but Don’t Be A Script-Kiddie

We all do it.  Why re-invent the wheel, right?  I’m referring to the common practice of code-theft.  There are copious examples of many of the required components of most application challenges you’ll come up against.  So why not?  Why not, simply grab the code and slap it into your project?

It makes perfect sense – but you need to understand the code you’re lifting if your project is going to be a successful and supportable one.

A good friend of mine introduced me to a term over 12 years go – Script-kiddie.  A Script-Kiddie is a derogatory term used to describe someone that steals scripts or code, uses them but never fully understands how they work or in some cases, what they even do.  The term is typically used in a security context.

Simply put, don’t be one.

Tip 4 – Buy a Book (or two)

There are great books out there to help you with the PHP/MySQL/ExtJS development paradigm.  Here are a few that I own:

  1. Learning Ext JS
  2. Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools (Wrox Programmer to Programmer)
  3. Learning PHP, MySQL, and JavaScript: A Step-By-Step Guide to Creating Dynamic Websites (Animal Guide)
  4. PHP and MySQL Web Development (4th Edition)
  5. PHP Phrasebook
  6. JavaScript: The Definitive Guide
  7. MySQL (4th Edition)

And here’s one that’s not fully released – but looks to be pretty awesome:

Tip 5 – Use FireBug

Firebug is a fantastic FireFox browser extension that enables you to inspect HTML and javascript, and even modify style and layout in real-time. I simply can’t imagine developing javascript, HTML or CSS based solutions without it.

Here’s a good screencast which explains the basics of getting, installing and using Firebug.

This assumes you can use the fabulous FireFox browser. In some cases, you can’t. For instance – my employer does not permit use of FireFox. In those cases, you can use IE addons to accomplish a minimal amount of the same capabilities as Firebug. Another option is to leverage the ExtJS Debug Console.

Tip 6 – Modularize Your Javascript

The ExtJS development paradigm is one that lends itself to rapid production. You’re madly cutting/pasting or typing in your component syntax and you’re application begins to take on a beautiful life of its own. It’s very easy to simply keep slapping components into your main javascript file, testing, debugging, and slapping more code on. I’m guilty. My first ExtJS application has over 4300 lines in a single javascript file… ugh… I’m embarrassed. Don’t get me wrong – the app works… it’s just nearly impossible to debug.

One way to implement modular code is to leverage iframes. The managed iframe user extension makes this very easy to do. Saki’s Example Page makes use of this extension beautifully. The code to create the main viewport and the layout panels is in one javascript file, but when you click on a link in the navigation tree, the code for the main or center panel is included in an iframe. This permits you to create one main application.js file and another separate javascript code file for each of the options in your tree.

Tip 7 – Use extjs-debug-all.js and extjs-debug-base.js During Development

To use the ExtJS Framework, you simply include the basic Javascript libraries and CSS stylesheet information in your HTML document. Here’s an example:



        Application Title
        
        
        
        




Tip 8 – Check for Trailing Comma’s

IE is much more picky about trailing comma’s than Firefox or Safari. Since I develop on a Mac, I’m forever missing trailing comma’s. I have an ancient laptop running Windows XP that I keep around for the sole purpose of testing apps in IE. Because javascript is interpreted, not compiled, you don’t get that piece of mind that comes from passing your work through the compiler before placing it in front of the user.

9 times out of 10 when I have an error in IE, it’s because of a trailing comma. ExtJS uses objects configured using JSON like syntax. Here’s an example:

var myExample = function() {
    return {
        foo: 'bar',
        boo: 'far'
    }
};

In this example myExample is an object which is configured with a function. The function in turn is configured with a return object which has parameters foo and boo. The syntax for this example is correct. Consider, on the other hand, this example:

var myExample = function() {
    return {
        foo: 'bar',
        boo: 'far',
    }
};

See the difference? That one minor, trailing comma after boo: ‘far’ will cause IE to stop interpretation of the entire javascript.

One way to catch this error is to copy and paste the source code of your javascript into JSLINT.

JSLINT will return the following:

Error:

Problem at line 4 character 19: Extra comma.

boo: ‘far’,

Problem at line 5 character 6: Missing semicolon.

}

Tip 9 – Create an Automated Backup Routine for Nightly Backups

There’s nothing worse than after weeks of steady positive progress, you suddenly find yourself unable to figure out what you’ve done to break things. Having a nightly backup strategy can provide valuable insight into the path you took to get where you are now.

For nearly every large scale project, I create a simple script to backup the code and data and ship it offsite somewhere – typically back home to my home development lab.

If you’re able to create a public/private key pair and configure passwordless login between your development environment and your home machine, you can create a simple script which can be executed automatically via cron to securely copy your development work back down to your home machine.

Here’s a link to creating a secure passwordless login scheme with SSH.

Once you have that in place, here’s a little script that you can customize to create backups for your work.

#!/bin/sh
# mlynn - standard backup script
# ----- - Remember to implement passwordless ssh
#
# Modify these variables
LOCALDIR=/Users/mlynn/Projects/WSS
REMOTEDIR=/var/www/vhosts/mlynn/httpdocs/wss/payroll/v2
LOCALEXTDIR=/Users/mlynn/www/extjs
HOST=your remote hostname.com
USER=your remote username
DATE=`date "+%m%d%Y"`
#
cd $LOCALDIR
mkdir -p backups/$DATE/v2
cd backups/$DATE/v2
scp -r ${USER}@${HOST}:${REMOTEDIR}/*.html .
scp -r ${USER}@${HOST}:${REMOTEDIR}/*.php .
scp -r ${USER}@${HOST}:${REMOTEDIR}/*.json .
scp -r ${USER}@${HOST}:${REMOTEDIR}/js .
scp -r ${USER}@${HOST}:${REMOTEDIR}/includes .
scp -r ${USER}@${HOST}:${REMOTEDIR}/images .
scp -r ${USER}@${HOST}:${REMOTEDIR}/css .
# Add additional directories or files that you want to capture
#
# This line links your local extjs directory so you don't have to download nightly
ln -s $LOCALEXTDIRs .

This will create a fully functional copy of your web development area on your local machine. The last line of that script creates a symbolic link to the ExtJS library directory on your local machine. This assumes that you don’t want to copy down the extjs javascript library distribution every night.

Make sure you modify the following variables to customize the script for use on your local machine.

LOCALDIR – this is the local directory on your home development machine.
REMOTEDIR – this is the root directory of your development work on your client or remote machine.
LOCALEXTDIR – this is the full path to the extjs libraries on your local machine.

Once you’ve got all that setup – add your script to cron to kick it off nightly (or even more frequently.)

Tip 10 – Visit ExtJS.com Often

ExtJS.com is frequently updated with new versions, featured implementations and blog posts designed to simplify use of this great framework.

The site is well organized and has several sections specifically designed to help you getting started using the framework. The Learn section is a great place to start.

Bonus Tip – Use an Alert Service To Notify You of Updates on ExtJS.com

Since timely information is very valuable when you’re working on a project with tight deadlines, you may consider using an alerting service to tell you when new information has been added to the extjs.com site. http://www.changedetect.com is one option that offers a free web site modification alerting service.