DEV Community: Shweta Danej

WordPress - Create database tables programmatically

Shweta Danej — Mon, 15 Feb 2021 16:09:41 +0000

<?php

/*
Plugin Name: Demo Plugin
Plugin URI: https://shwetadanej.com/
Description: A simple way to create custom database tables and it's CRUD operations from WordPress admin panel
Version: 1.0.0
Author: Shweta Danej
Author URI: https://shwetadanej.com/
Text Domain: demo-plugin
*/

/**
 * Add function on plugin activation hook
 */
register_activation_hook(__FILE__, 'sd_plugin_activation');

/**
 * Callback function of plugin activation hook
 * This will check if website is multisite or not, if yes then loop through it and create table for each website
 *
 * @return void
 */
function sd_plugin_activation()
{
    $db_created = get_option("sd_db_created");
    if (!$db_created) {
        global $wpdb;
        $table1 = $wpdb->prefix . 'sd_tbl_1';
        require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
        $charset_collate = $wpdb->get_charset_collate();
        $table1_query = "CREATE TABLE IF NOT EXISTS " . $table1 . " (
            id int(11) NOT NULL AUTO_INCREMENT,
            user_id int(11) NOT NULL,
            date date NOT NULL,
            time time NOT NULL,
            PRIMARY KEY id (id)
        )$charset_collate;";
        dbDelta($table1_query);

        $table2 = $wpdb->prefix . 'sd_tbl_2';
        $table2_query = "CREATE TABLE IF NOT EXISTS " . $table2 . " (
            id int(11) NOT NULL AUTO_INCREMENT,
            question text NOT NULL,
            answer varchar(50) NOT NULL,
            PRIMARY KEY id (id)
        )$charset_collate;";
        dbDelta($table2_query);
        update_option("sd_db_created", true);
    }
}

Ajax calls in wordpress front-end

Shweta Danej — Thu, 26 Dec 2019 13:23:16 +0000

wp_ajax_ and wp_ajax_nopriv_ actions hooks are used to make ajax calls from wordpress front-end.

wp_ajax_ is used when the user is logged in to the website.
wp_ajax_nopriv_ is used when the user is logged out of the website.

You can set your ajax calls according to the need.

2 ways you can do this, let's see a quick example here:

1. Without a separate script file

You can create a file in your plugin OR you can use your theme's functions.php file for this.

When not creating a script file, you can embed the script in Wordpress footer using wp_footer action hook like this :

First of all you need to get ajaxurl to set the URL, unlike the ajaxurl javascript global does not get automatically defined in frontend.

<?php
add_action( 'wp_footer', 'my_ajax_without_file' );

function my_ajax_without_file() { ?>

    <script type="text/javascript" >
    jQuery(document).ready(function($) {

        ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ) ?>'; // get ajaxurl

        var data = {
            'action': 'frontend_action_without_file', // your action name 
            'variable_name': "Some value" // some additional data to send
        };

        jQuery.ajax({
            url: ajaxurl, // this will point to admin-ajax.php
            type: 'POST',
            data: data,
            success: function (response) {
                console.log(response);                
            }
        });
    });
    </script> 
    <?php
}

add_action("wp_ajax_frontend_action_without_file" , "frontend_action_without_file");
add_action("wp_ajax_nopriv_frontend_action_without_file" , "frontend_action_without_file");

function frontend_action_without_file(){
    echo json_encode($_POST);
    wp_die();
}

?>

2. With separate javascript file

Create a frontend-scripts.js file and include it in the front end footer using the wp_enqueue_scripts action hook.

Localize the script to pass the PHP variables to use it in javascript code.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_my_frontend_script' );

function enqueue_my_frontend_script() {
    wp_enqueue_script( 'my-script', plugin_dir_url(__FILE__).'frontend-scripts.js', array('jquery'), null, true );
    $variables = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    );
    wp_localize_script('my-script', "test", $variables);
}

?>

Add this code to javascript file to make an ajax call and use the test.ajaxurl to set URL

jQuery(function ($) {

    var testingObj = {
        init: function () {
            testingObj.callAjaxMethod();
        },
        callAjaxMethod:function(){
            var data = {
                'action': 'frontend_action_with_file',
                'name': "Shweta"
            };

            jQuery.ajax({
                url: test.ajaxurl,
                type: 'POST',
                data: data,
                success: function (response) {
                    console.log(response);   
                }
            });
        }
    }
    testingObj.init();
});

Check the browser console to see the result, and it's done :)

How you can make an ajax call in wordpress admin area ?

Shweta Danej — Thu, 26 Dec 2019 09:21:03 +0000

Wordpress made it so easy to use ajax in admin and front-end areas since the ajax is built into WordPress core.

Let's see the short example of this:

Without separate javascript file
With separate javascript file

You can create a file in your plugin OR you can use your theme's functions.php file for this.

1. Without separate javascript file

There is an action hook called admin_footer, using that we can embed the javascript code into the admin footer area.

create an ajax request from javascript and pass action variable as data.
Wordpress uses wp_ajax_ action hook to detect all ajax requests coming from admin or front-end area. You need to specify this as prefix with your action name like this wp_ajax_your_action_name. See the below example for this.

ajaxurl javascript global variable is defined for the admin area which gets the admin-ajax.php url.


<?php
add_action( 'admin_footer', 'ajax_without_file' );
function ajax_without_file() { ?>
    <script type="text/javascript" >
    jQuery(document).ready(function($) {
        var dataVariable = {
            'action': 'my_action_without_file', // your action name
            'variable_name': "Some value" // some additional data to send
        };

        jQuery.ajax({
            url: ajaxurl, // this will point to admin-ajax.php
            type: 'POST',
            data: dataVariable, 
            success: function (response) {
                console.log(response);
            }
        });
    });
    </script> 
    <?php
}


add_action("wp_ajax_my_action_without_file" , "my_action_without_file");
function my_action_without_file(){
    echo json_encode($_POST);
    wp_die();
}
?>

2. With separate javascript file

Create a sample-scripts.js file and include this code

jQuery(function ($) {

    var testingObj = {
        init: function () {
            testingObj.callAjaxMethod();
        },
        callAjaxMethod:function(){
            var data = {
                'action': 'my_action_with_file',  // your action name
                'name': "Shweta"
            };

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: data,
                success: function (response) {
                    console.log(response);
                }
            });
        }
    }
    testingObj.init();
});

Create a php file and use admin_enqueue_scripts action hook to include js file in admin footer.

<?php
add_action( 'admin_enqueue_scripts', 'enqueue_my_script' );
function enqueue_my_script() {
    wp_enqueue_script( 'my-script', plugin_dir_url(__FILE__).'sample-scripts.js', array('jquery'), null, true );
}

add_action("wp_ajax_my_action_with_file", "my_action_with_file");
function my_action_with_file(){
    echo json_encode($_POST);
    wp_die();
}
?>

Here, in both cases, you can check the output in console log.

Detect browser and its version in javascript

Shweta Danej — Thu, 26 Dec 2019 06:35:25 +0000

All major browser supports the object called navigator, this object has the information about the browser.