WordPress basically divides itself into two portions, the front end section where people can come and read posts or articles on the site. The other is the WordPress admin section from which one can create posts and pages. This works very well if WordPress is used as a general blogging site. But as WordPress is used for different kinds of sites it sometimes becomes necessary to give the user a way to create posts from the front end of the site without forcing him to go in the WordPress admin section.

In this tutorial we are going to see how to create a widget to let users create posts from the front end. This will help the users of the site to create content.

Step 1 Creating the Plugin

To create a plugin, create a file ajaxpostfromfront.php in your wp-content/plugins/ajaxpostfromfront folder. To create a plugin in WordPress we have to add the plugin header as follows:

/*
Plugin Name: Ajax post from front
Plugin URI:
Description:Allows to post from front end
Author: Abbas Suterwala
Version:
Author URI:
*/

We will also define some named constants for our plugin base URL and the plugin path as follows:

define('APFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('APFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

This will help us to use them easily where needed in the plugin. Also create a js folder in your ajaxpostfromfront folder and add a file apf.js in it. So the folder structure of the plugin would be as follows:

We will now enqueue the scripts by hooking on to the action hook ‘wp_enqueue_scripts‘ and enqueue our javascript file and localize it to store the WordPress ajax URL which we will use for our ajax calls.

function apf_enqueuescripts()

	wp_enqueue_script('apf', APFSURL.'/js/apf.js', array('jquery'));
	wp_localize_script( 'apf', 'apfajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

add_action('wp_enqueue_scripts', apf_enqueuescripts);

If everything has gone right until now we will be able to see our plugin in the plugin list and we should activate it.

Step 2 Understanding the WordPress Functions to Create a New Post

WordPress has a rich set of APIs or functions which are exposed to perform tasks for plugins. It has functions for all types of tasks like creating a post, creating a page, comments etc. In this plugin we are going to use the WordPress function wp_insert_post.

wp_insert_post takes in an array of the different information required to create a post in WordPress. It takes in different parameters like the post title, post content, post status, etc. It also takes in the array of categories which are to be associated with the post. It also contains some other parameters like post password and post excerpt etc.

For a complete list of parameters you can visit the wp_insert_post page in the WordPress Codex.

Step 3 Creating the UI to Create Post From Front End

Next we are going to create the UI for our post from front end plugin. For this we are going to write the following function:

function apf_post_form()

	?>

	


		


			


			Title  

			

			


			Contents  

			

			


			Create Post

		
	

	
In the function we will first create a form using the 

 tag. In this we will create a div with the ID apf-response which will update with the message that comes from the AJAX response we will get. Then we have created a text box for the title and a text area for the content of the post.
Next let us create a link called ‘create post’ which calls a javascript function apfaddpost which will make an AJAX call to create the post. We will see the implementation of the AJAX call in the below steps.
In case we call the function apf_post_form in the theme files you will see it as follows. In my theme I have just called it before the main loop.


Step 4 Creating a Widget to Display the UI on Front End
Now we are going to create a widget for our post from front plugin. This widget will display the UI for posting from the front which we created. Following is the code for the widget.
class AjaxPostFromFrontWidget extends WP_Widget 
	function AjaxPostFromFrontWidget() 
		// widget actual processes
		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
	

	function form($instance) 
		// outputs the options form on admin
		$defaults = array( 'title' => 'Ajax Post From Front' );
		$instance = wp_parse_args( (array) $instance, $defaults );

		?>
		

			
			
		
		';
		echo apf_post_form();
		echo '';
		echo $after_widget;
	
}

In the constructor we give the class name and the description of the widget. In the form function currently we display only one field that is the title to be displayed for the widget. We update the title field in the update function.
In the widget function we get the title saved in the widget instance and display that. Then we call the function apf_post_form which will display the form that we created in the previous step.
We will register the widget as follows:
function apf_widget_init() 
	// Check for the required API functions
	if ( !function_exists('register_widget') )
		return;

	register_widget('AjaxPostFromFrontWidget');

add_action('widgets_init', 'apf_widget_init');

Now we can drag and drop our new widget on the sidebar.

Once the widget is dropped on the side bar you should be able to see the form on the home page in the sidebar as follows:


Step 5 Creating a Post via AJAX From the Front End
Now let’s create a function to handle the AJAX request of creating the post. The function to handle the AJAX request is as follows:
function apf_addpost() 
	$results = '';

	$title = $_POST['apftitle'];
	$content =	$_POST['apfcontents'];

	$post_id = wp_insert_post( array(
		'post_title'		=> $title,
		'post_content'		=> $content,
		'post_status'		=> 'publish',
		'post_author'       => '1'
	) );

	if ( $post_id != 0 )
	
		$results = '*Post Added';
	
	else 
		$results = '*Error occured while adding the post';
	
	// Return the String
	die($results);
}

In this function we get the values of the title and the content from the $_POST variable. With those values using the wp_insert_post function of WordPress to create the post. The function wp_insert_post returns the newly created post id if succeeded and zero if failed. So using that value we either sent a success or a failure message back from the AJAX.
To register this function with the WordPress AJAX system we will call the following:
// creating Ajax call for WordPress
add_action( 'wp_ajax_nopriv_apf_addpost', 'apf_addpost' );
add_action( 'wp_ajax_apf_addpost', 'apf_addpost' );

Once our AJAX handler is done we just need to make the AJAX request from our javascript code as follows:
function apfaddpost(posttitle,postcontent) 

	jQuery.ajax(

		type: 'POST',

		url: apfajax.ajaxurl,

		data: 
			action: 'apf_addpost',
			apftitle: posttitle,
			apfcontents: postcontent
		,

		success: function(data, textStatus, XMLHttpRequest) 
			var id = '#apf-response';
			jQuery(id).html('');
			jQuery(id).append(data);

			resetvalues();
		,

		error: function(MLHttpRequest, textStatus, errorThrown) 
			alert(errorThrown);
		

	});
}

