This is an add-on for the Advanced Custom Fields WordPress plugin, that allows you to add a Date and Time Picker field type.

Changlog:

• 1.2.0 Updated jquery-ui-timepicker-addon.js to the latest version (1.0.0) and added localization support.
• 1.1.1 Fixed a small bug
• 1.1 Change name to Date and Time Picker to reflect the new option to select between Date and Time picker or Time Picker only. Thanks to Wilfrid for point this out (not sure why I didn’t include it in 1.0)
• 1.0: Initial version

Latest version: http://soderlind.no/download/acf_time_picker.zip

Prerequisite: Advanced Custom Fields WordPress plugin installed and activated.

Installation:

1. Extract http://soderlind.no/download/acf_time_picker.zip in your theme folder (WordPress child theme is supported).
   After you have extracted the file, you should have the following subdirectories in your theme folder:

   acf_time_picker
   	 |____ css
   	 | |____ images
   	 |____ js
            |____ lang

2. Add the following to your themes functions.php (functions.php in a WordPress child theme is supported):

   <?php
      if(function_exists('register_field')) {
   	 register_field('acf_time_picker', dirname(__File__) . '/acf_time_picker/acf_time_picker.php');
      }
   ?>
   

Create a Time Picker field:

• Time Picker:
  
• Add the Date and Time Picker:
  
• Set the date and time format:
  

Retrieving Time Picker values

• To get a general understanding on how to retrieve values from ACF, see the examples in the ACF Documentation.
• Here’s how I retrieve that values from the example in the screen shot (note, the example is using the repeater field):
  

  <?php
  $rows = get_field('tasks'); // 'tasks' is the repeater field name
  if($rows)
  {
  	echo '<ul>';
  
  	foreach($rows as $row)
  	{
  		echo '<li>task = ' . $row['task'] . ', start = ' . $row['start'] .', start = ' . $row['end'] .'</li>';
  	}
  
  	echo '</ul>';
  }
  ?>
  

Localization:

Part of the localization is done automatically based on WPLANG in wp-config.php, but you have to translate rest of the text:

1. In acf_time_picker/lang, copy acf_time_picker.po to acf_time_picker-countrycode_LANGUAGECODE.po e.g: acf_time_picker-no_NB.po
2. Edit the file using poedit or its like, and save the .mo file in acf_time_picker/lang

How the translation is done:

I found a really nice routine at Renegade Tech Consulting (currently unavailable, but a copy is available in google cache) that I use to grab some of the localized text from WordPress:

$timepickerArgs = array(
    'closeText'             => __('Done',$this->localizationDomain),
    'currentText'           => __('Today',$this->localizationDomain),
    'prevText'              => __('Prev',$this->localizationDomain),
    'nextText'              => __('Next',$this->localizationDomain),
    'monthNames'            => $this->strip_array_indices( $wp_locale->month ),
    'monthNamesShort'       => $this->strip_array_indices( $wp_locale->month_abbrev ),
    'monthStatus'           => __( 'Show a different month', $this->localizationDomain ),
    'showMonthAfterYear'    => false,
    'dayNames'              => $this->strip_array_indices( $wp_locale->weekday ),
    'dayNamesShort'         => $this->strip_array_indices( $wp_locale->weekday_abbrev ),
    'dayNamesMin'           => $this->strip_array_indices( $wp_locale->weekday_initial ),
    'showWeek'              => false,
    'weekHeader'            => __('Wk',$this->localizationDomain),
    'firstDay'              => get_option( 'start_of_week' ),
    'isRTL'                 => $wp_locale->is_rtl(),
    'timeText'              => __('Time',$this->localizationDomain),
    'hourText'              => __('Hour',$this->localizationDomain),
    'minuteText'            => __('Minute',$this->localizationDomain),
    'secondText'            => __('Second',$this->localizationDomain),
    'millisecText'          => __('Millisecond',$this->localizationDomain),
    'timezoneText'          => __('Time Zone',$this->localizationDomain),
);

// Pass the array to the enqueued JS
wp_localize_script( 'timepicker', 'timepicker_objectL10n', $timepickerArgs );

function strip_array_indices( $ArrayToStrip ) {
    foreach( $ArrayToStrip as $objArrayItem) {
        $NewArray[] =  $objArrayItem;
    }
    return( $NewArray );
}

