How To Make Editable WordPress Page Templates

Now that we understand how to create custom WordPress page templates, it’s time to make them editable.

To do this we’ll be using a WordPress plugin called Advanced Custom Fields (ACF). ACF makes it incredibly easy to create and manage custom fields instead of doing it manually. There’s a premium version of ACF (Advanced Custom Fields Pro) that allows you to do even more, but we’ll save that for another tutorial.

Let’s get rolling!

Step 1 – Install ACF

First, we need to install ACF. Head on over to your Plugins page in wp-admin and search for “Advanced Custom Fields.” Then install and activate the plugin.

Step 2 – Create Custom Fields

Next, we’ll go to ACF in wp-admin and create our custom fields. You can do this by visiting:

Custom Fields > Add New

We’ll call this group “Page options.” Then we’ll specify the rule for this group – Page Template equals Landing Page.

Now let’s create a custom field for our group.

• Now we’ll add a new field and call it “Page Type” (notice that ACF automatically populates the Field Name to page_type)
• Choose “Select” as the field type
• Enter the following values on their own line: Content, Landing Page, Case Study

Your new field should look like this:

Now click Publish to save your custom field group.

Step 3 – Enter Custom Field Data

Now that we have a custom field enabled let’s select a value for it on our page in WordPress. Go to the Page you’re using for the Landing Page template and you’ll notice the new Page options meta box below the content area.

Your page should look something like this:

Select “Landing Page” as the Page Type and then Publish/Update the page. This saves the custom field value to the database.

Step 4 – Display Custom Fields

Finally, we need to display our custom fields in our page template. We’ll open up page-landing-page.php and make some updates. ACF provides some nice functions to get and display your custom fields.

get_field() will get the field value
the_field() will display the field value

It’s a good practice to get your field values and store them in a variable. For example:

$page_type = get_field('page_type');

Now we can add some logic to our template that checks to see if the field exists, and if it does we’ll display the value right before the loop.

Your updated template should look like this.

<?php
/*
Template Name: Landing Page
*/

// get custom fields
$page_type = get_field('page_type');

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php if ( $page_type ) : ?>
			<p><?php echo $page_type; ?></p>
		<?php endif; ?>

		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Save this file and FTP it to your server. Now you should see the value of “Landing Page” being displayed. BOOM.

You just created a dynamic WordPress page template using custom fields and ACF! These custom fields work for posts and custom post types as well, which we’ll cover in another tutorial.

Go ahead and pat yourself on the back (or drink a beer) since you’ve just learned something! Learning is key to growth, no matter where you are in your career. Remember that 🙂