BricksUltimate

The Bricks builder has an accordion element. You can make the FAQ with this element and add the FAQ schema. In this tutorial, I am showing how you will achieve it.

Step 1: Adding New Control

Open the functions.php file of the bricks child theme and add the following PHP code.[edd_restrict id=”12,14,2474″ message=”If you want to view the rest of the content, you need to buy the BricksUltimate add-on. Users of the BricksUltimate will view this content after login.”]

add_filter( "bricks/elements/accordion/controls", 'bu_accordion_add_controls' );
function bu_accordion_add_controls( $controls ) {
	$controls['faqSchema'] = [
		'tab' 		=> 'content',
		'type'      => 'checkbox',
		'label'     => esc_html__('Add FAQ Schema', 'bricksultimate'),
		'reset' 	=> true
	];

	return $controls;
}

It will add the new control option in the Accordion element. Open the builder editor or refresh the builder editor if you already opened it. Select the Accordion element and you can see a new control “Add FAQ Schema”. Enable this option if you want to add the schema.

Step 2: Dynamically Adding the Schema

Add the following PHP code to the functions.php file of the bricks child theme. This code will add the attributes to the accordion items and build the schema structure.

add_filter( 'bricks/element/render_attributes', 'bu_add_faq_schema', 10, 4 );
function bu_add_faq_schema( $attributes, $key, $settings, $element_name ) {
	if( $element_name == 'accordion' && ! empty( $settings['faqSchema'] ) ) {
		if( $key == 'accordion-item' ) {
			$attributes[ $key ][ 'itemscope' ] = '';
			$attributes[ $key ][ 'itemprop' ] = 'mainEntity';
			$attributes[ $key ][ 'itemtype' ] = 'https://schema.org/Question';
		}
		
		if( substr( $key, 0, 16 ) == "accordion-title-" && substr( $key, 0, 17 ) !== "accordion-title-w" ) {
			$attributes[ $key ][ 'itemprop' ] = 'name';
		}
		
		if( substr( $key, 0, 18 ) == "accordion-content-" ) {
			$attributes[ $key ][ 'class' ][] = 'add-faq-schema';
			$attributes[ $key ][ 'itemscope' ] = '';
			$attributes[ $key ][ 'itemprop' ] = 'acceptedAnswer';
			$attributes[ $key ][ 'itemtype' ] = 'https://schema.org/Answer';
		}
	}

	return $attributes;
}

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", (e) => {
			const schemas = document.querySelectorAll( ".add-faq-schema" );
			if( schemas ) {
				schemas.forEach((el) => {
					el.innerHTML = '<div itemprop="text">' + el.innerHTML + "</div>";
				});
				
				document.querySelector('html').setAttribute('itemscope', '');
				document.querySelector('html').setAttribute('itemtype', 'https://schema.org/FAQPage');
			}
		});
	</script>
<?php
});

Try this code if you’re using the Bricks 1.5 RC or later version

add_filter( 'bricks/element/render_attributes', 'bu_add_faq_schema', 10, 3 );
function bu_add_faq_schema( $attributes, $key, $element ) {
	$settings = $element->settings;
	if( $element->name == 'accordion' && ! empty( $settings['faqSchema'] ) ) {
		if( $key == 'accordion-item' ) {
			$attributes[ $key ][ 'itemscope' ] = '';
			$attributes[ $key ][ 'itemprop' ] = 'mainEntity';
			$attributes[ $key ][ 'itemtype' ] = 'https://schema.org/Question';
		}
		
		if( substr( $key, 0, 16 ) == "accordion-title-" && substr( $key, 0, 17 ) !== "accordion-title-w" ) {
			$attributes[ $key ][ 'itemprop' ] = 'name';
		}
		
		if( substr( $key, 0, 18 ) == "accordion-content-" ) {
			$attributes[ $key ][ 'class' ][] = 'add-faq-schema';
			$attributes[ $key ][ 'itemscope' ] = '';
			$attributes[ $key ][ 'itemprop' ] = 'acceptedAnswer';
			$attributes[ $key ][ 'itemtype' ] = 'https://schema.org/Answer';
		}
	}

	return $attributes;
}

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", (e) => {
			const schemas = document.querySelectorAll( ".add-faq-schema" );
			if( schemas ) {
				schemas.forEach((el) => {
					el.innerHTML = '<div itemprop="text">' + el.innerHTML + "</div>";
				});
				
				document.querySelector('html').setAttribute('itemscope', '');
				document.querySelector('html').setAttribute('itemtype', 'https://schema.org/FAQPage');
			}
		});
	</script>
<?php
});

Now check the frontend and you will get the schema.[/edd_restrict]