Increment value by 1 using WordPress by pressing button

1 comment

1. Hi you can use jquery code like that. There are many tutorials on youtube that show how to link the jQuery library in html.

   You can then put use this code in the html of your page. or if your are using an external javascript then you should enqueue your javascript file in your theme functions.php file like so

   wp_enqueue_script('your_js_handle', plugins_url('your_js_folder/your_js_file.js',__FILE__) ,array('any_dependency_the_js_file_might_require',false);
   
   add_filter('wp_head','your_function');
   
   function your_function(){
   $output = '
   var myvalue = 0;
   $("#mybuttonid").on("click",function(){
       myvalue++;
       localStorage.setItem("any_name_here", myvalue);
   })
   
   if ( localStorage.getItem("any_name_here") ) {
     myvalue = localStorage.getItem("any_name_here");
   }
   </script>';
   echo $output;
   }
   

   You can then use myvalue to put this as a text in some div tag.
   But first you have to have the div id. let say the div id is ‘the_text’

   This is the code you should use:

   Then you could write the code like so.

   wp_enqueue_script('your_js_handle', plugins_url('your_js_folder/your_js_file.js',__FILE__) ),array('any_dependency_the_js_file_might_require',false);
   
   
   add_filter('wp_head','your_function');
   
   function your_function(){
   $output = '
   var myvalue = 0;
   $("#mybuttonid").on("click",function(){
       if ( localStorage.getItem("any_name_here") ) {
         myvalue = localStorage.getItem("any_name_here");
       }
   
       myvalue++;
       $("#the_text").text(myvalue);
       localStorage.setItem("any_name_here", myvalue);
   
   </script>';
   echo $output;
   }
   

   For your_js_handle you can put any name but do not include spaces.
   your_js_handle is the id of the file that will be available in the HTML DOM.

   Plugins_url is the function you should use if you are working with a plugin.Else
   you should use get_template_directory_uri('your_js_folder/your_js_file.js').

   __FILE__is written with 2 underscores before and after the word so that is not an error and what __FILE__ will do is that it will retrieve the relative path of the file you are working with.

   array('any_dependency_the_js_file_might_require',false) should be used if the javascript file requires any library in order to work. like if your plugin require the jQuery library then you have to use it by stating array(‘jquery’).
   if your plugin requires the jQuery library make sure you are enqueuing it before using it. WordPress normally comes with a preinstalled jQuery library which is the latest version. To use it just state

    wp_enqueue_script('jquery');
   

   Finally false means either you render the file in the footer or the header of your site. In which case you should make sure you are using wp_head() or wp_footer() as required. If you set it to true, the script is placed before the end tag.

   Log in to Reply