Close

Get in Touch

Call Us on 1300 727 952
Find us

First Floor, 159 Victoria Pde
Collingwood, VIC 3066
(Google Map)

info@salsadigital.com.au

1300 727 952 
or
+61 3 9910 4099

 

Get in touch

Close

Wordpress and Advance Custom Fields

Using Advance Custom Fields, the client has access to all their custom features directly in the Post page without having to browse through setting pages.

Andrea R 5 June 2014

Wordpress is a well-known CMS, Content Management System, that was invented in the 2003. Like many of the other CMS systems, Wordpress allows the user to modify the content of a website, though a backend protected by a login page. However, compared to the other CMS's available online, Wordpress provides a nice, easy to use and intuitive interface, that can be simply modified and customised. Wordpress, like most of the common CMS's, provides the possibility to use plugins to enrich the 'vanilla' version with extra features, increasing the overall flexibility and potentiality.

Here I will talk about a plugin called Advance Custom Fields, that helps developers add innumerable custom features, nicely integrated with the backend. Using this plugin, the client has access to all their custom features directly in the Post page without having to browse through setting pages. Advance Custom Fields, is really handy and once installed and activated through the plugin config page, is ready to use. I would also suggest installing "Advanced Custom Fields: Repeater Field" which for only A$25 is going to give you even more flexibility. So let's go through how to use it. We will create an images gallery, using Nivo Jquery, that can be easily populated using the Wordpress backend. First of all, open the Custom Fields configuration and add a new field. Set up the field name, in my case "Gallery", and some of its configurations such as label, name, type. As you can see, Repeater has been chosen as a field type, in this way it will be possible to add multiple images to our gallery.

At this point we need to add some elements such as an image, a title (which can potentially be extracted by the object) and then attach this new custom field to a Page or a Post.

All the other configurations can be left with the default values.

If we now open any of our posts in the backend, we can see a new area called Gallery, where every new row has an image uploader (Image) and a text field (Title). After having added few images the database will be filled with our data; we just have to display it on the actual website.  

Download Nivo Jquery and add the following lines of code in the header.php of your template between the tags
 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/nivo-slider/nivo-slider.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/nivo-slider/themes/default/default.css" type="text/css" media="all" />
<script type="text/javascript">
jQuery(window).on('load', function() {
jQuery('#slider').nivoSlider();
});
</script>

at this point in order to display the gallery using Nivo and Advance Custom Fields we just have to add the following lines after the <body> tag

<?php if( $images = get_field('gallery') ) : ?>
<div id="slider" class="slider-wrapper theme-default">
<?php foreach( $images as $image ) : ?>
<img src="<?php echo $image['image']['url']; ?>" title="<?php echo $image['title']; ?>" />
<?php endforeach; ?>
</div>
<?php endif; ?>

The code above reported will run through the array returned by get_field() (here reported as an example), collect and display in HTML format the data following the conversion defined by the Nivo library.

The outcome will be replicated in all the pages, based on the post ID, and it will look like this.

It's that easy! So in a nutshell why use Advance Custom Fields? It's free and with the addition of only $25 for the Repeater this plugin allows the developer to integrate nicely any custom builds into the backend in order to facilitate the clients requirements. It can be used in many situations including allowing the client to insert addresses and then display them using Google Maps and allowing the client to insert general information about team members, for example images, description, links etc. The general idea is then to create custom solutions that are perfectly integrated in the backend and that can be used without forcing the client to learn any hack.

Subscribe to the Salsa Newsletter

Subscribe to the Salsa newsletter

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×