In this tutorial we will be adding a text field to every WordPress page where we can enter a testimonial and have it automatically displayed on the page. We will be using a plugin called Types – Custom Fields and Custom Post Types Management or Types for short.
1. Create the custom field group
- In the admin dashboard click on Types > Custom Fields
- Click Add a custom fields group
- Enter Testimonial as the Group Title and give the group a description
- Under Where to display this group, click the edit button beside Post Types and tick the box beside Pages
- Click Save to create the custom field group
2. Add our custom fields to the custom field group
Choose Single line from the available fields widget on the right, name the field Testimonial Text and enter the slug as testimonial-text. You can also give the field a description that will display above it in the admin dashboard.
We are only going to set our page up to display a single testimonial so choose below Single or repeating field. You can also make the field required if you wish.
Click Save to add your new field to the Testimonial field group.
3. Display the testimonial on a page via functions.php
At this point our two new custom fields should be showing below the content editor of any WordPress page. Filling in the testimonial text and name now will save it to the database but we need to write some code to display it.
Rather than editing any specific theme template files, we are going to add the following coded to our child theme’s functions.php file. The testimonial will be displayed when the action hook hybrid_before_content is executed.
[php]/* Display Testimonial below primary sidebar */
function theme_display_testimonial() {
if ( function_exists( ‘types_render_field’ ) ) { // Check if Types plugin function exists
$testimonial_text = types_render_field( ‘testimonial-text’ ); // Save text field content to variable
if( !empty( $testimonial_text ) ) { // If the text field isn’t empty
echo “</pre>
<div id=”testimonial”><span class=”left-quote”>“</span><span class=”testimonial-text”>” . $testimonial_text . “</span>”;
echo “<span class=”right-quote”>”</span></div>
<pre>
“;
}
}
}
add_action( ‘hybrid_after_primary’, ‘theme_display_testimonial’ ); // Hooks our function onto the hybrid_after_primary action hook[/php]
At this stage a completely unformatted testimonial should appear below the sidebar on any page where one has been added.
4. Styling the testimonial
Add the following to your theme’s stylesheet and tweak to suit your theme’s design, it may take some trial and error.
[css]div#testimonial {
position: relative;
padding: 20px;
border: 1px solid #D0D0D0;
font: italic 10px/15px georgia, serif;
text-align: center;
}
span.left-quote {
position: absolute;
top: 10px;
left: 10px;
font-size: 15px;
line-height: 30px;
color: #92BF2E;
}
span.right-quote {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 15px;
line-height: 30px;
color: #92BF2E;
}[/css]
And that’s it, you’re all done with this tutorial.