I’d like to thank all of you who visited Jayj.dk in 2011 – You’re awesome!

2011 has been a great year, both for me personally and for this site, Jayj.dk. The site had a 300% increase in visits and a 306% increase in page views.

This blog started as a Danish blog but now I mostly blog on English because of my visitors from all over the world. Just 4.29% are from Denmark. I had 621.63 % more Spanish visitors than in 2010 and 706.48 % more Germans.

The most popular browser was Chrome with 40.58 % and Firefox closely after with 39.09 %. Just 0.25% was using Internet Explorer 6.

Map of Jayj.dk visitors in 2011

Goals

One of my goals for 2011 has to write more blog posts but I didn’t write as many as I hoped. The most popular posts was the 2009 post “A free HTML5 and CSS3 theme”. I released version 2.0 of the theme this year and the theme has been downloaded around 23,000 times.

Another goal was to release 3 themes this year and I did it!

Cakifo

In April I released a free WordPress theme called Cakifo. It quickly became very popular and has been downloaded around 2600 times. Version 1.3 is on it’s way!

Jayj HTML5 2.0

My free HTML5 and CSS3 theme, Jayj HTML5, got a nice update. Both design and code has been through major improvements and is much much better than before.

Japibas 2.0

My most popular WordPress theme, Japibas, got updated as well. The new version has been completely rewritten – the code is much better. The markup is now HTML5 and design has been updated to use CSS3 instead of images.

Jayj Quicktag

I also made a free WordPress plugin: Jayj Quicktag. The plugin allows you easily to add custom Quicktags to the post, page or a custom editor.

My year

The biggest thing that happend for me this year was to turn 18

Another was to contribute to all 3 major WordPress versions: 3.1, 3.2 and 3.3

• My first contribution was a small version number fix. A small contribution but I was so so happy
• My biggest contribution was a patch to avoid warning when non-existent ID is passed to wp_get_attachment_link()
• See all my contributions
• I also translated most of Twenty Eleven to Danish

That was 2011 in review. Thanks again folks and I hope all of us may have a fantastic 2012!

Two years ago I released my first free WordPress theme, Japibas. I’ve wanted to update in a long long time but never did it.. But it has finally been updated to version 2.0.

The new version has been completely rewritten – the code is much better. The markup is now HTML5 and design has been updated to use CSS3 instead of images, and oh; it’s responsive!

Some other new features

• Multiple color schemes (Green, Blue & Red already included – Easy to add more)
• Small Theme Options page (yep, that’s a feature)
• Child theme friendly
• 6 Widget-ready areas
• Built-in pagination
• Small set of useful shortcodes
• Uses the built-in WordPress menu system
• And much, much more! See this blog post for more features

DownloadDemo

• Requires at least WordPress 3.3
• Tested up to 3.3

This is part 2 of my “Create a custom “Download” post type using WordPress” series.

Table of Contents

1. Create a “Download” shortcode
2. Create the Download Categories archive
3. Download the full code

Download the full code

I’ve created a TwentyEleven child theme with the full code both parts. As a bonus, the download includes two widgets and CSS styling. You can drop it in your wp-content/themes folder and use it – or just take parts of it for your own theme.

Create a “Download” shortcode

The first thing is to create a shortcode called “download”. This is very useful for displaying downloads in posts.

function jayj_download_shortcode( $atts, $content = null ) {
	// Default values
	extract( shortcode_atts( array(
		'id' => '',
		'format' => 'box', // or inline
		'title' => '',
		'show_count' => true,
		'thumbnail' => false
	), $atts ) );
}

add_shortcode( 'download', 'jayj_download_shortcode' );

Now we’ve created the [download] shortcode and the default values for the shortcode parameters, that can be used like [download id="1"]

Here’s a small explanation of the parameters

• ID: ID of the download
• Format: box or inline. Default is box. I’ll explain this later
• Title: The title on the anchor links
• Show_count: Show the download count? If true, the count will be appended to the title as well. Default is true – set any value to make it false
• Thumbnail: Show download thumbnail? Default is false – set any value to make it true. This is only for ‘box’ downloads
• Content: This isn’t a parameter, but you can add content (like a description) by adding text between the opening and closing shortcode ([download]Content here[/download])

Let’s continue. Inside the jayj_download_shortcode function, after the default values, we first check if the ID is set and if the ID actually belongs to a download.

// No ID, return
if ( empty( $id ) )
	return '<em>Error: No download found</em>';

// Get download
$download = get_post( $id );

// The ID doesn't belong to a download, return
if ( $download->post_type != 'jayj_download' )
	return '<em>Error: The download is not valid</em>';

The next thing is to add some content to the shortcode. The download can be in two formats (you can easily add more): box or inline.