Credit:

Time Picker field for Advanced Custom Fields  uses the jQuery timepicker addon
By: Trent Richardson [http://trentrichardson.com]
Version 1.0.0
Last Modified: 02/05/2012

Copyright 2012 Trent Richardson
Dual licensed under the MIT and GPL licenses.

http://trentrichardson.com/Impromptu/GPL-LICENSE.txt

http://trentrichardson.com/Impromptu/MIT-LICENSE.txt

On posts where comments are closed, the plugin will remove the text ‘Comments are closed.’ The plugin supports any languages/text domains, and will remove the text from themes and plugins.

Prerequisite: Since the plugin is filtering gettext, your theme/plugin must be localized.

The plugin is available in the WordPress plugin directory

Plugin source code:

<?php
/*
Plugin Name: Remove "Comments are closed"
Plugin URI: http://soderlind.no/archives/2012/01/11/wordpress-plugin-remove-comments-are-closed/
Description: On posts where comments are closed, the plugin will remove the text 'Comments are closed.' The plugin supports any languages/text domains, and will remove the text from themes and plugins.
Author: Per Soderlind
Version: 1.2
Author URI: http://soderlind.no/
*/

add_filter('gettext', 'ps_remove_comments_are_closed', 20, 3);

function ps_remove_comments_are_closed($translated_text, $untranslated_text, $domain) {
    if ( $untranslated_text == 'Comments are closed.' ) {
        return '';
    }
    return $translated_text;
}
?>

Changelog:

• 1.2 removed unnecessary code
• 1.1 initial public release

How to add a custom header:

1. Make a 772×250 pixel jpeg or png
2. In the plugin root directory, create a new directory “assets”:

   mkdir assets

   After you’ve created the assets directory, you should have the following directories in the plugin root:

   $ ls -l
   total 0
   drwxr-xr-x  4 per  _www  136 Jan 11 22:19 assets
   drwxr-xr-x  3 per  _www  102 Jan 11 19:57 branches
   drwxr-xr-x  3 per  _www  102 Jan 11 19:57 tags
   drwxr-xr-x  5 per  _www  170 Jan 11 19:59 trunk
   

3. Copy the 772×250 pixel jpeg or png to the assets directory:

   cp my-custom-plugin-header.png assets/banner-772x250.png

4. Add the assets directory to svn:

   svn add assets

5. Check it in:

   svn ci -m 'Adding custom header'

I’ve added a custom header to four of my plugins, please have a look: lorem shortcode, WebPutty Helper, WP-DenyHost and Remove “Comments are closed”.

So what’s WebPutty?

WebPutty is a simple CSS editing and hosting service.
WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.

There’s a video at YouTube

Integration:
In WordPress, add the WebPutty integration code to your theme, or add it using my plugin. The integration code looks like:

<link rel="stylesheet" type="text/css" href="//webputty.commondatastorage.googleapis.com/[KEY].css" />
<script type="text/javascript">
(function(w,d){
	if(w.location!=w.parent.location||w.location.search.indexOf('__preview_css__')>-1){
		var t=d.createElement('script');
		t.type='text/javascript';
		t.async=true;
		t.src='http://www.webputty.net/js/[KEY]';
		(d.body||d.documentElement).appendChild(t);
	}
})(window,document);
</script>

Plugin installtion and activation:

1. The plugin is available in the WordPress Plugin Directory
2. Install and activate it.
3. Go to Settings -> WebPutty Helper and add the integration code from WebPutty (see images below)

Integrating WebPutty and WordPress using my plugin:

Change log:
0.0.1: Initial version

Todo:

• Add option to remove local styles
• Anything else? Please add your wishes as a comment below

Syntax:

wp_editor( $content, $editor_id, $settings = array() );

// default settings
$settings =   array(
	'wpautop' => true, // use wpautop?
	'media_buttons' => true, // show insert/upload button(s)
	'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
	'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
	'tabindex' => '',
	'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
	'editor_class' => '', // add extra class(es) to the editor textarea
	'teeny' => false, // output the minimal editor config used in Press This
	'dfw' => false, // replace the default fullscreen with DFW (needs specific css)
	'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
	'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);

So the simplest one is:

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some content</p>', 'textarea01' );
echo '<input type="submit" value="Submit" /></form>'

Want better control?:

$settings = array(
	'wpautop' => true,
	'media_buttons' => false,
	'tinymce' => array(
		'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',
		'theme_advanced_buttons2' => '',
		'theme_advanced_buttons3' => '',
		'theme_advanced_buttons4' => ''
	),
	'quicktags' => array(
		'buttons' => 'b,i,ul,ol,li,link,close'
	)
);

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some more content</p>', 'textarea02', $settings );
echo '<input type="submit" value="Submit" /></form>';

Don’t want the quick tags?:

$settings = array(
	'wpautop' => true,
	'media_buttons' => false,
	'tinymce' => array(
		'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',
		'theme_advanced_buttons2' => '',
		'theme_advanced_buttons3' => '',
		'theme_advanced_buttons4' => ''
	),
	'quicktags' => false
);

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some more content</p>', 'textarea02', $settings );
echo '<input type="submit" value="Submit" /></form>';

Or you can do:

add_filter( 'teeny_mce_buttons',tinytiny_buttons);

$settings = array("teeny"=>true,'media_buttons' => false,'quicktags' => false);

echo '<form action="" method="post" target="_blank">';
wp_editor('<p>Some more content</p>', 'textarea04', $settings );
echo '<input type="submit" value="Submit" /></form>';

function tinytiny_buttons($buttons) {
	return array('bold', 'italic', 'underline', 'blockquote', 'separator', 'undo', 'redo', 'fullscreen');
}

Notes (from the codex)

Note that the ID that is passed to the wp_editor() function can only be comprised of lower-case letters. No underscores, no hyphens. Anything else will cause the WYSIWYG editor to malfunction.

Once instantiated, the WYSIWYG editor cannot be moved around in the DOM. What this means in practical terms, is that you cannot put it in meta-boxes that can be dragged and placed elsewhere on the page

More information
wp_editor() is located in wp-includes/general-template.php
The default settings are defined in wp-includes/class-wp-editor.php
I’ve also added several examples in the comments below

Changelog:

• 1.0.1 – Thanks to @TheFrosty, added is_admin_bar_showing()
• 1.0.0 – initial release

Source:

<?php
/*
Plugin Name: PerS Fade Away WordPress Admin Bar
Plugin URI: http://soderlind.no/archives/2011/02/25/fade-away-wordpress-admin-bar/
Description: Fade away the WordPress Admin Bar when you scroll down the page.
Version: 1.0.1
Author: PerS
Author URI: http://soderlind.no
*/

/*
Change log:
	1.0.1 - Thanks to @TheFrosty, added is_admin_bar_showing()
    1.0.0 - initial release
*/

if (!class_exists('ps_pers_fade_wp_admin_bar')) {
    class ps_pers_fade_wp_admin_bar {
		var $url = '';
		function __construct(){
			$this->url = plugins_url(basename(__FILE__), __FILE__);
			add_action('wp_print_scripts', array(&$this,'ps_pers_fade_wp_admin_bar_script'));
		}
		function ps_pers_fade_wp_admin_bar_script() {
				if (is_admin_bar_showing()) {
					wp_enqueue_script('jQuery('); // other scripts included with WordPress: http://tinyurl.com/y875age
					wp_enqueue_script('ps_pers_fade_wp_admin_bar_script', $this->url.'?ps_pers_fade_wp_admin_bar_javascript'); // embed javascript, see end of this file
				}
			}
	} //End Class
} //End if class exists statement

if (isset($_GET['ps_pers_fade_wp_admin_bar_javascript'])) {
	//embed javascript
	Header("content-type: application/x-javascript");
	echo<<<ENDJS
/**
* @desc PerS Fade Away WP Admin Bar
* @author PerS - http://soderlind.no
*/
// Script from http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/
jQuery(document).ready(function(){
		jQuery(window).scroll(function(){
			var scrollTop = jQuery(window).scrollTop();
			if(scrollTop != 0)
				jQuery('#wpadminbar').stop().animate({'opacity':'0.2'},400);
			else
				jQuery('#wpadminbar').stop().animate({'opacity':'1'},400);
		});

		jQuery('#wpadminbar').hover(
			function (e) {
				var scrollTop = jQuery(window).scrollTop();
				if(scrollTop != 0){
					jQuery('#wpadminbar').stop().animate({'opacity':'1'},400);
				}
			},
			function (e) {
				var scrollTop = jQuery(window).scrollTop();
				if(scrollTop != 0){
					jQuery('#wpadminbar').stop().animate({'opacity':'0.2'},400);
				}
			}
		);
});

ENDJS;

} else {
	if (class_exists('ps_pers_fade_wp_admin_bar')) {
    	$ps_pers_fade_wp_admin_bar_var = new ps_pers_fade_wp_admin_bar();
	}
}
?>

Images: Login Register Welcome back SI Captcha

SimpleModal Janrain Engage adds Janrain Engage (aka rpx) to your SimpleModal Login

Download the plugin from the WordPress Plugin Directory

If you like and use the plugin, please rate it (if you feel it deserves less than 5 stars, please tell me why in the comment field below, and I’ll try to make it better)

Localization

The Janrain Engage embedded widget support several languages. The SimpleModal Janrain Engange plugin will try to set the language for the embedded Janrain Engage widget based on your locale. If the plugin doesn’t find a match, it will use the fallback language set by you in the plugin settings page.

The plugin is available in the WordPress Plugin Directory

Images: Shortcode, Nested shortcode, Example, Lightbox

I needed dummy text for a blog I'm working on, and since I like to code I wrote a simple plugin I'd like to share, you'll find it  in the WordPress Plugin Directory

Plugin: You’ll find the plugin at http://wordpress.org/extend/plugins/lorem-shortcode/

Installation: Download the plugin and save it in wp-content/plugins (remember to activate in Plugins) or wp-content/mu-plugins or install it from inside WordPress in Plugins->Add New (search for “lorem shortcode”)

Usage: Add the shortcode to a Page. The plugin contains two shortcodes, [lorem] and [loremimage], the [loremimage] shortcode can be nested in the [lorem] shortcode. Supported parameters, all are optional:

[lorem]

• p="3" Number of paragraphs. Default is 5
• l="7", Number of lines per paragraph. Default is 3
• align="right" This tells how you'd like to allign a nested shortcode. There are two alternatives, left or right. Default is right

[loremimage]

The loremimage is created using  http://dummyimage.com/, and hence the shortcode supports the same parameters as  http://dummyimage.com/

• size="400×400" Image size. Default is 300×200.
• text="lorem ipsum" Default is empty.
• fgcolor="fff" Image foreground color. Default is "ccc".
• bgcolor="ccc" Image foreground color. Default is  "eee".
• format="png", Image format. Default is "png". 

I've added two additional parameters/values

• size="thumb" This will create a thumbnail, size based on your WordPress image settings. The thumb links to another image and support Lightbox et al (has attribute rel="lightbox[lorem]").
• style="padding:5px;" Default is empty

Changelog:

• 1.1 Added support for embedded shortcodes and added the [loremimage] short code. The [loremimage] can be used by itself. The image is created using http://dummyimage.com/
• 1.0 Initial release

You can create a personalized plugin template by using my WordPress Plugin Template Creator

When I  rewrote my WP-DenyHost plugin, I wanted to do it as fast as possible. Instead of reinventing the wheel (again), I googled after a plugin template and found a very good one at Pressography. It had most of what I needed in a plugin template.

Modifications to the Pressography plugin template

I’ve made some changes to the Pressography plugin template and I have explained them below. Before you continue to read this article, you should view the video at Pressography, it presents the idea behind the plugin template and how it works. You get the full source of my modified plugin template by using my WordPress Plugin Template Creator

Being able to use new functionality in WordPress, I’ve decided that my plugins will only support WordPress one minor version lower than the current i.e. the current is 2.9 and hence my plugins and this plugin template will only supports WordPress 2.8 and later.

plugins_url()

WordPress 2.8 extended the plugins_url() function which makes it easy to find the plugin location. In the plugin template constructor, I use plugins_url() to find the languages files and the plugin itself:

function __construct(){
	//Language Setup
	$locale = get_locale();
	$mo = plugin_dir_path(__FILE__) . 'languages/' . $this->localizationDomain . '-' . $locale . '.mo';
	load_textdomain($this->localizationDomain, $mo);

	//"Constants" setup
	$this->url = plugins_url(basename(__FILE__), __FILE__);
	$this->urlpath = plugins_url('', __FILE__);

	//Initialize the options
	$this->getOptions();

	//Actions
	add_action("admin_menu", array(&$this,"admin_menu_link"));
	add_action('admin_enqueue_scripts', array(&$this,'{plugin_slug}_script')); // or wp_enqueue_scripts or login_enqueue_scripts
	add_action("init", array(&$this,"{plugin_slug}_init"));
}

Adding JavaScript

I’ve done it and I still see plugin authors adding scripts using the wp_head function. There’s only one correct way of adding scripts, and that’s using wp_enqueue_script via one of the script hooks (admin_print_scripts, wp_print_scripts wp_enqueue_scripts, login_enqueue_scripts and admin_enqueue_scripts). wp_enqueue_script makes sure that the script loads in the correct order and that a script is only loaded once (e.g. If another plugin has already loaded jQuery, my plugin will not load jQuery, but use the script already loaded).

I’ve added the wp_print_scripts admin_enqueue_scripts hook to the plugin template (see the constructor above). Use the wp_enqueue_scripts or login_enqueue_scripts if you want to load the script on the front-end or login page. The wp_print_scripts admin_enqueue_scripts hook adds the  {plugin_slug}_script function in which  I enqueue the scripts:

function {plugin_slug}_script() {
	wp_enqueue_script('jquery'); // other scripts included with WordPress: http://tinyurl.com/y875age
	wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
	wp_enqueue_script('{plugin_slug}_script', $this->url.'?{plugin_slug}_javascript', array('jquery-validate')); // load embedded javascript
	wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
		'required' => __('Please enter a number.', $this->localizationDomain),
		'number'   => __('Please enter a number.', $this->localizationDomain),
		'min'	   => __('Please enter a value greater than or equal to 1.', $this->localizationDomain),
	));
}

