Hello World tutorial on Advanced Custom Field (ACF) WordPress Plugin

The Advanced Custom Field plugin is one of the most useful plugins for WordPress developers. In this quickstart guide I’ll show you why.

Advanced Custom Field allows you to easily add a field (and save it) to a particular page, without having to write any programming code. To retrieve the field you have to add a very short (less than one line) snippet of code.

Lets go through an example, lets say you want to add a custom greeting to a page and you want to change this depending on your mood or the weather!

e.g. if your a local service (for example a florist in London) you might want a different greeting such as:

If its raining: ‘Welcome to our Florists, our flowers love the rain !’
or if its sunny: ‘Welcome, our flowers smile in the Sunshine’.

Ok lets run through how you actually achieve this. First goto the WordPress plugin directory, download and install the plugin.

1. select Custom Fields from the left hand side of the admin menu.
2. Fill in the field details (field name) and location of where the field will appear. Select Add field

 

advanced_custom_field1

 

3. Next fill in the field details (e.g. the field type for our field we are using a text field) and save it (publish).

 

advanced_custom_field2

 

4. Open the page that you have selected you have the field on and edit it in the wordpress wysiwyg editor. Then save the field like i’ve done below.

 

advanced_custom_field3

 

5. Next we want to display the field (our message) on the page, so we need to open the relevant page template in the editor of your choice. We simply add get_field(‘custom_flower_field’, $post->ID); to the place in the page where we want our message displayed (save the file).

Finally lets view the homepage to see our message being displayed. So there it is, easily display your field without writing any code to save your field into the database. Of course when mood takes us or the weather changes, we can simply go back to the homepage (in the wordpress editor), and easily change/update our message without having todo anything technical.

 

advanced_custom_field4

Leave a Comment