Refactord

Create A Skewed Title With CSS and Jquery

Kyle G — Sun, 26 Jun 2011 17:21:57 +0000

Web typography sometimes seems limiting, but using jQuery combined with CSS 3 will you the ability to create something that breaks from the norm. The effect is to use jQuery and a plugin call Letting JS to wrap elements (letters) with a unique class and target each with unique styling. The styling is CSS 3; taking advantage of the transform property. This will allow us to move elements (letters) along the X and Y axis as well as skewing them around the Y axis.

Lettering JS Overview

If you visit the lettering.js website, you will find the title of the site is pure type and is a great example of what this plugin can do for you. It allows you to individually target either letters, words, or lines of content by assigning classes to each. The title on this site uses Lettering JS to individually target each character in the title allowing individual styling be applied to each.

CSS 3 transform

The CSS 3 transform property gives you the ability to: rotate elements, move elements along the X and Y axis, transform elements via a transformation matrix, scaling, and skewing around the X and Y axis. This property is recognized by most modern browsers and is supported by IE 9.

When using transform, you have the task of targeting each browser to ensure you style will be applied. Here is a quick look at one of the ways from the example that transform is used:

.char1 {
    -webkit-transform: translate(0px, -13px) skewY(-15deg);
    -o-transform: translate(0px, -13px) skewY(-15deg);
    -moz-transform: translate(0px, -13px) skewY(-15deg);
    -ms-transform: translate(0px, -13px) skewY(-15deg);
    transform: translate(0px, -13px) skewY(-15deg);
}

There are 5 different methods to ensure translate will be supported in the popular browsers; these are Webkit (-webkit-transform:), Opera (-o-transform), Mozilla Firefox (-moz-transform), IE (-ms-transform), and a general transform. The values for transform we use are translate and skewY and need more explanation.

Translate move elements along the X and Y axis. These values are surrounded by parenthesis with the first value is for the X axis and the second is the Y axis. In the example we use a value of -13px on the y axis which moves the element up, the opposite to a regular XY graph.

SkewY rotates an element around the Y axis and the value is the degree the element will be rotated. There is a general skew we could also use and it accepts values similar to translate, but there is no need because the Y axis is all we will need to create the look.

Creating the Skewed Title

To begin, we need to create a HTML document and include the jQuery library. I am also going to include an external style sheet and create a H1 title call “skew example” with an ID of “skew-title”. Here is the code:




    
    
    Skew Example
    


    Skew Example

Adding Lettering JS

Next, we need to download lettering JS and include it in our document. Then we use javascript to get “skew-title” and call the lettering function. By default this wraps each character in a span assigning it a class of “char” plus the number of the character. For example the first letter in the title would have the class of “char1″ representing that is is the first character in the string. These new classes created by lettering JS will allow us to style each character individually. Here is the code:

>

    
    
    
    

    Skew Example
    


    Skew Example

If we take a closer look at the result of calling Lettering JS on our title, we will find that each letter is now wrapped in a span. Each span has a class of char plus what ever number character it is. Here is the result:

Creating the CSS

To begin I just create some general styling of the H1 tag, giving it a certain font size and text-transform of uppercase.

h1 {
    font-size: 65px;
    text-transform: uppercase;
}

CSS Transform Methods

To create the skew on just the first letter, we are going to use the span class assigned by Lettering JS to target the first letter, char1. Here is the code from the example:

.char1 {
    -webkit-transform: translate(0px, -15px) skewY(-15deg);
    -o-transform:translate(0px, -13px) skewY(-15deg);
    -moz-transform:translate(0px, -13px) skewY(-15deg);
    -ms-transform:translate(0px, -13px) skewY(-15deg);
    transform: translate(0px, -13px) skewY(-15deg);
    display: inline-block;
    text-align: center;
    background: #5E6553;
    border: 1px solid #B6B9B0;
    color:#B6B9B0;
    width: 65px;
}

Reviewing the code, you will find the translate and skew methods from above but we have added more styling. We added color to the font, gave it a background color, width, aligned the text to the center, and gave it a border. One other property was used to change the display to inline-block. This is required to make each letter function like a block and without the styling would not properly be applied.

Styling the rest

After style the first letter you should be able to see how to style the rest. The best thing to actually do is to play with it. Try different scaling and skews to create something unique. Thanks for reading.

Creating The Author Tag Cloud

Kyle G — Wed, 15 Jun 2011 05:44:12 +0000

