WP_Version_Check

When we click on Enable auto-updates for a plugin, WordPress store the plugin’s folder name in auto_update_plugins option. Later, the plugin (along with other auto update enabled plugin) gets updated on a recurring cron event wp_version_check. wp_version_check cron event is triggered in every 12 hour.

/**
 * @file wp-includes/update.php
 */

function wp_schedule_update_checks() {
	if ( ! wp_next_scheduled( 'wp_version_check' ) && ! wp_installing() ) {
		wp_schedule_event( time(), 'twicedaily', 'wp_version_check' );
	}
	// ...
}

In cases, WordPress also schedule extra event to run this job when WordPress version check request respond with a ttl property.

/**
 * @file wp-includes/update.php
 */

function wp_version_check( $extra_stats = array(), $force_check = false ) {
	// ...
	$url = 'http://api.wordpress.org/core/version-check/1.7/?' . http_build_query( $query, '', '&' );

	// ...
	$response = wp_remote_post( $url, $options );

	// ...
	$body = trim( wp_remote_retrieve_body( $response ) );
	$body = json_decode( $body, true );

	// ...
	if ( ! empty( $body['ttl'] ) ) {
		$ttl = (int) $body['ttl'];

		if ( $ttl && ( time() + $ttl < wp_next_scheduled( 'wp_version_check' ) ) ) {
			// Queue an event to re-run the update check in $ttl seconds.
			wp_schedule_single_event( time() + $ttl, 'wp_version_check' );
		}
	}
	// ...
}

wp_version_check cron event is handled by a function named wp_version_check. At the end of this function, WordPress triggers an action named wp_maybe_auto_update which performs the auto update. wp_maybe_auto_update action is only triggered when wp_version_check function runs in the cron context. Means, calling wp_version_check in a plugin will not trigger wp_maybe_auto_update action. wp_maybe_auto_update action is responded by a function named wp_maybe_auto_update.

WP_Maybe_Auto_Update

Here’s the function definition

/**
 * @file wp-includes/update.php
 */

function wp_maybe_auto_update() {
	include_once ABSPATH . 'wp-admin/includes/admin.php';
	require_once ABSPATH . 'wp-admin/includes/class-wp-upgrader.php';

	$upgrader = new WP_Automatic_Updater;
	$upgrader->run();
}

So the main task is done in WP_Automatic_Updater class.

The $upgrader->run() method first checks whether automatic update is enabled.

Automatic update might be disabled in many ways, defining wp-config constant (AUTOMATIC_UPDATER_DISABLED, DISALLOW_FILE_MODS), using hook (automatic_updater_disabled) and if WordPress is installing something (wp_installing function).

The next thing it checks whether current site is the main site of a network (for multisite installation). It doesn’t process auto update on sub-sites.

The next thing WordPress do is create a lock so that the updater doesn’t run recurrently rather only once. And remove few filters.

/**
 * @class WP_Automatic_Updater
 */

public function run() {
	if ( $this->is_disabled() ) {
		return;
	}

	if ( ! is_main_network() || ! is_main_site() ) {
		return;
	}

	if ( ! WP_Upgrader::create_lock( 'auto_updater' ) ) {
		return;
	}
	// ...
}

Updating Plugin

Next the process fetch plugin update information, and run each plugin update one by one. Plugin only gets updated if an update is available, auto-update is enabled & minimum php version requirements is met.

/**
 * @class WP_Automatic_Updater
 */

public function run() {
	// ...
	wp_update_plugins(); // Check for plugin updates.
	$plugin_updates = get_site_transient( 'update_plugins' );
	if ( $plugin_updates && ! empty( $plugin_updates->response ) ) {
		foreach ( $plugin_updates->response as $plugin ) {
			$this->update( 'plugin', $plugin );
		}
		// Force refresh of plugin update information.
		wp_clean_plugins_cache();
	}
	// ...
}

The update process uses Automatic_Upgrader_Skin class as skin, and Plugin_Upgrader class as upgrader. Skin is responsible handing the messages shown on interface, and upgrader is responsible for handing the file download, verification, replacement, deletion etc process. The next process is upgrading the plugin. $upgrader_item is the folder name (or single file name) of the plugin.

/**
 * @class WP_Automatic_Updater
 */

public function update( $type, $item ) {
	$skin = new Automatic_Upgrader_Skin;

	// ...
	$upgrader = new Plugin_Upgrader( $skin );
	$context  = WP_PLUGIN_DIR;

	// ...
	if ( ! $this->should_update( $type, $item, $context ) ) {
		return false;
	}

	$upgrader_item = $item->plugin;

	$upgrade_result = $upgrader->upgrade(
		$upgrader_item,
		array(
			'clear_update_cache'           => false,
			// Always use partial builds if possible for core updates.
			'pre_check_md5'                => false,
			// Only available for core updates.
			'attempt_rollback'             => true,
			// Allow relaxed file ownership in some scenarios.
			'allow_relaxed_file_ownership' => $allow_relaxed_file_ownership,
		)
	);
}

Now we jump to the Plugin_Upgrader::upgrade method. This upgrader method performs a check to see if the plugin does have an update. $r is the plugin update response, $r->package is the direct link to the new version zip file. Then it runs the upgrade. Following is the code

/**
 * @class Plugin_Upgrader
 */

public function upgrade( $plugin, $args = array() ) {
	// ...
	$current = get_site_transient( 'update_plugins' );

	// ...
	$r = $current->response[ $plugin ];
	
	// ...
	$this->run(
		array(
			'package'           => $r->package,
			'destination'       => WP_PLUGIN_DIR,
			'clear_destination' => true,
			'clear_working'     => true,
			'hook_extra'        => array(
				'plugin' => $plugin,
				'type'   => 'plugin',
				'action' => 'update',
			),
		)
	);
	// ...
);

This run method is defined in WP_Upgrader class. First it downloads the package, then extract it to wp-content/upgrade folder, then remove Then check for plugin file.

/**
 * @class Wp_Upgrader
 */

public function run( $options ) {
	// ...
	$download = $this->download_package( $options['package'], true, $options['hook_extra'] );

	// ...
	$delete_package = ( $download !== $options['package'] );

	// ...
	$working_dir = $this->unpack_package( $download, $delete_package );

	// ...
	$result = $this->install_package(
		array(
			'source'                      => $working_dir,
			'destination'                 => $options['destination'],
			'clear_destination'           => $options['clear_destination'],
			'abort_if_destination_exists' => $options['abort_if_destination_exists'],
			'clear_working'               => $options['clear_working'],
			'hook_extra'                  => $options['hook_extra'],
		)
	);

	// ...
}

There’s a interesting thing in this install_package method. If the new update zip contains a folder in the root and no other files, it extracts the folder content as the plugin folder / files. Means, you can zip a plugin of something/my-plugin/file.php as and update.

That’s it.

The post How WordPress Plugin Auto Update Works appeared first on W4dev.

In this post, we will add two more fields there – First name & Last name, and will generate username from first name, last name value rather than email prefix (what WC uses at present).

Table of Contents

• Add Extra Registration Fields
• Validate Additional fields input
• Saving Field Information

Add Extra Registration Fields

Woocommerce has a callback/hook woocommerce_register_form_start to display custom html before their registration form. We are using the hook woocommerce_register_form_start to display our first & last name field.

Below code will add First/Last name fields right at the top of the registration box.

<?php
function w4dev_woocommerce_register_form() {
    $fields = array(
        'first_name' 	=> 'First name',
        'last_name' 	=> 'Last name'
    );
    foreach ( $fields as $k => $v ) {
        $val = '';
        if ( ! empty( $_POST[$k] ) ) {
            $val = $_POST[$k];
        }
        ?>
        <p class="form-row form-row-wide">
            <label for="<?php echo $k; ?>"><?php echo $v; ?> <span class="required">*</span></label>
            <input type="text" class="input-text" name="<?php echo $k; ?>" id="<?php echo $k; ?>" value="<?php esc_attr( $val ); ?>" />
        </p>
        <?php
    }
}
add_action( 'woocommerce_register_form_start', 'w4dev_woocommerce_register_form' );
?>

