Written May 2, 2011
Tagged Advanced Custom Fields, 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
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.
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.
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.
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:
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.
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:
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!
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!