function resetvalues() 

	var title = document.getElementById("apftitle");
	title.value = '';

	var content = document.getElementById("apfcontents");
	content.value = '';



In the function apfaddpost we just make an AJAX request passing the post title and the post content. Once the response is received we just display the message returned by the AJAX handler in the div apf-response. After that we reset the values in the form.

After clicking on create post the post will be created and the message will be seen as follows:


Step 6 Adding the Option of Letting Only Logged in Users Post
Now we will add the functionality to let the admin choose if they do not want users who are not logged in to create posts.
For this we update the apf_post_form as follows to take an argument $allowNotLoggedInuser. In that case when the user is not logged in, it will not display the form but will display a message to login.
function apf_post_form($allowNotLoggedInuser='yes') 
	if ( $allowNotLoggedInuser == 'no' &&  !is_user_logged_in() ) 
		echo "Please Login to create new post";
		return;
	
	?>

	


		


			


			Title  

			

			


			Contents  

			


			


			Create Post

		
	

	
We will also update the widget to display one more option in the form function to display a select field asking whether it is allowed for non logged in users to post. We will also update the values in the update function. In the widget function now we read the value which was set in the widget and then pass it to the apf_post_form function.
The updated widget code should look like this:
class AjaxPostFromFrontWidget extends WP_Widget 
	function AjaxPostFromFrontWidget() 
		// widget actual processes
		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
	

	function form($instance) 
		// outputs the options form on admin
		$defaults = array( 'title' => 'Ajax Post From Front','allow_not_logged_users' => 'no' );
		$instance = wp_parse_args( (array) $instance, $defaults );

		?>
		

			
			
		

		

			allow_not_logged_users:
			
				>no
				>yes
			
		

		';
		echo apf_post_form($allow_not_logged_users);
		echo '';
		echo $after_widget;
	
}

Now from the widget are we can choose the option to whether allow logged in users or no as seen below.

Now in case the option is set to no and someone visits the home page without logging in they will see the following message to login to post.


Step 7 Adding the Option of Adding Categories to Post via Front End Widget
Now we will add the functionality to add categories to the post which we are creating from the front end. To achieve this first we will get the list of all the categories and display them as check boxes on the UI.
For this we add the following code to the function apf_post_form.
Contents  




 0));
	foreach ( $categories as $category ) 
		echo "";
		echo $category->cat_name;
		echo '
';
	
?>



Create Post

The above code just gets the list of all categories and displays them as check boxes. That value is passed to our javascript function apfaddpost as an extra parameter.
In the function apfaddpost we get the values which are checked and pass it in the AJAX call as follows:
function apfaddpost ( posttitle,postcontent,postcategory ) 

	var postCatergoryArray = new Array();

	for ( var i=0; i 
We will need to update the AJAX handler as follows to take the array of ids of the categories and then pass it to the wp_insert_post function , so that the newly created post have the categories appropriately.
function apf_addpost() 
	$results = '';

	$title = $_POST['apftitle'];
	$content =	$_POST['apfcontents'];
	$category = $_POST['apfcategory'];

	$post_id = wp_insert_post( array(
		'post_title'		=> $title,
		'post_content'		=> $content,
		'post_status'		=> 'publish',
		'post_category'		=> $category,
		'post_author'       => '1'
	) );

	if ( $post_id != 0 ) 
		$results = '*Post Added';
	
	else 
		$results = '*Error occured while adding the post';
	
	// Return the String
	die($results);
}

Now if we see the widget it will be seen as follows:

And the post created will have those selected categories associated with it as seen below.


Conclusion
WordPress is an extensible platform. We can extend WordPress to add different functionality to so the WordPress platform can be used for different types of sites rather than just blogs. Like in this plugin we have added the functionality of creating posts from the front end, WordPress can be extended in different ways. So happy WordPress coding!

Original from: http://wp.tutsplus.com/tutorials/plugins/adding-posts-to-a-sites-front-end-using-ajax/
			

		

Building a WordPress plugin is not that hard, especially when you know what you’re doing. Sometimes it can get tricky though when working with multiple scripts, styles, and new functionality that sometimes requires some imagination.

In this tutorial we are going to look at a way to create a simple countdown timer plugin. We’ll look at integrating it into the WordPress installation as a widget and a shortcode in the content using settings from a meta box inside the WordPress admin editor.

A preview of the end result of this tutorial looks like this:

The Widget and Content Shortcode:

Widget and Meta-Box Admin Interface:

A short example screenshot of how the widget admin and meta box in the edit page/post interface will look like at the end of the tutorial:

Step 1 Plugin File Headers

Each WordPress plugin mush have compatible, up to date code in its headers, so that it can function and be recognised by WordPress. This allows it to be installed, activated and removed. The kind of information that is available in the header information is crucial for the plugin but also contains information about it like title, version, description, tags, author info, license, etc.

First, the plugin is a file placed in a directory. We are going to name our plugin Timer Plugin and place it in our wp-content/plugins folder under the directory timer_plugin. Then inside that, the file timer_plugin.php will be our main plugin file where we insert the header source code.

We are just going to use the basic variables needed to get the plugin up and running. One of the variables is the Plugin Name, that is very important in order to identify the plugin in the plugin installation page. For the purposes of this tutorial we are just going to name it Timer Plugin. Next, the Description that is a short line of text describing the plugin. That will also be visible under the plugin installation page right next to the plugin, along with the next variables, the Author and Version.


		“All header plugin variables are strings of text written after the : preceding the header variable names.”
	


Step 2 Adding Actions
In WordPress, actions are hooks to specific functions that you might want to use in your functionality. In this tutorial we are going to use a number of hooks to get the desired result.
First, the actions are going to be added using the add_action function for each action, and we are going to add them at the end of the PHP file as the next example:
add_action('widgets_init', 'TP_widgets_init');
add_action('admin_print_scripts', 'TP_admin_register_scripts');
add_action('admin_print_styles', 'TP_admin_register_styles');
add_action('wp_print_scripts', 'TP_register_scripts');
add_action('wp_print_styles', 'TP_register_styles');