Validate Additional fields input

The next part is to validate the form field values whether someone tries to register. We are making sure all of these fields are required and can not be left empty. Thus, we are generating errors using proper hook woocommerce_process_registration_errors which comes with a argument $validation_error. Argument $validation_error is a WP_Error object. We just need to add error to this object if there’s any invalid value used on our newly created fields.

<?php
function w4dev_registration_errors( $validation_error, $username, $password, $email ) {
    if ( ! isset( $_POST['first_name'] ) || empty( $_POST['first_name'] ) ) {
        $validation_error->add('error', 'Please enter your First name');
    } elseif ( ! isset( $_POST['last_name'] ) || empty( $_POST['last_name'] ) ) {
        $validation_error->add( 'error', __( 'Please enter your Last name' ) );
    }
    return $validation_error;
}
add_filter( 'woocommerce_process_registration_errors', 'w4dev_woocommerce_registration_errors', 10, 4 );
?>

Saving Field Information

Once the fields has been placed on the registration form, and we are properly validating the inputs,
the next thing we need is to save those fields information. For that we will be using the following code –

function w4dev_woocommerce_new_customer_data( $data ) {
    /**
     * generate username from first/last name field input
     * only if username field is inactive
     */
    if ( 'no' !== get_option( 'woocommerce_registration_generate_username' ) || ! empty( $username ) ) {
        $username = sanitize_user( wc_clean( $_POST['first_name'] ) );
        if ( username_exists( $username ) ){
            $username .= sanitize_user( wc_clean( $_POST['last_name'] ) );
        }

        // Ensure username is unique
        $append     = 1;
        $o_username = $username;

        while ( username_exists( $username ) ) {
            $username = $o_username . $append;
            $append ++;
        }
        $data['user_login'] = $username;
    }

    /**
     * wordpress will automatically insert this information's into database, 
     * we just need to include it here
    **/
    $data['first_name'] = wc_clean( $_POST['first_name'] );
    $data['last_name'] = wc_clean( $_POST['last_name'] );

    return $data;
}
add_filter( 'woocommerce_new_customer_data', 'w4dev_woocommerce_new_customer_data' );

Conclusion

Now put all of the codes together and place it on your themes functions.php file. Either you could place it also on an active plugin.

The post Extend WooCommerce Registration form fields appeared first on W4dev.

We can use any of two available hooks, get_terms_orderby or terms_clauses.

Terms Order by provided ids using terms_clauses hook

function terms_clauses( $clauses, $taxonomies, $args ) {
    if ( ! empty( $args['include'] ) && ! empty( $args['orderby_include'] ) ) {
        $ids                = implode( ',', array_map( 'absint', $args['include'] ) );
        $clauses['orderby'] = "ORDER BY FIELD( t.term_id, $ids )";
    }
    return $clauses;
}
add_filter( 'terms_clauses', 'w4dev_terms_clauses', 10, 3 );
    

Now, the above code just extends the get_terms() functionality to order by passed ids. To use this on your query, you will need to set an additional argument orderby_include => true. We can not define the default orderby argument as invalid orderby argument will automatically be remove before any useful hook is available.

Terms Order by provided ids using get_terms_orderby hook

Processing using this hook is the same as previous. But here i tried to use an fixed condition – “If include argument is defined, and orderby is left empty, we will order by include ids automatically”.

function w4dev_get_terms_orderby( $orderby, $args ) {
    if ( ! empty( $args['include'] ) && empty( $orderby ) ) {
        $ids = implode(',', array_map('absint', $args['include']) );
        $orderby = "FIELD( t.term_id, $ids )";
    }
    return $orderby;
}
add_filter( 'get_terms_orderby', 'w4dev_get_terms_orderby', 10, 2 );

I haven’t noticed any difference using any of these two hooks, none with performance or with compatibility.

Example Usage

$tags = get_terms( 'post_tag', array( 
    'include'         => array( 21, 11, 31 ), 
    'orderby_include' => true, 
    'hide_empty'      => false 
));

The post Categories, Tags, Terms Custom Order appeared first on W4dev.

The CSS solution

// make the child list dropdown visible
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

To hide the caret icon on version 3.0

.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
    display: none;
}

To hide the caret icon on older version

a.menu:after, .dropdown-toggle:after {
    content: none;
}

There’s one dependency with CSS is that, the class open are not applied which could break any other styling you have done. But with pure bootstrap 2.3 – 3.0 version, it works great.

The jQuery Solution

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).closest('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).closest('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});

Allow click on main menu

The Child menu will be visible on hovering the parent, but the parent menu will not be click-able. The simplest solution is to add a class disabled on the parent menu anchor. You can check reference on stackoverflow

Bootstrap Dropdown on Hover jQuery Plugin

Moreover, there’s also a plugin Bootstrap: Dropdown on Hover Plugin written by Cameron Spear.

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://google.com">
            Dropdown <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>

The post Display Twitter Bootstrap Dropdown on hover by CSS or jQuery appeared first on W4dev.

function w4dev_register_admin_page_menu() {
    $mypage = add_submenu_page( 
        '', 
        'My Plugin Page', 
        'My Plugin Page', 
        'manage_options', 
        'MyPlugInPage', 
        'w4dev_admin_page_content'
    );
    add_action('load-'. $mypage, 'w4dev_load_admin_page_menu' );
}
add_action( 'admin_menu', 'w4dev_register_admin_page_menu' );

function w4dev_load_admin_page_menu(){}
function w4dev_admin_page_content(){}

This will create your plugin page without showing it on admin menu. Where you can still use w4dev_load_admin_page_menu function to handle request/action and w4dev_admin_page_content to generate the template for you plugin.

The post WordPress Plugin page without showing in admin menu appeared first on W4dev.

Multiple Post Type Loop & Pagination by Shortcode – Code

function w4dev_custom_loop_shortcode( $attrs ) {
    static $w4dev_custom_loop;
    if ( ! isset ( $w4dev_custom_loop ) ) {
		$w4dev_custom_loop = 1;
	} else {
		$w4dev_custom_loop ++;
	}

    $attrs = shortcode_atts( array(
        'paging'         => 'pg'. $w4dev_custom_loop,
        'post_type'      => 'post',
        'posts_per_page' => '5',
        'post_status'    => 'publish'
    ), $attrs );

    $paging = $attrs['paging'];
    unset( $attrs['paging'] );

    if ( isset( $_GET[ $paging ] ) ) {
        $attrs['paged'] = $_GET[ $paging ];
    } else {
        $attrs['paged'] = 1;
	}

    $html  = '';
    $custom_query = new WP_Query( $attrs );


    $pagination_base = add_query_arg( $paging, '%#%' );

    if ( $custom_query->have_posts() ) :
	    $html .= '<ul>';
	        while( $custom_query->have_posts()) : $custom_query->the_post();
	        $html .= sprintf( 
	            '<li><a href="%1$s">%2$s</a></li>',
	            get_permalink(),
	            get_the_title()
	        );
	        endwhile;
	    $html .= '</ul>';
    endif;

    $html .= paginate_links( array(
        'type'    => '',
        'base'    => $pagination_base,
        'format'  => '?'. $paging .'=%#%',
        'current' => max( 1, $custom_query->get('paged') ),
        'total'   => $custom_query->max_num_pages
    ));

    return $html;
}
add_shortcode( 'w4dev_custom_loop', 'w4dev_custom_loop_shortcode' );

For pagination, We are using a custom query argument pg rather than the default page, as this wont effect any of the other pagination on the page. The shortcode can be used multiple times and pg will be increasing with a number, ex pg1, pg2 etc. But you can ofcourse define your own variable name ex: paginate_page, paginate_product, paginate_some or anything but not WordPress protected variables.

