Ajax in wordpress step by step

ajaxwordpress
Implement ajax in wordpress theme  Step by Step. Here we are going to print “The Blog Bunny” in Ajax. first you need to install wordpress. After installing wordpress follow the steps. Step 1. Create directory in wordpress themes\yourtheme\ Folder. Named “ajax” Path In my Case: E:\wamp\www\wordpress\wp-content\themes\ ajaxtheme\ajax tbbw1   Step 2. Create a new php in “ajax” folder. Named “ajax.php” Path In my Case: E:\wamp\www\wordpress\wp-content\themes\ajaxtheme\ajax\ajax.php In this page put some code to print. echo “The Blog Bunny”; tbbw2   Step 3. Go in to your project folder in themes from where you want to call AJAX Path In my Case: E:\wamp\www\wordpress\wp-content\themes\ajaxtheme tbbw3   Step 4. Now you need to write down javascript  for Ajax request Create a new custom php page under your project folder or you can use already exists page. Here I have created one page called ‘ajaxtest.php’. Path In my Case: E:\wamp\www\wordpress\wp-content\themes\ajaxtheme\ajaxtest.php In this page write down javascript at the end of the page: <script> $( document ).ready( function() { $.ajax({ url: ‘<?php bloginfo(‘template_directory’); ?>/ajax/ajax.php’, data: { ‘action’:’print_the_blog_bunny ‘ }, success:function(data) { $(‘#ajaxresult’).html(data); }, error: function(errorThrown){ console.log(errorThrown); } }); }); </script>   Step 5. Now  create a button to call this javascript in ‘ajaxtest.php<input type=”button” value=”Submit Ajax” id=”clickajax”> Now for onClick event on this button we need to add below code. <script> $( document ).ready( function() { $(‘#clickajax’).click( function(){ $.ajax({ url: ‘<?php bloginfo(‘template_directory’); ?>/ajax/ajax.php’, data: { ‘action’: ‘print_the_blog_bunny’ }, success:function(data) { $(‘#ajaxresult’).html(data); }, error: function(errorThrown){ console.log(errorThrown); } }); }); }); </script>   Step 6. Now to show result add div called ‘ajaxresult’. <div id=”ajaxresult”></div> Now when you click on button ajax request will call and result display in ‘ajaxresult’  div.   Step 7. ajaxtest.php page will look: <input type=”button” value=”Submit Ajax” id=”clickajax”> <div id=”ajaxresult”></div> <script> $( document ).ready( function() { $(‘#clickajax’).click( function(){ $.ajax({ url: ‘<?php bloginfo(‘template_directory’); ?>/ajax/ajax.php’, data: { ‘action’: ‘print_the_blog_bunny’ }, success:function(data) { $(‘#ajaxresult’).html(data); }, error: function(errorThrown){ console.log(errorThrown); } }); }); }); </script> tbbw4 I have tried this and it worked for me. Image Source: http://integrasolid.com [fb_button]    

Theblogbunny

Theblogbunny is box of information about PHP related technologies, CSS, AJAX, Jquery, HTML, Javascript. Here you can find all Tips and Tricks for technologies.

You may also like...

Leave a Reply