24 February

A Step-by-Step Guide for WordPress Plugin Development Using AJAX

WordPress Plugin Development Using AJAX

AJAX technology is gaining a lot of popularity in the WordPress web development world because of its various innovative and useful features. It has the potential to manage database operations and fetch and display requested information without reloading or refreshing the entire page.

As a leading WordPress development company, we leverage the benefits of AJAX for building responsive WordPress plugins. In this blog post, we have discussed important tips for responsive WordPress plugin development using AJAX technology.

AJAX technology enables the display of content at blazing fast speed and this is what makes AJAX a popular choice for various website functions including posting comments, liking posts, uploading pictures, and more. You can use AJAX to develop your entire website. Some of the leading CMSes include AJAX in their architecture to build fast-loading websites and one such CMS is WordPress. Since AJAX is highly accessible, we advise developers to build WordPress plugins using AJAX. Here, we will teach you how to build responsive WordPress plugins using AJAX.

Steps to Follow for WordPress Plugin Development Using Ajax

Adding Scripts and Files

  1. Create the Right Environment

First of all, build a solid foundation to develop responsive WordPress plugins using AJAX. You can do this by adding relevant scripts to help it work. Next, you need to create an ajaxloadpost1 directory in your WordPress installation of the plugin directory.

Then in the same section, you are required to create an ajaxloadpost1.php in your plugin’s header. By doing this, you can easily activate your AJAX plugin from the plugin list.

Next, follow the step by implementing the code within your ajaxloadpost1.php:

define(‘AJAXLOADPOSTURL’, WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );

function ajaxloadpost1_enqueuescripts() {

wp_enqueue_script(‘ajaxloadpost1′, AJAXLOADPOSTURL.’/js/ajaxloadpost.js’, array(‘jquery’));

wp_localize_script( ‘ajaxloadpost1’, ‘ajaxloadpostajax’, array( ‘ajaxurl’ => admin_url( ‘admin-ajax.php’ ) ) );

}

add_action(‘wp_enqueue_scripts’, ajaxloadpost1_enqueuescripts);

  1. Set the AJAX Load Post URL Variable

The next step is to define the AJAX load post URL variable as it will help in indicating your plugin’s URL.

  1. Incorporate AJAX Load Post _ EnqueueScripts

After completing the above step, you can now add ajaxloadpost_enqueuescripts to the WordPress’ wp_enqueue_scripts. Doing this will help you enqueue all the scripts.

When done, add the JavaScript file ajaxloadpost.js. which you can find in the \wp-content\plugins\ajaxloadpost1\js\folder.

  1. Create a JS Folder: Responsive WordPress Plugin Development Using AJAX

Create a JS folder and save your ajaxloadpost.js file in it. You don’t need to worry about the proper sequence as WordPress will enqueue the files/scripts accordingly for you.

  1. Insert the JS Variable

After creating the JS folder, you can now insert the JS variables with wp_localize_script.

Adding the AJAX Handler

Now you need to incorporate the AJAX handler which will be responsible for creating WordPress AJAX call. Follow the below-given set of code to perform this step:

function ajaxloadpost_ajaxhandlers() {

if ( !wp_verify_nonce( $_POST[‘nonce’], “ajaxloadpost_nonce”)) {

exit(“Wrong nonce”);

}

$theseresults = ”;

$content_posted = get_post($_POST[‘postid’]);

$theseresults = $content_posted->post_content;

die($theseresults);

}

add_action( ‘wp_ajax_nopriv_ajaxloadpost_ajaxhandlers’, ‘ajaxloadpost_ajaxhandlers’ );

add_action( ‘wp_ajax_ajaxloadpost_ajaxhandlers’, ‘ajaxloadpost_ajaxhandlers’ )

Implementing the aforementioned code sequence will deliver two outcomes:

  • It will create a post ID of the post in question and,
  • It will create nonce.

This code sequence can help you check the post ID and the nonce for their usefulness. After completing the check, the added codes will fetch the posts from $_POST variables. Following this, you can now access any post and its content by using the API get_post. WordPress allows you to access through the post ID.

Once the AJAX handle is implemented correctly, you can now register the action in WordPress. This will enable the database to fetch appropriate data when an AJAX request is made. To achieve this, you will have to add your functions as follows:

add_action( ‘wp_ajax_nopriv_ajaxloadpost_ajaxhandlers’, ‘ajaxloadpost_ajaxhandlers’ );

add_action( ‘wp_ajax_ajaxloadpost_ajaxhandlers’, ‘ajaxloadpost_ajaxhandlers’ );

At this juncture, you have registered all the right actions in the admin-ajax-php URL. You can also make an AJAX request to WordPress easily.

AJAX and the Necessary JavaScript

