This guide will walk you through the process of adding an “Apply Now” button to each job listing on your WordPress site using custom JavaScript and CSS.

Prerequisites

• Basic understanding of HTML, CSS, and JavaScript.
• Access to your WordPress site’s files or a plugin that allows you to add custom scripts and styles.

Step-by-Step Guide

1. Add Custom JavaScript and CSS The JavaScript code will dynamically add an “Apply Now” button to each job listing on your site and The CSS code will style the “Apply Now” button.

Here’s the code:

<script>
document.addEventListener("DOMContentLoaded", (event) => {
  const jobs = document.querySelectorAll('.job');
  jobs.forEach(job => {
  // Find the first anchor tag within the job element that likely contains the job link
        const jobLink = job.querySelector('a').href; // Assuming the first <a> tag contains the desired link
        // Check if the apply button exists
	button = document.createElement('a');
	button.className = 'apply-btn';
	button.innerText = 'Apply Now';
	job.appendChild(button);  
        // Append the new button to the current job element
        // Set or update the href attribute of the button to the extracted job link
       button.href = jobLink;
    });
});

</script>

<style>
 .apply-btn {
   /* remove the style below and add your own */
   background: #cc3266;
   color: white;
   padding: 4px 25px;
   border-radius: 3px;
   border: 1px solid #cc3266;
 }
</style>

2. Include the Custom Code in Your WordPress Site You can add custom JavaScript and CSS to your WordPress site in several ways, such as by editing your theme’s files, using a custom CSS/JS plugin, or adding it to a custom page template. Please follow the method that best suits your needs and expertise.

Disclaimer

Please be aware that adding custom code to your website carries certain risks. If not done correctly, it can cause issues with your site’s functionality or appearance. Always backup your site before making changes and test the changes in a staging environment if possible. If you’re not comfortable adding custom code, consider hiring a professional or reaching out to the support team of your theme or plugin.

Conclusion

By following this guide, you should now have an “Apply Now” button on each job listing on your WordPress site. If you have any questions or run into any issues, please don’t hesitate to ask for help.