Next, in the above example, the wp_print_scripts and wp_print_styles hooks add actions to functions that are used to register and include the styles and scripts needed in the WordPress front end. More precisely in the website theme, for the functionality of the sidebar widget timer and the content shortcode. The admin_print_scripts and admin_print_styles hooks are used to register the WordPress admin panel script and CSS style files used later on in the tutorial.
add_action('admin_init', 'TP_admin_init');
add_action('save_post', 'TP_save_postdata');

Finally, the admin_init hook pointing to the function that runs before the headers are generated and run. A hook that we will cover at the end of the tutorial is save_post. This hook is required to work with the post or page submitted information in WordPress admin.


		“For more detailed information on how to use the add_action function see Add_Action in the WordPress Codex.”
	


Step 3 Registering and Including Scripts and Styles
For this tutorial we are going to require a number of script and style files that are required for good functionality and look on both the admin and the theme implementation of the Timer Plugin. Here is how we are going to do this:
Including Styles for WordPress Admin Functionality:
The Timer Plugin requires a few elements in the admin panel that we will need to style slightly as the default look is not exactly very welcoming. In order to do this we have called in step 3 the tag hooks that help us do that, now we are going to look at the functions that run when the hooks are called and how they work exactly.
First, the TP_admin_register_styles function for the registered and included admin panel styles.
function TP_admin_register_styles() 



Downloading the Styles
Because we are building a countdown timer plugin, we require a specific date and time to countdown to from the present. To do this, amongst other integrations, we are using the wp_register_style function to register the latest custom jQuery UI style so that we may use its design properly in its functionality when generating the sliders and calendar date picker later. The CSS file is generated by downloading the latest jQuery UI from http://jqueryui.com/download selecting Core, Widget, Mouse, Slider, DatePicker from the list of options, jQuery Ui 1.8.20 in the version section, and UI Lightness in the theme dropdown section.
Registering the Styles
There will be a CSS file named jquery-ui-1.8.20.custom.css and an images folder inside the css/jquery-ui folder in the custom generated and downloaded archive that you will get from the previous instructions. We are going to replace the jquery-ui-1.8.20.custom.css file name to jquery-ui.css for a friendlier name and copy it alongside the images folder with all its files in our plugin folder.
After that we can start adding the registration and inclusion functions inside the TP_admin_register_styles function mentioned previously.
	// register
	wp_register_style('jquery-ui-theme', plugins_url('jquery-ui.css', __FILE__));
	wp_register_style('tp-admin-style', plugins_url('admin-style.css', __FILE__));

The previous example uses wp_register_style to register the jquery-ui.css file by the name of jquery-ui-theme that is later used in the wp_register_style function in the next example. The same approach is used to include the main admin style.css file using this time the name tp-admin-style used in the following examples with the wp_enqueue_style function to include it in WordPress headers properly.
Including the Styles
	// enqueue
	wp_enqueue_style('jquery-ui-theme');
	wp_enqueue_style('tp-admin-style');

The tp-admin-style is used to register and include the style.css file that will be used for styling the widget and meta-box design that comes by default in the jQuery UI implementation and WordPress default style.
Including Styles for Theme Functionality:
Using the exact same approach as before for registering and including style files we are going to include into the WordPress theme the style files necessary for the design of the widget timer and the shortcode.
function TP_register_styles() 
	// register
	wp_register_style('tp-style', plugins_url('style.css', __FILE__));

	// enqueue
	wp_enqueue_style('tp-style');


In this case we are including a simple style.css file from our plugin directory that we will include later.
Including Scripts for WordPress Admin Functionality:
Because we are going to build a widget and a meta box with jQuery UI calendar and date time picker functionality, we are going to have to have jQuery, jQuery UI and all the plugins necessary to include and use the slider and datepicker that we will implement later. To do this, we have to make use of the previously written action for the admin_print_scripts hook. The next function will implement the functionality we need.
function TP_admin_register_scripts() 
	// register
	wp_register_script('tp-admin-script', plugins_url('admin-script.js', __FILE__));
	// enqueue
	wp_enqueue_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-datepicker');
	wp_enqueue_script('jquery-ui-slider');
	wp_enqueue_script('tp-admin-script');


As we are working inside the WordPress admin panel, we are going to have jQuery and jQuery UI already registered and included in the header, as well as the dependencies and plugins we need: jquery-ui-mouse and jquery-ui-widget. All we are including now is the jquery-ui-core that is not included by default and the datepicker and slider plugins that we need and last, the admin-script.js file that contains all the custom rules for our date-time jquery-ui functionality.
Including Scripts for Theme Functionality:
We need to be able to have inside the front end of the website, a timer that decrements to 0 somewhere in the sidebar as a widget and in the content as a shortcode. As a very easy way to do this, I chose jQuery and some plain javascript to work the timer. As a result we are going to include the script.js file inside the function that registers scripts for the front end hook previously declared.
function TP_register_scripts() 
	// register
	wp_register_script('tp-script', plugins_url('script.js', __FILE__), 'jquery');

	// enqueue
	wp_enqueue_script('tp-script');


We are going to also specify jQuery as a dependency as the front end does not have it included by default.

Step 4 Creating the Widget
The plugin is supposed to use a widget as one of the two methods to integrate a timer into the theme, more specifically, the sidebar in this case. To be able to add the timer to the sidebar we need to implement widget functionality for our plugin into WordPress.
Building the Class
To implement widget functionality in the plugin, we must include a widget class named TP_Widget. This name is of course not mandatory but it is mandatory for this class to extend the WP_Widget class in order to inherit its functionality. Therefore we create the class like the next example:
class TP_Widget extends WP_Widget 
	// the following code will be here


