Forem: Arvind Kumar

Use AJAX with WordPress in 3 ways

Arvind Kumar — Mon, 10 Oct 2022 15:06:48 +0000

Here we will see the use of AJAX to get data using 3 most used tools.

Server Side Code

Let’s start by creating function and two hooks in your functions.php file in root of your active theme folder. The name of the function will be used in client side to make a network request, that’s how WordPress identifies which function needs to be executed because all requests are made to same url.

WordPress gives two hooks with suffix of our custom function name of choice. To make it simple, we will call it “get_recent_posts_ajax”. One hook is for logged in users and other is for guest users. Here we are just returning a JSON response, but you do any complex calculations here or make another network request with cURL.

function get_recent_posts_ajax(){
    if( !wp_verify_nonce($_POST['nounce'],'get_recent_posts_ajax') ){
        echo json_encode(array( 'status' => false, 'message' => 'Nounce error' ));
        exit(0);
    }

    $data = array();
    $posts = wp_get_recent_posts(array(
        'posts_per_page' => $_POST['number_of_posts'],
        'post_status' => 'publish',
    ));

    foreach ($posts as $key => $value) {
        $data[] = array(
            'ID' => $value['ID'],
            'post_date' => $value['post_date'],
            'post_title' => $value['post_title'],
            'post_excerpt' => $value['post_excerpt'],
            'comment_count' => $value['comment_count'],
            'permalink' => get_permalink($value['ID']),
        );
    }
    echo json_encode($data);
    exit(0);
}
// For logged in users
add_action('wp_ajax_get_recent_posts_ajax', 'get_recent_posts_ajax');
// For not logged in users
add_action('wp_ajax_no_priv_get_recent_posts_ajax', 'get_recent_posts_ajax');

Client side

Here most of the code is self-explanatory and consider this is more like a code snippet, not a detailed explanation.

HTML

To begin with, we will create a basic form with simple text fields. We will also include a hidden field named “action” and give it value. We used the function at server side with the same name as this value so don’t use any hypen in it.

<form id="form" action="<?php echo admin_url('admin-ajax.php'); ?>">
    <input type="number" min="1" name="number_of_posts" value="" required />
    <input type="hidden" name="nounce" value="<?php echo wp_create_nonce('get_recent_posts_ajax'); ?>" />
    <input type="hidden" name="action" value="get_recent_posts_ajax" />
    <button type="submit">Submit</button>
</form>

Option 1: Vanilla JS

var form = document.getElementById('form');
form.addEventListener('submit', function(e){
    e.preventDefault();

    var formData = new FormData(form);
    formData.append('extra_key', 'extra_value');
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.getAttribute('action'), true);
    xhr.onreadystatechange = function (res) {
        if (this.readyState == 4 && this.status == 200) {
            var res = JSON.parse(xhr.responseText);
            console.log(res);
        }
        if (this.readyState == 4 && this.status == 404){
            console.log('An error occurred')
        }
    }
    xhr.send(formData);

}, false);

Option 2: Axios

var form = document.getElementById('form');
form.addEventListener('submit', function(e){
    e.preventDefault();

    var formData = new FormData(form);
    formData.append('extra_key', 'extra_value');
    var xhr = new XMLHttpRequest();
    axios.post(form.getAttribute('action'),
        formData
    ).then(function (res) {
        console.log(res.data);
    }).catch(function (err) {
        console.log(err);
    }).then(function () {
        // always executed
    });

}, false);

Option 3: jQuery

jQuery(function ($) {

    $('#form').on('submit', function(e){
        e.preventDefault(); // prevent page refresh on submit

        var formData = new FormData($('#form')[0]); // pass HTML form element as argument
        formData.append('extra_key', 'extra_value');
        $.ajax({
            method: 'POST',
            data: $('#form').serialize(), // you can also use jQuery serialize
            // data: formData,
            // processData: false, // add this if using "new FormData"
            // contentType: false, // add this if using "new FormData"
            url: $('#form').attr('action'),
        }).done(function(res) {
            var res = $.parseJSON(res)
            console.log(res);
        }).fail(function(err){
            console.log(err);
        }).always(function(){
            console.log('this will always execute');
        });
    });

});

