Custom ajax in wordpress
Step 1
Create a custom template page in your themes directory located at website_root_path/wp-content/themes/your_theme. You can read our article how to create a custom post template in wordpress. Here below we have created a template page Contact Form and created a form in this template. So, simply create a file contact-template.php file in your themes directory and paste the code given below in the file.
/*
* Template Name: Contact Form Template
* Template Post Type: page
*/
get_header();
?>
<form type="post" action="">
<label for="name">Name:</label>
<input name="name" type="text" />
<label for="email">Email:</label>
<input name="email" type="text" />
<input type="hidden" name="action" value="save_ajax_data"/>
<input type="submit">
</form>
<!-- new registeration -->
<?php
get_footer();
Now we have a contact form template page. Go to your WordPress Dashboard and create a page and select your template Contact Form Template from the right sidebar Page Attributes. After creating a page open your page url and you will the see the form we have created in our Contact Form Template page.
Step 2
Create a directory js in your themes directory and under your js directory create a file my-ajax-script.js. Then paste the code given below in your my-ajax-script.js file.
jQuery(document).ready(function(){
jQuery('form').submit(function(e){
e.preventDefault();
var formData = jQuery(this).serialize();
jQuery.ajax({
type: "post",
dataType: "json",
url: my_ajax_object.ajax_url,
data: formData,
success: function(msg){
console.log(msg);
}
});
return false;
});
});
Step 3
Now paste the code given below in your functions.php under your themes directory.
/*******************custom ajax*****************/
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
function saveAjaxData() {
print_r($_REQUEST);
wp_die();
}
add_action( 'wp_ajax_nopriv_save_ajax_data', 'saveAjaxData' );
add_action( 'wp_ajax_save_ajax_data', 'saveAjaxData' );
Now we can handle form data in saveAjaxData function. You can also learn about how to submit a form in wordpress . And you can run your custom queries.
Code Explanation:
In step 1 we have created a custom template to show our form. Then we created a page in Dashboard and included that template. You can read here about templates.
In Step 2 we have created my-ajax-script.js file and added our ajax code in this. We used my_ajax_object in ajax url which we have created in functions.php file. You can read here about ajax in wordpress .
In Step 3 we used the functions wp_enqueue_script , wp_localize_script , wp_enqueue_scripts in functions.php file to add our my-ajax-script.js file. We used the function get_template_directory_uri to get the theme directory path and we used my_ajax_object which we also used in ajax method in js file. To handle form submit we used wp_ajax_nopriv_ and wp_ajax_ and In this save_ajax_data is a hidden field action’s value.
Using this article you can make ajax forms in wordpress, custom ajax plugins in wordpress, run ajax in wordpress without plugin or any custom ajax based module in wordpress.
And If you want to use ajax in your wordpress plugin or want to develop plugin with ajax in wordpress then read our article how to create custom plugin in wordpress and use this ajax in your plugins.
Please like share subscribe and give positive feedback to motivate me to write more for you.
For more tutorials visit my website .
Thanks:)
Happy Coding:)
Reference
이 문제에 관하여(Custom ajax in wordpress), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/readymadecode/custom-ajax-in-wordpress-468k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)