Next comes the code we add inside the class so that we work with the widget the way it’s intended to in WordPress, using all the necessary functions that are required in order to have a functional widget created in WordPress.
First we are going to write the __construct function for the initial required code integration. The __construct function is the place where the widget actually processes. We are going to give the widget a name and description inside this function by inheriting and using the parent’s __construct method like in the following example:
	public function __construct() 
		// widget actual processes
		parent::__construct('TP_Widget', 'Timer Widget', array('description' => __('A Timer Plugin Widget', 'text_domain')));
	

The first parameter is a widget ID, second is a widget name, third an array with the description. The following function is going to be the form function. We are going to build and use this function to set and work with the admin panel widget content form. The next code will run inside the widget placeholder in the admin panel widgets page:
	public function form() 
		if (!$_POST) 
			$tp_arr = unserialize(get_option('tp_ID_' . $this->number));
		
		else 
			if ($_POST['tp-hidd'] == 'true') 
				$tp_arr['tp-title'] = $_POST['tp-title'];
				$tp_arr['tp-date'] = $_POST['tp-date'];
				$tp_arr['tp-hour'] = $_POST['tp-hour-val'];
				$tp_arr['tp-minute'] = $_POST['tp-minute-val'];
				update_option('tp_ID_' . $this->number, serialize($tp_arr));
			
		}
		// outputs the options form on admin

In this part we have widget information like Title, Date, Hour and Minute. This information is extracted from a serialized array string that is stored into the database by the name tp_ID_X, where X is an unique identifier of the widget, used to identify the data being extracted relative to the widget used.
In this part the widget values are also stored into the array one by one, serialized and stored in the database as an option field for later use.
The next part is the admin widget form elements that are used in the front end.
	Title:

	


	[ Edit ]


	Select a date:

	
	
Hours
	

	

	
Minutes
	

	

There are two aspects to look after in this particular section:
First, the tags classes like tp-date, tp-hour, tp-minute that are later worked with in javascript and second, the input fields. Firstly, there is some PHP code inserted in the input fields that exist in the code above, code that is used for storing data either for forms in order to be submitted, or for javascript to be implemented into jQuery and worked with.
At the end of the HTML code above the form function is closed.
Updating the Widget Data
When the widget Save button is pressed in the admin panel, the form information is submitted and processed by the following function:
	public function update() 
		// processes widget options to be saved
		if ($_POST['tp-hidd'] == 'true') 
			$tp_Arr['tp-title'] = $_POST['tp-title'];
			$tp_Arr['tp-date'] = $_POST['tp-date'];
			$tp_Arr['tp-hour'] = $_POST['tp-hour-val'];
			$tp_Arr['tp-minute'] = $_POST['tp-minute-val'];

			$tp_Arr['tp-date'] = $_POST['tp-date'];
			update_option('tp_ID_' . $this->number, serialize($tp_Arr));
		
	}

The update function is the function used to update the information in the widget in WordPress widgets.
Writing the Widget Output in the Sidebar
This next part is the code that generates and outputs the widget in the sidebar as a widget. Basically it is the contents of the already generated widget code that has the purpose of a compatible wrapper.
Here is an example of just half of the function, namely the PHP code that is used to get the required information for the widget output.
	public function widget($args, $instance) 
		$tp_arr = unserialize(get_option('tp_ID_' . $this->number));
		$temp_date = explode("/", $tp_arr['tp-date']);
		$tp_arr['tp-date'] = $temp_date[2] . "/" . $temp_date[0] . "/" . $temp_date[1];
		extract($args);
		$title = apply_filters('widget_title', $tp_arr['tp-title']);

		echo $before_widget;
		if (!empty($title))
			echo $before_title . $title . $after_title;

So we are extracting the widget data previously saved in the admin panel. The next part is the HTML and PHP code that represents the timer and/or has the values used later by jQuery to calculate the time and function as a timer.
	

	
	:0" />
	

	
YY
	
DD
	
HH
	
MM
	
SS
	
	

	
-
	
-
	
-
	
-
	
-
	
	

The UL tag is used to create later on a row and column style so that the timer has an ordered look and is given a class in order to easily control the LI tags with jQuery later on.
Also, you may notice the input elements with PHP data in them. Those elements are also used by jQuery to store the values of the saved date and time.
The function is ending after the HTML code with a dynamic variable that closes the widget using WordPress compatible values.

Integrating the Class
Last but not least, if you remember, one of the actions written in step 1 was using the widgets_init tag and pointing to the TP_widgets_init function. We need to write its functionality in order to link the class properly to WordPress.
function TP_widgets_init() 
	register_widget("TP_Widget");




		“For a more extensive look of the standard WordPress widget functionality check out WordPress Widget API”
	


Step 5 Creating the Meta Box
The meta box is a box located in one of the sidebar panels located in the admin editor of any page or post. Because we are using almost the same HTML, CSS and JavaScript code we are going to use almost the same PHP and HTML code as the widget. Some modifications of some parent element classes are required for jQuery functionality. But first, the meta box must be created and implemented into WordPress from the plugin settings. Another one of the actions written in Step 1 that we did not finish implementing is the admin init hook tag. That hook runs before headers take place and is going to be used by us to implement the meta box functionality with the add_meta_box function like the example below:
	function TP_admin_init() 
		add_meta_box('TP_metaid', __('Timer Plugin Post Settings', 'TP_textdomain'), 'TP_inner_custom_box', 'post', 'side');
		add_meta_box('TP_metaid', __('Timer Plugin Page Settings', 'TP_textdomain'), 'TP_inner_custom_box', 'page', 'side');
	

