Posted on

How to load JavaScript in WordPress plugins

If you want to load some JavaScript files from your WordPress plugin you have at least two options.

Head hooks

When building up a page, just before the closing tag of the head element, a theme should call actions hooked on wp-head. Those actions only need to output what they want to include into the head element, like script files.

What if a theme does not do that? Well, I’d include it into the so called “known issues”. For example, my last WordPress plugin, won’t work in this case. I think it’s better not to find a workaround, so that theme authors understand that they must follow WordPress standards.

On the other hand, there is also an admin-head hook, which is the wp-head hook counterpart when building up admin pages. For example, you could use the following function.

{[ .load-into-head /chili-web.php ]}

Script API

WordPress provides also a good Script API that will let you do anything you want with script files, following WordPress standards. These are the main functions:

  1. wp_deregister_script
  2. wp_register_script
  3. wp_enqueue_script
  4. wp_print_scripts (action hook)
  5. print_scripts_array (filter hook)

The general idea is that you write a function for loading your scripts using wp_deregister_script, wp_register_script, and wp_enqueue_script, and hook it on wp_print_scripts. If you also need to fine tune the order in which files are loaded or if they have to be loaded at all, then you can write another function and hook it on print_scripts_array.

deregister, register, and enqueue

wp_register_script let’s you create an alias and define dependencies for each script file. If a script file with the same alias was already registered, then your registration is ignored. This is a policy for conflict resolution (the first registration wins) that may help you, if you know it.

wp_deregister_script let’s you remove an alias. If the alias you give doesn’t exist, nothing happens. Tipically you use this function for forcing a new registration of an already registered alias: first you deregister and then register again.

wp_enqueue_script prepares the loading of a script. If the script was registered with some dependencies, this function automatically prepares their loading too, recursively, making sure each script will be loaded only once and before any script depending on it.

For example, jQuery 1.2.3 is registered by WordPress 2.5, but let’s say that you want to always download the latest version. You could use the following function.

{[ .load-with-api /chili-web.php ]}

Keeping jQuery and Prototype compatible is a needed functionality, because WordPress uses both and they both use $ as a global symbol. In fact, the jQuery file packed with WordPress includes the compatibility setting.

Fine tuning

If you want your scripts to be loaded in a particular order, with one script before or after another, maybe with respect to one that was registered by WordPress itself, or by other plugins, then you can write a function for the print_scripts_array filter.

For example, to load the jquery_no_conflict file just after the jquery file, you can use the following function.

{[ .correct-order /chili-web.php ]}

My Own Theme

If you want to see all this in action, you can install the My Own Theme plugin.

Posted on

WordPress Custom Fields Restyling

I use Custom Fields a lot, always by means of Enzymes, for managing the code snippets I’m going to comment about.

The Custom Fields section inside the post editing page shows added custom fields in a table whose columns change their width to fit the content, but the rows don’t change their height. I do not like that design: a definition list is much better than a table there. The key is the definition term and the value is the definition data.

Here are some pictures about the results of my experiment. The first row is my restyling, and the second row is how the same data appear in the usual design. There are three custom fields already added to this post: snippet1, snippet2, and snippet3; in the right picture, a new google custom field is going to be added

customfields1.png , customfields2.png , customfieldsnew.png

customfieldsold.png

Features of my restyling
  • added fields and the new field are evenly represented by the classical definition list style, where definition data is indented below the definition term; this provides a powerful clue for identifying the key / value roles, thus making all the labels superfluous
  • space usage is smarter; the key spans all the available width; the value almost all of it, and its height is greater than usual too, thus allowing for a convenient inspection, for viewing and editing purposes; the vertical scrollbar is much more useful than the horizontal one
  • by clicking its key, a custom field gets expanded, thus showing its value and its two editing buttons, while the rest of the custom fields gets collapsed; showing only one custom field at a time helps keeping user’s attention focused
  • the selection box for chosing an already known-to-the-system key is replaced by a list of buttons, located above the key field; by clicking any of them, the key gets copied into the key field, so that the user can leave it alone or change it, if needed; the overall design is more coherent
Posted on

How to reset a WordPress password

I’ve found this method today, and it works very well. I’ve just used it to reset my admin access password to a localhost installation. In fact it’s impossible to recover a password by means of an email if your system cannot send emails. This method is also very easy, and without email delivery delays in between.

  1. Open phpMyAdmin (a different MySQL web access tool should be fine, too)
  2. You should see the welcome page. Find the Database selection box and select your WordPress database
  3. You should see a list of tables, many with a common prefix, organized as links on the left and as rows on the right. Click the link wp_users (instead of wp you’ll use the prefix you chose when installing WordPress, if different)
  4. You should see the wp_users table structure, but you’re looking for its contents, so find the Browse link and click it
  5. You shoud see the wp_users table contents, one row for each registered user. Select the one with the admin value under the user_login column header and click on the Change link (with a pen icon, right below the last row)
  6. You should see a classical data entry form. In the row which has the user_pass value under the Field column header, select the MD5 value from the selection box under the Function column header, and write your new password in the text field under the Value column header. Then click Go
  7. Close phpMyAdmin
  8. Done