I just released this sites first plugin: Author Tag Cloud, which create a tag cloud by an author containing the tags he or she used on their posts. Beyond that it creates a new permalink structure to drill down into content and find post based on author and tag. It also creates a template tag that creates the author tag cloud. Enough about what it does I think we should see how it actually works!

Why create this plugin

One of the reason why I created this plugin is I read several blogs some which I return to reread a post. But when I return to the site, I find that there has been several posts since I last visited or it has been a year or so since I read it. Well, to be honest I am an idiot and probably should of bookmarked it. Here is the deal, I might know the author or topic of the post but will have to dig, going back several pages will I find what I am looking for.

Since I am lazy and would like some other way to drill down, mainly I know the author and the topic, I figured why not have WordPress do that for me.

Where to Start to create author tag cloud

To begin, I created a new plugin folder in my wp-content/plugins/ folder and named it author-tag-cloud. I then create a new PHP document named author-tag-cloud.php. After that I created the standard information in that file. I am going to create a new class called author_tag_cloud which I first to see if it exists already, which is not a bad practice as there could be a remote possibility someone else developing on WordPress is using that class name. I create the class and then call a new instance of the class. Here is the code so far:

/*
Plugin Name: Author Tag Cloud
Plugin URI:
Description: my description
Author: Kyle G
Author URI :
Version: 1.0
*/

if(!class_exists('Author_tag_cloud')){
    class Author_tag_cloud {

    }
    $author_tag_cloud = new Author_tag_cloud;
}

Adding the new permalink structure

This is where the post on adding permalinks to WordPress will come in handy becuase I want to create a new permalink structure that looks like:

http://www.mysite.com/author/author-slug/tag/tag-slug

But this also needs to accept paging. For example what if the author has 100 posts with a specific tag and the setting only allow for 10 to show on a given page. This mean there are pages and we must account for this in our permalink structure.

To create this new structure I need to import the class from the previous post. I drop that into a new folder called includes. I then need to create a regular expression and query string for how it will work. I will not go into detail how I created it, that is completely separate topic and here is the rules I am going to create:

'rules' => array(
                    'tag/([^/]+)/author/([^/]+)/?$' => 'index.php?tag=$matches[1]&author_name=$matches[2]',
                    'tag/([^/]+)/author/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?category_name=$matches[1]&author_name=$matches[2]&paged=$matches[3]',
                    'author/([^/]+)/tag/([^/]+)/?$' => 'index.php?author_name=$matches[1]&tag=$matches[2]',
                    'author/([^/]+)/tag/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?author_name=$matches[1]&tag=$matches[2]&paged=$matches[3]'
                    )

Remember Every Regular Expression in Parentheses Is a Query String Match and if are looking to create your own query strings you should know the query vars available to you.

Now that I have the rules done, I going to create a constructor function in my class and a new method call add_rules(). Also in the constructor function, I am going to call this method add_rules(). You could do this in the constructor but I just prefer to do it this way. I import my class that I added to my includes files and call a new instance of my class passing it these rules. Take a look at the constructor method and add_rules methods:

