Contest: 3 free copies of the WordPress Bible [UPDATE]

Today marked the drop of WordPress 3.5 and I want to celebrate.

Tomorrow, I’m going to give away three autographed copies of the WordPress Bible. You have to be on Twitter. I apologize to those who have chosen to abandon Twitter, or have chosen not to participate, but it is the defacto communications medium of the 21st century and how I operate.

The book is a mix of advanced and beginner content. Therefore, I will do trivia. Trivia will have a beginner round, an advanced round and an intermediate round. All WordPress oriented. The winner is in my sole discretion and you will be required to provide your mailing address if you are selected.

WordPress core contributors are not allowed to participate in the beginner or intermediate round. If your name is on “the list” of 3.5 contributors, you cannot win those rounds. You can, however, participate in the advanced round.

The beginner round will consist of questions surrounding theme and plugin management with possible questions around usability and interface.

The advanced round (the only round open to core contributors) will be based on WordPress APIs, hooks and advanced WordPress development.

The intermediate round will mix both but the developer-oriented questions will be more common and basic and user questions will be more difficult.

You must hashtag your answers with #wpbibletrivia. Failure to do so disqualifies you for an answer.

The first answer I see that is correct is a correct answer. My judgement solely.

There will be 10 questions per round so pay attention.

The beginner round begins at 11am Central Time.

Share this on Facebook, Twitter or whatever your social media channel of choice is. The questions will be asked on my Twitter feed: @technosailor.

Good luck!

Update

The winners of the trivia contest were David Peralty for the beginner round, Kim Parsell for the intermediate round and Kailey Lampert for the Advance round. Well done, everyone!

Read More

html5

Working With HTML5 Forms

html5I’m going to start a series of tutorials over the next weeks and months about HTML5. A lot of web developers are not leveraging HTML5 for a variety of reasons. We have been so trained over the past decade to embrace XHTML 1.0 that we’ve avoided the new DOCTYPE as something new that needs to be learned.

The good news is, XHTML is still valid in HTML5. The better news is now you have much more fun toys to play with.

Admittedly, I was one of those people who delayed jumping on the HTML5 bandwagon. In the past few months, however, that has changed. This series of articles will hopefully help the web developer to rethink how they develop on the web. Much of the stuff I’m about to talk about does not require a lot of extra heavy lifting.

Use the Correct DOCTYPE

Just as a remedial exercise of laying out the premise, your HTML must have the correct DOCTYPE. In XHTML 1.0/1.1, the first line of the HTML page had to be something along these lines

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That’s relatively confusing, huh? Makes you want to go drink spoiled milk with lumpy crud in it just because it’s tasty, right?

To declare a web page as HTML5, you do the same thing you did with the old 1990s era HTML4, before the web embarked on the XHTML idea of doing work. HTML5 is, essentially, a reset to HTML4 with all kinds of additional goodness. You simply start a web document with:

<!DOCTYPE html>

A lot easier, right? Heck, you can type that in your sleep once you’ve typed it enough (I know you already do that with your drivers license and credit card numbers).

Form Field Types

With all that remedial knowledge in play, let’s take a look at HTML5 forms. The importance of this might be lost if the only thing you think about, when building HTML pages, are computer browsers. But if you recognize we live in a mobile world, you own an Android or iPhone and have tried to do any kind of form filling on those devices, then you might start to realize the importance of field types.

In XHTML, you might have a form that looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="" method="post">
    <label for="name">Full Name:
        <input type="text" name="name" id="name" />
    </label>

    <label for="phone">Phone Number:
        <input type="text" name="phone" id="phone" />
    </label>

    <label for="email">Email Address:
        <input type="text" name="email" id="email" />
    </label>

    <label for="website">Web URL:
        <input type="text" name="website" id="website" />
    </label>
</form>

