If you’re building a smart way to verify certificates in WordPress, then advanced search filtering using ACF is exactly what you need. With tools like Advanced Custom Fields (ACF), custom post types, and some smart shortcode logic, you can provide users a fast and easy way to validate documents. Whether it’s for a coaching institute, corporate training, or online course platform — this method is simple, efficient, and scalable.
In this tutorial, we walk you through a complete example of how to create a dynamic certificate verification system in WordPress that uses ACF field filtering.
What You’ll Build
- A front-end certificate verification form styled for Elementor or Gutenberg
- Dynamic results shown based on student_name and registration_number
- A fallback message when no match is found
- Secure and SEO-friendly integration using WordPress custom post types and ACF
The system is powered by advanced search filtering using ACF, a reliable method for creating smart content queries in WordPress.
Step-by-Step Setup
1. ACF Field Setup
Make sure your certificate post type has these ACF fields:
student_name – Text field
registration_number – Text field
certificate_url – File or URL field
Use WordPress’ Featured Image as a certificate preview
These field names and keys must match exactly to ensure search accuracy.
2. Front-End HTML Form (Do Not Change)
Here is the exact form you should embed on your Elementor or WordPress block page. It’s clean, responsive, and user-friendly.
<style>
.certificate-form-elementor {
max-width: 800px;
margin: 0 auto;
padding: 40px;
background: #fff;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.certificate-form-elementor .form-header {
text-align: center;
margin-bottom: 30px;
}
.certificate-form-elementor .form-header h2 {
color: #222;
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
.certificate-form-elementor .form-header p {
color: #666;
font-size: 16px;
}
.certificate-form-elementor .form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.certificate-form-elementor .form-group {
flex: 1;
}
.certificate-form-elementor label {
display: block;
font-weight: 500;
margin-bottom: 8px;
color: #444;
font-size: 15px;
}
.certificate-form-elementor input {
width: 100%;
padding: 14px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: all 0.3s ease;
}
.certificate-form-elementor input:focus {
border-color: #F00000;
outline: none;
box-shadow: 0 0 0 3px rgba(240,0,0,0.1);
}
.certificate-form-elementor input::placeholder {
color: #999;
}
.certificate-form-elementor .submit-btn {
text-align: center;
margin-top: 20px;
}
.certificate-form-elementor button {
background-color: #F00000;
color: white;
border: none;
padding: 16px 40px;
font-size: 16px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.certificate-form-elementor button:hover {
background-color: #d60000;
transform: translateY(-2px);
}
@media (max-width: 767px) {
.certificate-form-elementor .form-row {
flex-direction: column;
gap: 15px;
}
.certificate-form-elementor {
padding: 30px 20px;
}
.certificate-form-elementor .form-header h2 {
font-size: 24px;
}
}
</style>
<div class="certificate-form-elementor">
<div class="form-header">
<h2>Certificate Verification</h2>
<p>Enter your details to access your certificate</p>
</div>
<form method="get" action="">
<div class="form-row">
<div class="form-group">
<label for="student_name">ENTER YOUR NAME</label>
<input type="text" id="student_name" name="student_name"
placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="registration_no">ENTER YOUR REGISTRATION ID</label>
<input type="text" id="registration_no" name="registration_no"
placeholder="ABC123456" required>
</div>
</div>
<div class="submit-btn">
<button type="submit">SUBMIT</button>
</div>
</form>
</div>
This form will send GET values (student_name and registration_no) to the current URL. Those values are captured via shortcode to generate results using ACF meta queries.
3. Add the PHP Shortcode
This shortcode fetches results based on the submitted data and displays matching certificate info. You must add it to your theme’s functions.php or a custom plugin.
function certificate_search_results_shortcode() {
ob_start();
if (isset($_GET['student_name']) && isset($_GET['registration_no'])) {
$student_name = sanitize_text_field($_GET['student_name']);
$registration_no = sanitize_text_field($_GET['registration_no']);
$args = [
'post_type' => 'certificate',
'posts_per_page' => 1,
'meta_query' => [
'relation' => 'AND',
[
'key' => 'student_name',
'value' => $student_name,
'compare' => '='
],
[
'key' => 'registration_number',
'value' => $registration_no,
'compare' => '='
]
]
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
?>
<style>
.certificate-result-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 20px;
}
.certificate-result {
text-align: center;
width: 100%;
max-width: 500px;
padding: 30px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.certificate-image {
margin-bottom: 25px;
}
.certificate-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
border: 1px solid #f0f0f0;
}
.certificate-details {
margin-bottom: 25px;
}
.certificate-details h3 {
font-size: 24px;
color: #222;
margin: 0 0 12px 0;
font-weight: 600;
}
.certificate-details p {
font-size: 16px;
color: #555;
margin: 8px 0;
font-weight: 500;
}
.download-btn {
display: inline-block;
background: #F00000;
color: white !important; /* Ensures text stays white */
padding: 14px 35px;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(240,0,0,0.2);
border: none;
cursor: pointer;
}
.download-btn:hover {
background: #D90000;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(240,0,0,0.3);
color: white !important; /* Ensures text stays white on hover */
}
.not-found-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 20px;
width: 100%;
}
.not-found-message {
text-align: center;
color: #D32F2F;
background: #FFEBEE;
padding: 30px;
border-radius: 12px;
width: 100%;
max-width: 500px;
border-left: 4px solid #D32F2F;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.not-found-message h3 {
margin-top: 0;
color: #D32F2F;
font-size: 20px;
margin-bottom: 15px;
}
.not-found-message p {
margin-bottom: 10px;
color: #555;
font-size: 15px;
}
@media (max-width: 480px) {
.certificate-result,
.not-found-message {
padding: 25px 20px;
}
.certificate-details h3 {
font-size: 22px;
}
}
</style>
<div class="certificate-result-container">
<div class="certificate-result">
<?php if (has_post_thumbnail()) : ?>
<div class="certificate-image">
<img decoding="async" src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'large')); ?>" alt="Certificate Preview">
</div>
<?php endif; ?>
<div class="certificate-details">
<h3><?php echo esc_html(get_field('student_name')); ?></h3>
<p>Registration ID: <?php echo esc_html(get_field('registration_number')); ?></p>
</div>
<?php if (get_field('certificate_url')) : ?>
<a href="<?php echo esc_url(get_field('certificate_url')); ?>" class="download-btn" target="_blank">Download Certificate</a>
<?php endif; ?>
</div>
</div>
<?php
}
wp_reset_postdata();
} else {
?>
<div class="not-found-container">
<div class="not-found-message">
<h3>Certificate Not Found</h3>
<p>We couldn't find a certificate matching:</p>
<p><strong>Name:</strong> <?php echo esc_html($student_name); ?></p>
<p><strong>Registration ID:</strong> <?php echo esc_html($registration_no); ?></p>
<p>Please verify your details and try again.</p>
</div>
</div>
<?php
}
}
return ob_get_clean();
}
add_shortcode('certificate_search_results', 'certificate_search_results_shortcode');
Then, place the shortcode [certificate_search_results] directly under the form on the same page to display results dynamically.
Why Use Advanced Search Filtering with ACF?
Using advanced search filtering with ACF provides:
🔍 Precise results based on meta fields
💡 Custom search forms outside the WordPress loop
⚙️ Control over how data is retrieved and displayed
🚀 Fast performance with optimized WP_Query filters
✅ Clean structure for building verification, directories, and archives
This method is especially useful when default search features in WordPress fall short — like when users must filter by two fields or unique identifiers.
Final Thoughts
With this system, you’ve created a professional-grade certificate verification system using advanced search filtering with ACF — all without any complex plugins or bloated solutions. It’s scalable, elegant, and perfect for course websites, educational platforms, or employee portals.
Use this approach to power other types of searches too — for example: student records, event passes, registration lookup, or ID validation.
