How to Style Rank Math FAQ Block into a Modern Accordion in WordPress
By default, the Rank Math FAQ block in WordPress outputs plain text without any design. While it helps with SEO by adding structured FAQ schema, it doesn’t look user-friendly on the front end. A well-designed FAQ section can significantly improve user experience (UX) and keep your visitors engaged.
In this guide, we’ll show you how to transform the Rank Math FAQ block into a beautiful accordion style with just a few lines of CSS and JavaScript.
Change your Rank Math FAQ Style to Professional
Add This Code in functions.php
Open your active theme’s functions.php file and paste the following code. This snippet adds both the CSS and JavaScript needed to style and power the accordion.
File Location: WordPress Dashboard > Appearance > Theme File Editor > Theme Functions add this code at bottom and Click Update File. That’s it.
// Custom FAQ Accordion Styles & Script
function custom_faq_styles_scripts() {
// CSS
wp_add_inline_style( 'wp-block-library', '
/* FAQ Container */
.rank-math-faq {
margin: 20px 0;
}
/* Each Question */
.rank-math-question {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 15px 40px 15px 15px;
border-radius: 8px;
cursor: pointer;
position: relative;
transition: background 0.3s ease;
}
.rank-math-question:hover {
background: #f1f1f1;
}
/* Question text */
.rank-math-question .faq-question {
font-weight: 600;
font-size: 16px;
margin: 0;
display: block;
}
/* Answer (connected border style) */
.rank-math-answer {
display: none;
border: 1px solid #ddd;
border-top: none; /* merge with question border */
border-radius: 0 0 8px 8px;
padding: 15px;
font-size: 15px;
color: #444;
line-height: 1.5;
background: #fff;
margin-bottom: 15px; /* gap between FAQs */
}
/* Plus/Minus icon */
.rank-math-question::after {
content: "+";
font-size: 20px;
font-weight: bold;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
color: #333;
}
.rank-math-question.active::after {
content: "−";
}
/* Active question looks connected */
.rank-math-question.active {
border-radius: 8px 8px 0 0; /* only top rounded */
background: #f0f8ff; /* highlight */
margin-bottom: 0; /* remove gap only when active */
}
' );
// JS
wp_add_inline_script( 'jquery-core', '
document.addEventListener("DOMContentLoaded", function () {
const questions = document.querySelectorAll(".rank-math-question");
questions.forEach((q) => {
q.addEventListener("click", function () {
this.classList.toggle("active");
const answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
this.classList.remove("active");
} else {
// Close all
document.querySelectorAll(".rank-math-answer").forEach((ans) => ans.style.display = "none");
document.querySelectorAll(".rank-math-question").forEach((qq) => qq.classList.remove("active"));
this.classList.add("active");
answer.style.display = "block";
}
});
});
});
');
}
add_action( "wp_enqueue_scripts", "custom_faq_styles_scripts" );
How It Looks on the Frontend
Once you add the code:
- Each FAQ question appears in a styled card with a plus (+) icon.
- When clicked, the icon changes to a minus (−) and the answer expands below.
- The border of the question and answer merge into a single card, making it visually clear that they belong together.
- Each FAQ block has proper spacing so they don’t stick together.
With just a few lines of CSS and JavaScript, you can turn the plain RankMath FAQ block into a professional, responsive, and SEO-friendly accordion. This not only enhances the user experience but also improves the overall look and feel of your WordPress site.
If you’re looking to improve your site’s design and SEO together, styling your FAQ block is one of the easiest upgrades you can make.
FAQ
What is Rank Math FAQ in WordPress?
Rank Math FAQ is a block that lets you add question and answer sections with proper FAQ schema, helping your site rank better in search results.
How do I style Rank Math FAQ in WordPress?
You can style Rank Math FAQ using custom CSS and JavaScript. This lets you create an accordion design without installing extra plugins.
Does Rank Math FAQ support FAQ schema?
Yes. Rank Math automatically adds FAQ schema markup to your questions and answers, making them eligible for rich results in Google.
Can I add an accordion effect to Rank Math FAQ without plugins?
Yes. By adding a small CSS and JS snippet in your theme’s functions.php, you can enable a smooth accordion effect for FAQs.
Is Rank Math FAQ mobile-friendly?
Yes, when styled properly with responsive CSS, Rank Math FAQ works smoothly on all devices including mobiles and tablets.
1 thought on “Rank Math FAQ Style”