Using the Advanced Custom Fields Plugin to create a custom home page in WordPress

In this tutorial we will look at how the Advanced Custom Fields plugin can be used to create a professional home page fit for your client.

What will I need?

  • General knowledge of making a WordPress theme
  • General knowledge of PHP
  • The Free WordPress plugin: Advanced Custom Fields

1. Create a home page template file

A template file is a php file within your theme folder which a page or post uses to display it’s data on the website. In this tutorial I am using the default theme “Twenty Ten” and I have created a new file within the theme folder called template_home.php

template_home.php

as you can see, this template file is blank. That's fine for now, we can edit it later once we know what fields to put in.

2. Creating Custom Fields

Now it's time to use the Advanced Custom Fields plugin to create our home page's custom fields. The field we will be:

  • Heading Text (text)
  • Hero Image (image)
  • Column 1 (wysiwyg)
  • Column 2 (wysiwyg)
  • Featured Article (post object)

To create these fields, we need to install and activate the Advanced Custom Fields plugin. Once activated, navigate to Settings → Adv Custom Fields and create a new field group by clicking the "Add New" button.

create_acf

Give the ACF a useful name like "Home Page Fields" and add in the custom fields. Each field requires:

  • Title - A human read name for the field
  • Name - A computer read name for the field
  • type - the type of field to create
  • Options - some field types have options

Click the "Add Field" button to create the 5 fields. This is what your fields should look like:

Note: Since this post was written, the Advanced Custom Fields plugin has updated it's interface design and fields also contain more options.

acf_fields

3. Assign your field group to the home page edit screen

Now that we have created our fields, we need to assign the field group to an edit screen. This is done by creating rules in the "Assign to edit page" meta box.

As we have already created our home page template file, we can just enter the file name (template_home.php) in the Page Templates input field. This should look like:

Note: Since this post was written, the Advanced Custom Fields plugin has a much more user friendly way to create custom matching rules.

acf_location

4. Clean up the edit screen

The Advanced Custom Fields plugin also allows you to hide elements from the edit screens which can sometimes confuse clients. Also, as we are not going to use the default content editor, we can un-tick all the available options in the "Advanced Options" metabox under "Show on page". This should look like:

acf_options

5. The new home page edit screen

We can now create our home Page by navigating to Pages → Add New. You will notice that the edit screen looks completely normal. This is because your new page is not yet using the Home Page template we created. Call the Page "Home" and select the Home page template.

select_template

Now Publish your page and wait for your new Custom Fields to load!

6. Enter your Home Page data

Now that your new fields have replaced the standard wordpress fields, work through them one by one and input your data. This is what mine looks like:

input_data

Building the Home Page template

The last step of this tutorial is to create a template which will use our new custom field data. The Advanced Custom Fields plugin uses a few functions to interact with the data which you can read more on here: ACF Code Examples

In this tutorial we will be using the 2 main ACF functions: get_field() and the_field(). The functions are quite sel explanitory:

  • get_field('field_name') - returns the value
  • the_field('field_name') - displays the value

Here's the HTML + PHP code for my final template_home.php file. I haven't included the CSS as this is not the focus of this tutorial, but the CSS was quite straight forward as well. For the purposes of this tutorial I have removed the standard header div HTML from the header.php file.

Viewing your home page should look something like this!

home_page

It's that easy! You now have an easy to maintain CMS driven home page which your clients will love. The home page is just the start, by using the Advanced Custom Fields plugin, you could customize your whole website!

Thank you for reading

Join in the discussion bellow by tweeting about this post.

Galo

9 Sep 2011

Sorry I’m a Newbie at wordpress themplates. My question is what if the value of a field (image) is blank what can be done so the whole doesn’t appear?

rober

9 Sep 2011

thank you very much Elliot, with your plugin the wp as cms is closer to expression engine, great job, so clear and easy!

Simon

9 Sep 2011

I have installed ACF and love it. How can I create a custom field for the footer where just one global text area will change that footer across the whole site?

Does that make sense? Basically I want the client to be able to change the address and phone number in the footer across the whole site.

Thanks,

Simon.

Marjorie

11 Nov 2011

This video: http://vimeo.com/21468614 shows
get_fields()
at 1:00

But the tutorial has get_field() without the “s”

Did the function name change somewhere along the way?

Jesper

1 Jan 2012

Thank you!
Excellent post. I finally got it 🙂

Elliot

4 Apr 2012

Great tutorial, has allowed me to implement a template page for gallery images on my website, using custom fields. Fantastic

Thanks again

Join in the discussion by tweeting about this post.