How to Add an “Apply Now” Button to Each Job Listing
With Limestaff version 2.2.4, adding an “Apply Now” button to your job listings is now easier than ever. You can do it directly through your page builder or shortcode without writing any custom code. Here’s how:
No-Code Method (Recommended)
1. For Elementor and Bricks:
- Open the editor and select the job listing widget.
- Navigate to Add Settings and enable the Show Apply Button option.
2. Using Shortcode:
- Use the shortcode [jobs apply_button=yes] wherever you want to display job listings with an “Apply Now” button.
These methods allow you to add the button seamlessly without technical expertise.
Custom Code Method (For Advanced Users)
If you’d like more customization or are using a setup where the no-code method isn’t suitable, you can still add an “Apply Now” button using custom JavaScript and CSS. Follow the steps below:
Prerequisites
- Basic understanding of HTML, CSS, and JavaScript.
- Access your WordPress site’s files or a plugin allowing you to add custom scripts and styles.
Step-by-Step Guide
1. Write Custom JavaScript and CSS: JavaScript dynamically creates an “Apply Now” button for each job listing, and CSS styles the 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 have an “Apply Now” button on each job listing on your WordPress site. If you have any questions or issues, please don’t hesitate to ask for help.