Building Custom Testimonial Sections in WordPress Themes
Posted on 19th June 2023
If you’re a WordPress theme developer, it’s likely that you’ve been asked to include a testimonial section in a theme at some point. Testimonials are a great way to build trust with potential customers and showcase what others have said about your product or service.
In this article, we’ll show you how to build a custom testimonial section in a WordPress theme. We’ll cover the following topics:
Creating a Custom Post Type for Testimonials
The first thing you’ll need to do is create a custom post type for testimonials. This will allow you to easily manage your testimonials in the WordPress admin area.
To create a custom post type for testimonials, you’ll need to add the following code to your theme’s functions.php file:
array(
‘name’ => __( ‘Testimonials’ ),
‘singular_name’ => __( ‘Testimonial’ )
),
‘public’ => true,
‘has_archive’ => true,
‘supports’ => array( ‘title’, ‘editor’, ‘custom-fields’, ‘thumbnail’ )
)
);
}
add_action( ‘init’, ‘create_testimonial_post_type’ );
?>
This code will create a custom post type for testimonials with the following features:
- Testimonials will be publicly accessible on your site.
- Testimonials will be organized into an archive page.
- Testimonials will have a title, content, and featured image.
If you want to learn more about custom post types, check out our article on the subject.
Creating a Testimonial Section Template
Next, you’ll need to create a template file for your testimonial section. This template file will be used to display your testimonials on the front-end of your site.
To create a testimonial section template, you’ll need to add the following code to a file named “testimonials.php” in your theme:
‘testimonial’,
‘posts_per_page’ => 3
);
$testimonials = new WP_Query( $args );
if ( $testimonials->have_posts() ) {
while ( $testimonials->have_posts() ) {
$testimonials->the_post();
?>
This code will query the testimonials from your custom post type and display them in a loop. Each testimonial will be outputted as a block with the testimonial content and author.
If you want to learn more about WordPress loops, check out our article on the subject.
Including the Testimonial Section Template in Your Theme
Now that you have a testimonial section template, you’ll need to include it in your theme. The easiest way to do this is by using the get_template_part function.
To include the testimonial section template in your theme, you’ll need to add the following code to the appropriate location in your theme’s “page.php” template file:
This code will include the “testimonials.php” file in your theme.
If you want to learn more about the get_template_part function, check out our article on the subject.
Styling the Testimonial Section
To style the testimonial section, you’ll need to add the following CSS to your theme’s stylesheet:
.testimonial {
padding: 20px;
border: 1px solid #ccc;
}
.testimonial .author {
font-style: italic;
}
This CSS will add some basic styling to your testimonial section. You can customize this CSS to match your theme’s style.
Adding a Shortcode for the Testimonial Section
If you want to be able to include the testimonial section in other places on your site (such as in a sidebar widget), you can use a shortcode.
To add a shortcode for the testimonial section, you’ll need to add the following code to your theme’s functions.php file:
This code will add a shortcode for the testimonial section template. You can use this shortcode by adding the following code to the post or page where you want to display the testimonial section:
[testimonials]
If you want to learn more about WordPress shortcodes, check out our article on the subject.
Adding a Widget for the Testimonial Section
If you want to be able to include the testimonial section in a sidebar widget, you can use the WP_Widget class.
To add a widget for the testimonial section, you’ll need to add the following code to your theme’s functions.php file:
__( ‘This widget will display your testimonials in a sidebar.’, ‘text_domain’ ), )
);
}
public function widget( $args, $instance ) {
echo $args[‘before_widget’];
if ( ! empty( $instance[‘title’] ) ) {
echo $args[‘before_title’] . apply_filters( ‘widget_title’, $instance[‘title’] ). $args[‘after_title’];
}
echo testimonial_shortcode();
echo $args[‘after_widget’];
}
public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) ) {
$title = $instance[ ‘title’ ];
}
else {
$title = __( ‘Testimonials’, ‘text_domain’ );
}
?>
<label for="get_field_name( ‘title’ ); ?>”>
<input class="widefat" id="get_field_id( ‘title’ ); ?>” name=”get_field_name( ‘title’ ); ?>” type=”text” value=””>
This code will add a widget for the testimonial section. The widget will display the testimonial section in a
Building Custom Testimonial Sections in WordPress Themes
In this tutorial, we’ll learn how to build a custom testimonial section for a WordPress theme. We’ll cover how to:
1. Register a new post type for testimonials
2. Create a custom meta box for testimonial details
3. Display testimonials in a theme template
Let’s get started!
1. Register a new post type for testimonials
First, we need to register a new post type for testimonials. This can be done with the register_post_type() function:
function my_theme_testimonials_init() {
register_post_type( ‘testimonial’, array(
‘labels’ => array(
‘name’ => __( ‘Testimonials’ ),
‘singular_name’ => __( ‘Testimonial’ )
),
‘public’ => true,
‘has_archive’ => true,
‘supports’ => array( ‘title’, ‘editor’, ‘custom-fields’ )
) );
}
add_action( ‘init’, ‘my_theme_testimonials_init’ );
This code registers a new post type called “Testimonial” and gives it some default labels. We’ve also set it to be public and have it support the title and editor fields.
2. Create a custom meta box for testimonial details
Next, we need to create a custom meta box for testimonial details. This can be done with the add_meta_box() function:
function my_theme_add_testimonial_meta_box() {
add_meta_box(
‘my-theme-testimonial-meta-box’,
__( ‘Testimonial Details’, ‘my-theme’ ),
‘my_theme_render_testimonial_meta_box’,
‘testimonial’,
‘normal’,
‘default’
);
}
add_action( ‘add_meta_boxes’, ‘my_theme_add_testimonial_meta_box’ );
This code adds a new meta box to the testimonial post type. The meta box will have the title “Testimonial Details” and will contain a form for entering testimonial details.
3. Display testimonials in a theme template
Finally, we need to display testimonials in a theme template. This can be done with the WP_Query class:
$args = array(
‘post_type’ => ‘testimonial’,
‘posts_per_page’ => 3
);
$testimonials = new WP_Query( $args );
if ( $testimonials->have_posts() ) {
while ( $testimonials->have_posts() ) {
$testimonials->the_post();
the_title();
the_content();
}
}
This code fetches three testimonials and displays their titles and content.
That’s all there is to building a custom testimonial section for a WordPress theme!