What this code does is it creates a custom box on the side of each post and page edit page in the admin panel with the content and functionality of the function TP_inner_custom_box. For a more comprehensive view of how add_meta_box should be used, see add_meta_box in WordPress Codex.
Functionality and Front End Code
The meta box has a similar front end with the widget and the back end code is not that different, just slightly different database option field names to save in. Just like the widget admin form it is made out of both PHP and HTML functionality. Starting with the TP_inner_custom_box function we are creating the meta box admin front and back end functionality like the next sample:
	function TP_inner_custom_box() 
		global $post;
		// Use nonce for verification
		wp_nonce_field(plugin_basename(__FILE__), 'cuschost_noncename');
		$tp_arr = unserialize(get_option('tp_pp_ID_' . $post->ID));

After that, the HTML code sample is strikingly similar. The only differences are an extra input button after which, the function is enclosed with the semicolon and ends.
	[ Edit ]


	Select a date:

	
	
Hours
	

	

	
Minutes
	

	
	

Saving the data
The previous form sends data when the post or page is updated, and we need to get that data and store it for later user. In order to do that we use another hook that we already implemented, mainly the save_post hook tag that points to the callback function TP_save_postdata. The callback function gets the data from post variables and stores it into the database under a post ID unique identifier formed name and it looks like this:
	function TP_save_postdata() 
		global $post;
		if ( $_POST['tp-hidd'] == 'true' ) 
			$tp_arr['tp-date'] = $_POST['tp-date'];
			$tp_arr['tp-hour'] = $_POST['tp-hour-val'];
			$tp_arr['tp-minute'] = $_POST['tp-minute-val'];
			update_option( 'tp_pp_ID_' . $post->ID, serialize( $tp_arr ) );
		
	}


Step 6 Implementing the Shortcode
To implement the shortcode we need to add a new action to the add_action function list. The next sample is going to cover it:
add_shortcode('tp-shortcode', 'tp_shortcode');
It goes without saying that we must create the tp_shortcode function that handles the new shortcode.
	function tp_shortcode($atts,$content="") 
		global $post;
		$tp_arr = unserialize(get_option('tp_pp_ID_' . $post->ID));
		$temp_date = explode("/", $tp_arr['tp-date']);
		$tp_arr['tp-date'] = $temp_date[2] . "/" . $temp_date[0] . "/" . $temp_date[1];
		return '

			
			

				
YY
				
DD
				
HH
				
MM
				
SS
			
			

				
-
				
-
				
-
				
-
				
-
			
		
';
	

Familiar code? It’s the front end for the sidebar widget code used previously in the widget function inside the TP_Widget class.


		“For more detailed information on how to use the add_shortcode function see add_shortcode in the WordPress Codex.”
	


Step 7 Editing the Style Files, Styling the Timer
This is a very easy and quick step as it covers just 2 small files that handle the design of the timer widget, shortcode and admin section.
The Admin Section:
In this section the style file added in step one we are going to edit now is admin-style.css and it should look like this:
.tp-hour, .tp-minute  padding: 0px !important; z-index:0; width:100px; margin:10px 0px 10px 0px; height:10px; 
.tp-hour-val, .tp-minute-val  font-weight:bold; font-size:16px; width:20px; 
.tp-time  margin-top: 10px; margin-bottom: 10px; font-size:12px; 
.widget .editable, .inside .editable  background-color:#FED22F; 
.widget .ui-slider-horizontal, .inside .ui-slider-horizontal  background:#FED22F; 

This stylesheet file handles the width, height, colors and position of the admin widget sliders and calendar jQuery UI popup when choosing hours and minutes from the front-end.
The Timer Front-End Style:
The style.css file is the CSS file that covers the design of the UL, LI, OL of the timer in the front end. See the next sample:
.timer-content  width:300px; 
.timer-main ul, .timer-content ul  float:left; display:inline; overflow:hidden; width:180px; margin:0px; padding:0px; margin-top: 0px; font-weight: bold; 
.timer-main ul.tp-head, #content .timer-content ul.tp-head  margin:0px; padding:0px; margin-top:20px; font-size:12px; 
.timer-main ul ol, .timer-content ul ol  float:left; display:inline; overflow:hidden; width:20px; margin:0px; padding:0px; margin-right:2px; text-align: center; border:1px solid #dcdcdc; padding:4px; background:#f0f0f0; 
.timer-main ul li, .timer-content ul li  float:left; display:inline; overflow:hidden; width:20px; margin:0px; padding:0px; margin-right:2px; text-align: center; padding:4px; border: 1px solid white; 

Some elements are floated, resized and positioned with margins so they will look as intended. A result of this style is the design in the next picture:


Step 8 Admin Widget and MetaBox Javascript Code
The admin Widget requires very specific jQuery functionality mixed perfectly with HTML classes for tags. All of the following code should be put inside the admin-script.js file.
jQuery(document).ready(function($)
	$('.tp-insert-shortcode').click(function()
		send_to_editor('[tp-shortcode]');
	);
	$('.tp-time-edit').live('click',function()
		$('.tp-date').datepicker(
			format:'m/d/Y',
			hourGrid: 4,
			minuteGrid: 10,
			position: 'right',
			onBeforeShow: function()
				$(this).DatePickerSetDate($(this).val(), true);
			
		});
		$('.tp-date').addClass('editable');
		$( ".tp-hour").slider(
			value:0,
			min: 0,
			max: 23,
			step: 1,
			slide: function( event, ui ) 
				$(".tp-hour-val" ).val(ui.value);
			
		});
		$( ".tp-minute" ).slider(
			value:0,
			min: 0,
			max: 59,
			step: 1,
			slide: function( event, ui ) 
				$(".tp-minute-val" ).val(ui.value);
			
		});
	});
});

