Semblance Digital Studio

Design and digital studio for startups, using WordPress as a CMS

  • Home
  • Services
  • Projects
  • Blog
  • Contact
You are here: Home / Blog / Online and Technical / Timeline with WordPress Page Template and ACF

Timeline with WordPress Page Template and ACF

Posted on 21 October 2015 in Online and Technical, Wordpress ♦ Estimate reading time: 5 minutes ♦ by Elzette Roelofse

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):

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:

image setting

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.

acf admin

Browsing away in admin to Pages, to view the Page being used for the timeline, it should look something like the below screenshot:

WordPress page template

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.

Related Posts

  • First London Blog Club Meetup #LondonBlogClubFirst London Blog Club Meetup #LondonBlogClub
  • How to add a responsive SVG, that can be styled and animated, to your web pageHow to add a responsive SVG, that can be styled and animated, to your web page
  • WordCamp Europe 2017WordCamp Europe 2017

No Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

semblance logo enquiries@semblance.design © 2021
  • Email
  • Twitter
  • Instagram

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.I agreePrivacy policy