DEV Community: Rehmatullah Khan

How to Fetch and Integrate Multiple Location API Data into Google Maps in WordPress Without Plugins

Rehmatullah Khan — Thu, 12 Dec 2024 12:41:34 +0000

Step-1:
add your google map api in your header.php file:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key&callback=initMap"></script>

Step-2:
Create Function in Functions.php file for fetch Api adress list and pass to js function:


// Fetch Api Data And Pass data to JavaScript Functions
function enqueue_google_maps_scripts() {

    $url = 'https://example.com/public-api/resources/locations/v2.0';
    $response = wp_remote_get($url, array(
        'headers' => array(
            'Accept' => 'application/json',
            'Authorization' => 'Bearer Your API Token',
        ),
    ));

    if (is_wp_error($response)) {
        error_log('Error fetching data: ' . $response->get_error_message());
        return [];
    }

    $data = wp_remote_retrieve_body($response);
    $locations = json_decode($data, true); // Decode JSON into an array

    // Enqueue Google Maps API
    wp_enqueue_script(
        'google-maps-api',
        'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY',
        [],
        null,
        true
    );

    // Enqueue custom map script
    wp_enqueue_script(
        'custom-google-map',
        get_template_directory_uri() . '/js/custom-google-map.js',
        ['google-maps-api'],
        null,
        true
    );

    // Fetch and pass location data to JavaScript
//     $locations = get_citicharge_locations();

//  echo '<pre>';
//  print_r($locations);
//  echo '</pre>';

    wp_localize_script('custom-google-map', 'citichargeData', [
        'locations' => $locations,
    ]);
}
add_action('wp_enqueue_scripts', 'enqueue_google_maps_scripts');

Step-3:
create js file like /js/custom-google-map.js and add code:


function initMap() {
//  console.log("Initializing map...");
//     console.log("Locations data:", citichargeData.locations);
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 5,
        center: { lat: 51.509865, lng: -0.118092 } // Example: Centered on London
    });

    var bounds = new google.maps.LatLngBounds();
    var locations = citichargeData.locations;
//     var locations = [
//         {
//             geoposition: { latitude: 42.6710963, longitude: 23.3520653 },
//             name: [{ translation: "Ampeco Office" }],
//             address: [{ translation: "Sofia, Bulgaria" }]
//         },
//         {
//             geoposition: { latitude: 51.5194133, longitude: -0.1269566 },
//             name: [{ translation: "British Museum" }],
//             address: [{ translation: "London, UK" }]
//         }
//         // Add other locations
//     ];
    locations.data.forEach(function (location) {
//      console.log("Loop Data",location);
        var position = {
            lat: location.geoposition.latitude,
            lng: location.geoposition.longitude
        };
//      console.log("position",position);

        var marker = new google.maps.Marker({
            position: position,
            map: map,
            title: location.name[0].translation
        });

        var infoWindow = new google.maps.InfoWindow({
            content: ` <h4>${location.name[0].translation}</h4>
                        <p>${location.address[0].translation}</p>
                        <button onclick="viewOnGoogleMaps(${location.geoposition.latitude}, ${location.geoposition.longitude})">View on Google Maps</button>`
        });

        marker.addListener("click", function () {
            infoWindow.open(map, marker);
        });

        bounds.extend(position);
    });

    map.fitBounds(bounds);
}

function viewOnGoogleMaps(lat, lng) {
    var googleMapsUrl = `https://www.google.com/maps?q=${lat},${lng}`;
    window.open(googleMapsUrl, '_blank'); // Open Google Maps in a new tab
}

Step-4:
create shortcod for display Google Map:

function display_google_map_shortcode() {
    return '<div id="map" style="width: 100%; height: 500px;"></div>';
}
add_shortcode('google_map', 'display_google_map_shortcode');

How to Create a WordPress Custom Login Popup Modal without any plugin.

Rehmatullah Khan — Sat, 07 Dec 2024 09:51:52 +0000

sign in Step-1:
Create Cusom login form shortcode:


// custom sign in popup form shortcod
function custom_login_form() {

    // Display the login form
    ob_start();

    ?>
    <form method="post" class="formValidationQuery login-form">
        <div class="form-group">
            <label for="">*User Name</label>
            <input type="email" id="youremail" name="useremail" placeholder="Email Address" required />
            <span class="formError" id="youremailError"></span>
        </div>
        <div class="form-group">
        <label for="">*Password</label>
            <input type="password" name="password" id="loginPassword" placeholder="Password" required />
            <span class="formError" id="loginPasswordError"></span>
        </div>
        <div class="d-flexinline">                    
            <input type="checkbox" id="checkbox" name="checkbox" />
            <span class="checkboxtext" id="logincheckboxtex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
        </div>
        <button type="submit" name="login" class="btn" id="login-btn">
            <span>Sign In</span>
            <span class="spinner" style="display: none;"></span>
        </button>                   

    </form>
    <?php
}
add_shortcode('custom_login', 'custom_login_form');

sign in Step-2:
Create login form handle function:


// custom sign in poup form handle
function handle_custom_login() {
    if (isset($_POST['login'])) {
        $useremail = sanitize_user($_POST['useremail']);
        $password = sanitize_text_field($_POST['password']);
        $creds = array(
            'user_login'    => $useremail,
            'user_password' => $password,
            'remember'      => isset($_POST['remember']),
        );

        $user = wp_signon($creds, false);

        if (is_wp_error($user)) {
            echo '<script>alert("Login failed: ' . $user->get_error_message() . '");</script>';
        } else {
            wp_redirect(home_url());
            exit;
        }
    }
}
add_action('init', 'handle_custom_login');

sign in Step-3:
add shortcod in your popup modal.

Custom Sign up

sign up Step-1:
Create function for Cusom Sign up form shortcode:


// custom registration form

function custom_registration_form() {

    ?>
    <form method="post" class="formValidationQueryRegister login-form">
        <div class="form-group">
            <label for="">*User Name</label>
            <input type="text" id="yourname" name="username" placeholder="Username" required />
        </div>
        <div class="form-group">
            <label for="">*User Email</label>
            <input type="email" id="youremail" name="email" placeholder="Email" required />
        </div>
        <div class="form-group">
        <label for="">*Password</label>
            <input type="password" name="password" id="loginPassword" placeholder="Password" required />
            <span class="formError" id="loginPasswordError"></span>
        </div>
        <div class="d-flexinline">                    
            <input type="checkbox" id="checkbox" name="checkbox" />
            <span class="checkboxtext" id="logincheckboxtex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
        </div>
        <button type="submit" name="register" class="btn" id="login-btn">
            <span>Sign In</span>
            <span class="spinner" style="display: none;"></span>
        </button>                   

    </form>
    <?php
}
add_shortcode('custom_registration', 'custom_registration_form');

sign up Step-2:
Create function for handle Sign up form request:


// custom sign up form handle
function handle_custom_signup() {
    if (isset($_POST['register'])) {
        $username = sanitize_user($_POST['username']);
        $email = sanitize_email($_POST['email']);
        $password = sanitize_text_field($_POST['password']);

        // Check if the username and email already exist
        if (username_exists($username)) {
            echo '<script>alert("Username already exists.");</script>';
            return;
        }
        if (email_exists($email)) {
            echo '<script>alert("Email is already registered.");</script>';
            return;
        }

        // Create a new user
        $user_id = wp_create_user($username, $password, $email);

        if (is_wp_error($user_id)) {
            echo '<script>alert("Error: ' . $user_id->get_error_message() . '");</script>';
        } else {
            echo '<script>alert("Registration successful! You can now log in.");</script>';
        }
    }
}
add_action('init', 'handle_custom_signup');

How to Filter multiple Posts in WordPress by tag Using AJAX, without using any plugin

Rehmatullah Khan — Thu, 05 Dec 2024 07:06:57 +0000

Step-1:
Html Checkbox Like this:

<div class="list">
<label for="arts" class="font">
   <input type="checkbox" class="subject-filter" name="subject[]" data - 
    taxonomy="worksheet-subject" value="arts" id="arts" />Arts
</label>
<label for="biology" class="font"
                  ><input type="checkbox" class="subject-filter" name="subject[]" data-taxonomy="worksheet-subject" value="biology" id="biology" />Biology</label>
<label for="chemistry" class="font">
<input type="checkbox" class="subject-filter" name="subject[]" data-taxonomy="worksheet-subject" value="chemistry" id="chemistry"/>
Chemistry</label>
<label for="bio" class="font">
<input type="checkbox" class="subject-filter" name="subject[]" data-taxonomy="worksheet-subject" value="grammar" id="grammar" />
Grammar</label>
<label for="lang" class="font">
<input type="checkbox" class="subject-filter" name="subject[]" data-taxonomy="worksheet-subject" value="language" id="language" />
Language</label>
<label for="arts" class="font">
<input type="checkbox" class="subject-filter" name="subject[]" data-taxonomy="worksheet-subject" value="maths" id="maths" />Maths</label>
</div>

display all tabs or subjects container:

<!-- Container to display worksheets -->
<div class="worksheet-container">
<p>Select grades to view worksheets.</p>
</div>

Step-2:
create js file:

jQuery(document).ready(function ($) {
    // Fetch Subjects on any checkbox change
    $('.subject-filter').on('change', function () {
        // Gather all selected grades
        var taxonomy = $(this).data('taxonomy'); // Taxonomy name
        var terms = []; // Array to hold selected terms
        $('.subject-filter:checked').each(function () {
            terms.push($(this).val());
        });

        // Fetch Subjects for selected grades
        fetchSubjects(taxonomy, terms);
    });

    // Function to fetch Subjects
    function fetchSubjects(taxonomy = '', terms = []) {
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'fetch_subjects',
                nonce: ajax_object.nonce,
                taxonomy: taxonomy,
                terms: terms, // Send array of selected terms
            },
            beforeSend: function () {
                $('.worksheet-container').html('<p>Loading...</p>');
            },
            success: function (response) {
                if (response.success) {
                    $('.worksheet-container').html(response.data.html);
                } else {
                    $('.worksheet-container').html('<p>' + response.data.message + '</p>');
                }
            },
            error: function () {
                $('.worksheet-container').html('<p>An error occurred. Please try again.</p>');
            },
        });
    }
});

Step-3:
Create Functions in functions.php:

// Register AJAX action for logged-in users (you can add for non-logged-in users too)
add_action('wp_ajax_fetch_subjects', 'fetch_subjects');
add_action('wp_ajax_nopriv_fetch_subjects', 'fetch_subjects');
function fetch_subjects() {
    // Verify nonce for security
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'ajax_nonce')) {
        wp_send_json_error(array('message' => 'Nonce verification failed.'));
        wp_die();
    }

    // Get taxonomy and terms from the AJAX request
    $taxonomy = isset($_POST['taxonomy']) ? sanitize_text_field($_POST['taxonomy']) : '';
    $terms = isset($_POST['terms']) ? array_map('sanitize_text_field', $_POST['terms']) : array();

    // Default query arguments
    $args = array(
        'post_type'      => 'worksheet',
        'posts_per_page' => -1, // Fetch all posts
    );

    // If terms are selected, modify the query
    if (!empty($taxonomy) && !empty($terms)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => $taxonomy,
                'field'    => 'slug',
                'terms'    => $terms, // Pass the array of selected terms
                'operator' => 'IN',   // Match any of the selected terms
            ),
        );
    }

    // Run WP_Query to fetch posts
    $query = new WP_Query($args);

    // Check if any posts were found
    if ($query->have_posts()) {
        $html = '';
        while ($query->have_posts()) {
            $query->the_post();
            // Output the post HTML
            $html .= '<div class="card">';
            $html .= '<div class="card-img">';
            // Add the post thumbnail
            if (has_post_thumbnail()) {
                $thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'medium'); // Get the thumbnail URL
                $html .= '<img src="' . esc_url($thumbnail_url) . '" class="worksheets-card-img" alt="' . esc_attr(get_the_title()) . '" />';
            } else {
                $html .= '<img src="placeholder-image.jpg" class="worksheets-card-img" alt="Placeholder" />'; // Fallback for no thumbnail
            }
            $html .= '<div class="grade">';
            // Add the first category name or fallback
            $terms = get_the_terms(get_the_ID(), 'worksheet-grad');
            if ($terms && !is_wp_error($terms)) {
                foreach ($terms as $term) {
                    $html .= esc_html($term->name); // Display the first term name
                    break;
                }
            } else {
                $html .= 'No Grade Available'; // Fallback message
            } 

            $html .= '</div>';
            $html .= '<div class="age"> For Age 1-12</div>';            
            $html .= '</div>';            
            $html .= '<div class="card-content">';
            $html .= '<h2><a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a></h2>';
            $html .= '<p>'. get_the_excerpt() .'</p>';
            $html .= '</div>';
            $html .= '</div>';
        }
        wp_send_json_success(array('html' => $html));
    } else {
        wp_send_json_error(array('message' => 'No worksheets found.'));
    }

    wp_die(); // Always terminate the request properly
}
`
**Step-4:**
enqueue scripts file using functions.php:
`
function enqueue_custom_scripts() {
    wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);

    // Localize script to pass ajax_url and nonce to JS
    wp_localize_script('custom-ajax', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('ajax_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

How to Filter WordPress Posts by Category Using AJAX, without using any plugin

Rehmatullah Khan — Wed, 27 Nov 2024 15:23:07 +0000

Learn how to implement dynamic AJAX-based post filtering in WordPress. Fetch and display posts by taxonomy using radio buttons and checkboxes for seamless user interaction and improved functionality.
First, we cover the functionality of the radio button filter.
Step-1:
create js file and add this code:

jQuery(document).ready(function ($) {
    // Fetch all worksheets by default when the page loads
    fetchWorksheets();

    // Trigger AJAX request when a grade filter is selected
    $('.grade-filter').on('change', function () {
        var taxonomy = $(this).data('taxonomy'); // e.g., 'worksheet-grad'
        var term = $(this).val(); // Selected term slug
        fetchWorksheets(taxonomy, term);
    });

    // Function to fetch worksheets
    function fetchWorksheets(taxonomy = '', term = '') {
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'fetch_worksheets',
                nonce: ajax_object.nonce,
                taxonomy: taxonomy,
                term: term,
            },
            beforeSend: function () {
                $('.worksheet-container').html('<p>Loading...</p>');
            },
            success: function (response) {
                if (response.success) {
                    $('.worksheet-container').html(response.data.html);
                } else {
                    $('.worksheet-container').html('<p>' + response.data.message + '</p>');
                }
            },
            error: function () {
                $('.worksheet-container').html('<p>An error occurred. Please try again.</p>');
            },
        });
    }




});