In this example, after a jQuery initialization and a document load event all the code that works with the widget and shortcode is loaded for use.
Now, because the widget has ajax-loaded dynamic content in it all its content is invisible to jQuery unless used with a live action. For this purpose, a link with the class name of tp-time-edit and tag option javascript functionality of void(0) was created and when clicked, runs the live hook and makes all HTML tags in the event function call available.
Inside the callback function we are using the functionality needed to create the datepicker for the date textbox by using the tp-date CSS class.
Last but not least, actually at the beginning of the code lies the shortcode javascript functionality, more specifically the jQuery insertion of the tp-insert-shortcode CSS class value found in the input field inside the shortcode function previously written in Step 6. When the button with the class tp-insert-shortcode is pressed, it should add the [tp-schortcode] string value to the WYSIWYG editor.


		“Very Important! jQuery UI requires classes in tag properties to be used for the sliders and datepicker plugins. It does not work with ID’s”
	


Step 9 Timer Javascript Code
This is the most important and slightly most hard to visualise at first sight piece of code in the entire tutorial as it is the part dealing with a lot of math.
This part is referring exclusively to the script.js file that holds the javascript source code dealing with the actual timer both on the widget part and on the shortcode part in the front end.
jQuery(document).ready(function($) 
	function start_by_parent(tp_parentClass)
		var tp_timer ='';
		tp_date=$(tp_parentClass+' input.tp-widget-date').val();
		tp_time=$(tp_parentClass+' input.tp-widget-time').val();

		tp_timer = setInterval("tp_set('"+tp_parentClass+"','"+tp_date+"','"+tp_time+"');", 1000);
	
	start_by_parent('.timer-main');
	start_by_parent('.timer-content');
});

The parent class handling the widget is timer-main, as for the shortcode the timer-content CSS class is used as a parent tag element that is used to affect the li tag elements containing the timer values for DD(days), HH(Hours), MM(Minutes) and SS(Seconds). The above implementation is a dynamic approach to both of them in jQuery after the values are sent to the calc_data function to handle all the math.
The tp_set function is actually using the calc_data method to calculate the values before it inserts them in the appropriate HTML tag elements. Here is the implemented tp_set method that needs to go inside the same file, script.js.
function tp_set(tp_parentClass,tp_date, tp_time)
	calc_data(tp_date, tp_time);

	jQuery(tp_parentClass+' ul').find('li:nth-child(1)').html(tp_years);
	jQuery(tp_parentClass+' ul').find('li:nth-child(2)').html(tp_days);
	jQuery(tp_parentClass+' ul').find('li:nth-child(3)').html(tp_hours);
	jQuery(tp_parentClass+' ul').find('li:nth-child(4)').html(tp_minutes);
	jQuery(tp_parentClass+' ul').find('li:nth-child(5)').html(tp_seconds);

	var tp_timer = setInterval('tp_set(''+tp_parentClass+'',''+tp_date+'',''+tp_time+'');', 1000 );
    clearTimeout(tp_timer);


Finally, one of the most important parts of this script file, the calc_data method, that calculates the number of seconds between the present and the user selected date and returns the appropriate values so that the timer shows the amount of time left until that date.
function calc_data(tp_date,tp_time)

	tempdate = tp_date.split("/");
	temptime = tp_time.split(":");

	var seconds=1000;
	var minutes=seconds*60;
	var hours=minutes*60;
	var days=hours*24;
	var years=days*365;

	var db_time = new Date(tempdate[0], tempdate[1]-1, tempdate[2], temptime[0], temptime[1], 00);
	var now_time = new Date();
	db_time = db_time.getTime();
	now_time = now_time.getTime();
	var tp_result = db_time-now_time;
	if(tp_result < 0) 
		tp_years=tp_days=tp_hours=tp_minutes=tp_seconds=0;
	
	else
		tp_years = Math.floor(tp_result/years);
		tp_days = Math.floor(tp_result/days)-(tp_years*365);
		tp_hours = Math.floor(tp_result/hours)-(tp_days*24)-(tp_years*365*24);
		tp_minutes = Math.floor(tp_result/minutes)-(tp_hours*60)-(tp_days*24*60)-(tp_years*365*24*60);
		tp_seconds = Math.floor(tp_result/seconds)-(tp_minutes*60)-(tp_hours*60*60)-(tp_days*60*24*60)-(tp_years*365*24*60*60);
		singlebox=false;
		if(tp_years > 99)
			tp_years=99;
		
		if(tp_days > 99)
			singlebox=true;
		
		if(tp_years < 0)tp_years=0;
		if(tp_days < 0)tp_days=0;
		if(tp_hours < 0)tp_hours=0;
		if(tp_minutes > 60)tp_minutes=60;
		if(tp_minutes < 0)tp_minutes=0;
		if(tp_seconds < 0)tp_seconds=0;
	}
}

A very important aspect that needs to be mentioned is that these functions use global variables that were not mentioned yet. It is recommended that you add the following code with global variables at the top of the script.js file before any other code:
tp_days = 0;
tp_hours = 0;
tp_minutes = 0;
tp_seconds = 0;


Conclusion
Building a countdown timer in jQuery is not exactly a very fast and easy project as there are many aspects that need to be taken into consideration when starting. Things like what javascript classes, plugins and styles will be used, what design it will have in the front and back end, how it stores data and how it pulls it back out. Also the compatibility of all of these with other plugins or scripts and how exactly everything is calculated and what it outputs.
Let us know what you think, and if you have any additional recommendations, in the comments below!
Update: This post has been updated to amend the issues mentioned in the comments.
Update #2: Source files are now available for download at the top of this tutorial.

Original from: http://wp.tutsplus.com/tutorials/plugins/creating-an-ajax-countdown-timer-wordpress-plugin/
			

		

Infinite scroll pagination is inspired from Facebook and Twitter. This is just pagination where the user will need to scroll to bottom of the page to read more articles. This is one way to improve the user experience on a website, but if you do it wrong, it can give a bad experience too. If you’re going to implement this type of pagination, make sure you don’t include important links at the bottom of the page. The reason for this is that when a user tries to click on that particular link, the page will auto load new entries and push the link off the screen each time. You can either set a fixed position footer area or make your sidebar visible all the time.

