Page 7 of 8

Simple animated scroll for jQuery

If you use links to navigate to other elements on the same page, it’s generally a good idea to animate the scrolling so you don’t disorientate your users. There are jQuery plugins (such as ScrollTo) that offer many different ways for handling this, but if you don’t want to mess about with all the features of a new plugin then this snippet will be very useful. It’s a simple function that will scroll your page to any DOM element that you specify:

As you can see you can also specify the speed and a top offset for the scroll (I find this top offset very useful as default behaviour puts the target element flush with the top of the browser, which can make things feel a bit cramped). An added bonus is that it appends the target string to the current URL, so if you are using a standard anchor reference (such as #element) then users will be able to grab the URL and it will point to the correct location on the page. If you are using other selectors to target an element then I would recommend removing the function inside the animate call.

Totally simple jQuery method for selecting all checkboxes in a form

It’s a common problem with a dozen different solutions – if you’ve ever needed to add a ‘select all’ checkbox to a form in order to make your users’ lives easier then you’ll have searched for a simple way to do it. If you’re using jQuery here’s a very simple method that’s as easy as can be:

You can replace the form identifier with whatever container you choose (fieldset can be useful if your form is split up like that). This code will cause all the checkboxes in the form to be toggled when you toggle any checkbox that has the selectall class.

Simple.

UPDATE: Modified code to be slightly more efficient as suggested by Jamy Golden.

WordPress: Add plugin settings link to Plugins page

When building a plugin that has its own settings page, it’s often handy to create a link to the settings page straight from the Plugins list – this saves users the time it takes to find where exactly your plugin appears in the admin menu. Here is a simple code snippet that creates the settings link for you – all you need to do is tell it where to go:

Simply replace the href attribute with the link to the plugin settings page and rename the function to something slightly more unique (preferably all wrapped in an if(!function_exists()) conditional).

WordPress POST data and the 404 errors: The mystery of the restricted query variables

I recently had a problem with a form submitted in WordPress returning a 404 error everytime even though it was submitting to an entirely valid URL. The form submission was managed via AJAX using jQuery.post(), so at first I assumed it was a Javascript problem – after a bit of testing, however, I discovered it was happening even if I submitted the form via PHP. I was entirely baffled by the issue (particularly because I had another form on the same site that submitted with no issues whatsoever) and spent a number of days trying to work it out – eventually I discovered the problem had nothing to do with Javascript, PHP or the server configuration, but was actually due to a restriction built into WordPress that isn’t immediately apparent.

It turns out that WordPress has a number of query variable names that are reserved for specific functions and cannot be used by any custom form on the site. In my case, I had a field called ‘name’ that was the culprit and simply changing it to ‘clientname’ fixed my problem entirely. The problem is that instead of giving a helpful error, WordPress just returns a 404 with no explanation about what went wrong or why it happened – even with debug mode on there is nothing helpful. This, as you can imagine, is particularly frustrating.

I haven’t found any official documentation listing the reserved variables, but there is this user-created page in the WordPress Codex that has a list of them (based on the variables used by WP_Query). I’m not sure how complete it is, but it seems fairly comprehensive.

Seeing as though I struggled with this for a few days, I thought I would share the solution here to help anyone else who might be having a similar issue.

Find duplicate field values in MySQL

I recently had to clean up a database table of user data because it had the same email addresses assigned to multiple users. The first step was putting together a query that pulled only the duplicate email addresses and also told me how many times they occurred – from there the actual clean up process was fairly straight forward.

This simple query looked something like this:

I find this to be a particularly helpful SQL snippet as this kind of clean up process is fairly common. It uses MySQL’s HAVING clause because WHERE cannot handle aggregate functions – COUNT() in this case.

WordPress: Add featured image to RSS feed

I’m a firm believer in minimising the amount of plugins a WordPress site uses and instead making code changes to get what you need. This removes the overall bloat of a site and makes things far easier to manage. From time to time I come across useful plugins, but instead of using them I work out the quickest way to achieve the same goal by coding it myself. Here’s a simple function I use to show a post’s featured image in the RSS feed (something WordPress does not do by default):

Just paste that code into your theme’s functions.php file and you’re good to go. You can obviously modify the style attribute to have it display however you wish, as well as the image size (set to ‘medium’ in this example) – the options for this are: thumb, thumbnail, medium, large & post-thumbnail.

Make your WordPress content editor use HTML by default

The WordPress content editor will always show you the ‘Visual’ tab by default. If you are one of the many people who have problems with the visual editor stripping out your HTML tags or attributes, this can quickly get very annoying – every time you load a post to make changes, it lands on the Visual tab and has all your nice HTML removed.

Here’s a simple line of code that you can add to your theme’s functions.php file to ensure that it always lands on the HTML tab by default (you will still have the option of switching to the Visual tab of course):

This example will ensure that only non-admin users see the HTML editor by default.

Simple way to generate a random password in PHP

When creating web apps, there’s often a need to generate a random password for your users. There are a number of ways to do this, but in needing to do it recently I came up with this very simple function that will generate a password (or other random string) of whatever length you wish. It’s particularly useful when generating passwords for users that they will then change in the future. It uses PHP’s handy str_shuffle() function:

The only shortcoming of this method will come in when you want to generate a password that is longer than $chars, but this is rather unlikely I would think. Also, the fact that it will only ever use each character a maximum of one time means that it is more susceptible to a brute force attack (whether that’s a problem or not depends on how paranoid you are…).

Front-end & WordPress developer interview test

I recently had to create an interview test for a developer who has good skill in PHP, but is not so experienced when it comes to front-end coding. On the front-end side of things, the job they were interviewing for required decent HTML & CSS knowledge. They also were required to have a decent working knowledge of WordPress. With that in mind I created a little test to evaluate their skills – I’m posting it here for anyone else who needs something similar.

TestI gave the developer the image on the right (click to enlarge) and asked them to do two things:

  1. Code it up as a web page using whatever techniques they like.
  2. Code it up as an email optimised for as many of the common email clients as possible.

While the page looks simple enough, the way it is coded will tell you a lot about the techniques that the developer would normally use. Coding the email version of the page will also test how versatile they are and, in the case of the job I wrote this test for, is a necessary part of the job.

On top of that I also gave them one other task that would test their WordPress skill. It’s a fairly simple one that most WordPress devs will be able to, but it will effectively show the individual’s dev style in the WordPress environment. The question was simple:

  • Write a widget for a WordPress site that will contain links to the site owner’s Facebook, Twitter and LinkedIn profiles. The user must be allowed to specify their usernames for those sites when adding the widget in the WordPress back-end. The front-end design of the widget is not important.

I’m sure there are plenty of other questions that could be asked, but that struck me as a decent enough one for the situation. If you have any other questions that you think would be helpful to ask, then please post them in the comments below.

Loop through each character in a string in PHP

The other day I was working on a project that required me to extract a numeric ID from the current page’s URL. The problem was that the ID could either be at the end of the URL string or in the middle, depending if there were any parameters added on or not. Here is how I worked around the problem by looping through each character of the string.

Because the first part of the URL was formatted normally I could use a combination of strpos() and substr() to find the part of the string that contained the ID as well as all the characters that followed it (I could have used regex here, but I prefer to avoid using it if I can help it). This still left me with the problem of getting the ID out of that string, as the actual number could be any length. Luckily for me, the ID was immediately followed by a non-numeric character, so I came up with a solution where I could loop through each character in the string and use each one for the required ID, but stop the loop when I hit the first character that was not a number. In the interest of sharing some useful code, here is the simple snippet that I used to loop through the string along with my use case: