Looking Ahead To WordPress 3.9: HTML5 Galleries

HTML5 In Your Galleries

In WordPress 3.9, we’ll be able to declare HTML5 support for our galleries! ThemeShaper has an excellent article detailing HTML5 galleries in the upcoming WordPress 3.9.

According to the ThemeShaper article, this is how it’ll work:

Once a theme declared support, the definition list elements will be replaced by <figure> and <figcaption> for better semantics. If you decide to not only adopt this new feature but also maintain backwards compatibility, then there are two ways to achieve that:

The two options they mention to maintain backwards compatibility are:

  1. Style the new elements and add CSS selectors for the traditional definition list elements. That’s what ThemeShaper did for the _s starter theme.
  2. Filter the shortcode attributes and override the tag parameters. Since the shortcode_atts_gallery filter was introduced in 3.6, you’ll be backwards compatible with the latest two versions.

For more details on option one, see how ThemeShaper handled it. If you went with option two, you’d need to add this to your theme’s functions.php file:

function prefix_gallery_atts( $atts ) {
    $atts['itemtag']    = 'figure';
    $atts['icontag']    = 'div';
    $atts['captiontag'] = 'figcaption';
    return $atts;
add_filter( 'shortcode_atts_gallery', 'prefix_gallery_atts' );

This post is primarily targeted towards people who are developing custom themes, available publicly or not. Most of the themes I develop are private and are used for one specific client’s site.

Not the best fit for inclusion in a functionality plugin. I suppose you could, only if you have no other choices, which you do.


WordPress: Sending Correct HTTP Status Code on Login Failure

For some reason, WordPress will send a 200 HTTP response status code, or OK, when a login attempt has failed. Why not send a 403 status code, which is designed specifically to say you can’t be here, or forbidden, actually. There’s even a better alternative to 403, but stay with me.

I came about this bit of information while reading this post by Konstantin Kovshenin. And was able to confirm it myself by logging into this site incorrectly, as you can see in the featured image above. wp-login.php is returned as 200 OK and is circled in red.

So, as Konstantin suggested, we can use this code to send a proper 403 Forbidden status code on a failed login attempt:

function my_login_failed_403() {
    status_header( 403 );
add_action( 'wp_login_failed', 'my_login_failed_403' )

But why send a 403, which is Forbidden? It’s not truly a forbidden page, as people have a legit reason to be there, even if they can’t remember their password.

So, sending 401 Unauthorized as the HTTP response status code may be even better.

function my_login_failed_401() {
    status_header( 401 );
add_action( 'wp_login_failed', 'my_login_failed_401' );

So, you can use either of those, the first chunk to send a 403 Forbidden response, and the second for sending a 401 Unauthorized response code.

On login failure, send "401 Unauthorized" or "403 Forbidden" HTTP response code?

View Results

Loading ... Loading ...

Either could go in the functions.php file for your theme, or more likely, in your WordPress functionality plugin.

You can find a good list of HTTP response codes at the Mozilla Developer Network site.


Add HTML5 Support to your WordPress Theme Using Jetpack

A lot of WordPress themes are now built entirely with HTML5. I think Rootdip (previously HTML5Press), was one of the first WordPress themes to utilize many HTML5 elements. Some themes, however, don’t make use of HTML5 at all. WordPress has the ability to allow the use of HTML5 markup for comment forms, comment lists, and search forms.

Your theme has to use add_theme_support( 'html5' ). Much of this was inspired by this post from Konstantin Obenland on ThemeShaper, as was the featured image for this post, heh.

Active Theme Support

This is really easy. All you need to do is call add_theme_support( 'html5' ), essentially. More specifically, in the functions.php file for your theme, add the following.

function prefix_setup() {
    add_theme_support( 'html5', array( 'comment-list', 'search-form', 'comment-form', ) );
add_action( 'after_setup_theme', 'prefix_setup' );

That’s all there is. Your comment lists, comment forms, and search forms will now be marked up with HTML5!

Comment lists, comment forms, and search forms are the only html5 arguments supported currently, it’s possible many different arguments will be added at a later date. It may not be required though.

If you do build support for this into your theme, it’d probably be a good idea to add it in as an option that users can enable or disable at their discretion.


Add Jetpack Subscribe Form To Bottom of All WordPress Posts & Pages

You may have noticed I’ve added subscribe widgets at the end of every post, right below the related articles. It’s really simple to do, and comes built-in with the Jetpack WordPress Plugin.

First, make sure you’re using a child theme so you’re not changing the core code of your theme, as your changes will be lost on updates. You can read about creating a child theme here at the WordPress Codex.

1. Register New Sidebar

First, add this to your functions.php file. It will register a new sidebar called Subscribe In Page.

register_sidebar( array(
    'name' => 'Subscribe in page',
    'id' => 'subscribe-in-page',
    'before_widget' => '<div id="subscribe">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>'
) );

2. Call Our New Sidebar

Now, in your WordPress loop, find something like <?php the_content(); ?>. Here’s what my the_contenet() call looks like:

<div class="entry-content" itemprop="mainContentOfPage">
    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links-next-prev">', 'after' => '</div>', 'nextpagelink' => '<button class="next-page-nav">' . __( 'Next page &rarr;', 'independent_publisher' ) . '</button>', 'previouspagelink' => '<button class="previous-page-nav">' . __( '&larr; Previous page', 'independent_publisher' ) . '</button>', 'next_or_number' => 'next' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'independent_publisher' ), 'after' => '</div>' ) ); ?>
<!-- .entry-content -->

Notice there’s a couple functions after the_content(), this is normal and will vary from theme to theme. Any plugins you’ve got set to appear below your post will be shown, and then the subscription form will be shown.

4. Add Your Jetpack Subscribe Widget

Just like adding a normal widget. Go to Appearances, and then Widgets. You should see an area titled Subscribe In Page. Drag the Blog Subscriptions (JetPack) widget into the Subscribe In Page sidebar area. Configure it, save it.

5. Add The Sidebar To The Theme

To add the Jetpack subscription form, add <?php dynamic_sidebar( ‘subscribe-in-page’ ); ?>, which calls our custom sidebar, to your loop. It should go somewhere under the_content() if you want it to show at the end of the post. If you want it at the beginning, add <?php dynamic_sidebar( ‘subscribe-in-page’ ); ?> before the_content().

You’re Done!

And that’s really all there is to adding a subscribe form to the end of each post. You can also add the same subscribe form in the sidebar, like I have at longren.org. As a note, the Jetpack plugin is packed full of functionality. Chances are good that you’ll find more Jetpack modules to use, other than the Subscriptions module.

Do you use the Jetpack plugin for WordPress?

View Results

Loading ... Loading ...


Announcing HTML5Press

Back in October 2010, Jesper released version 1.2 of his HTML5 design.

I remember looking at it and thought it looked pretty nice. I downloaded it and it sat on my desktop for a long time.

There was a Blogger template based on his HTML5 design, but nothing for WordPress, so that’s where this theme comes in. HTML5Press is nothing more than Jesper’s HTML5 design with WordPress functionality added in.

I’ve got the theme setup on a test site, which you can find here. I took the liberty of fixing the CSS menus. In version 1.2 of Jesper’s work, there’s some issues with styling sub-menus. I doubt the average user would notice them, but I did, and they had to be fixed.

That’s really the only style related modification I made to Jesper’s HTML5 design.

Some WordPress features HTML5Press supports:

  • Featured Images for Posts
  • WordPress Navigation Menus
  • WordPress Widgets
  • Threaded Comments

HTML5Press is available under the GNU GPLV2 license. The code is hosted on Github. The official homepage for the theme is located right here on longren.org.

A download is not yet available but will be in the next few days. If you really want to, you can download from the HTML5Press Github repo, but it may not work as I’m making changes at a pretty quick pace. Your best bet is to hang off a day or two for an official release.

If you do decide to download an early copy from Github and notice issues, please use the issue tracker at Github to report problems. As usual, let me know if you have any comments, questions, or suggestions. You can comment on this post or you can comment on the HTML5Press page.