Step 1 Plan Your Pagination

It is important that you plan ahead with your pagination, where you want to include it, and how you are going to process it. A common way of doing pagination is by listing the page numbers at the bottom of the page. Using this method however, no more page numbers will appear at the end of your article list, as they’re no longer needed. This pagination can be use on all themes as long as you don’t include loads of information in your footer section, as it may not give the desired effect.

Our infinite scroll pagination will use jQuery and ajax functionality to make the request and retrieve more articles to be shown to the user. In this tutorial, I will use the Twenty Ten theme as an example, you can view the working demo of the infinite scroll here.

Step 2 Building the Ajax Function

We will use WordPress’ ajax functionality to make the call for this pagination. First we prepare the basic function for our pagination, please insert the following code to your theme’s functions.php

function wp_infinitepaginate()
    $loopFile        = $_POST['loop_file'];
    $paged           = $_POST['page_no'];
    $posts_per_page  = get_option('posts_per_page');

    # Load the posts
    query_posts(array('paged' => $paged ));
    get_template_part( $loopFile );

    exit;

This function will be used to make the call for our pagination, basically we send two variables to this function via ajax, one is the page number and another is the file template we are going to use for our pagination. To enable this function to be used with WordPress ajax, we need the following code.

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

The default action for WordPress ajax would be wp_ajax_(our action name), hence why the name infinite_scroll being used in the code example. We need to add two actions, one for logged in users and another is for users that are not logged in.

Next we will need to build the ajax function that will send the two variables we need for our pagination. You can use WordPress hooks to insert this jQuery ajax function or straight away insert it into your theme header.php

This will be the basic ajax call that we are going to make and we use “infinite_scroll” as our action name. WordPress will automatically call our function wp_infinitepaginate(); because we define it in our theme functions.php previously.

Step 3 Determine When the User Scroll to Bottom of Page

To enable the infinite scroll pagination, we need to determine when the user hits the bottom of the page. This can be achieved easily via jQuery using the following code.

Now we can know when the user hits the bottom of the page. Next we need to call the loadArticle function within the scroll function. I’m adding a counter to be used as the page number of our call.

Each time the user scrolls to bottom of the page, the counter will increase and this will enable us to have the page number pass to our wp_infinitepage() function within our theme’s functions.php. With the scroll and loadArticle functions, we can now do the ajax function call within our WordPress theme, but the result may not appear if we haven’t defined the loop file within our theme folder.

Step 4 Setting Up Our Theme

Most important thing, we need to setup the div that will hold the new content that’s been requested using our ajax function. In the Twenty Ten theme, there is already a div we can use, which is the div with id="content" so we will include the div id in our ajax function. If you use other themes that don’t wrap their loop in a div, you can simply wrap the loop function like the example code below to achieve the same result.

 loop content 

Next we will need a loop file for this. The Twenty Ten theme already has a loop file included, this is the main reason why I chose Twenty Ten for this example, because it is easier for anyone who wants to reference this later. If you don’t have any loop.php, simply create a new loop file, and copy the loop function within your index.php into the new file and uploaded it into your theme’s folder. For anyone using the Twenty Ten theme, you would want to comment out the pagination included in the file because we won’t need it anymore (please refer to the tutorial source file on how to do this).

Step 5 Adding Ajax Loader

This is optional, just to give a nice touch to our infinite scroll pagination. We will add an ajax loader image as we hit the bottom of the page. You can add the following code to your footer.php

Loading... 

and then add the following CSS to your stylesheet.

a#inifiniteLoader
	position: fixed;
	z-index: 2;
	bottom: 15px;
	right: 10px;
	display:none;

Next we will add a few lines of code to our jQuery function to show and hide this ajax loader element.

The ajax loader will be shown once the user hits the bottom of the page and will be hide once the ajax request has finished.

Step 6 Additional Limitation to Enhance the Infinite Scroll

Up till now, we already have a working infinite scroll, but one thing is missing. The function will keep triggering each time a user hits the bottom page even though there are no more post to be shown. This is something we don’t want to have. We will add a control in our scroll function so when there no more pages to be shown, it will stop.

We add a new var total to the function which will return the total pages available on our site. This will be used to ensure no additional calls will be made to the page if the maximum page has been reached. Another thing we would want to add is a restriction where this function will be loaded. We just want this on our home page, archive or maybe search, but not on our single post and page. So we wrap a simple PHP if else function in our jQuery code.

if (!is_single() || !is_page()):
// our jQuery function here
endif;

That’s pretty much everything you need for the pagination, please refer to the source files for example code used in this tutorial. The files are based on the Twenty Ten theme.

Conclusion

By now you should be able to use this function in any of your theme, if you have any additional suggestions or questions regarding this tutorial, feel free to leave a comment or contact me via twitter. Would love to share any ideas with you guys.

Original from: http://wp.tutsplus.com/tutorials/theme-development/how-to-create-infinite-scroll-pagination/

Programming for speed is not what most coders think of. What they tend to consider first, and usually only, is getting it working. Sometimes people will talk of refactoring to reduce the amount of code, but again this is usually only for those that suffer with the luxury of having too much money and time.

I wish I had that luxury, to be able to spend twice as long on a problem to make a perfect solution. In truth I don’t most of the time, as I am out there getting new clients, making other products or not in the fortunate position to have a client with very deep pockets.

To counteract these things I have a bunch of methods stored in my head that allow me to choose the best path first time (I hope!). I am going to share these best practices with you so you can maybe do the same, maybe even better. If you have any great speed suggestions for coding, please comment and I will append it to this post.

Also, please note that this is not an exhaustive list. This is more of a pointer to things you should consider in your favorite coding language. Although this is for PHP specifically, I’ve tried to keep it as generic as possible to make it possible for all coders, no matter the language, to benefit.

Making IF ELSE smaller