Usage

The shortcode can be used with [w4dev_custom_loop] in your page or post content. Try copying the code into your themes functions.php or plugin file and then using two shortcode [w4dev_custom_loop] and [w4dev_custom_loop post_type="page"]. This will output you a list of posts and a list of pages. You can paginate both of the list without losing other list pagination. That means, if you are on level 3 of post list, and then navigated page list to level 2, both of the list will have their offset correct.

The post WordPress Multiple Post Type Loop & Pagination by Shortcode appeared first on W4dev.

A solution can be achieved using add_rewrite_rule() & add_rewrite_tag() function, but there is a more easier way which will only use one function to make the custom query variable available for the specific page, and won’t effect any other pages or anything.

The Code

function popular_page_parse_request( $wp ) {
    // custom variables will only be available on popular page.
    $pageslug = 'popular';

    // get the actual request and parse it down
    if ( isset( $wp->request ) && strpos( $wp->request, '/' ) ) {
        $requests = explode( '/', $wp->request );

        // array_shift takes out the first path what is the page slug/name.
        // and make sure it's the popular page.
        if ( $pageslug == array_shift( $requests ) ) {
            // set pagename to make sure we have found a page with the name.
            $wp->set_query_var( 'pagename', $pageslug );

            // wordpress automatically try to check if it's an attachment when a parameter is present
            // after pageslug, so we set it false as we do the parsing ourselves.
            $wp->set_query_var( 'attachment', false );

            // we understand this is a valid page, and let WordPress understand there's no error.
            $wp->set_query_var( 'error', false );

            $count = count( $requests );

            if ( $count > 0 ) {
                // stop the canonical redirection, if a url request isn't same as get_permalink( ) or
                // the_permalink( ), then wordpress redirects it to the actual page
                // and removes all parameter after slug name.
                remove_action( 'template_redirect', 'redirect_canonical' );

                // the first parameter will definitely be the category.
                $wp->set_query_var( 'popular_category', $requests[0] );

                // for second one, we check if it could be a year, or it could be the country name.
                if ( isset( $requests['1'] ) ) {
                    // pretty basic checks.
                    if ( 4 == strlen( $requests['1'] ) && is_numeric( $requests['1'] ) ) {
                        $wp->set_query_var( 'popular_year', $requests[1] );
                    } else {
                        $wp->set_query_var( 'popular_location', $requests[1] );
                    }
                }

                // if location wasn't found yet, and we have third parameter variable.
                if ( isset( $requests['2'] ) && !isset( $wp->query_vars['popular_location'] ) ) {
                    if ( ! is_numeric( $requests['2'] ) ) {
                        $wp->set_query_var( 'popular_location', $requests[2] );
                    }
                }
            }

            // the final step to set some defaults if no value was available.
            if ( ! isset( $wp->query_vars['popular_category'] ) ) {
                $wp->set_query_var( 'popular_category', 'any' );
            }

            if ( !isset( $wp->query_vars['popular_year'] ) ) {
                $wp->set_query_var( 'popular_year', 'any' );
            }

            if ( !isset( $wp->query_vars['popular_location'] ) ) {
                $wp->set_query_var( 'popular_location', 'any' );
            }
        }
    }
}
add_action( 'parse_request', 'popular_page_parse_request' );

Above function processes has been commented for better understanding. Now we can use get_query_var( 'popular_category' ) or get_query_var( 'popular_year' ) or get_query_var( 'popular_location' ) to retrieve specific url custom query variable.

Example

We will create a list of posts based on our custom query variable. For that, first we will create a shortcode which will generate content using the custom query variable. And then place the shortcode on the Popular page.

function popular_posts_shortcode( $attrs ) {
    $html  = '';
    $query_args = array( 
        'order'          => 'DESC',
        'orderby'        => 'comment_count',
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'posts_per_page' => -1,
        'meta_query'     => array()
    );

    if ( 'any' != get_query_var( 'popular_category' ) ) {
        $query_args['category_name'] = get_query_var( 'popular_category' );
    }

    if ( 'any' != get_query_var( 'popular_year' ) ) {
        $query_args['year'] = get_query_var( 'popular_year' );
    }

    // i use post custom field to add one or multiple location name with post
    // if you don't have any similar thing, don't use it. Otherwise you will always see empty result.
    if ( 'any' != get_query_var( 'popular_location' ) ) {
        $query_args['meta_query'][] = array( 
            'key' => 'location',
            'value' => array( get_query_var( 'popular_location' ) ),
            'compare' => 'IN'
        );
    }

    $query = new WP_Query( $query_args );

    if ( $query->have_posts() ) {
        $html .= '<ul>';
        while( $query->have_posts() ) : $query->the_post();
        $html .= sprintf( 
            '<li><a href="%1$s">%2$s</a> - <span title="posted %3$s ago">posted %3$s ago</span></li>',
            get_permalink(),
            get_the_title(),
            human_time_diff( strtotime( get_post()->post_date ), current_time( 'timestamp' ) )
        );
        endwhile;
        $html .= '</ul>';
    }

    wp_reset_query();

    return $html;
}
add_shortcode( 'popular_posts', 'popular_posts_shortcode' );

Ok, now if you use the shortcode [popular_posts] in your Page (Popular), you should see a list. Try manually entering url appending the popular page and check the results. You can also add some links to you nav menu using direct url of a popular page for quick access by you or user.

For ordering/sorting posts, we have used comment_count.

The post WordPress Page Add Custom Endpoint appeared first on W4dev.

class MY_Custom_Widget extends WP_Widget {

    function __construct() {
        $widget_ops = array(
            'classname' => 'my_custom_widget',
            'description' => __( 'MY Custom Widget' )
        );
        parent::__construct( 
            'my_custom_widget', 
            __( 'My Custom Widget' ), 
            $widget_ops
        );
    }
    // rest of the widget codes
}

Now for using Scripts for Widget outside of the Widget class, ex: loading stylesheet for calendar widget, you just need to figure out the widget unique id.

function w4dev_load_calendar_scripts() {
    if ( is_active_widget( false, false, 'calendar', true ) ) {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_style( 'something', 'stylesheet_url' ); 
    }
}
add_action( 'wp_head', 'w4dev_load_calendar_scripts');

The post Using Stylesheet, JavaScript Scripts for WordPress Widget appeared first on W4dev.

Add Extra Registration Fields

We will add three new fields, First name, Last Name, Preview Name. However, these fields are already in use within WordPress, but they did not used it on register form.

add_action( 'register_form', 'w4dev_register_form' );
function w4dev_register_form()
{
    $fields = array(
        'display_name' 	=> 'Preview name',
        'first_name' 	=> 'First name',
        'last_name' 	=> 'Last name'
    );
    foreach( $fields as $k => $v
    ){ ?>
        <p><label>
        <?php _e($v) ?>
        <br /><input type="text" name="<?php echo $k ?>" id="wpa_<?php echo $k ?>" class="input" value="" />
        </label></p>
    <?php } ?
    ><input type="hidden" name="w4dev_register_fields" value="1" /><?php
}

Validate Additional fields input

We are making sure all of these fields are required and can not be left empty. Thus, we are generating errors using proper hook registration_errors.

add_filter( 'registration_errors', 'w4dev_registration_errors', 1, 3 );
function w4dev_registration_errors( $errors, $user_login, $user_email )
{
    $fields = array(
        'display_name' 	=> 'Preview name',
        'first_name' 	=> 'First name',
        'last_name' 	=> 'Last name'
    );

    if( isset($_POST['w4dev_register_fields']) )
        foreach( $fields as $k => $v )
        {
            if( ! isset($_POST[$k]) || '' == $_POST[$k] )
            {
                $errors->add( 'empty_'. $k, __( 'ERROR: Please enter your '. $v ) );
            }
        }
    }
    return $errors;
}

Saving Field Informations

