Automatically refresh a webpage after a follow action so the follow count updates without needing to manually reload the page.
*Remember to add ‘refresh-button’ to the button CSS ID without the quotes after implementing the codes.
1. Functions.php File: The functions.php file in your child theme enqueues the JavaScript file (refresh-script.js). Below is the functions.php code:
// Enqueue JavaScript file
function enqueue_refresh_script() {
// Register and enqueue the refresh-script.js file
wp_register_script( 'refresh-script', get_stylesheet_directory_uri() . '/js/refresh-script.js', array(), '1.0', true );
wp_enqueue_script( 'refresh-script' );// Pass the is_user_logged_in() status to the JavaScript file
wp_localize_script( 'refresh-script', 'userLoggedIn', array(
'loggedIn' => is_user_logged_in()
));
}
add_action( 'wp_enqueue_scripts', 'enqueue_refresh_script' );
2. Create JavaScript File (refresh-script.js): Create a new JavaScript file named refresh-script.js inside a folder named js in your child theme directory. Paste the code below into this file. This file contains the JavaScript code responsible for refreshing the page when the button is clicked.Â
jQuery(document).ready(function($) {
// Function to refresh the page
function refreshPage() {
location.reload();
}// Check if the user is logged in
if (userLoggedIn.loggedIn) {
// Bind click event to buttons with the CSS ID
$('.refresh-button').click(function() {
refreshPage();
});
}
});