IF is possibly the most used statement from all the programming languages, and I think the most used by a noob programmer (hey I was one once, I remember my code).

Common IF ELSE usage

          if ( $something == true )
              $value = 'yes';
          else
              $value = 'no';
          

Now using only IF

          $value = 'no';
          if ( $something == true )
              $value = 'yes';
          

As you can see all that has been done is that value is pre-set to ‘no’ and only gets changed to ‘yes’ if something is true. Both bits of code have the same outcome, one has less code.

If you only have 1 command inside the if statement then you can take things a little further. PHP does not require that you have the curly brackets when there is just one line.

          $value = 'no';
          if ( $something == true )
              $value = 'yes';

Ternary operators

We can go a stage further and have Ternary Operators. These are mathematical instructions that allow for a yes/no answer, just like IF.

IF presented as ternary operation

          $value = ( $something == true ) ? "yes" : "no" ;

Again the same IF ELSE statement, made much smaller. What it does is check the if the statement inside the brackets is either true or false, if it is true it will set value to be “yes”, if it is false it will set value to be “no”

syntax of ternary operators

          output = ( true/false condition ) ? true-value : false-value ;

It is not essential to have an output, as the true or false value could call a function and not return a value.

Using Range to create an array of numbers

Often people will code an array with just a bunch of numbers in it so that they can loop through it.

PHP code to create a select drop down list

          // selected item value
          $item = 12;
          // create array of numbers
          $array_of_numbers = array( 2,4,6,8,10,12,14,16 );
          // start the select
          echo "";
          foreach ($array_of_numbers as $number)
          // use terany operator to compare $number and $item, if the same make $selected = "selected"
          $selected = ( $number == $item ) ? "selected" : "" ;
          // echo option, with details filled in
          echo "" . $number . "";
          
          echo "";

Now the same thing shorter with range

          // selected item value
          $item = 12;
          // start the select
          echo "";
          foreach ( range(2,16,2) as $number)
          // use ternary operator to compare $number and $item, if the same make $selected = "selected"
          $selected = ( $number == $item ) ? "selected" : "" ;
          // echo option, with details filled in
          echo "" . $number . "";
          
          echo "";

Range is a really handy thing, as what it does is created an array of numbers (integers). It has the following syntax in php:

          range($start_number, $end_number, $increment);

The only needed compulsory items are the start and end number, the increment defaults to 1, but can be any number you like.

A range function is available in most languages but is unfortunately not available in Javascript out of the box, so to make this same saving in code you would be best to use a FOR loop

FOR loop version

          // selected item value
          $item = 12;
          // start the select
          echo "";
          for($number = 2; $number <= 16; $number = $number + 2)
          // use ternary operator to compare $number and $item, if the same make $selected = "selected"
          $selected = ( $number == $item ) ? "selected" : "" ;
          // echo option, with
          echo "" . $number . "";
          
          echo "";

Turbo charging the FOR loop

Many people like to use a for loop as they believe that it is faster than a foreach. While this is often true, it does not offer the flexibility of foreach and with the wrong programming techniques can be slower

The slower FOR loop

            // some text as a string
            $text="We love SpeckyBoy";
            // loop through all the characters
            for($i=0; $i < strlen($text); $i++)
                // look for the o in the text string at the position of $i using a ternary operator
                // echo true or false value as needed
                echo ( substr($text,$i,1) == 'o' ) ? "its an o" : "no o here";
            

The faster FOR loop

            // some text as a string
            $text="We love SpeckyBoy";
            // get the length of the string
            $length = strlen($text);
            // loop through all the characters
            for($i=0; $i < $length ; $i++)
                // look for the o in the text string at the position of $i using a ternary operator
                // echo true or false value as needed
                echo ( substr($text,$i,1) == 'o' ) ? "its an o" : "no o here";
            

The 2nd for loop is faster as it does not need to re-check the string length each time the loop runs. The first loop will check the string length 17 times with the text used

Making your code easier to maintain, and faster

I often see the same problem with my noob code when I re-visit it. The code is all written on 1 line and very long. Check this bit of code as an example:

          $html = "";
          echo $html;

It works just fine, and will be ok for any implementation, but there are some problems with it. For example if the class is empty, it is wasteful to code the empty class setting. While this may not make so much difference to a Javascript implementation, as this is being generated on the server with PHP, you’d be sending extra bytes to the clients browser which are not required. This of course will make the most difference when making AJAX calls and waiting for the reply, where extra bytes can make much more of an impact.

An easier way to maintain

          $attributes = " name='" . $name  . "' ";
          $attributes .= " id='" . $id  . "' ";
          $attributes .= " value='" . $value  . "' ";
          $attributes .= ($theclass != '' )?  " class='" . $theclass  . "' " : "" ;
          $attributes .= ($selected == $value )?  " checked " : "" ;
          $html = "";
          echo $html;

As you can see, much easier to read, much easier to maintain, and used on the server side will produce less HTML code.

Don’t echo every line only the final output

It’s much easier to echo every line, or pass control back to HTML, than it is to write every line to a variable, yet writing the output to a variable first and only echoing at the end is the faster way to process

The easy way to do things, with a few variations

    echo "
" . $title . "
"; ?>
    

The more server friendly way to do things

    $output = "
" . $title . "
";
    $output .= "" . date() . "";
    echo $output;

OK, this is a very simplistic example of what you should do as it is only 2 lines and then output.

Rounding up

This is a very short list of things to help make your PHP coding faster and easier to maintain. There is of course many more things that you can do to reduce the amount of code that you do use, or the speed that it runs at.

Most of these techniques can be taken across to other programming languages, so when your coding in Javascript or .NET give it some thought and you will be making things much faster.

More from the Website Speed series…

Website Speed Part 1: Write More Efficient CSS →
Website Speed Part 2: Working With and Optimizing Images for the Web →
Website Speed Part 3 – Caching WordPress →

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/CTFFkSg11qw/