Apply Now button should redirect to an external link

General Messages
1

Hi Team,

My use case for the job board is to redirect the apply now button to the source of the job post. So for each job that I being added will have an attribute called “Source link”.

Now how can I replace the Apply button link with source link attribute?

3

Ok. Resolved.

Add Custom URL Attribute.

Title: Application URL
Field Name: application_url
Field Type: URL

And use this php code snippet.

/**
 * Override the "Apply Now" button to redirect to a custom URL
 */

add_action( 'wp_footer', 'jobhive_override_apply_now_button' );

function jobhive_override_apply_now_button() {
    if ( is_singular( 'hp_listing' ) ) {
        global $post;
        $application_url = get_post_meta( $post->ID, 'hp_application_url', true );
        
        if ( ! empty( $application_url ) && filter_var( $application_url, FILTER_VALIDATE_URL ) ) {
            ?>
            <script>
            document.addEventListener('DOMContentLoaded', function() {
                console.log('Script loaded for listing ID: <?php echo $post->ID; ?>');
                console.log('Application URL: <?php echo esc_js( $application_url ); ?>');
                
                // Find the Apply Now button (it's a button element, not a link)
                const applyButton = document.querySelector('.hp-listing__action--message');
                
                if (applyButton) {
                    console.log('Apply Now button found:', applyButton);
                    
                    // Remove all existing attributes that might interfere
                    applyButton.removeAttribute('data-component');
                    applyButton.removeAttribute('data-modal');
                    applyButton.removeAttribute('data-url');
                    
                    // Remove all existing event listeners by cloning the element
                    const newButton = applyButton.cloneNode(true);
                    applyButton.parentNode.replaceChild(newButton, applyButton);
                    
                    // Add our custom click handler
                    newButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        console.log('Custom click handler triggered');
                        window.open('<?php echo esc_js( $application_url ); ?>', '_blank', 'noopener,noreferrer');
                    });
                    
                    console.log('Button modified successfully');
                } else {
                    console.log('Apply Now button not found');
                }
            });
            </script>
            <?php
        } else {
            // Hide the button if no valid URL is provided
            ?>
            <script>
            document.addEventListener('DOMContentLoaded', function() {
                const applyButton = document.querySelector('.hp-listing__action--message');
                if (applyButton) {
                    applyButton.style.display = 'none';
                    console.log('Apply Now button hidden - no valid URL provided');
                }
            });
            </script>
            <?php
        }
    }
}
1 Like