In XHTML, we didn’t have a lot of field types. We had text (which everything above is), hidden, password (*’s entered in the input), checkboxes and radio buttons. You could add other types of inputs (That don’t use the <input> tag and include <select> and <textarea>.

This works in HTML5 too, but you’re limited by one default keyboard – which is fine, but fairly bland and not at all contextual.

What would happen if we changed that form to use different field types? HTML5 support a bunch. The four fields above can more sematically have the following types, in order: text, tel, email, url.

Watch what happens on the iPhone when the HTML looks like this (Android is similar):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="" method="post">
    <label for="name">Full Name:
        <input type="text" name="name" id="name" />
    </label>

    <label for="phone">Phone Number:
        <input type="tel" name="phone" id="phone" />
    </label>

    <label for="email">Email Address:
        <input type="email" name="email" id="email" />
    </label>

    <label for="website">Web URL:
        <input type="url" name="website" id="website" />
    </label>
</form>

For a standard text field, your keyboard will look like this:

iOS "text" field
iOS “text” field

For a phone number, using the tel type:
iOS "tel" field
iOS “tel” field

For an email address, using the email type:
iOS "email" field
iOS “email” field

And for a URL field using the url type:
iOS "url" field
iOS “url” field

There are, of course, other field types that I’m not going to go into too much here. But to whet your appetite, there is a color type that attaches to a color picker. There’s a date type that binds to a date picker. There’s even a range type which binds to a slider picker.

Important: Not all browsers support all types. In the event that a browser does not support a specific type, it falls back to standard text type and you can bind other external Javascript to make the same functionality happen.

Reference: All HTML5 field types with browser support.

Form Field Placeholder

Another useful feature is the placeholder. In XHTML, we might have a form that looks like this:

1
2
3
<form action="" method="post">
    <input type="search" name="search" id="search" value="Search for your term" />
</form>

This would create a simple field that would be pre-populated with “Search for your term”. From a usability standpoint, when a user brings that field into focus, the text is supposed to disappear and allow the typing of a search term. If nothing is typed and the focus is switched to a different element, then that phrase should re-appear.

XHTML Placeholder Text
XHTML Placeholder Text

You can’t do this without a little Javascript help (I like jQuery for this) – which is outside the scope of this article. But in HTML5, you only have to add placeholder="Search for your term". Different browsers handle this slightly different, but they all insert some dummy text that can be replaced by the user’s own input.

1
2
3
<form action="" method="post">
    <input type="text" name="search" id="search" placeholder="Search for your term" />
</form>
HTML5 Placeholder Attribute
On iOS, the Placeholder attribute plays light grey text in the field that is replaced as the user types.

Form Field Validation

Validation is such a tedious thing for developers. You can do all kinds of ugly things to make sure fields that are required actually have a value or that a field meets a certain criteria (for instance, a zip code field having 5 numeric characters to match the U.S. format).

In terms of requiring a field, it’s as simple as adding required to the input tag. In HTML5, you don’t have to have an explicit value for an attribute as you do in XHTML. You can if you want, type <input type="text" name="zip" required="required" /> but this is a habit that does not need muscle exercise. Just use:

1
2
3
4
<form action="" method="post">
    <input type="text" name="zip" required />
    <input type="submit" />
</form>

Firefox "Required" Error Bubble
Firefox “Required” Error Bubble
Chrome "Required" Error Bubble
Chrome “Required” Error Bubble
Browsers handle this differently but they all pop up a notice if the field isn’t populated on submission. On the right, you’ll see how Chrome and Firefox handle this respectively.

Let’s validate that zip code field, though, because this is where HTML5 really shines.

Using the pattern attribute, you can designate a regular expression to match formatting needs. If we want to limit the zip field to 5 numbers (most simplistic example – it could also have a potential extra dash and 4 numbers too), you might use this HTML:

1
2
3
4
<form action="" method="post">
    <input type="text" name="zip" required pattern="\d{5}" />
    <input type="submit" />
</form>

You can find a list of helpful regexes at html5pattern.com.

Summary

There’s a lot more we could get into here, but the point of this exercise is to prove that it doesn’t take much to start using HTML5 in development. Doing so will also push the boundaries of what has been more commonly possible and the barrier to entry is so low that I struggle to find a reason why HTML5 should not be used more commonly.

I’ll have more of these in the days and weeks to come so stay tuned, subscribe to the RSS feed and, as always, if you’re interested in hiring me for a full time gig or contract basis, please reach out to me. I am actively looking.

Read More

wordpress

10 Things You Need to Know About WordPress 3.5

For 7 years, I’ve been publishing these articles every time a new version of WordPress comes out. Since version 2.0. It’s been a long run. It began as a need to fill people in about new features in WordPress (and there were a lot in 2.0). There wasn’t anybody doing these at the time, and certainly WordPress wasn’t nearly as popular as it is now (22% of the internet is powered by WordPress).

But many more people have stepped up in recent releases and have started updating readers with new features and expectations. My job here is done. I’m passing the baton but really the baton has already been passed and I’m happy about that. This will be my final 10 things article. Thank you for sticking around and following along all these years.

On Wednesday (likely), December 5th, WordPress 3.5 will drop with all it’s gooey goodness. A BIG shoutout needs to go out to Andrew Nacin, the lead developer on 3.5, for project managing this release while also planning his wedding, and to his best man, core developer Daryl Koopersmith for leading the media efforts. And of course, all the other core contributors to this release (I, sadly, am not one this cycle).

So without further adieu, let’s get into the guts of 3.5.

Media Manager

One of the most anticipated revamps in WordPress history has finally arrived. Since the days of implementing the media upload integration, core developers, users and everyone in between has cried for a new way of managing media. It’s finally here and it is one of the biggest undertakings in WordPress core development history.

The new media manager in WordPress 3.5 simplifies the process of uploading various media formats (usually, but not limited to, images). Everything is right up front and easy to understand. Instead of having cryptic icons over top of the edit area on a post editing screen, you now have an obvious “Add Media” button.

Clicking Add Media brings up a dialog that has a very large, and obvious “drop zone” where you can drag and drop files into. This aspect has actually been around for a few versions, but now it’s a much smoother experience. Of course, you can also click the prominent “Select Files” button in the drop zone to pull up a more traditional dialog for selecting those media files and uploading.

You can also get a much more intuitive view of your already uploaded media attachment, select any number of photos and insert them into a post or create a gallery. This was all supported before, but the logical workflow makes the process a million times easier.

Also, gone are the days of uploading an image, having to close the media dialog to then re-open it to create a gallery or futz around with details for each image. This was always kludgey before. You could assign an image as a featured image without having to close the dialog, but then inevitably you’d end up in a situation where the dialog had to be closed to get into another image mode.

I’m really curious what the reaction to this feature will be.

Twenty Twelve

WordPress Twenty Twelve default theme
The front page layout of the new WordPress 3.5 default theme “Twenty Twelve”
Twenty Twelve is the new theme that is coming with 3.5 A few cycles ago, the core team decided to retire the old default “Kubrick” theme and release a new standard theme once a year. Twenty Ten came in 2010. Twenty Eleven came in 2011 and, well, obviously, Twenty Twelve is dropping in at the tail end of 2012.

Twenty Twelve is a fun theme. It’s fully responsive, so it conforms to different viewport sizes – monitors, iPads, smart phones, etc. In WordPress 3.4, the Admin got responsive love, and now the default theme gets it as well.

You can actually download and install it now, as it is also compatible with WordPress 3.4 and is on the theme repository.

This default theme has better typography, a home page template, various options for columns and widgeted areas and would serve well as a handy theme framework for child themes as well.

In addition, if you haven’t started leveraging post formats (available since WordPress 3.1), you can do that now with Twenty Twelve. The theme has built in styling defaults the match the sort of thing you’d expect from Post Formats (to me, still one of the most neglected things in WordPress)

HiDPI “Retina” Admin

For those of you on the retina display bandwagon, both Twenty Twelve and the entire administrative interface are all retina ready. No pixelation on those high-end Macs!

In WordPress 3.4, the first steps were made by providing quite a few retina (or hi-def, if you will – it will make more sense in a minute why I offer that clarification) icons in the admin. Now, the CSS (specifically for print) also supports this hi-def rendering. If you must print a tree, the print stylesheets will be printing in hi definition.

This also opens up opportunity as browsers and CSS3 continue to advance and provide developers with new tools.

Retina not only gives print versions additional clarity, and those high end Macs more beauty, but it also renders things better for you iPhone 5, iPad 3, Kindle HD and various new Android device users. Rejoice! (but I have an iPhone 4S, so meh!)

Removing the Links Manager

Links Manager Removed
So long, Links Manager, and thanks for all the fish!
Oh my God. We finally got rid of this antiquated thing!

Remember back in the day when people actually kept blogrolls? And WordPress had this feature in the menu called “Blogroll”. And then people started realizing, as possibly one of the earliest turns toward WordPress not being only a blogging tool but also a full-blown Content Management System, that Blogroll just didn’t seem appropriate (or whatever the thinking was), so it was renamed to Links.

It’s now coming out entirely. Existing WordPress install retain the Links manager but new WordPress 3.5 installs no longer have this functionality.

If you still need it, you can install the Links Manager as a plugin.

Favorite Plugins

As a developer, I am constantly setting up WordPress installs, setting up new WordPress installs, resetting WordPress installs, etc. so perhaps my favorite new feature in WordPress 3.5 is the “Favorite Plugins” doohickey. I always have a subset of plugins I use for development and functionality I consider a “must have” for a client project, etc.

Favorite Plugins can be installed from right in your plugin manager.
Favorite Plugins can be installed from right in your plugin manager.

If you go to the WordPress plugin repo (and are logged in with your WordPress.org username), you will see a new “Favorite” button on every plugin page.

This becomes incredibly useful in WordPress 3.5 where you can now pull down your favorite plugins with one-click install. When you visit the Plugins > Add New admin page, you will see a new “Quick Link” along side the “Upload”, “Popular” and other links that have been there all along. Now you just have a new menu.

This brings up a page where you can enter your WordPress.org username and get a list of all the plugins you’ve favorited on the plugin repo and install as you need.

Protip: Now you can stop emailing me and asking me what plugins I recommend. Enter MY username – technosailor – and find out which plugins I prefer.

Tumblr Importer Support

One of the most popular blog types and platforms in the past few years is Tumblr. Up until now, there hasn’t been a way to get Tumblr content imported into WordPress. That’s no longer the case.

On the Settings > Import page, you can now activate Tumblr import support. Warning: The process of importing Tumblr is a little kludgey and that is due to Tumblr’s own systems. You will need to register an app with Tumblr, enter certain key information about your WordPress install into the Tumblr app registration page, and copy certain key information into WordPress.

The instructions are all on the Import admin screen. I suggest opening up the Tumblr app registration page in a separate tab as you’ll have to go back and forth between Tumblr and WordPress.

Once you do this, you can connect WordPress to your Tumblr blog and slurp in all the data you’ve had over there. I know y’all love Tumblr, but this is your opportunity to get off of it and onto a more widely used and customizable platform. Plus, you have Press This in WordPress to allow you to continue your Tumblings.

Simplified Dashboard

Simplified Dashboard
Simplified Dashboard
The Dashboard has always been a bit of a sore spot for new users unfamiliar with WordPress. What is all this information? Unfortunately, that’s not going away quite yet. However, WordPress now makes it easier for users to get up to speed with common things like writing an about page, setting up a theme, etc.

In addition to Dashboard fixes, there have been a number of smaller UI changes in the admin, including the Privacy page being removed and merged into the Reading Settings pages. Lots of effort was put into a simpler user experience.

It’s the little things that help users get up to speed and using WordPress quickly and effectively and reduces the learning curve.

Multisite: switch_to_blog() performance problems fixed

There are a couple of Multisite improvements for developers. For the longest time, well before the merge of WPMU into WordPress, the way developers could switch “context” from one site to another would be through switch_to_blog(). Even after the merge, that function still remained the way to do it. But it has always come at the price of performance and caching. It was an extremely expensive function to use, filled with unnecessary database queries and other fudge.

It left developers looking for ways to accomplish the same task in a different way – which is really not the WordPress way. We encourage developers to use the tools WordPress provides and not to try to get around them. This mentality is almost universal and prevents problems with backwards compatibility in the case of database schema changes, etc. However, this beast had never been tamed for this specific functionality.

As of WordPress 3.5, this function has now been refactored and performs significantly better than what it did, including massive caching changes. Developers should feel far more comfortable using it. Hooray!

Multisite: Sub Directory

Another Multisite improvement is the ability to install WordPress Multisite in a folder. Up until now, WordPress Multisite could not be installed in a subdirectory. It had to be installed in the document root which was… silly.
In WordPress 3.5, a lot of work was put into making it possible to do just that. Specifically, this came out of Hack Day at WordCamp San Francisco in August. Nice work Mark Jaquith and company.

WP_Query Enhancement

One final developer tool that was added in WordPress 3.5 is a modification to the post__in argument that can be passed to WP_Query to affect what posts are pulled in a custom query/Loop. While post__in has been around awhile, and takes a comma separated list of post IDs to be retrieved, now, if the orderby parameter is set to post__in, the order of the IDs matter. Specifically, the order of the IDs in post__in is the order they are retrieved in the resulting dataset. Before they were simply ordered in numerical order (or whichever custom order parameter was supplied – post_name, post_title, etc) .

This is pretty effective for CMS-style usage of WordPress where a developer may want to have granular control of how specific content pages are listed, displayed, etc.

Summary

So that’s it! Nice big release. A lot of under the hood stuff for developers, but really this release is less of a developer’s release and more of a user experience release. When WordPress 3.5 drops on Wednesday (assuming that happens as expected), I’d love to hear feedback.

Thanks for reading all these years. I’m not disappearing. I’m just retiring from this column. Of course, I’m always looking for full-time or consulting work. Please feel free to contact me if you think we might be able to work together.

Until then…

So long and thanks for all the fish
Original Photo by Starrarte Used under Creative Commons.

Read More