Box: There’s a box around the download link, like on this page
Inline: The download link is simply an anchor link (<a href=""></a>)

First the box format:

The reason why I use ob_start(); and return ob_get_clean(); is so that the the content is returned instead of echoed.

Now to the inline format

/**
 * Format: inline
 */
if ( 'inline' == $format ) :

	$count_meta = get_post_meta( $id, 'download_count', true );

	// Get the title, either from shortcode or the title of the download
	$title = ( $title ) ? $title : 'Download ' .  $download->post_title;

	// Append count to title
	if ( $show_count === true )
		$title .= ' (Downloaded ' . number_format( $count_meta ) . ' times)';

	// Get content
	$content = ( empty( $content ) ) ? 'Download ' .  $download->post_title : $content;

	return '<a href="' . get_permalink( $id ) . '" class="inline-download" title="' .  esc_attr( $title ) . '">' . $content . '</a>';
endif; // 'inline' == $format

return;

The shortcode is now done!

The Archive for Download Categories

In part 1, you created the archive page for all the downloads. But we still need an archive page for the terms in the “Download Categories” taxonomy.

The different term archives can be found at example.com/download-types/*term-name*

Create a new file in your theme and call it taxonomy-download-categories.php
You can pretty much copy the content from your archive-jayj_download.php file into it.

The only difference is that you should add

global $wp_query;
// Merge with the original query
$args = array_merge( $wp_query->query, $args );

before query_posts( $args ); – That will merge your custom query together with the original.

The Widgets

Last, but not least: the widgets.

As a bonus for those who download the full code, I’ve created two widgets: One with the latest downloads and one with the most popular downloads.
If you want those widgets, I suggest you download the full code

Download the full code

I’ve created a TwentyEleven child theme with the full code both parts. As a bonus, the download includes two widgets and CSS styling. You can drop it in your wp-content/themes folder and use it – or just take parts of it for your own theme.

For more information about the plugin, see the plugin page.

I’ve been asked several times about the download functionality on my blog so I’ve decided to create this 2-part tutorial on how you can create your own download section on your site using custom post types.

In this part I’ll teach you

1. How the register the post type
2. A custom “Download Categories” taxonomy
3. A custom meta box with information about the download
4. Create the archive
5. Create the download counter
6. Conclusion

The next part will be about creating a download shortcode, a widget and the archive for the custom taxonomy.

Download the code on Github

The code in this tutorial should be in your themes functions.php or your own functionality plugin.

Create the Post Type

<?php
/**
 * Add the download post type
 */
add_action( 'init', 'jayj_create_download_post_type' );

function jayj_create_download_post_type() {

  register_post_type( 'jayj_download', array(
	'labels' => array(
		'name' => 'Downloads',
		'add_new' => 'Add New',
		'add_new_item' => 'Add New Download',
		'edit' => 'Edit',
		'edit_item' => 'Edit Download',
		'new_item' => 'New Download',
		'view' => 'View Download',
		'view_item' => 'View Download',
		'search_items' => 'Search Downloads',
		'not_found' => 'No downloads found',
		'not_found_in_trash' => 'No downloads found in Trash',
	),
	'description' => 'The latest downloads',
	'public' => true,
	'show_ui' => true,
	'exclude_from_search' => true,
	'supports' => array( 'title', 'excerpt', 'thumbnail', 'custom-fields' ),
	'has_archive' => 'downloads', // The archive slug
	'rewrite' => array( 'slug' => 'download' ),
  ));
}

?>

This will register the custom post type and give you a ‘Downloads’ menu in your dashboard, as seen on the image below.

I won’t go over all the values – if you want a better understanding on what’s going on, I recommend reading this tutorial on custom post types by Justin Tadlock.

But I’d like to explain this part

'has_archive' => 'downloads', // The archive slug
'rewrite' => array( 'slug' => 'download' )

It means that your download archive can be found at example.com/downloads and the individual downloads can be found at example.com/download/%slug%

A custom “Download Categories” taxonomy

Now that we have the post type, let’s create a custom taxonomy called “Download Categories”. That way you can categorize your downloads just like you can with posts. Examples of download categories can be PDFs, PSD files, WordPress themes and so on.

After the register_post_type(); function, add the following code

/**
 * Custom "Download Categories" taxonomy
 */
register_taxonomy( 'download-categories', array( 'jayj_download' ),
  array(
	'public' => true,
	'labels' => array( 'name' => 'Download Categories', 'singular_name' => 'Download Category' ),
	'hierarchical' => true,
	'rewrite' => array( 'slug' => 'download-types' )
  )
);

'hierarchical' => true makes the taxonomy behave like categories. If you want it to behave like tags, set it to false.

