ajaxwordpress

Ajax in wordpress step by step

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]