Wordpress Programming tips and tricks from a freelance Wordpress Developer in London

How to add a form to a shortcode in WordPress (using PHP and Ajax)

May 27, 2017 by louie171 Leave a Comment

Recently I needed to develop a Shortcode that would display a form, this blog post details what I did. I used Ajax ( which seems the best way to add forms to shortcodes, but I’d welcome any input from other developers on your approach).

So without further ado lets get on with adding a form to a shortcode in WordPress.

We need javascript to handle submission of the form via ajax (this presumes you have jquery available), and handle the response from the server. green_form is the form id.

jQuery( document ).ready(function() {
    // Handler for .ready() called.
    
    
    //
    jQuery(function(){
        jQuery("#green_form").submit(function(event){
            event.preventDefault();
            
            var formOk = true;
            
            // do js validation 
   
            jQuery.ajax({
                url:ajax_object.ajax_url,
                type:'POST',
                data: jQuery(this).serialize() + "&action=green_do_something",
                success:function(response){
                    
                        
                    if(response=="true")
                    {
                       // do something
                    }
                    else{
                        
                        alert('doh something went wrong'); 
                    }
                       

                }

            });
        });
    });


});

jQuery( document ).ready(function() {

// Handler for .ready() called.

jQuery(function(){

jQuery("#green_form").submit(function(event){

event.preventDefault();

var formOk = true;

// do js validation

jQuery.ajax({

url:ajax_object.ajax_url,

type:'POST',

data: jQuery(this).serialize() + "&action=green_do_something",

success:function(response){

if(response=="true")

{

// do something

}

else{

alert('doh something went wrong');

}

});

Next we need the php to handle everything else, you could put this in functions.php (or include from functions.php) or put it into a plugin. The shortcode to include the form in our page or post is [shortcode_with_form]

The code handles:

the output of the shortcode
the server side processing of the form (I’ve just created a stub in this example ( function do_something_serverside )
and the including of javascript file required ( if you’d like to know abit depth on ajax forms in WordPress see my post on that )

$greenShortyExample = new GreenShortyExample(); 

class GreenShortyExample {


    public function __construct() {

        $this->attach_actions();

        $this->attach_shortcodes();
    }

    function attach_actions() {



        add_action('wp_ajax_nopriv_green_do_something', array($this, 'do_something_serverside'));
        add_action('wp_ajax_green_do_something', array($this, 'do_something_serverside')); /* notice green_do_something appended to action name of wp_ajax_ */


        add_action('wp_enqueue_scripts', array($this, 'theme_enqueue_styles'), 99999);
    }

    function theme_enqueue_styles() {

        /*
         * include the js
         */

        wp_enqueue_script('green-script', plugin_dir_url(__FILE__) . '../js/ajax_call_to_handle_form_submit.js', array('jquery'));

        // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
        wp_localize_script('green-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234));
    }

    function do_something_serverside() {
        
        echo "true";  // output to ajax call        
        die();
       
    }


    function attach_shortcodes() {


        add_shortcode('shortcode_with_form', array($this, 'shortcode_with_form_code'));
    }

    function shortcode_with_form_code($atts, $content = null) {

        if ($this->formOk()) {
            return " <div>thanks your form has been submitted</div>";
        } else {
            return $this->show_form();
        }
    }

    function show_form() {

        $form = '
            
       
        <form id="green_form" action="">
        

          
          field1:<br>
          
          <input type="text" name="field1" value="">
          <br>
          
          field2:<br>
          
          <input type="text" name="field2" value="">
          <br>
          
          <br>
          <input type="submit" value="Submit" >
          
        </form> 
        
      


';

        return $form;
    }

    
    function formOk(){
        
        
        return true; // use session or something to check
        
    }
}

$greenShortyExample = new GreenShortyExample();

class GreenShortyExample {

public function __construct() {

$this->attach_actions();

$this->attach_shortcodes();

}

function attach_actions() {

add_action('wp_ajax_nopriv_green_do_something', array($this, 'do_something_serverside'));

add_action('wp_ajax_green_do_something', array($this, 'do_something_serverside')); /* notice green_do_something appended to action name of wp_ajax_ */

add_action('wp_enqueue_scripts', array($this, 'theme_enqueue_styles'), 99999);

}

function theme_enqueue_styles() {

* include the js

wp_enqueue_script('green-script', plugin_dir_url(__FILE__) . '../js/ajax_call_to_handle_form_submit.js', array('jquery'));

// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value

wp_localize_script('green-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234));

}

function do_something_serverside() {

echo "true"; // output to ajax call

die();

}

function attach_shortcodes() {

add_shortcode('shortcode_with_form', array($this, 'shortcode_with_form_code'));

}

function shortcode_with_form_code($atts, $content = null) {

if ($this->formOk()) {

return " <div>thanks your form has been submitted</div>";

} else {

return $this->show_form();

}

function show_form() {

$form = '

field1:<br>

<br>

field2:<br>

<br>

</form>

return $form;

}

function formOk(){

return true; // use session or something to check

}

Hope you find this interesting if you’re looking to add a form to a shortcode.

How to get a users Roles and how to list all WordPress roles in PHP

May 5, 2017 by louie171 1 Comment

This code is handy if you want to find out a users role/s. You could expand it and check if a user has a given role or similar.

$user_info = get_userdata(2152);
echo 'Username: ' . $user_info->user_login . "\n";
echo 'User roles: ' . implode(', ', $user_info->roles) . "\n";
echo 'User ID: ' . $user_info->ID . "\n";

$allroles = get_editable_roles();

foreach ($allroles as $k => $v) {

    echo "<br>role = $k ";
}

function get_editable_roles() {
    global $wp_roles;

    $all_roles = $wp_roles->roles;
    $editable_roles = apply_filters('editable_roles', $all_roles);

    return $editable_roles;
}

$user_info = get_userdata(2152);

echo 'Username: ' . $user_info->user_login . "\n";

echo 'User roles: ' . implode(', ', $user_info->roles) . "\n";

echo 'User ID: ' . $user_info->ID . "\n";

$allroles = get_editable_roles();

foreach ($allroles as $k => $v) {

echo "<br>role = $k ";

}

function get_editable_roles() {

global $wp_roles;

$all_roles = $wp_roles->roles;

$editable_roles = apply_filters('editable_roles', $all_roles);

return $editable_roles;

}

This code is based on examples from:

https://codex.wordpress.org/Function_Reference/get_userdata

and

https://wordpress.stackexchange.com/questions/1665/getting-a-list-of-currently-available-roles-on-a-wordpress-site

If you did want to check if the user is in a certain group you could do something like this:

    if (in_array('subscriber', $users_roles_array)) {
        
        // do something...
        
    }

if (in_array('subscriber', $users_roles_array)) {

// do something...

}

Woocommerce Table Rate Shipping weight example

December 12, 2016 by louie171 Leave a Comment

Sometimes you need to ship by weight, and like most things when it comes to shipping the Table Rate Shipping plugin is your friend. So in this worked example I’ll show how to setup Weight based shipping using the Table Rate Shipping plugin.

Firstly we need to decide the costs and the weights for those costs.

For example lets say we’re shipping Mushrooms, and we want to ship by these weights:

0kg to 1.99 kg = £2.85

2kg to 4.99kg = £4.95

5kg to 10kg = £13.75

We need to set this up: per order, then on the table select weight and min/max and then the cost.

This is best explained by showing the actual table like below.

If you need help with a WordPress Website click here

How to do Ajax in WordPress

October 19, 2016 by louie171 Leave a Comment

Write a javascript function to trigger the ajax call

    jQuery('#button_or_something').change(function() {
            
     
        jQuery.ajax({
            url: ajax_object.ajax_url,
            data: {
                action: 'like_or_not',  /* this is appended to add_action on server side */
                id: '99'
            },
            type: 'GET'
        });
            
		
    });

jQuery('#button_or_something').change(function() {

jQuery.ajax({

url: ajax_object.ajax_url,

data: {

action: 'like_or_not', /* this is appended to add_action on server side */

id: '99'

type: 'GET'

});

Write a php function to handle the ajax call (you could put this in functions.php)

add_action('wp_ajax_nopriv_like_or_not', 'green_like_or_unlike');   
add_action('wp_ajax_like_or_not', 'green_like_or_unlike'); /* notice like_or_unlike appended to action name of wp_ajax_ */


function green_like_or_unlike() {

    
   echo "hitting the php function ok";
    
    
}

add_action('wp_ajax_nopriv_like_or_not', 'green_like_or_unlike');

add_action('wp_ajax_like_or_not', 'green_like_or_unlike'); /* notice like_or_unlike appended to action name of wp_ajax_ */

function green_like_or_unlike() {

echo "hitting the php function ok";

}

There is one final piece, you might notice the ajax_object.ajax_url in the Javascript function above. We need to make this available in the js file that this function is in. This needs to be done in php.

wp_localize_script( 'green-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

1 2	wp_localize_script( 'green-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

Include ajax_url like this (below)

function theme_enqueue_styles() {

    /*
     * include the js
     */

    wp_enqueue_script('green-script', get_stylesheet_directory_uri() . '/my_js_file.js', array('jquery'));

        
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
	wp_localize_script( 'green-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    
    
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

function theme_enqueue_styles() {

* include the js

wp_enqueue_script('green-script', get_stylesheet_directory_uri() . '/my_js_file.js', array('jquery'));

// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value

wp_localize_script( 'green-script', 'ajax_object',

array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Woocommerce – Converting grams to kilograms ( product weights)

September 14, 2016 by louie171 Leave a Comment

If your using product weights in Woocommerce, you might find you want to change from grams to kilograms at some stage.

There are 2 parts to this:

Part 1:

Firstly in wp-admin you need to change a setting on the Woocommerce (below).

However this doesn’t automatically convert grams to kilograms.

Part 2:

Converting existing products grams to kilograms.

For this you’ll need to use a little script, I created this one as a page template.

<?php
/*
 *
 * Template name: list products
 */
get_header();
?>




<?php

$args = array( 'post_type' => 'product', 'posts_per_page' => 2500  );

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post(); 
global $product; 



$weight= get_post_meta( get_the_ID(), '_weight', true);

if ( ! empty( $weight ) ) {
    
    echo "id = ".get_the_ID(). " wieght = ".$weight; 
    
    $new_weight = $weight / 1000 ; 
    
    echo "<br>new weight = ".$new_weight."  ********************";
    
    // id , key , value 
    $result = update_post_meta(get_the_ID(), '_weight', $new_weight);
    echo "result = ".$result;
    
    
}else{
    echo "<br>NO update for: ".get_the_ID();
}



endwhile; 


wp_reset_query(); 


?>




</div>

<?php get_footer(); ?>

<?php

* Template name: list products

get_header();

<?php

$args = array( 'post_type' => 'product', 'posts_per_page' => 2500 );

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();

global $product;

$weight= get_post_meta( get_the_ID(), '_weight', true);

if ( ! empty( $weight ) ) {

echo "id = ".get_the_ID(). " wieght = ".$weight;

$new_weight = $weight / 1000 ;

echo "<br>new weight = ".$new_weight." ********************";

// id , key , value

$result = update_post_meta(get_the_ID(), '_weight', $new_weight);

echo "result = ".$result;

}else{

echo "<br>NO update for: ".get_the_ID();

}

endwhile;

wp_reset_query();

</div>

<?php get_footer(); ?>

AutomateWoo for increasing sales in Woocommerce

SumoMe

Write a javascript function to trigger the ajax call

Write a php function to handle the ajax call (you could put this in functions.php)

Include ajax_url like this (below)

Firstly in wp-admin you need to change a setting on the Woocommerce (below).

Converting existing products grams to kilograms.