function  __construct() {
            $this->add_rules();
        }

        function add_rules(){

            include('includes/refactord-add-rewrite-rules.php');

            $options = array(
                'rules' => array(
                    'tag/([^/]+)/author/([^/]+)/?$' => 'index.php?tag=$matches[1]&author_name=$matches[2]',
                    'tag/([^/]+)/author/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?category_name=$matches[1]&author_name=$matches[2]&paged=$matches[3]',
                    'author/([^/]+)/tag/([^/]+)/?$' => 'index.php?author_name=$matches[1]&tag=$matches[2]',
                    'author/([^/]+)/tag/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?author_name=$matches[1]&tag=$matches[2]&paged=$matches[3]'
                    )
            );

            $add_rewrite_rules = new Refactord_add_rewrite_rules($options);

If you activate this plugin, these new permalink structures will be working. Pretty easy right!

Creating the template tag for the author tag cloud

I am not going to go into to much detail about every line of code because it basically takes the wp_tag_cloud function and modifies it to create the author tag cloud. To do it on your own check out the wp_tag_cloud function in the wp-includes/category-template.php. Here is our modified version:

function author_tag_cloud( $args = '' ) {
        $defaults = array(
            'author_id' => 0,
            'smallest' => 8,
            'largest' => 22,
            'unit' => 'pt',
            'number' => 45,
            'format' => 'flat',
            'separator' => "\n",
            'orderby' => 'name',
            'order' => 'ASC',
            'exclude' => '',
            'include' => '',
            'link' => 'view',
            'taxonomy' => 'post_tag',
            'echo' => true
        );
        $args = wp_parse_args( $args, $defaults );

        //get the author slug
        $author = get_userdata($args['author_id']);

        if(!$author)
            return;

        $args['author-slug'] = $author->user_nicename;

        //$tags = get_terms( $args['taxonomy'], array_merge( $args, array( 'orderby' => 'count', 'order' => 'DESC' ) ) ); // Always query top tags

        $tags = author_get_terms($args['taxonomy'], $args);

        if ( empty( $tags ) )
                return;

        foreach ( $tags as $key => $tag ) {
//                    if ( 'edit' == $args['link'] )
//                            $link = get_edit_tag_link( $tag->term_id, $args['taxonomy'] );
//                    else
//                            $link = get_term_link( intval($tag->term_id), $args['taxonomy'] );
            $link = get_bloginfo('url') . "/author/" . $args['author-slug'] . "/tag/" . $tag->slug;

            if ( is_wp_error( $link ) )
                    return false;

            $tags[ $key ]->link = $link;
            $tags[ $key ]->id = $tag->term_id;
        }

        $return = generate_author_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args

        $return = apply_filters( 'author_tag_cloud', $return, $args );

        if ( 'array' == $args['format'] || empty($args['echo']) )
                return $return;

        echo $return;
}

If you compare wp_tag_cloud with our function, you will first see the author_id parameter which allows us to tell what author we are talking about. Next, we try to get the user_data on this author_id. This is done as a check to see if this ID even exists and if doesn’t just return. Next, we call a new function which we need to create to get the author tags called author_get_terms. The link is then edited to reflect our new permalink structure. We also change out the generate_wp_tag_cloud with another function we will create. Lastly, we change the filter so if needed this can be filtered.

Finding the tags by the author

In the above function, we called a new function that we need to create called: author_get_terms(). This is basically an SQL call to get rows. Take a look at the function:

function author_get_terms($taxonomy, $r){
            global $wpdb;

            return $wpdb->get_results(
                "SELECT posts.ID, taxonomy.term_id, terms.name,terms.slug, terms.term_group,
relationships.term_taxonomy_id,  taxonomy.taxonomy,  taxonomy.description, COUNT(terms.name) AS count

                FROM {$wpdb->prefix}posts AS posts
                JOIN {$wpdb->prefix}term_relationships AS relationships
                JOIN {$wpdb->prefix}term_taxonomy AS taxonomy
                JOIN {$wpdb->prefix}terms AS terms

                WHERE posts.post_author = " . $r['author_id'] . "
                AND posts.post_status = 'publish'
                AND posts.post_type = 'post'
                AND relationships.object_id = posts.ID
                AND relationships.term_taxonomy_id = taxonomy.term_taxonomy_id
                AND taxonomy.taxonomy = '{$taxonomy}'

                AND terms.term_id = taxonomy.term_id
                GROUP BY terms.name
                ORDER BY count DESC"
            );
        }

It is a pretty complicated SQL statement that involves joining several tables and grouping the results. I am not going to cover how this SQL statement was formulated and more than likely there is a better way to do this, but it works. My recommendation is to read up on joins and try them on your local WordPress install to see what you can come up with.

The generate_author_tag_cloud Function

This is an exact copy of wp_generate_tag_cloud(). The only reason why I did this exact copy is to maybe later work on both to modify these functions even more.

Plugin Complete!

We completed the plugin and actually didn’t really reinvent the wheel. We took preexisting WordPress functions to create our template tags and used our add permalinks class to create our new structure. Thanks for reading and please subscribe to our feed, we will continue to add more and more tutorials.

Adding Google Fonts to WordPress

Kyle G — Mon, 13 Jun 2011 00:23:48 +0000

If you haven’t seen the great API Google has out for fonts, the chances are when you do you will want to start using it. The Google Font API allows you to add new and great fonts to your web pages and frees you from the limited choices you had before. This site uses many custom fonts and you can see that unique fonts will effect the way your sites look.

How to use Google Fonts

There could be nothing simpler than using this API. If you read the documentation you will see just how quick and easy it is. To begin you need to need to check out the available fonts and choose the one you like. After that you simple click the tag that says “use this font” and Google provides you the code to use the font you have selected.

This includes a style sheet link to place in the head of your document and some example code on how to call the font on a element. That is it.

Incorporating this into WordPress

Now to add this WordPress we could simply down this code in the wp_header file in our theme but it would be better to register this style sheet with WordPress and have WordPress manage it. We can do this by using wp_register_style() function and wp_enqueue_style();

If you have not seen these functions no worry. They are pretty simple to use and have great resources to read up on. But the gist is that these function allow you to manage the style sheets through WordPress. I use often to include a style sheet on one page but exclude it from another. This is gaining control of what is loaded by WordPress.

To begin, I want this code in my functions.php file and I use an action hook on the init hook to call wp_enqueue_style() and wp_register_style(). Here is the code: take a look and we will go into more detail.

add_action('init', 'theme_js_css');

 function theme_js_css(){
    wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Rokkitt|Amaranth|Raleway:100|Brawler');

    wp_enqueue_style( 'googleFonts' );
 }

The wp_register_style first accepts the handle or what the style sheet will be called. The second parameter is the URL path to the style sheet; in our case the Google Fonts. This function does accept a third parameter, not used here, to call an array of dependent style sheets.

Lastly we simple call the wp_enqueue_style( ‘googleFonts’ ), which calls the style sheet with the handle we created in wp_register_style. That is it and now these fonts are available to us, we just need to style our elements.

One note on the code we used. You will see that pipe character is being used between several font names. Google allows use to do this to call multiple fonts in one. Also, a nice little feature.

There is also a plugin

You can also incorporate Google Fonts Plugin for WordPress found in the WordPress repository. This plugin allows you to select custom fonts from the Google API and create CSS on the spot to style the elements.

Adding Rewrite Rules to WordPress

Kyle G — Sun, 05 Jun 2011 23:25:05 +0000

Changing WordPress URL structures is covered in many places with just the basics, but you don’t really get the behind the scenes. The common tutorials and discussion is on how to create a pretty permalink structure that will increase your site’s SEO. That is changing the default permalink structure from http://www.yoursite.com/?p=1 to http://www.yoursite.com/hello-world. But as you start to develop plugins or even advanced themes, a deeper understanding how WordPress using the URL of any page to display the correct content will allow you to create your own URL structures. This all leads to the WordPress rewrite rules.

This tutorial will focus on creating a class to add rewrite rules to WordPress. We will do this by first going into the basic ideas of the WordPress Query class. Then learning: how to display the rewrite rules that already exist, how to add rules, and how to flush rules.

What You Will Need To Know Before Moving On

Some idea of Regular Expressions
The Basics of the WordPress Permalinks
Object Oriented PHP

WordPress Rewrite Rules Basics and The WordPress Query class

When you visit any page on a WordPress site, there is a process for finding and displaying the content the visitor is requesting. This is done by parsing the URL of the request page and page here is any page on the site i.e. post, page, category and etc. To get a deeper understanding the process, you can read the page Query Overview in the WordPress Codex.

The part we are most interested in is the parsing of the URL. This is done by taking the URL string and trying to find a match from a predesignated array of rules. The predesignated array of rules are set of regular expressions as the keys and the query strings as the values, which will identify the type of content being requested.

The benefits of using this structure is WordPress can quickly identify what content is being request. Other methods could involve pulling data from the database its actually wrong and then going back and forth to the database to find the correct match. The WordPress’ method of using rewrite rules prevents this and essentially saves several database requests before finding the correct content.

The parsing of the URL by WordPress first determines all the conditional tags like is_home(), is_page() and so forth. Then the database query is created. The query is then preformed and the content is finally displayed. That is the whole thing in a nut shell. You will see through this post that we use the $wp_rewrite global in all our class methods. This is the class WordPress uses to parse the URL and create the query string.

Creating Our Rewrite Rules Class

Before we start, we will want a class that is reusable and will give us the ability to pass options directly into our class. That means will have a constructor method that accepts an options array and initialization method that will set options that we pass to the class and assigns them to class variables.

class Refactord_add_rewrite_rules {

    var $rules = array(); //an array of the rules will be adding
    var $show_rules = FALSE; //use to debug and show rules in the wp_footer hook

    function __construct($options = NULL){
        if(!is_null($options)){
            $this->init($options);
        }
    }
    function init($options){
        foreach($options as $key => $value){
            $this->$key = $value;
        }
    }
}

Also, we will be putting all our hooks in the init function. You will see I created to class variables. The first is called $rules and it will contain an array of the rules we want to add. The second is $show_rules, which is a boolean that we will use in the upcoming method.

Lets Just Display the WordPress Rewrite Rules

When you begin adding rewrite rules to WordPress you will be debugging to get your rules right. And unless you display the rules there is no way to even to know if your rule was added or where your error could be. That means that we are going to create a method in our class to display the current rewrite rules at the bottom of the page. We are adding a check in our init function to see if the $display_rules is TRUE and if it is, call the hook and method to display the rules. First here is our new method to display the rules:

function show_rules(){
    global $wp_rewrite;

    echo "";
    print_r($wp_rewrite->rules);
    echo "";
}

You will see that we first call in the global of $wp_rewrite. It contains the rules stored in the class variable “rules”. This is the preexisting array of rewrite rules.

And here is the new init function:

function init($options){
    foreach($options as $key => $value){
        $this->$key = $value;
    }

    if($this->show_rules){
        add_action('wp_footer', array(&$this, 'show_rules'), 1);
    }
}

If you look at the preexisting rules you will see that it is an array. Its keys are regular expressions with values that are query strings that WordPress will preform. This important to note as we will need to create similar patterns to have our rules work.

Here is a show of the existing rules on my localhost:

Flushing Rules

To add your own rules you must first flush the rewrite rules. The rewrite rules are stored in the option database and are not regenerated unless told to. If you try to add rules without flushing the existing rules, the rules will not be added. There are two methods of having the rewrite rules regenerated. The first is the click the save but in the permalink settings in the admin. The other method is to request the rules to be regenerate manually in our class.

Flushing the rewrite rules is something that is not recommend to do unless necessary. It creates a drain and will slow down WordPress. You should only flush rules if needed as in the case of adding new rules. If you are not adding new rules or taking rules away, you shouldn’t be flushing the rules.

That means we will need two new methods in our class. The first is to test to see if our added rules already exists. This method will return TRUE or FALSE if the rules we are adding already exist. The next method will flush the rules.

The first method is called rules_exist() and takes the rules we are adding, which are in the form of an array. And tests each of the keys and or values against the existing key and values. If it finds that neither the key or value in the array of existing rules then it returns FALSE meaning the rules must be flushed.

function rules_exist(){
            global $wp_rewrite;

            foreach($this->rules as $key => $rule){
                if(!in_array($rule, $wp_rewrite->rules) || !key_exists($key, $wp_rewrite->rules)){
                        return FALSE;
                }
            }
            return TRUE;
}

Again we call in the global for the $wp_rewrite class and use that to get the current rules that exist.

The other method is just a couple lines. First calling the $wp_rewrite global and then if the rules don’t exist rules (found by calling the previous method), lets flushed the rules.

function flush_rules(){
            global $wp_rewrite;
            if(!$this->rules_exist()){
                $wp_rewrite->flush_rules();
            }
        }

With that done we have completed methods to flush and to test if rules exist. We can then go back to our init method and edit it. Here is the complete init function:

function init($options){
            foreach($options as $key => $value){
                $this->$key = $value;
            }

            if(!empty($this->rules)){
                add_action('wp_head', array(&$this, 'flush_rules'));
            }

            if($this->show_rules){
                add_action('wp_footer', array(&$this, 'show_rules'), 1);
            }
        }

You see that we don’t call the functions to flush rules if we aren’t even trying to add any rules (represent by testing to see if the class variable $rules is empty).

Finally Adding the rules

The adding of the rules is simple enough and here is our method:

function add_rules(){
    global $wp_rewrite;
    $wp_rewrite->rules = $this->rules + $wp_rewrite->rules;
}

It simply takes our rules and the preexisting rules, merges them, and sets the new $wp_write class variable rules equal to this new combo. The last thing to do is to add this method to a hook and we will again to it in the init function. Here is the init function again:

function init($options){
            foreach($options as $key => $value){
                $this->$key = $value;
            }

            if(!empty($this->rules)){
                add_action('wp_head', array(&$this, 'flush_rules'));
                add_action('generate_rewrite_rules', array(&$this, 'add_rules'));
            }

            if($this->show_rules){
                add_action('wp_footer', array(&$this, 'show_rules'), 1);
            }
        }

We just added the action hook call on ‘generate_rewrite_rules’. We again only call this if the rules don’t already exist.

Advanced Notes

I tried to incorporate the rules_exist method in the init method; adding to the line where we see if the rules we want to add are not empty. But what I found that in the process is WordPress has not yet got the rules in stored in the $wp_rewrite->rules, so it comes back NULL. You need to incorporate the rules_exist method directly in the flushing method to make it work.

Finally adding rules

To finish I am going to leave you with a call I used to create a plugin that display authors and categories together on the same page. The URL structure I wanted to create was:

http://www.yoursite.com/author/author-slug/category/category-slug/

Here is the rules that I created and called into the class.

$options = array(
            'rules' => array(
                'category/([^/]+)/author/([^/]+)/?$' => 'index.php?category_name=$matches[1]&author_name=$matches[2]',
                'category/([^/]+)/author/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?category_name=$matches[1]&author_name=$matches[2]&paged=$matches[3]',
                'author/([^/]+)/category/([^/]+)/?$' => 'index.php?author_name=$matches[1]&category_name=$matches[2]',
                'author/([^/]+)/category/([^/]+)/page/?([0-9]{1,})/?$' => 'index.php?author_name=$matches[1]&category_name=$matches[2]&paged=$matches[3]'
                ),
        );

        $add_rewrite_rules = new Refactord_add_rewrite_rules($options);

If you notice that key to our rules array is a regular expression with the value of the query string WordPress will preform. You should know that the matches in the query string are the regular expressions in the parenthesis. Looking at the third rule I created, the first match is ([^/]+) expression after category/ and the second match is ([^/]+) after /author/. These matches get replaced in the query string.

Knowing this and using the URL structure from above of http://www.yoursite.com/author/author-slug/category/category-slug/; the query string would become index.php?category_name=category-slug&author_name=author-slug. This will work check it out.

Create A WordPress Meta Box With Jquery UI Datepicker

Kyle G — Sat, 04 Jun 2011 18:32:25 +0000

Adding datepickers is a great way to improve your a WordPress Plugin you are building. This post will go through everything you will need to do to add a Jquery UI Datepicker to your custom meta box.

What you will need to know before you move on

Plugin Basics such as registering a plugin and nounces
Basic understanding of WordPress Action and Filter Hooks
Object Oriented PHP

Today we won’t be covering how to register a plugin or how to write a plugin in the form of a PHP class. You will need to understand these concepts to really get what we are doing.

Getting the jQuery UI Datepicker

Before we get started we need to select a javascript datepicker. There are many out but one of the easiest to setup and user is the jQuery UI datepicker. If you have not seen this great little widget before, you can check some examples on the jQuery UI website. Next, we need to head over to the download page and select what we will need to download. This page is divided into 4 major sections and we will not need to download everything in our package. The first is the UI core which I leave all selected. The next is interactions which I uncheck everything. Next is widgets which I uncheck everything but the datepicker. The last section, effects I uncheck everything as well. Now just download it.

Setting Up Your Plugin Files

To start off I create a new folder in my wp-content/plugins that will contain our code. I name that folder refactord-datepicker and I also create two folders inside of our new plugin folder called “css” and “js”. I then take the jQuery UI custom download and place the custom stylesheet and images directory in the css folder of my new plugin. I do the same for the JavaScript placing it in the js folder. Usually, the names of these files are long and if you are going to change the name this is the time. For this tutorial I will leave them the same name. Here is a shot of the setup:

Coding the Datepicker and Metabox Plugin

Like mentioned above this will be done in the form of a PHP class. If you are not familiar with coding plugins this way, you should definitely check it out. To begin I will create a basic class and call the class.

/*
Plugin Name: datepicker
Plugin URI:
Description:
Author:
Version: 1.0
*/

class Refactord_Datepicker {

}

$refactord_Datepicker = new Refactord_Datepicker;

The constructor function

Nothing special so far but the real meat is done in the constructor function which will first establish some class variable representing the file path to the plugin and the URL to the plugin. Both of these will come in handy when we create our methods to add JavaScript and CSS. Also, in the constructor function, all of the hooks with their corresponding methods will be called. There will be 5 action hooks we will use to add our stylesheets, add our scripts, add the meta box, create the meta box content, and save the data when the post is updated/added. Here is the code:

class Refactord_Datepicker {

    var $plugin_dir;
    var $plugin_url;

    function  __construct() {

        $this->plugin_dir = WP_PLUGIN_DIR . "/refactord-datepicker";
        $this->plugin_url = WP_PLUGIN_URL . "/refactord-datepicker";

        add_action( 'admin_print_styles', array($this, 'add_stylesheets') );
        add_action( 'admin_enqueue_scripts', array($this, 'add_js') );
        add_action( 'add_meta_boxes', array( $this, 'datepicker_meta_box' ) );
        add_action( 'admin_head', array($this, 'call_js') );
        add_action( 'save_post', array($this, 'save_data') );
    }

Add the datepicker Stylesheets

The first method we will create is add_stylesheets. This will do just exactly that. Here is the method I created:

function add_stylesheets(){
        global $post;
        $styleFile = $this->plugin_dir . "/css/jquery-ui-1.8.13.custom.css";

        if(file_exists($styleFile) && $post->post_type == 'post'){
            wp_register_style('datepicker-css', $this->plugin_url . "/css/jquery-ui-1.8.13.custom.css");
            wp_enqueue_style( 'datepicker-css');
        }
}

If you look at this function, we use those class variables to get the URL and file paths to the stylesheet we need to add. Also, we call in the global for post and test to see if this is a post type we want to add the stylesheet too. There is no sense in adding this stylesheet to every page of the admin panel.

Add the Datepicker JavaScript

This method is almost the same as the one we used for adding the datepicker stylesheet. The only changes you will notice is the names of the WordPress functions that we use. As well as the change in the file name we are calling.

function add_js(){
        global $post;
        $jsFile = $this->plugin_dir . "/js/jquery-ui-1.8.13.custom.min.js";

        if(file_exists($jsFile) && $post->post_type == 'post'){
            wp_register_script('datepicker-js', $this->plugin_url . "/js/jquery-ui-1.8.13.custom.min.js");
            wp_enqueue_script( 'datepicker-js');
        }
    }

Calling the Datepicker JavaScript

Now that we have both methods to add the needed CSS and JavaScript, we need to now call the JavaScript on the input we will create. I already know the input ID that we will use: “#datepicker-field”, so I simply just call the datepicker function on that field ID. I don’t even pass any options.

function call_js(){
        global $post;
        if($post->post_type == 'post'){

            echo    '';
        }
    }

Notice, how we omit the $ for jQuery. This helps prevent any conflicts the dollar sign might create with other loaded scripts.

Adding the meta Box

Next need to actually create out meta box. We do that by calling this method that is made of really just one function:

function datepicker_meta_box(){
        add_meta_box(
             'refactord-datepicker'
            ,'Refactord Datepicker'
            ,array( &$this, 'meta_box_content' )
            ,'post'
            ,'side'
            ,'high'
        );
    }

If you are not familiar with this function you definitely need to read the codex on it.

The meta box content

This function fills the meta box we just created with the content it will display.

function meta_box_content(){
        global $post;
        // Use nonce for verification
        wp_nonce_field( plugin_basename( __FILE__ ), 'refactord_nounce' );

        // The actual fields for data entry
        echo '';
           _e("Pick A date", 'myplugin_textdomain' );
        echo ' : ';
        echo '
';
    }

We are doing a few things in this function. One is the use of a WordPress Nounce. This helps maintain a high level of security for our meta box. Also, you see the we are use the get_post_meta to get the data we will display in our input field. This is the give away we will be saving this data to the post meta table. You also see the ID of datepicker-field, which will allow us to call our js. Actually if we want we can load this plugin now and it would display our datepicker. But it wouldn’t save.

Saving the Datepicker data

Lastly, we need to save the data.

function save_data($post_id){
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
            return;

        if ( !wp_verify_nonce( $_POST['refactord_nounce'], plugin_basename( __FILE__ ) ) )
            return;

        // Check permissions
        if ( 'page' == $_POST['post_type'] ){
            if ( !current_user_can( 'edit_page', $post_id ) )
                return;
        }else{
            if ( !current_user_can( 'edit_post', $post_id ) )
                return;
        }

        $data = $_POST['datepicker-field'];

        update_post_meta($post_id, 'refactord-datepicker', $data, get_post_meta($post_id, 'refactord-datepicker', TRUE));

        return $data;
    }

You notice there are several security checks and also a check to see if an ajax save is be done. Also, you will see the post meta is saved using an underscore before the actual name of meta key. If you do this it prevents this option populating in the custom field box.

The completed Datepicker class

That is it. We are finished and if you load this up in a WordPress install you will get this: