Happy Birthday Dear Sweetest Sister!

It’s been about a 7 years when we met first time😊. I am lucky to have a sister like you in my life.

To my
SPECIAL SISTER

You are not just a WONDERFUL SISTER, but also a REALLY Good friend and NO Matter what LIFE has in STORE, I know on YOU I depend.
You are someone very Special.
– I just want you to know
Wherever we GO
Whatever we Do
I’ll always Love you ❤ 🙂

On this special day, I don’t have anything to give you except pray for your better and bright future. I was waiting for this day since last 1 Month. And now I don’t have any words to express the birthday wishes. And at last, Wishing you many many happy returns of the special day!!❣

I would like to add some quotes for you😍

Me & My Sister

Together Forever,
Never Apart
Except
Distance
But Never In
HEART💚

---

Here’s the some of our memories!

• 

• 

• 

• 

Dii, You prove that!

THE BOND BETWEEN A BROTHER AND SISTER IS NOT DECIDED BY BLOOD IT IS ETERNALLY BLESSED!!

Love Uhh and Miss Uhh Dii 🙂

How to create Github Bot Account?

GitHub bot account is simple another github account with different username.

A “bot account” is just another Github user account. You create it exactly as you would any other Github user account.

For Example,

You are using WordPress and developing theme or plugin, and you want that plugin or theme must be WordPress coding standard Compitable thene you can use library provided by vip-go-ci or rtcamp’s code review library.

For that Firstly need to create a bot account then give it access to your repository, and in repository secrets add a token from the newly created account.

That’s it 🙂.

What are the useDispatch and useSelect?

The useDispatch and useSelect are Custom React Hooks that enable a more declarative interface to registered stores in the registery

These hooks are available in the @wordpress/data package.

useSelect and useDispatch are, custom hooks encapsulating logic for getting and setting data (or dispatching actions) to registered wp.data stores.

currentColor CSS

The currentColor uses the current text color value.

It works something like this :

p { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

You can use this value for other properties that accept color values like border, box-shadow, outline, background-color, and so on.

How wp.blocks.parse() works?

wp.data.select('core/editor').getEditedPostContent(); is used to get the value by HTML comments from the editor.

Let’s create a new post by going into wp-admin. Now use some block in the editor. Now open inspect element by right-clicking and go to console and run the following command.

wp.data.select('core/editor').getEditedPostContent();

Notice that:

In our HTML, Before and after each block we have some sort of an HTML comment. This is called limitors.

They are used to marking this start and end of each block.

Now run following command in console of browser:

wp.blocks.parse(wp.data.select('core/editor').getEditedPostContent());

It will parse all the HTML content into JavaScript objects by using the HTML Comments separator.

Now the question is that, How does it know attributes?

In the comment, we have a JSON object and that object can contain some attributes.

Example:

For Image block

<!-- wp:image {"id":9} -->

In the object’s attributes property, there are some attributes Like

attributes:
alt: ""
caption: ""
id: "9"
url:"xyz.com/image.jpg"

So, Here the image id is stored in JSON Object, and other attributes it extracted from the HTML attributes.

What needed to store in JSON Object?
Sometimes we have attributes that can not be stored in HTML. Like in Image Block: Image ID

So in that case, we have to store ID in JSON object comment. this way we let parser knows that the all the attribute that we have.

Now Let’s see how data is serialized by doing some manual stuff.

Run:

wp.blocks.serialize( wp.blocks.parse( wp.data.select( 'core/editor' ).getEditedPostContent() ) );

So, It will return a new HTML that WordPress saves in the database.

How the Gutenberg Editor reconstructed from plain HTML

Firstly, whenever we load post in a block editor page. We load a html post content that is saved in a database and that is a only thing that we know about the post content.

This post content then parsed and converted into a Javascript array of objects and each objects in this array represents a block.

Now this Javascript array represents the state of the post editor. It represents, what block should be displayed and their attributes.

This all blocks array lives in memory. It’s not saved to database until you saved the post. If you not save post after some editing then Once you close window this array will cleaned from the memory.

This generated array is then used to construct the editor. It is just loop through the array and foreach object in the array we know the name of the block and it’s attributes.

So, we can just run the edit function for the specific block giving it’s attribute and this will return the component that should be displayed in visual editor.

Block API which has edit function using that we can just reconstruct the visual editor. To get more Idea look at Diagram.

How to design Github profile using README.md

GitHub recently released a feature that allows users to create a profile-level README to display prominently on their GitHub profile.

The profile README is created by creating a new repository that’s the same name as your username. For example, my GitHub username is kishanjasani so I created a new repository with the name kishanjasani. Example: [Username]/README.md.

If you want to listed your all project, all social media link and many other link then this github update is for you.

How pagination works with custom query?

While developing theme Theme developers can use simple links or numbered pagination to indicate the previous page or the next page in a given sequence. You can set how many page post to list on each page by Go to Reading screen ( Settings > Reading ). Unless you modify the value of this setting to determine how many post will display on page.

The pagination uses standard WordPress pagination functions, like previous_post_link() and next_post_link(). These functions only apply to the main WordPress query, not any custom ones. There are few more functions to deal with pagination.

Pagination with custom query:

<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

$args  = array(
  'post_type'      => 'news',
  'posts_per_page' => 4,
  'paged'          => $paged,
);

$custom_query = new WP_Query( $args );

while( $custom_query -> have_posts() ) :
      $custom_query -> the_post();
      echo the_title( '<p>', '</p> );
endwhile;

if ( function_exists( 'pagination' ) ) {
	pagination( $custom_query -> max_num_pages );
} 

?>

Note: In static page use page instead of paged in WP_Query arguments.

Theme Development

I have finished the theme developing with WordPress.
Covered all topics related to theme development.

•  Template Hierarchy
• Template Tags
•  Customizer API
•  Child theme
•  Handling Media in WordPress

Now I am starting with advanced topics in WordPress.

Plugin Development

Today I have completed my Plugin development with the following topics :

• Plugin Security
• Hooks
• Menu API
• Setting API
• Option API
• Metadata API
• Custom Post Type
• Taxonomy
• Users – Roles and capability
• Ajax for Server and frontend
• Internationalization
• Background Processing