As said earlier, these are some field that WordPress already use for a user. And we can just pass the value to wp_update_user function to update it. But, if you are using any other custom field name, you will need to use update_user_meta function.

user_register hook becomes available just after a new user record has been created, thus a $user_id variable is passed to the hooked function.

add_action( 'user_register', 'w4dev_user_register' );
function w4dev_registration_errors( $user_id )
{
    $user_data = array();
    if( isset($_POST['w4dev_register_fields']) )
    {
        foreach( array( 'display_name', 'first_name', 'last_name') as $k )
        {
            $user_data[$k] = wp_unslash($_POST[$k]);
        }
    }

    if( !empty($user_data) )
    {
        $user_data['ID'] = $user_id;
        wp_update_user( $user_data );
    }
}

All of the code above can go on your themes functions.php file or within your plugin.

The post Extending WordPress Registration Fields appeared first on W4dev.

add_shortcode('fb_likes', 'w4dev_fb_like_count_shortcode' );
function w4dev_fb_like_count_shortcode( $atts )
{
	extract( shortcode_atts( array(
		'page' => 'w4dev'
	), $atts ));
	$count = facebook_like_count( $page );
	return $count;
}
function w4dev_fb_like_count( $page = 'w4dev' ){
	$url = 'http://graph.facebook.com/'. urlencode( $page );
	$content = wp_remote_retrieve_body( wp_remote_request( $url));
	if( is_wp_error( $content))
		return 0;

	$content = json_decode( $content);
	$value = intval( $content->likes);

	return $value;
}

You can use shortcode [fb_likes page="mypage"], or can use function w4dev_fb_like_count("mypage") to get your Facebook page likes. mypage could be either you facebook page name or page id.

The post Facebook Page Like Count WordPress Shortcode appeared first on W4dev.

Shortcode to display the list of future posts

function future_postlist_shortcode($atts)
{
    extract( shortcode_atts( array(
        'post_type' => 'post',
        'total'     => '-1',
        'order'     => 'DESC',
        'orderby'     => 'date',
    ), $atts ));


    $html  = '';
    $query = new WP_Query( array( 
        'order'         => $order,
        'orderby'         => $orderby,
        'post_type'         => $post_type,
        'post_status'         => 'future',
        'posts_per_page'    => $total
    ));

    if( $query->have_posts() ):
    $html .= '<ul>';
        while( $query->have_posts()) : $query->the_post();
        $html .= sprintf( 
            '<li><a href="%1$s">%2$s</a> - 
            <span title="will be available within %3$s">in %3$s</span></li>',
            get_permalink(),
            get_the_title(),
            human_time_diff( strtotime(get_post()->post_date), current_time('timestamp') )
        );
        endwhile;
    $html .= '</ul>';
    endif;

    return $html;
}
add_shortcode( 'future_postlist', 'future_postlist_shortcode' );

The shortcode supports few argument. Number of posts to show, Order & Orderby. You can use it like –

[future_postlist total='10' orderby='date' order='ASC']

Now, this should display list of future posts, with a human readable publishing time, ex: in 9 hours, and post title linked to post page. But the problem is, non loggedin user can not see future posts, and for that we will need some more code to add.

Display future posts for not loggedin user

On Single post page, non loggedin user do not see future posts. Here we will filter the condition and allow non loggedin user to see future post on Single post page.