wp_localize_script, in the code above, creates a JavaScript object that passes the language strings to the embedded JavaScript:

<script type='text/javascript'>
/* CDATA[ */
var {plugin_slug}_lang = {
	required: "Please enter a number.",
	number: "Please enter a number.",
	min: "Please enter a value greater than or equal to 1."
};
/* ]]> */
</script>

Embedding JavaScript

When I write my plugins I like to keep the code in one file, that’s why I also embed the JavaScript code:

if (isset($_GET['{plugin_slug}_javascript'])) {

	Header("content-type: application/x-javascript");
	echo<<<ENDJS
/**
* @desc {Full Plugin Name}
* @author {Author} - {URL}
*/

jQuery(document).ready(function(){
	jQuery("#{plugin_slug}_options").validate({
		rules: {
			{plugin_slug}_option1: {
				required: true,
				number: true,
				min: 1
			}
		},
		messages: {
			{plugin_slug}_option1: {
				// the {plugin_slug}_lang object is define using wp_localize_script() in function {plugin_slug}_script()
				required: {plugin_slug}_lang.required,
				number: {plugin_slug}_lang.number,
				min: {plugin_slug}_lang.min
			}
		}
	});
});

ENDJS;
}

Note: If you prefer to keep your JavaScript code in a separate file, you can add it by adding the following to {plugin_slug}_script:

function {plugin_slug}_script() {
	if (is_admin()){ // Only run when in wp-admin. Other conditional tags at http://codex.wordpress.org/Conditional_Tags
		wp_enqueue_script('jquery'); // other scripts included with WordPress: http://tinyurl.com/y875age
		wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
		wp_enqueue_script('{plugin_slug}_script', $this->urlpath.'/myscript.js', array('jquery)); //load your script
		wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
			'required' => __('Please enter a number.', $this->localizationDomain),
			'number'   => __('Please enter a number.', $this->localizationDomain),
			'min'	   => __('Please enter a value greater than or equal to 1.', $this->localizationDomain),
		));
	}
}

WordPress Plugin Template Creator

While writing this article, I decided to create a tool that will create a personalized plugin template. The WordPress Plugin Template Creator takes your input, creates the necessary slugs and returns a personalized plugin template you can build your own plugin with.

I use the Akismet and WP-DenyHost anti-spam plugins for WordPress. Akismet is a must-have and has, since I installed it, caught 304,056 spams (!!).  When Akismet catch a spammer, it logs the spammers IP address. WP-DenyHost, written by me, prevents spammers from getting access to my site a second time by blocking access from this IP address.

I installed WP-DenyHost in the fall 2009 and, as you can see from the graph above, the number of spam has dropped dramatically.

.