How to Use Ajax in WordPress - a Real World Example

This article demonstrates how to use AJAX in WordPress to create a "Read Later" plugin. The plugin adds a link below each post allowing logged-in users to save posts for later reading. A widget then displays these saved posts. The tutorial emphasizes secure coding practices.

Key Concepts:

• admin-ajax.php: This core WordPress file handles AJAX requests, ensuring security and compatibility.
• wp_ajax_ hook: Use this hook to register custom functions processing AJAX requests.
• Enqueueing Scripts and Styles: Properly register and enqueue JavaScript and CSS using WordPress functions.
• Nonce Verification: Essential for securing AJAX calls against unauthorized access.
• Dynamic UI Updates: AJAX enables smooth, fast content updates without page reloads.

Plugin Functionality:

The "Read Later" plugin performs these actions:

1. Adds a "Read Later" link beneath each blog post.
2. On click, the post ID is saved to the user's metadata (without page refresh).
3. A widget displays the saved posts.

Plugin Development Steps:

1. Directory Structure: Create a plugin folder (read-me-later) with subfolders for js and css, and files: read-me-later.php, widget.php, read-me-later.js, read-me-later.css.

2. read-me-later.php (Plugin Header & Class): The plugin header identifies it to WordPress. A ReadMeLater class encapsulates plugin functionality.

3. Enqueueing Scripts and Styles: The ReadMeLater class includes methods to register and enqueue the read-me-later.js and read-me-later.css files using WordPress hooks (plugins_loaded).

4. Adding the "Read Me Later" Link: A function (rml_button) adds the link to the post content and excerpt, only visible to logged-in users. This uses WordPress filters (the_content, the_excerpt).

5. Defining the AJAX URL: wp_localize_script makes the admin-ajax.php URL available to JavaScript.

6. JavaScript (read-me-later.js): The JavaScript handles the link click, sends the AJAX request to admin-ajax.php, and hides the link after a successful save.

7. AJAX Action Hook (wp_ajax_read_me_later): This hook in read-me-later.php connects the AJAX request to the read_me_later function.

8. read_me_later Function: This function saves the post ID to the user's metadata using update_user_meta. It also retrieves and displays the saved posts using get_posts. The function uses die() to ensure proper AJAX output.

9. Widget (widget.php): A custom widget (RML_Widget) extends WP_Widget to display the saved posts. It includes methods for the widget's form, update, and display.

10. Securing AJAX Calls: Nonce verification is implemented using wp_create_nonce in JavaScript and check_ajax_referer in the PHP function to prevent unauthorized requests.

Conclusion: This tutorial provides a practical example of using AJAX securely and effectively within a WordPress plugin. Remember to adapt and expand upon this foundation to create more complex and feature-rich plugins. The use of WordPress hooks and functions ensures compatibility and maintainability.

The above is the detailed content of How to Use Ajax in WordPress - a Real World Example. For more information, please follow other related articles on the PHP Chinese website!