add_filter( 'the_posts', 'myplugin_the_future_posts', 10, 2 );
function myplugin_the_future_posts( $posts, $query )
{
    global $wpdb;

    // We will skip if -
    // - there's already found posts 
    // - or it isn't a single post page
    // - or User is loggedin
    if( !empty($posts) || ! $query->is_singular() || is_user_logged_in() )
        return $posts;

    if( $post_name = $query->get('name') ){
        $post_type = $query->get('post_type') ? $query->get('post_type') : 'post';
        $post_status = 'future';
        $post_ID = $wpdb->get_var( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE post_name = %s AND post_type= %s AND post_status= %s", $post_name, $post_type, $post_status ) );
        if( $post_ID ){
            $posts = array( get_post($post_ID) );
        }
    }

    return $posts;
}

All of the above codes used here, you will need to add that on your plugin or within themes functions.php file.

The post Displaying WordPress Future Posts appeared first on W4dev.

If you dig WordPress Core files and see do_action('somethis'), then the ‘something’ is an Action Hook that you can use to do your custom processing using add_action() function. A list of WordPress hooks (Action hooks) reference can be found at Action Reference.

Understanding add_action:

WordPress uses an event binding method, events such as save_post, post_updated, insert_user & lots more. These are called hook or callback. Each of these hook has it’s own definition (you can will find that on WordPress Codex pages). These hooks supply one or multiple variables (values), Like, save_post supply post_id that is being saved right now, delete_post supply post_id what will be deleted right now. These Hooks are used by creating a function and using add_action function with the hook name. Using these hook, you can do your own processing. Ex: you might need to send and email to the site administrator after a post has been saved, or might want to recalculate the social sharing count after post has been updated, and a much more deeper things. I will try to describe a Practical Example.

An Example of add_action:

Goal: Send an email to an user email address upon deleting their account.
Brief: There are two hook WordPress provide us to use upon user account deletion. delete_user – that is fired before deleting everything about an user from database, and deleted_user – that fires after all data regarding that user has been deleted from database. Now, To send the email, we will need to use the first hook ‘delete_user’, because on the second hook deleted_user, user data wont be available on the database. But we will need user email address & that we can get using deleted_user hook.

Code example:

add_action('delete_user', 'myplugin_send_email_before_delete_user');

// this is a custom function that is hooked,
// the $user_id variable on out function will be passed by the delete_user hook.
function myplugin_send_email_before_delete_user($user_id)
{
    // we are querying the user email from database
    $email = get_user_option('user_email', $user_id);

    // ofcourse you can retrieve more user information and add into email
    wp_mail($email, 'You account has been deleted', 'The mail content.');
}

So if you put this code on your plugin or on your active themes functions.php file, an email will be sent to the user, whom account has been just deleted. You can test this by creating an account with your email address and deleting that from the WP Admin -> Users page. You will need to login with an administrator account ofcourse.

If you had a question in mind that how do i know that user_id will be supplied to our function (myplugin_send_email_before_delete_user), the answer is, i read that on the WP Codex page, You can read that also – delete_user.

Custom Hook

Rather than the hook’s WP made available on their framework, we can create additional hook for our own purpose. That is done using do_action(') function. Example: We can add a hook to our function we have created myplugin_send_email_before_delete_user which will allow us or others to add an action on it.

// this is a custom function that is hooked,
// the $user_id variable on out function will be passed by the delete_user hook.
function myplugin_send_email_before_delete_user($user_id)
{
    // we are querying the user email from database
    $email = get_user_option('user_email', $user_id);

    // ofcourse you can retrieve more user information and add into email
    wp_mail($email, 'You account has been deleted', 'The mail content.');

    // the new line we just added
    do_action('myplugin_user_deletion_notified', $user_id);
}

On the code, the last line means we are allowing others to use our custom hook to do something. As like we have used save_post hook, we can now also use the ‘myplugin_user_deletion_notified’ to do some more thing, ex: notify admin about this deletion, check the next example.

Notify Admin Regarding User Account Deletion

add_action('myplugin_user_deletion_notified', 'myplugin_notify_admin_about_deletion');

// the $user_id variable will be passed by the myplugin_user_deletion_notified hook.
function myplugin_notify_admin_about_deletion($user_id)
{
    // we are querying the user name from database
    $user_name = get_user_option('display_name', $user_id);

    // we are querying the admin email from database
    $admin_email = get_option('admin_email');

    // send mail
    wp_mail( 
        $admin_email, 
        'User Account Deleted', // subject
        'Hi Admin, An account has been deleted from the site. User name was - '. $user_name // content
    );
}

I hope you understand the concept of hooks and using add_action().

The post add_action – WordPress function to hook on events appeared first on W4dev.

To create a PHP file, you can use notepad, or if you already have any advanced editor, that’s fine also.

Step 1: Creating plugin file:

Plugin file is just a simple PHP file. But containing some structured data at the top of the file, commented information in general. Plugin file name can be anything, but majority of the cases, it is a sanitized name of the plugin. Ex: if you are creating a plugin named “James Analytics”, the suitable name for the file would be “james-analytics.php”. But it’s not a required thing. The plugin data should be only on the plugin file, not all of the file that are used by the plugin.

Step 2: Adding plugin information to the file:

For each and every WordPress Plugin, the minimum information needed to be provided within plugin file is Plugin Name.

<?php
/**
 * Plugin Name: MyPlugin
 */
?>

Some more information can be added here such as plugin version, author name, but those are all optional information’s and can be left empty.

Now the basic structure is set, and it can be used as a Plugin.

The plugin doesn’t have any feature yet. So lets add something that will do act like a plugin and do something.

Let’s create an Email feature for your plugin, to send a notification email to the site administrator email address when you plugin is activated.

Send Email on WordPress Plugin Activation

On the above code, three native WordPress function has been used. You can learn about their usage from WordPress Codex Page, register_activation_hook, get_option & wp_mail .

We will add another method that will also send an email but only on deactivation.

Send Email on WordPress Plugin Deactivation

Now put everything together. It should look like this –

Next thing is to save the file and put it on plugins directory. By default, WP Plugins directory/folder is relative to your WordPress Setup. So if WordPress is setup is at public_html/, plugins directory will be at public_html/wp-content/plugins/ . Just upload or drop your file in that folder (no need to create a new folder for it).

Now, You should see your plugin listed besides other plugins of your site. Activating the plugin will send an email to the site administrator’s email and upon deactivation another email. Note: If you are testing this on localhost such as WAMP/XAMP etc, you wont actually get any email, as localserver doesn’t come with an email server by default.

So that’s a small, simple Plugin you have created. Next u might want to add more things to you plugin.

What’s should do Next ?

You could check another post that describe how you can capture user’s login time and save it for future reference – User’s Last login time. Additionally, you could also check the usage of add_action function in your plugin or theme.

The post Create WordPress Plugin appeared first on W4dev.

If you have an account at freelancer.com and you have no or few reputation / reviews and you have planned to bid on a project, then i have few recommendations for you that might help you to get the project creators attention and get rewarded.

Always go for Projects which match your experience

No matter if you are a PHP developer or Python, don’t try to bid on projects from Latest Projects page. Try going thought Project Categories, ex: for PHP related jobs – http://www.freelancer.com/jobs/PHP/, for Magento related job – http://www.freelancer.com/jobs/Magento/. You can see all available category to work at – http://www.freelancer.com/job/. Go through it, find a better matched category for you, the go for projects of it.

Read Project description twice

Read the Project description carefully, Note: Bidding first doesn’t mean you have a better chance to win. So read the description to understand what the client actually wants.

Look for – “Include the word in your bid so that i understand you have read this”

Experienced & Senior Clients (who already posted couple of projects before) put a note like this Include —– In your bid so that i understand you have read this. It’s very very important that you read that and include the word in your bid description to let them know that you have actually read the project.

Do not waste your bid if the project doesn’t suit you

After reading through the project description, if you think you can do 90% of the work, and rest 10% is out of your knowledge, just put 2/3 minute maximum to find a solution by searching for it on Google or Yahoo search engine. If didn’t find anything helpful, just skip the project and go forward. Remember, if you take a project where you have no solution for few requirements of the project, it will really make you suffer later and at the end, this suffering will effect on your other work and waste a lot of valuable time of yours.

Always ask Questions and Show your Expertise on bid description

OK, that’s the most common & hard part to get Clients attention. Showing you Expertise means, tell them something related to the current project requirement, how you will achieve this, what are the alternative, what could be good, what would not be good etc. But Don’t bother posting multiple website links that you have done earlier. After letting them know your expertise, ask them something that you haven’t understand or need further clarification. This will provoke them to send you some replies, and that’s where you will get a chance to start a conversation and increase your change to win.

Go for a Price that you think would be best for you to do the work

Do not consider what price other have bid for, bidding minimum amount could help you a bit to win, but it’s not correct 80% times. So go for a price which you think would be good for you. Because, usually you wont have a chance to increase the price after getting selected for the project. So select the best suitable price for you, as if you are happy with the price, you would also be happy to provide a high quality service.

Do no accept before milestone is created

While you bid, you do post a milestone amount. Milestone amount means, how much money the client will reserve to freelancer.com for paying you. Client must create the amount before you accept and start working on the project. So don’t accept if client already haven’t created the milestone amount after awarding you the project. Why not ? Well, asap you accept the project, freelancer will deduct the project fees from your account based on your membership level, and in-case the project creator wish to cancel the project you will be the only victim of it, as project fees aren’t reversible.

Schedule next conversation / meeting

You must ask to schedule what is the next time client will be available to communicate. Show interest in communication and try to be online on time. Lack of communication increase high chance of dispute. And yet, if you haven’t done something on time or as promised, share it with client, but do not ignore their message.

Conclusion

I am a freelancer too and all i have written here are from my own experience. I hope it could help you. If you do have some tips and want to share, you can post comments and i will include that also. Thank you for reading.

The post Win Freelancer.com Bid and Get Awarded appeared first on W4dev.

Adding some PHP codes, we can add an extra pricing method, lets call it Wholesale Price. And then set this price for a specific user role. In this article we are calling the new pricing as – Wholesale Pricing & Editor is the specific user role to whom the price will be applicable for.

Table of Contents

• Determine if current user can avail the Wholesale Pricing
• Get the Wholesale Pricing value for a Product
• Add Wholesale price for Simple product
• Add Wholesale price for Variable product

Determine if current user can avail the Wholesale Pricing

// this checks if the current user is capable to have the wholesale pricing
function w4dev_wholesale_applicable() {
    return (bool) ( current_user_can('editor') && ( !is_admin() || is_ajax() ) );
}

Get the Wholesale Pricing value for a Product

// this get the wholesale price when available for both Simple & Variable product type
function w4dev_get_wholesale_price( $product ) {
    if ( 
        $product->is_type( array('simple', 'variable') ) 
        && get_post_meta( $product->id, '_wholesale_price', true ) > 0 
    ) {
        return get_post_meta( $product->id, '_wholesale_price', true );
    } elseif ( 
        $product->is_type('variation') 
        && get_post_meta( $product->variation_id, '_wholesale_price', true ) > 0 
    ) {
        return get_post_meta( $product->variation_id, '_wholesale_price', true );
    }
    return 0;
}


Wholesale Pricing for Simple Product

Step One – Adding the input field

First, we need to add Wholesale Pricing input to the product editing page. Here’s the code –

function w4dev_woocommerce_product_options_pricing() {
    woocommerce_wp_text_input( array( 
        'id' => '_wholesale_price',
        'class' => 'wc_input_wholesale_price short',
        'label' => __( 'Wholesale Price', 'woocommerce' ) . ' ('.get_woocommerce_currency_symbol().')',
        'type' => 'text'
    ));
}
add_action( 'woocommerce_product_options_pricing', 'w4dev_woocommerce_product_options_pricing' );

After you have added this in your themes functions.php or plugin file, you would see a new input appears under the sale price input (note: Simple Product only).

Step Two – Saving the price

Next we need to save the wholesale price value.

add_action( 'woocommerce_process_product_meta_simple', 'w4dev_woocommerce_process_product_meta_simple', 10, 1 );
function w4dev_woocommerce_process_product_meta_simple( $product_id ) {
    if( isset($_POST['_wholesale_price']) && $_POST['_wholesale_price'] > 0 )
        update_post_meta( $product_id, '_wholesale_price', $_POST['_wholesale_price'] );
}

This code will save the entered value for wholesale price with the product with a custom meta ‘_wholesale_price’.

Step Three – Frontend pricing filter

Now, to Assign the wholesale price for ‘Editor’ we will need to hook into woocommerce_get_price filter.

add_filter( 'woocommerce_get_price', 'w4dev_woocommerce_get_price', 10, 2);
function w4dev_woocommerce_get_price( $price, $product ) {
    if ( w4dev_wholesale_applicable() && w4dev_get_wholesale_price($product) > 0 ) {
        $price = w4dev_get_wholesale_price($product);
    }
    return $price;
}

All done, Now you can check how it is working by login with any Editor’s credentials and you should see the product is valued with the wholesale price rather than the sale/regular price. However, all other user/customer should get the sale price as usual.

After you have added this in your themes functions.php or plugin file, you would see a new input appears under the sale price input (note: Simple Product only).

Wholesale Pricing for Variable Product

The above described method is only for Simple Product. The same feature can be added for Variable Product also, read further below.

Step One – Adding the input field

add_action( 'woocommerce_product_after_variable_attributes', 'w4dev_woocommerce_product_after_variable_attributes', 10, 3 );
function w4dev_woocommerce_product_after_variable_attributes( $loop, $variation_data, $variation ){ ?>
    <tr class="wholesale_price_row">
        <td>
            <div>
                <label><?php _e( 'Wholesale Price:', 'woocommerce' ); ?></label>
                    <input type="text" size="5" name="variable_wholesale_price[<?php echo $loop; ?>]" value="<?php if ( isset( $variation_data['_wholesale_price'][0] ) ) echo esc_attr( $variation_data['_wholesale_price'][0] ); ?>" step="1" min="0" />
            </div>
        </td>
    </tr><?php
}

Step Two – Saving the price

add_action( 'woocommerce_save_product_variation', 'w4dev_woocommerce_save_product_variation', 10, 2 );
function w4dev_woocommerce_save_product_variation($variation_id, $i)
{
    if( isset($_POST['variable_wholesale_price'][$i]) )
        update_post_meta( $variation_id, '_wholesale_price', $_POST['variable_wholesale_price'][$i]);
}

Step Three – Frontend pricing filter

The first function w4dev_woocommerce_get_price() and the filter woocommerce_get_price is the same as we have used for the simple product. So, if you add this pricing method for both product type, just ignore the next function and hook.

if ( ! function_exists( 'w4dev_woocommerce_get_price' ) ) {
    function w4dev_woocommerce_get_price( $price, $product ) {
        if( w4dev_wholesale_applicable() && w4dev_get_wholesale_price($product) > 0 )
            $price = w4dev_get_wholesale_price($product);
        return $price;
    }
}
add_filter( 'woocommerce_get_price', 'w4dev_woocommerce_get_price', 10, 2);

function w4dev_woocommerce_variation_prices_html( $price, $product ) {
    if ( isset( $product->product_custom_fields['_wholesale_price'][0] ) ) {
        $wholesale_price = $product->product_custom_fields['_wholesale_price'][0];
    } else {
        $wholesale_price = '';
    }

    if ( w4dev_wholesale_applicable() && $wholesale_price > 0 ) {
        return woocommerce_price( $wholesale_price );
    }

    return $price;
}
add_filter( 'woocommerce_variation_price_html', 'w4dev_woocommerce_variation_prices_html', 10, 2);
add_filter( 'woocommerce_variation_sale_price_html', 'w4dev_woocommerce_variation_prices_html', 10, 2);

Thanks.

The post WooCommerce Custom Pricing Method for Products appeared first on W4dev.

To get rid of this, you can place the code on any active plugin or in your themes function.php file.

add_action( 'load-edit.php', 'fix_hierarchical_post_list' );
function fix_hierarchical_post_list(){
	if( isset($_REQUEST['post_type']) && !isset($_REQUEST['orderby']) ){
		$post_type = $_REQUEST['post_type'];
		if( isset($GLOBALS['wp_post_types'][$post_type]) ){
			$GLOBALS['wp_post_types'][$post_type]->hierarchical = false;
		}
	}
}

So here, we are only declaring the current post type to non hierarchical on its list page only.

Hope that helps.

The post WP Admin custom post list page blank appeared first on W4dev.

Except bidding on posted projects, you could also be hired by the hire me widget on your profile page. So all you have to do is make your profile page as much as complete and make it to look better.

1. Add Profile Picture:

For Profile Picture you can use your own or team photo or your company logo. Employers recognize a face much quicker than they do an username or logo. To update your profile photo, visit your freelancer.com account details page. Image size would be 278 px square.

2. Add display name, Subheading and Summary:

Give employers a quick introduction about who you are and what services you can offer them. Ensure that your profile is free of spelling mistakes and grammatical errors.

For Display Name, you might prefer to use your full name or your company name rather than the username you selected when you signed up.

Make use of the subheading to provide your company slogan or to highlight your top skill that you can offer the employers. Do not use your real name there, as that won’t put any impact over your profile. Some Example of a better subheading could be – “Android Guru” or “WordPress Plugin Developer” or “SEO Expert” etc

Your summary can be used to tell about yourself, talk about your work history, summarize key points, describe your work ethics and highlight your top skills to ensure employers understand why you’re the right Freelancer for their job. Adding your availability daily hours, week work days & language preference at the bottom would be great.

3. Set an hourly rate that you are willing to work for:

You can edit your hourly rate underneath the Hire Me button on your profile page. This is optional, but it’s highly recommend that you fill that. Don’t set it too high so that anyone don’t think to reach you, also don’t let it lowest as this might question your capabilities.

4. Use Portfolio to Showcase Your Best work:

On your portfolio section, you can upload almost anything including images, text, audio and video. If there is a piece of work that you’re particularly proud of, you can choose to display this as a Featured item. While freelancer.com will not restrict your account if you don’t have a portfolio, they highly recommend you have one. However, in that section freelance designer’s always get some advantage. As programmer or coded doesn’t really have visual elements to showcase. In that case, add a brief note about the work and try a relative image from external source.

5. Complete your Resume

Show Employers examples of your work, highlight all your achievements locally or globally, and display your level of Education. Resumes should tell an employer a great deal about yourself, where you are, where you have been and where you are headed. Convince the employer why you’re the perfect fit for them to hire you.

6. Take Exam

Freelancer have a range of technical exams which allow you to certify your skills to potential employers. On passing each exam, a special badge will be added to your profile. This will highlight your abilities and will be displayed next to your bids, to help you stand out from others.

Except 3/4 exams, all other exam will charge $5. But good thing is you can use reward point to take an exam. Reward point are automatically achieved when – you bid on a project, client award you a project, client create a milestone, you complete a project, client leave a review for your completed project and few other events. So, you don’t have to worry about the reward point, they will come automatically.

Your Profile completion information will be visible on your profile page. Try to complete the profile 100% to take the best advantage on the marketplace.

Get Inspiration and See Examples of some great user profiles

• Jericho Domingo – Best Overall Profile
• OVX Solutions – Best Developer Profile
• Clifton Johnston – Best Web Designer Profile
• Sevenbros – Best Designer Profile
• The Word Chef – Best Writer Profile
• Sergey Bolshedvorsky – Best Mobile Developer Profile
• Armon Gatus – Best Marketing Profile

The post Improving Freelancer.com Profile appeared first on W4dev.

Step 1: Register Facebook Application

Register a facebook application and grab the application id. If you are not sure how to do this, Google how to register a facebook application and then visit Facebook application page to register your application.

Step 2: Load Facebook JavaScript SDK

Next, initialize Facebook JavaScript on your WP Site header area. Add the following code. Replace APP_ID with your Facebook application ID/API key.

function FbC_head() {
    if ( is_user_logged_in() ) {
        return;
    }
    ?>
    <script type="text/javascript">
    window.fbAsyncInit = function(){
        FB.init({appId:'APP_ID', status:true, cookie:true, xfbml:true, oauth:true});
    };
    </script>

    <div id="fb-root"></div>

    <script type="text/javascript">
    (function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
    }());
    </script>
    <?php
}
add_action( 'wp_head', 'FbC_head' );

This will be place on head, if the user is not logged in.

Step 3: Insert the button

At this point, insert a button or anchor link to your site and give it a unique CSS id. You can insert it on a widget, or within a page or post content or within your theme template file.

<button id="FbConnect">Connect with facebook</button>
Or
<a id="FbConnect" href="#">Connect with facebook</a>

You can stylize the button as you want with CSS to give it a Facebook button look.

Step 4: Loading jQuery

jQuery library is required to be loaded on the page. It can be safely loaded with the following code –

function FbC_enqueue_scripts(){
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'FbC_enqueue_scripts' );

Step 5: Setting up a click event handler for the button

After clicking on the button a popup will appear and Facebook will ask the user to authorize your application (if it hasn’t been yet). If the user cancel the authorization, the poup will close and nothing will happen. But, if he Authorize the application, then we will grab his/her information using Facebook Graph API. Next, we will check if the user already register earlier with the Facebook account, if a match found, we will log him in, else we will create a new account and make the user loging to the site.

This code will try to connect the user with your Facebook application, grab a token, and send it to our validator using Ajax.

function FbC_footer() {
	if ( is_user_logged_in() ) :
		// hiding the button for loggedin user using jQuery.
		echo "<script type='text/javascript'>jQuery('#FbConnect').hide(); </script>";
		return;
	endif;
	?>
	<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#FbConnect').click(FbConnect);
	});

	function FbConnect(){
		FB.login(function(response){
			if ( response.status === 'connected' ){
				jQuery.post( '<?php admin_url('admin-ajax.php'); ?>', {"action": "FbConnect", "FbToken": response.authResponse.accessToken}, function(r){
					if ( ! r.success ){
						alert( r.data.error );
					} else {
						window.location.reload();
					}
				});
			}
			else{
				alert('You are not connected');
			}
		},
		{scope: 'email'});
	}
	</script>
	<?php
}
add_action( 'wp_footer', 'FbC_footer' );