When you create or edit a download, you'll now have have the option to choose a category

Create a custom meta box

The third step is to add custom data fields to the add/edit download page. To give you an idea of what I mean, take a look at the following image

I’ve decided to keep it simple in this tutorial. You should add and edit them so they fit to your needs.

Let’s move on!

/**
 * Adds the download meta box for the download post type
 */
function jayj_meta_box_download() {
  add_meta_box( 'jayj-meta-box-download', 'Download Settings', 'jayj_meta_box_download_display', 'jayj_download', 'normal', 'high' );
}

add_action( 'add_meta_boxes', 'jayj_meta_box_download' );

This will add the meta box to the jayj_download post type.
If you try it out and gets an error, don’t worry. That’s because we haven’t defined the jayj_meta_box_download_display() function yet. Let’s do that know.

The code has been breaked up into pieces. First part:

/**
 * Displays the download meta box
 */
function jayj_meta_box_download_display( $object, $box ) {

   // Setup some default values
   $defaults = array(
	'file' => '',
	'version' => '1.0',
	'postid' => '',
	// Add more!
   );

   // Get the post meta
  $download = get_post_meta( $object->ID, 'download', true );

  // Merge them
  $download = wp_parse_args( $download, $defaults );
}
?>

This part will set up some default values and merge them with the download post meta using the wp_parse_args() function. Some of the values are set to empty by default to prevent PHP notices when there’s no download meta.

Next part is the fields

<input type="hidden" name="jayj-meta-box-download" value="<?php echo wp_create_nonce( basename( __FILE__ ) ); ?>" />

<br />

<table class="form-table">

   <thead><tr><th><span class="description">None of the fields are required</span></th></tr></thead>

   <tr>
      <th><label for="download-hide">Hide download</label></th>
      <td>
         <?php $hide = get_post_meta( $object->ID, '_hide_download', true ); ?>
         <label><input type="checkbox" name="download-hide" id="download-hide" value="1" <?php checked( '1', $hide ); ?> />
         <span class="description">Check this if you don't want to show the download at the archive page</span></label>
      </td>
   </tr>

   <tr>
      <th><label for="download-file">File</label></th>
      <td>
         <input type="text" id="download-file" size="60" name="download-file" value="<?php echo esc_url( $download['file'] ); ?>" />
         <input type="button" id="upload-file-button"  class="button" value="Upload file" />
         <label for="download-file"><span class="description">Upload or link to download file</span></label>
      </td>
   </tr>

   <tr>
      <th><label for="download-version">Version</label></th>
      <td>
         <input type="text" id="download-version" name="download-version" value="<?php echo esc_attr( $download['version'] ); ?>" size="3" />
      </td>
   </tr>

   <tr>
      <th><label for="download-count">Download count</label></th>
      <td>
         <?php $count = isset( $object->ID ) ? get_post_meta( $object->ID, 'download_count', true ) : 0; ?>
         <input type="number" id="download-count" name="download-count" value="<?php echo absint( $count ); ?>" size="7" min="0" />
         <?php printf( '<p>This file has been downloaded <b>%d</b> times</p>', absint( $count ) ); ?>
      </td>
   </tr>

   <tr>
      <th><label for="download-postid">Post ID</label></th>
      <td>
         <label><input type="text" id="download-postid" name="download-postid" value="<?php echo absint( $download['postid'] ); ?>" size="3" />
         <span class="description">ID of the post which the download is associated with</span></label>
         <?php if ( !empty( $download['postid'] ) ) { ?>
            <p>This download is associated with <a href="<?php echo get_permalink( $download['postid'] ); ?>"><?php echo get_the_title( $download['postid'] ); ?></a></p>
         <?php } ?>
      </td>
   </tr>

</table>

The code might look long and confusing. It adds a table with all the fields and gets the values from the $download array defined earlier.

But we are not done yet. The metabox and the fields has been added, but we haven’t made a function that saves them yet.

/**
 * Save the download information
 */
function jayj_meta_box_download_save( $post_id, $post ) {

   /* Verify that the post type supports the meta box and the nonce before preceding. */
   if ( ! isset( $_POST['jayj-meta-box-download'] ) || ! wp_verify_nonce( $_POST['jayj-meta-box-download'], basename( __FILE__ ) ) )
	return $post_id;

   /* Don't save them if... */
   if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
   if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) return;
   if ( defined( 'DOING_CRON' ) && DOING_CRON ) return;
   if ( $post->post_type == 'revision' ) return;

   /* Get the post type object. */
   $post_type = get_post_type_object( $post->post_type );

   /* Check if the current user has permission to edit the post. */
   if ( ! current_user_can( $post_type->cap->edit_post, $post_id ) )
	return $post_id;