Step-2:
add this code in functions.php file:


// Register AJAX action for logged-in users (you can add for non-logged-in users too)
add_action('wp_ajax_fetch_worksheets', 'fetch_worksheets');
add_action('wp_ajax_nopriv_fetch_worksheets', 'fetch_worksheets');

function fetch_worksheets() {
    // Verify nonce for security
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'ajax_nonce')) {
        wp_send_json_error(array('message' => 'Nonce verification failed.'));
        wp_die();
    }

    // Get taxonomy and term from the AJAX request
    $taxonomy = isset($_POST['taxonomy']) ? sanitize_text_field($_POST['taxonomy']) : '';
    $term = isset($_POST['term']) ? sanitize_text_field($_POST['term']) : '';

    // Default query arguments
    $args = array(
        'post_type'      => 'worksheet',
        'posts_per_page' => -1, // Fetch all posts
    );

    // If a specific term is selected, modify the query
    if (!empty($taxonomy) && !empty($term)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => $taxonomy,
                'field'    => 'slug',
                'terms'    => $term, // Fetch posts of the selected term
            ),
        );
    }

    // Run WP_Query to fetch posts
    $query = new WP_Query($args);

    // Check if any posts were found
    if ($query->have_posts()) {
        $html = '';
        while ($query->have_posts()) {
            $query->the_post();
            // Output the post HTML
            $html .= '<div class="card">';
            $html .= '<h3>' . get_the_title() . '</h3>';
            $html .= '<div class="worksheet-excerpt">' . get_the_excerpt() . '</div>';
            $html .= '</div>';
        }
        wp_send_json_success(array('html' => $html));
    } else {
        wp_send_json_error(array('message' => 'No worksheets found.'));
    }

    wp_die(); // Always terminate the request properly
}

Step-3:
add this code in functions.php for enque custom js file in wp.



function enqueue_custom_scripts() {
    wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);

    // Localize script to pass ajax_url and nonce to JS
    wp_localize_script('custom-ajax', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('ajax_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Step-4:
The html code structure add this on your template file.

 <div class="grade">
            <h2 class="filter-heading">GRADE</h2>
            <ul>
                <li>
                <input type="radio" id="1st" name="radio" class="grade-filter" data-taxonomy="worksheet-grad" value="1st-grade" />
                <label for="1st" class="font">1st Grade</label>
                </li>
                <li>
                <input type="radio" id="2nd" name="radio" class="grade-filter" data-taxonomy="worksheet-grad" value="2nd-grade" />
                <label for="2nd" class="font">2nd Grade</label>
                </li>
            </ul>
            </div>

Note: please the css class on radio button change according your css class and data-taxonomy="worksheet-grad" alsoe. second important point is the value="2nd-grade" is change to your category slug.