Step 5: Adding the Ajax request handler

The following code should go inside the functions.php file.

function FbConnect_ajax() {
	// check if the token has passed
	if ( empty( $_REQUEST['FbToken'] ) ) {
		wp_send_json_error( array( 'error' => 'Authentication required.' ));
	}

	$FbToken = $_REQUEST['FbToken'];
	$url = "https://graph.facebook.com/me?fields=id,email,username,verified,name&access_token=$FbToken";

	// get the userdata using the token
	$body = wp_remote_retrieve_body( wp_remote_request( $url, array( 'timeout' => '30', 'sslverify' => false ) ) );
	if ( is_wp_error($body) || empty( $body )) {
		wp_send_json_error( array( 'error' => 'Unable to retrieve data.' ));
	}

	$FB_userdata = json_decode( $body );
	if ( is_object( $FB_userdata )) {
		$FB_userdata = get_object_vars( $FB_userdata );
	}

	$FB_userid = (int) $FB_userdata['id'];
	if ( ! $FB_userid ){
		wp_send_json_error( array( 'error' => 'Please Re-connect your facebook account.' ));
	}

	global $wpdb;
	$user_ID = $wpdb->get_var( "SELECT user_id FROM $wpdb->usermeta WHERE meta_key = '_fbid' AND meta_value = '$FB_userid'" );

	if ( ! $user_ID ) {
		$user_email = $FB_userdata['email'];
		$user_ID = $wpdb->get_var( "SELECT ID FROM $wpdb->users WHERE user_email = '$user_email'" );

		if( ! $user_ID ) {
			// if registration is disabled from General Settings page, not necessary to register a new account
			if ( ! get_option( 'users_can_register' )) {
				wp_send_json_error( array( 'error' => 'Registration is not open at this time. Please come back later..' ));
			}

			extract( $FB_userdata );

			$display_name = $name;
			$user_login = $username;

			// checks if the facebook account is verified
			if ( empty( $verified ) || !$verified ) {
				wp_send_json_error( array( 'error' => 'Your facebook account is un-verified. You have to verify your facebook account before proceed..' ));
			}

			$user_email = $email;
			if ( empty( $user_email )){
				wp_send_json_error( array( 'error' => 'Please re-connect your facebook account. [EMAIL NOT FOUND]' ));
			}

			if ( empty( $display_name )) {
				wp_send_json_error( array( 'error' => 'We didn\'t find your name from facebook. Please complete your facebook account before proceeding..' ));
			}

			// if username empty, try to create from name
			if ( empty( $user_login )) {
				$user_login = sanitize_title_with_dashes( sanitize_user( $display_name, true ));
			}

			$user_login_check = $wpdb->get_var( "SELECT user_login FROM $wpdb->users WHERE user_login = '$user_login' LIMIT 1" );

			// find an available username
			if ( $user_login_check ) {
				$suffix = 2;
				do {
					$alt_user_login = $user_login . "-$suffix";
					$user_login_check = $wpdb->get_var( "SELECT user_login FROM $wpdb->users WHERE user_login = '$alt_user_login' LIMIT 1" );
					$suffix++;
				} while ( $user_login_check );
					$user_login = $alt_user_login;
				}

				$user_login = esc_sql( $user_login );
				$user_pass = wp_generate_password( 12, false );

				$userdata = compact( 'user_login', 'user_email', 'user_pass', 'display_name' );

				$user_ID = wp_insert_user( $userdata );
				if ( is_wp_error( $user_ID )) {
					wp_send_json_error( array( 'error' => 'Unable to register, please try again.' ));
				}

				update_user_meta( $user_ID, '_fbid', (int) $id );
			} else {
				update_user_meta( $user_ID, '_fbid', (int) $FB_userdata['id'] );
			}
		}

		$userdata = new WP_User( $user_ID );
		if ( ! $userdata ) {
			wp_send_json_error( array( 'error' => 'Something went wrong, your account not found. Please try again or contact support' ));
		}
	}

	$userdata = $userdata->data;

	// Let Other hook to the login user information. If they restrict a user for some reason, we will also do that.
	$userdata = apply_filters( 'wp_authenticate_user', $userdata );
	if ( is_wp_error( $userdata )) {
		wp_send_json_error( array( 'error' => $userdata->get_error_message() ) );
	}

	wp_set_auth_cookie( $user_ID, false, false );
	do_action( 'wp_login', $userdata->user_login, $userdata );

	wp_send_json_success( array( 'loggedin' => true ) );
}