Add Custom Field to WooCommerce Product Category without Plugin

Arvind Kumar — Sat, 01 Oct 2022 06:52:11 +0000

Usually, you might want to consider using a plugin like ACF plugin, but we like to keep website lightweight so let’s do this with some code.

We will add 2 fields, one is a simple text input, and another is select dropdown. For the demo purpose will store values like background color (in text field) and frontend visibility (in select dropdown), you are free to store any information you like.

Show fields when new category is created

Here we will use the product_cat_add_form_fields() hook to add html of our custom fields. The most important thing here is the name of form fields because we will use the name to store these fields.

<?php
// show custom fields when new category is created
function add_custom_field_to_prod_category() { ?>
    <div class="form-field">
        <label for="term_meta[cat_bg_color]">Background Color</label>
        <input type="text" name="term_meta[cat_bg_color]" id="term_meta[cat_bg_color]" value="" />
        <p class="description">You can use rgb() or hexadecimal style.</p>
    </div>
    <div class="form-field">
        <label for="term_meta[cat_visiblity]">Visibility</label>
        <select id="term_meta[cat_visiblity]" name="term_meta[cat_visiblity]">
            <option value="no" selected>No</option>
            <option value="yes">Yes</option>
        </select>
    </div>
<?php }
add_action('product_cat_add_form_fields', 'add_custom_field_to_prod_category', 10, 2);

Show fields when category is edited

We also need to show the custom fields when an old category is edited. This time we also need to prefill with the saved data. We can get the already stored data with get_option() function.

<?php
// show custom fields when category is edited
function edit_custom_field_to_prod_category($term) {
    $t_id = $term->term_id;
    // store meta values to autofill form fields
    $term_meta = get_option("taxonomy_$t_id");
    ?>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="term_meta[cat_bg_color]">Background Color</label>
        </th>
        <td>
            <input type="text" name="term_meta[cat_bg_color]" id="term_meta[cat_bg_color]" value="<?php echo esc_attr( $term_meta['cat_bg_color'] ) ? esc_attr( $term_meta['cat_bg_color'] ) : ''; ?>" />
            <p class="description">You can use rgb() or hexadecimal style.</p>
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row" valign="top">
            <label for="term_meta[cat_visiblity]">Visible</label>
        </th>
        <td>
            <select name="term_meta[cat_visiblity]" id="term_meta[cat_visiblity]">
                <option value="no" <?php echo $term_meta['cat_visiblity'] == 'no' ? 'selected' : ''; ?>>No</option>
                <option value="yes" <?php echo $term_meta['cat_visiblity'] == 'yes' ? 'selected' : ''; ?>>Yes</option>
            </select>
            <p class="description">Toggle to make it visible as colored box.</p>
        </td>
    </tr>
<?php
}
add_action('product_cat_edit_form_fields', 'edit_custom_field_to_prod_category', 10, 2);

Save custom fields

Now finally we will save all custom fields with the same callback function and hooking at two actions.

<?php
// save custom fields callback function
function save_custom_field_to_prod_category( $term_id ) {
    if ( isset( $_POST['term_meta'] ) ) {
        $t_id = $term_id;
        $term_meta = get_option("taxonomy_$t_id");
        $cat_keys = array_keys( $_POST['term_meta'] );
        foreach ( $cat_keys as $key ) {
            if ( isset ( $_POST['term_meta'][$key] ) ) {
                $term_meta[$key] = $_POST['term_meta'][$key];
            }
        }
        // save the option array
        update_option("taxonomy_$t_id", $term_meta);
    }
}
add_action('edited_product_cat', 'save_custom_field_to_prod_category', 10, 2);
add_action('create_product_cat', 'save_custom_field_to_prod_category', 10, 2);