/**
 * Add the download meta
 * CUSTOMIZE IF YOU'VE ADDED/EDITED/REMOVED FIELDS
 */
   update_post_meta( $post_id, 'download', array(
	'file' => esc_url_raw( $_POST['download-file'] ),
	'version' => strip_tags( $_POST['download-version'] ),
	'postid' => absint( $_POST['download-postid'] ),
	// Add your own if you've added fields
   ) ); 

   // Seperate the download count and "hide" from the rest
   update_post_meta( $post_id, 'download_count', absint( $_POST['download-count'] ) );
   update_post_meta( $post_id, '_hide_download', ( $_POST['download-hide'] == 1 ? 1 : 0 ) );
}

add_action( 'save_post', 'jayj_meta_box_download_save', 10, 2 );

This saves all the meta data, excerpt the count and “hide”, in a single array in a custom field called download. The download count is saved to download_count and the "hide" option is saved in _hide_download. They're apart from the others because it's easier to use them to do other things when they're alone.

As you might has noticed, there's a button called "Upload file" in the metabox. Currently it doesn't do anything but we make it open a lightbox window, just like when you add images, and upload the file.

Small changelog

• Even more HTML5
• More widget areas (after singular, after singular, and 404 error page)
• Pull quotes (See Wiki)
• Add support for the Custom Field Series extention
• Update notification in your dashboard when an update is available
• Modernizr 2.0 and Slides 1.1.8
• French translation by Wolforg
• Bug fixes and small improvements to design and code

See a more detailed changelog at Github

Download the update

I’ve just released version 2.0 of my free HTML5 and CSS3 theme. Both design and code has been been through major improvements and is much much better than before.

Here’s a preview of the new design (click for demo)

Features

• Uses HTML5 and CSS3
• Awesome design with a hot pink color!
• Fully working Ajax PHP contact form
• Modernizr for enabling of HTML5 elements & feature detects
• Respond.js – a lightweight polyfill for min/max-width CSS3 Media Queries
• Uses Droid Serif, loaded from Google Fonts, for the headings
• IE6 & IE7 warning (can easily be edited to IE6 only or removed)
• Free to use! (: – It’s released under New BSD License. The license is included in license.txt

The theme has been tested in all major browsers and it’s awesome! It looks a bit funny in IE6 and IE7, but who cares?

See the original post for more information

Other versions of the theme

The theme is available as both WordPress and Blogger theme as well

• Download WordPress version by Tyler Longren
• Download Blogger version by Rethnaraj Rambabu (old version of the theme)

Small changelog

• HTML5! The theme now uses HTML5
• Improved Post formats
• Frontpage improvements
• Print and RTL styles added

See a more detailed changelog at Github

Cakifo is a free WordPress theme built with from the rock-solid Hybrid Core theme framework by Justin Tadlock, so it provides a great starting point with many useful features.

This theme is a parent theme. What this means is that to customize it, you should be creating a child theme. Is it a theme framework? Some people might call it that. All you need to know is that it’s a solid, yet flexible, starting point for nearly any blog.

Some features of Cakifo

• Child theme friendly – Nearly everything can be customized in a child theme
• Uses Hybrid Core as framework
• HTML5
• Custom front page with slider, recent posts, and posts from categories
• Killer post thumbnails functionality
• Per-post/page layouts (one-column, two-column, and three-column layouts)
• Art direction (the ability to add custom, per-post stylesheets)
• Highly-configurable widgets that give you full control over their display
• Several sidebars (Sidebar, secondary sidebar, after-singular, after-single, error page, and footer + more in a child theme)
• Many useful shortcodes
• Small theme settings page (yes, that’s a feature)
• Breadcrumbs
• Built-in pagination
• And much, much more!

(yes, some of these features are totally stolen from Justins’ themes )

Download the theme

DownloadDemo

This theme has been tested and works with the latest version of WordPress (3.1.x) as well as WordPress 3.2-bleeding. It is a parent theme, so any modifications you make should be handled within a child theme (example included in download)

You can view the source and help improving it on Github. The theme is licensed under GPL.

Update May 8, 2011

Version 1.1 has now been released. Changelog:

• HTML5! The theme now uses HTML5
• Improved Post formats
• Frontpage improvements
• Use loop.php instead of post-format.php
• Print and RTL styles added
• Slides script updated to 1.1.7

See a detailed changelog at Github

My free HTML5 and CSS3 theme has been converted to a free WordPress theme, called HTML5Press, by Tyler Longren.

Download it now

Some of HTML5Press’ features

• Every feature of the original theme
• Featured Images for Posts
• WordPress Navigation Menus
• WordPress Widgets
• Threaded Comments

The project is also hosted on Github where you can help improving the theme.