add_action( 'wp_ajax_nopriv_FbConnect', 'FbConnect_ajax' );

With the wp_ajax_FbConnect’ function, we are checking –

• – Firstly, we validate the user token and try to fetch his facebook data that we need to create an account.
• – Secondly, do we already have current facebook user id on our WordPress user meta table, if we found one, we will set login cookie for that user.
• – Thirdly, do we already have a WP user register with the current facebook users primary email, if we found one, we will set login cookie for that user.
• If these last two method fails, we will mark the current user as an unregistered user and will register him.

Any errors will be displayed using JavaScript alert function.

If you have placed everything properly, now you have a working Registration with Facebook Account Script for your site.

The post Integrate Registration with Facebook Account on WordPress Site appeared first on W4dev.

/**
* Function : var_dump()
* Arguments: The data - array,hash( associative array),object
* The level - OPTIONAL
* Returns  : The textual representation of the array.
* This function was inspired by the print_r function of PHP.
* This will accept some data as the argument and return a
* text that will be a more readable version of the
* array/hash/object that is given.
* Docs: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
*/
function var_dump( arr, level ) {
    var dumped_text = "";
    if ( ! level ) level = 0;

    var level_padding = "";
    for ( var j=0; j<level+1; j++ ) {
        level_padding += "    ";
    }

    if ( typeof(arr) == 'object' ) {
        for ( var item in arr ) {
            var value = arr[item];

            if ( typeof(value) == 'object' ) {
                dumped_text += level_padding+"'"+item+"'=> array(n";
                dumped_text += var_dump( value, level+1 );
                dumped_text += "n" + level_padding + ")n";
            } else {
                dumped_text += level_padding+"'"+item+"'=>""+value+""n";
            }
        }
    } else {
        dumped_text = "===>" + arr + "<===(" + typeof( arr ) + ")";
    }

    return dumped_text;
}

function test_var_dump( arr ) {
    document.getElementById('print_r').innerHTML = '<pre>' + var_dump(arr) + '</pre>';
}

The html div element having id print_r should be placed where you want to see the results. And the JS codes should be placed anywhere between this div and closing body tag but not before this division.

Now you can test array value with the test_var_dump function. Example:

/* Create some array element to test. */

var array_sub1 = new Array( "Hello World", 'Php test', 100, '200' );
var array_sub2 = new Array( "Facebook", 'Google' );
var array_sub3 = {
    'array_sub1': array_sub1,
    'array_sub2' : array_sub2
};
var array_parent = {
    'array_sub1': array_sub1,
    'array_sub2' : array_sub2,
    'array_sub3' : array_sub3
};

/* Test the function */
test_var_dump( array_parent );

The post JavaScript debugging function similar to PHP var_dump / print_r appeared first on W4dev.

Brief

A request to wp-admin/admin-ajax.php?action=contact-us will make wp_ajax_contact-us action hook available. Here you can see the Action is fired by appending wp_ajax_ to the requested action query parameter value contact-us. Programmatically, it is 'wp_ajax_' . $_REQUEST['action']. Attaching a function with this hook, responses are sent to browser or to the ajax call.

Table of content

1. How to use action hook generated by an ajax request
2. Why request to wp-admin/admin-ajax.php file
3. What is wp_ajax_nopriv
4. How to use the hook for both Logged & Not Logged in members
5. What is WordPress ajaxurl
6. Adding ajaxurl to Front pages
7. Example – Using Ajax in WordPress

How to use the ajax request generated action hook ?

Any request to admin-ajax.php file bring a hook name, and that hook is used to send some response. A function or class method is required to handle the response though. And response handler is attached using add_action() function.
Example: – add_action( 'wp_ajax_contact-us', 'contact_us_requested_by_ajax' );.
Explanation: Here contact_us_requested_by_ajax is a function you use to do some processing and/or sending some output for the request. You can replace the function name from contact_us_requested_by_ajax to something else ofcourse.

Why do i or WP send request to wp-admin/admin-ajax.php file ?

Because, wp-admin/admin-ajax.php file was built to handle ajax requests, we can call it as ajax request resolver. This file handles initial processing and enable a chatchable hook after loading all of WordPress core files, active plugin files and themes functions.php file (this makes WP functions available for you to use within the hook). So, all you have to do is to use the hook in your themes functions.php file or inside a plugin file and won’t have to worry about WordPress file/library inclusion.

What is wp_ajax_nopriv ?

wp_ajax_ prefix isn’t used to create the hook name if user is not logged in, therefore wp_ajax_nopriv_ is used. wp_ajax_nopriv_ does the same thing as wp_ajax_ prefix does, unless it only fires when user is not logged in. So for not logged-in user the hook name is – 'wp_ajax_nopriv_' . $_REQUEST['action'], and for logged-in user it is 'wp_ajax_' . $_REQUEST['action'].

How to use the hook for both logged-in/not-logged-in User/visitor ?

Simple. use both wp_ajax_ and wp_ajax_nopriv_ prefixed hook with your function. Example –

add_action( 'wp_ajax_contact-us', 'contact_us_requested' );
add_action( 'wp_ajax_nopriv_contact-us', 'contact_us_requested' );

Note: Not both of the hook will be fired at once for a single request, as WordPress itself do user/non-user validation and triggers the appropriate hook. So your function will be called only once not twice. — for further assistance, you could explore admin-ajax.php file inside wp-admin directory for reference.

What is WordPress ajaxurl

ajaxurl is a common JavaScript variable which holds the ajax request handler file uri. In WordPress it is the url of yoursite.com/wp-admin/admin-ajax.php file. WordPress automatically include this variable on every page on WP Admin pages, but not on the front pages (post/page/category/author/search/tag etc). Developer define this JS variable or create a different variable, but purpose is the same – assigning ajax request handler url on a JS variable. Example: Contact Form 7 add their own variable name as wpcf_ajax_url.

How to add ajaxurl variable name to WordPress site Front pages ?

If you are enqueuing any javaScript at front, this variable can be added using wp_localize_script function.

function w4dev_enqueue_scripts() {
    wp_register_script( 'myjs', 'https://example.com/script.js' );

    wp_localize_script( 
        'myjs', 
        'myjs', 
        array( 
            'ajaxurl' => admin_url( 'admin-ajax.php' ) 
        )
    );

    wp_enqueue_script( 'myjs' );
}
add_action( 'wp_enqueue_scripts', 'w4dev_enqueue_scripts' );

However, if you are not loading any js file, this can also be added by using the below codes on your theme/plugin file. In this code, custom function w4dev_ajaxurl_cdata_to_front hook’s to wp_head and print js which defines the ajaxurl for global use.

function w4dev_ajaxurl_cdata_to_front(){ 
    ?>
    <script type="text/javascript"> //<![CDATA[
        ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    //]]> </script>
    <?php 
}
add_action( 'wp_head', 'w4dev_ajaxurl_cdata_to_front', 1 );

Simplest Example – Using Ajax in WordPress

Goal: Display Site Description upon clicking on an Anchor.
Brief: First, we will add a link with a unique HTML/CSS id attribute ( within content are ex: sidebar, content, footer etc or hardcode in theme template files ) and use jQuery onclick function to send a request to ajaxurl and display the return value using Javascript alert.

Anchor to be placed:

<a id="view_site_description" href="javascript:void(0);">View Our Site Description</a>

Next, Adding the JavaScript codes using wp_footer hook.

function add_js_to_wp_footer(){ ?>
    <script type="text/javascript">
    jQuery('#view_site_description').click(function(){
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {"action": "view_site_description"},
            success: function(data){alert(data);}
        });
        return false;
    });
    </script>
<?php }
add_action( 'wp_footer', 'add_js_to_wp_footer' );

Add this to your themes functions.php or a plugin file

Explanation: In the above code, we have used jQuery OnClick event. Whenever, an element having id view_site_description is clicked, jQuery will Send a HTTP POST request to the ajaxurl ( wp-admin/admin-ajax.php file ) with a query string action=view_site_description. and the return value will be shown as an JavaScript alert.

You read earlier that, a request to wp-admin/admin-ajax.php file creates a WP Action hook, and using the hook we can produce anything we want. A request to the admin-ajax.php file will make available wp_ajax_view_site_description or wp_ajax_nopriv_view_site_description hook if action parameter value is set to view_site_description

Next create a function to process the request and display site description.

function view_site_description(){
    echo get_bloginfo( 'description', 'display' );
    exit;
}
add_action( 'wp_ajax_view_site_description', 'view_site_description' );
add_action( 'wp_ajax_nopriv_view_site_description', 'view_site_description' );

Add this to your themes functions.php or a plugin file.

Now if everything is OK and well placed, clicking on the link will alert you with your site description. Put the last three block of code on your theme, and try it yourself.

Notice: If your theme does not loads jQuery, then you will need to add few line of code to load jQuery. Below code will load jQuery, you can paste this code on your theme’s functions.php file.

function w4dev_enqueue_jquery(){
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'w4dev_enqueue_jquery');

That’s it, hope this writing helped you to understand Using Ajax in your WordPress site & wp_ajax.

Related Reference

• AJAX in Plugins
• How to use Ajax

The post Wp Ajax – WordPress Hook to Handle Ajax Request appeared first on W4dev.