CSS center

Centering element using CSS

To make the object have vertical and horizontal center we can use 2 option, position absolute and flex. Position absolute will be good for centering simple object, but it will be complicated when using it in object who has dynamic height, that why we will use flex for that.
Below is the sample code for absolute and flex

Centering using position absolute:

Centering using Flex

Wordpress Ajax

How to use ajax in wordpress.

In this post I will explain how to create simple ajax function in wordpress. The ajax function will send json data as string.

Enqueue the js file

We create the js file with file name script.js.  What important in this script is localize the script. The ajax will not working if we not localize the script. There is 2 parameter we need to caution. First is myAjax and the second is ajaxurl both two parameters will be called in our js script.

 
wp_enqueue_script( 'my-script-js', get_template_directory_uri() . '/assets/script.js', array(), '01', true );
wp_localize_script('my-script-js', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

Create js function

Here we will create js function that send json data to php. We will convert json to string, using JSON.stringify. Here is the code:

 
/*-- Json Test --*/
$("#test_json").click(function (e) {
 e.preventDefault();
 var json_data = [{
  "id": 1,
  "first_name": "Rancell",
  "last_name": "Byrkmyr"
 }, {
  "id": 2,
  "first_name": "Ray",
  "last_name": "Hinckes"
 }, {
  "id": 3,
  "first_name": "Cathyleen",
  "last_name": "Crufts"
 }];
 console.log(json_data);

 var json_data_str = JSON.stringify(json_data);
 console.log(json_data_str);

 var data = {
  action:'test_ajax',
  data_json: json_data_str,
 }

 $.ajax({
        type: "post",
        url: my_Ajax.ajax_url,
        data: data,
        dataType: "json",
        success:function(response){
           console.log(response);
        },
        error: function(errorThrown){
           console.log(errorThrown);
        } 
    });

})
/*-- Json Test End  --*/

There is some important thing that we need to have a note:
1. The url we use in ajax is set when we localize the script.
2. action key inside data will be used to call function on the php file.

Create function

Now we will define the function in php that will be called by the js.
we add 2 action wp_ajax_test_ajax and wp_ajax_nopriv_my_action and the function name will be test_ajax_fun. The action name must start with wp_ajax_ and wp_ajax_nopriv_ continued with action name that we use on the javascript. wp_ajax_test_ajax is used when logged in and wp_ajax_nopriv_test_ajax when you not logged in.

add_action("wp_ajax_test_ajax", "test_ajax_fun");
add_action("wp_ajax_nopriv_test_ajax", "test_ajax_fun"); 
function test_ajax_fun(){
 $data_json_str = $_POST['data_json'];
 $data_json_str = stripslashes($data_json_str);
 $data_json_obj = json_decode($data_json_str, true);
 $data_return->status = "new data";
 $data_return->our_data = $data_json_obj;
 echo json_encode($data_return);
 wp_die();
}

you can check this ajax by using inspect on chrome and choose Network.
below is the screenshot:

Create Filter using Algolia

Algolia is a hosted search engine. To make it simple we need the example for that. Let say we have a bunch of data, and hard for we to search all of our data. Then Algolia is the solution. Algolia offering full-text, numerical, and faceted search, capable of delivering real-time results from the first keystroke. The next question is, how we Algolia do that?