Fetch stored data

Here’s an example of how we will get the stored data in our custom fields. So that was easy enough, right ?

Next time you’ll think twice to use any plugin for adding custom fields in product categories.

<?php
$all_categories = get_terms(
    array(
        'taxonomy' => 'product_cat',
        'orderby' => 'name',
        'order' => 'asc',
        'hide_empty' => false,
    )
);
?>
<ul>
    <?php foreach ($all_categories as $category) { ?>
        <?php $term_meta = get_option("taxonomy_$category->term_id"); ?>
        <li>
            <a href="<?php echo get_term_link($category->term_id); ?>">
                <?php echo $category->name; ?> - <?php echo $term_meta['cat_bg_color']; ?> - <?php echo $term_meta['cat_visiblity']; ?>
            </a>
        </li>
    <?php } ?>
</ul>

Connect with SSH on Shared Hosting

Arvind Kumar — Sat, 18 Jun 2022 11:47:44 +0000

Using FTP account with FileZilla is cool but sometimes you need to run commands like php artisan or npm run build, which is not possible with FTP so let's connect you to your server with SSH using terminal.

I will be using Git Bash for Windows, but the process will work with Linux and Mac.

Create SSH key

Let's starting with creating a new key. Go to root level with command below in your terminal.

cd ~

Now create a new SSH key.

ssh-keygen

You will prompted for with some questions:

name of key
location of key
passphrase

The default name of the key is id_rsa and if this is your first time with ssh keys then don't change the default name otherwise you'll need to add the key using ssh-agent. Keep the default location and empty passphrase.

Here's the output of above command.

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Arvind/.ssh/id_rsa): id_rsa
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in id_rsa
Your public key has been saved in id_rsa.pub
The key fingerprint is:
SHA256:XduoVWQCUyPfQejGMynGljsajMSfZeJz1aV+u7tiYC4
The key's randomart image is:
+---[RSA 3072]----+
|            +o*oo|
|             * *.|
|    .     + * o o|
|     o . O * X  .|
|    . = S * + + o|
|     . B * . . + |
|        B o . o  |
|       E . o .   |
|          . .++  |
+----[SHA256]-----+

Two keys are created, private key (id_rsa) and public key (id_rsa.pub).

Connect Public key to Server

Every shared hosting server has different user interface so try to find SSH Access in your cPanel then look for place to import/add key. Then copy the text content of public key which has extension .pub (id_rsa.pub file) and paste in the public key section of import/add key input area.

Now there will be an option to "authorize key", look for it and authorize your public key.

Connect with username and host

In your cPanel somewhere you can find your username and hostname. If you can't find it then contact your hosting chat support.
Use the following format with username and host to start connection. Hostname is also written as "Shared IP Address" in some hosting services.

ssh username@host

Here's an example

ssh arvind@126.291.80.81

When connecting first time with ssh, you will be prompted with following message. There is a confirmation to add the connection to known hosts, accept that by typing yes.

The authenticity of host '126.291.80.81 (126.291.80.81)' can't be established.
ED25519 key fingerprint is SHA256:xr7uFgj37m4f+RoKKITfSN3DNwkDcYKSs+yD7GxisQA.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added '126.291.80.81' (ED25529) to the list of known hosts.
Last login: Sat Jun 18 00:57:25 2022 from 47.9.69.184
arvind@126.291.80.81 [~]#

If you see the message like above with login timestamp, then congrats you connected to server. Now you can run commands on server just like you do locally.

In next article we will install Laravel on shared hosting server and learn some other things like:

install latest composer
set latest php alias for composer
create github like repo base so there's no need to store code on github
and some other basics.

If you get stuck at any step then leave a comment here and I'll try to answer with my experience, or you can try a google search.