Advance Custom Fields (ACF) is very popular with WordPress developers these days. It makes it easy to customise the WordPress admin area into custom content sections for your clients and built it in, to display in the theme.
ACF also came in handy when I designed and developed the custom WordPress theme for a football website. Besides using it on various pages, in this post I will discuss how I’ve set up the football club’s timeline. The timeline (as timelines go) should have the ability to be easily updated when something historical happen in the club. With ACF, the other key to achieve this, is the ACF Repeater Field Add-on. To start off, make sure you have ACF and the Repeater Field Add-on plugins installed in the WordPress installation.
Custom Fields setup
I usually first do the settings of the Custom Fields in admin. This will also give you the field name/s to use in the page template.
Go to Custom Fields > Custom Fields from your WordPress admin. Then Add New. Set up the parent Field Type to the Repeater Field. This open additional options to choose the fields that will be repeatable (Repeater Fields):
The Repeater Field has 4 content sections set up: the year, title of the entry, short description of entry and an optional photo. The above image also show the field name(s) I will be using in the page template to display the timeline. This can be compared and changed accordingly. Either way, make sure to check the Field Name in the WordPress admin are correspond/is the same in the page template.
For the image Field Type in the Repeater Fields, I’ve used the following settings:
After setting up the fields, in the settings area below that, set the location equal to the WordPress Page you use for the timeline. Click Publish to save the settings.
Browsing away in admin to Pages, to view the Page being used for the timeline, it should look something like the below screenshot:
Setting up the WordPress page template
To display the timeline, I am using a HTML <table>. Each time entry is displayed as a row. Each Repeater Field is displayed as a column within that row. The code below can be used in a new WordPress page template. Because I am using the Genesis Framework, I’ve added the loop to a function that gets hooked to a Genesis hook. Depending on your theme, you need to call the function in the page template. Also remember to go to Pages in admin, then to the page of the timeline, to change the page template from Default to the Timeline Page Template. Otherwise the timeline will not show.
As a guide, below is the SASS code I’ve used for the timeline, which is also responsive. This is just to give an idea what I’ve done, even if you are not using a preprocessor.
When I design and develop a custom WordPress theme, I try minimise the amount of plugins I use for small functions. Instead, such as with this example, I go for my own setup, keeping it as lightweight as possible, using the ‘tools’ already available. If, for example you are not using Advanced Custom Fields, then read this article here for another alternative.
Leave a Reply