WordPress (WP for short) does not come with any like button functionality built-in. You have two choices to add the like button. Use a 3rd party plugin. The caveat with these is that they will send your data to a remote server. Of course, you also have to pay for these services and create an account. The other option is to do-it-yourself (DIY). This post describes the second option.

I used following code https://github.com/JonMasterson/WordPress-Post-Like-System/. So first read through it.

Steps I followed to get it working (with the twentynineteen theme):

1. Add content of https://raw.githubusercontent.com/JonMasterson/WordPress-Post-Like-System/master/css/simple-likes-public.css to the end of wp-content/themes/twentynineteen/style.css – this defines the styles for button but not the heart SVG.
2. Add new javascript file simple-likes-public.js under wp-content/themes/twentynineteen/js– this makes the AJAX call to backend when button is clicked.
3. Add the content of https://raw.githubusercontent.com/JonMasterson/WordPress-Post-Like-System/0.5.3/post-like.php to bottom of wp-content/themes/twentynineteen/functions.phpThis file is really doing most of the work. It also defines the heart SVG in get_liked_icon(). I suggest using font-awesome in this function to display the heart shape instead of a custom SVG. To use font-awesome, add it to the list of downloads:

   data/wordpress/wp-content/themes/twentynineteen/functions.php: wp_enqueue_style( ‘font-awesome‘, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’ );

   and modify the get_liked_icon and get_unliked_icon as follows:

   function get_liked_icon() {

   $icon = ‘<span class=”sl-icon”><i class=”fa fa-heart”></i></span>’;

   return $icon;

   } // get_liked_icon()

   function get_unliked_icon() {

   $icon = ‘<span class=”sl-icon”><i class=”fa fa-heart-o”></i></span>’;

   return $icon;

   } // get_unliked_icon()

4. Another change I made is that I replaced all occurrences of "YourThemeTextDomain" with wp_get_theme()->get( 'TextDomain' ) as this user has commented ref. The other important thing was to comment out all the code that allowed anonymous user to like.

1. The final step is to edit wp-content/themes/twentynineteen/inc/template-tags.php and add the line echo get_simple_likes_button( get_the_ID() ); in the function twentynineteen_entry_footer(). This will add the button to the posts. I did not add the like button to comments.

Re: shortcode, these are codes like , that you add when authoring your posts. There was no need to add shortcode in php. The [jmliker] shortcode does exactly what echo get_simple_likes_button( get_the_ID() ); does and is defined in function sl_shortcode() in functions.php.

The like button code creates some fields in the wp_postmeta table:

mysql> select meta_key from wp_postmeta; +