Now you need to write the JS codes for enabling AJAX to fetch appropriate data using AJAX handler. The code can be something as given below for WordPress plugin development using AJAX:

Function ajaxloadpost_loadpost(postid,nonce) {

jQuery.ajax({

type: ‘POST’,

url: ajaxloadpostajax1.ajaxurl,

data: {

action: ‘ajaxloadpost_ajaxhandlers’,

postid: postid,

nonce: nonce

},

success: function(data, textStatus, XMLHttpRequest) {

var loadpostresult = ‘#loadpostresult’;

jQuery(loadpresult).html(”);

jQuery(loadpresult).append(data);

},

error: function(MLHttpRequest, textStatus, errorThrown) {

alert(errorThrown);

Here, the code gets two inputs – nonce and the post ID. After that, use the jQuery.ajax function to create an AJAX call to the servers. Therefore, the URL will remain the same as the AJAX URL of WordPress’s admin-ajax.php.

Besides, you can also find the required URL in the JS variable which you stored there while enqueuing the necessary scripts.

You can follow this step by naming the action with the action handler’s name which you got while registering with WordPress. You are also required to post the nonce and the post ID.

If you achieve it without making any errors, you can now update the id #loadpostresult <div>. This will obtain the appropriate content using your AJAX handler.

Placing the List of Posts on Display: WordPress Plugin Development Using AJAX

If you’re able to reach this point without facing any issues or errors, you can now display the post titles. For displaying posts, you will have to input the required codes to fetch the requested content using the AJAX call.

To perform this step, you will need to follow the below-given code:

function ajaxloadpost_show_posts($thenumber = ‘5’){

$ourresults =”;

$query = new WP_Query( ‘posts_per_page=’.$ thenumber);

while ( $query->have_posts() ) :

$query->the_post();

$nonce = wp_create_nonce(“ajaxloadpost_nonce”);

$args = get_the_ID().”,’”.$nonce.”‘”;

$thelink = ‘ <a onclick=”ajaxloadpost_loadpost(‘.$args.’);”>’. get_the_title().'</a>’;

$ourresults.= ‘<li>’ . $thelink . ‘</li>’;

endwhile;

wp_reset_postdata();

$ourresults.= ‘<div id=”loadpresult”></div>’;

return $ourresults;

}

function ajaxloadpost_sc_function( $atts ){

return ajaxloadpost_show_posts();

}

add_shortcode( ‘AJAXLOADPOST’, ‘ajaxloadpost_sc_function’ );

In the first code set, ajaxloadpost_show_posts, you can add a query to fetch the most recent post. Thus, you can then loop over the most recent post’s list and add the names of the titles using the <a> tag.

It will trigger the JavaScript ajaxloadpost_loadpost to fetch the post ID and the nonce. Also, this action will create an empty <a> that will be filled by the AJAX handler’s results.

You can also create a shortcode for every page. For this, you will need to add [AJAXLOADPOST] on the page to view the title list. When completed, your page will have a list of the titles of recent posts.

NOTE:

If you’re new to AJAX or less confident about using it in WordPress web development, you can always hire WordPress developers at WordPress India to get the job done quickly and appropriately.

Wrapping Up

AJAX is quite easy to work with. You can add it into WordPress easily Integrating AJAX into WordPress makes WordPress web development much easier. If you’re using AJAX for the first time, it may be a bit complicated for you to work with. You can always hire WordPress developers from us who can help you with your website development using AJAX. However, once you understand how to use it, you can easily work with it.

Whether it is an AJAX page loader or a third-party plugin such as an event calendar, you can integrate any AJAX plugin to your WordPress website by following the aforementioned steps. Using these steps can help users to click and see posts without having to refresh the entire page. You can also customize the set of code by incorporating some more features in it.

We hope this blog post was useful for you. As a leading WordPress web development company, we specialize in WordPress plugin development using AJAX. You can hire WordPress developers to build lightning-fast WordPress websites by leveraging the benefits of AJAX.

Frequently Asked Questions

FAQ-WordPressIndia

What is a plugin in WordPress?

A WordPress plugin is a set of code that plugin into your self-hosted WordPress website. Adding WordPress plugins to your website adds new functionality or extends existing functionality on your website.

Do plugins reduce the speed of WordPress websites?

When you add more plugins to your website, they add more code that a browser needs to load which affects the speed of your website. Therefore, you should use few yet powerful WordPress plugins on your website to ensure optimum speed of your website. You can also create custom plugins for your WordPress websites. Hire WordPress developers from us who can create highly compatible WordPress plugins for your site

Do you provide support post-development of WordPress plugins?

Yes, we do provide post-development support for the WordPress plugins that we develop for your website.

Get in Touch with Us for Custom WordPress Plugin Development Services.