 from New Zealand but been in Singapore over and on about 17 years now so I've been running Chilebin WordPress web design for nine years here now so I'm just going to have a quick chat hopefully it's a pretty big topic but hopefully we can get through a little bit of stuff here about building a custom home page with advanced custom fields alright so as I said I'm a developer designer kind of chief of all trades master of none here and I've been sort of using WordPress off and on since the very early versions when it was B2 cafe log and I was blogging about really interesting things about in high school so as I said I've been running this agency since 2009 and working on various large products small projects but yeah at the moment sort of looking and focusing on SME and startups alright so in order to kind of solve these issues we were to find out what client or clients have in common so essentially they're really scared of breaking websites so once you hand them back to them speaking from an agency perspective or speaking from a developer's perspective once you develop a site and then give that back to the client sort of whether or not you want to keep them on in the maintenance retainer or you want to sort of get rid of them and they manage their site on their own they're sort of you want to give them something that they can maintain and something they can manage themselves not coming back to you with every little content change but they're not really going to be playing around and messing around with something too much unless they're that way sort of inclined so you want to give you something that they don't have to worry about code they don't have to worry about we don't have to worry about breaking anything essentially so apart from that they're also looking at ways to grow their business using the tool or using the website that you've provided for them so it needs to be flexible in terms of growing with their business because you don't want them going to another developer in a year or two years time and say look this thing didn't work and re-spending all that money all over again so they want the best value for money in their dealings with you as the designer and their internal operations where can you save them time and where can you save them money so the WordPress community I guess kind of looked at solving this problem through page builders that's a simple way of sort of pushing layout and design into the WordPress editor it's a flexible option it's an affordable way and they work by sort of turning their WordPress editor which is usual just text box into a widgetized area built up of columns and rows rows and columns and then inside those columns you can then put videos text images anything you want so they also offer drag and drop functionality so pretty much anything that you find on theme forest will have all that built into it so you can sort of build whatever you want sounds great no no no seriously though some of the page builders are pretty good they're just they sort of catered to an audience doesn't really know what they want or you're sort of not using your experiences the designer or a developer to kind of push that on onto your client to make decisions about layout and design for them so the real problem is that is that basically so we're not using our experience and why should the client being not an expert in this area be forced to make layout and design decisions when essentially it's not their core role it's yours do they really need options where they change fonts or dig into any CSS or anything like that not really so it also comes apart when we make the mistake of giving them too many options and mistaking that for flexibility so that becomes overwhelming I'm not going to go into really bad-mouthing any but there's Pippin who's a developer of some pretty good plugins out there Edd and restrict content pro and a few others he did a write-up last year of about 20 or 30 page builders and went through kind of each of them there so if you're looking at page builders and that's a good review but we won't be really be talking about that anymore we're talking about advanced custom fields so this is something I've used probably since the start of the business I don't know when it first came out but at least since 2009 been using different variations of this to solve problems for my clients essentially they were coming back and saying you know you didn't want to put short codes into a text editor you moved it to the visual editor back to the text editor changes were made and things like that so what I did is strip all that out and put it into custom fields so it's essentially a page builder for developers so it's allows you to create meta box areas now WordPress itself allows you to create meta box areas if you dig into that code and also the bottom of your WordPress theme most most times it's hidden but you can sort of use the UI for that as well that they provide it's just not as user-friendly in my experience so there's two variations of ACF ACF 4 which is a free one in the repository and ACF 5 which is paid and ACF 5 will then be merged into the repository very shortly licenses a 25 bucks Aussie for a site or a hundred bucks for a lifetime license for ACF Pro very well documented so I won't go into too much sort of code here at the moment but yet it has lots of support on their website so as mentioned before here the normal WordPress custom fields so you know you can get by if you need to do a few little things with it but they're not that user-friendly okay for a little snippet or something like that whereas an ACF field you can have a tabbed interface you can you know show displays of pictures you know whizzy wig editors repeaters and a whole bunch of different fields so I think there's 30 or something different fields now so the implementation is pretty basic in terms of a PHP bit of code and I think there's a couple of plugins out there which will allow you to drop this code in if you're not specifically familiar with PHP but you can now build blocks and things using ACF so the first one you basically return the field name and it prints it out to you and then you could turn it as a variable by using get field so there's plenty of documentation about that I won't go into too much detail so so another way of getting that field information that's using get post meta and Bill Erickson has a good a good link about that so that if your clients do turn off advanced custom fields for example that your website won't break because those the field and get field are both exclusive to advanced custom fields right let's get stuck and build a homepage so the design is approved by the client content was provided up front so we basically need to define the custom fields to create the layout insert that content so that's how all projects work right nothing is ever different alright so I built a bit of a demo site which I can show you all later and we're going through it now anyway and it looks a bit like this so it's just a basic site you know hero area at the top quarter action a little bit of about information so numbers and stats then as you go down there's some events and things like that so basically building something like that it's pretty simple with advanced custom fields so let's go into defining some fields okay so okay so at the top here we have a hero area background title subtitle hero button text and hero button URL which I believe so it's basically this area that we're building here so what fields do we need number one is a background which is an image field which is an array number two is a title field text field three subtitle text field for button text and then text field and then you also need a link for that as well so all these we will need to define which I built just before I'm not sure why I wasn't coming up so these are these fields here that we're showing before so at the top we have a hero which is just a tab I like to use tabs to organize each section just for ease of access on the on the back end then we have a hero image which is an image field the text fields and then the URL field so going further through the design this is an about us section which is essentially a text area on the left and then an image on the right this section which is the metrics area some text and then we have some a repeater section so it's essentially you can have multiple columns of data there and control each of those so the metrics area here should be a video anyway I'll just there we go okay so the metrics areas defined as a tab and then under that tab we've got the intro which is just a text field underneath that we have the repeater so that's a repeater section and then you have sub fields under that so I've just got a number field and a text field and a text field and a number field and then we can add as many fields as we want and we can just pull those out at any time then going on into the event section there's not much ACF here just the intro section at the top and then I've just got a custom loop which pulls through those images which I didn't resize correctly then a testimonial section which is similar to what we had before with the metrics which is just a repeater but with three fields this time one for text one for the image of the woman and then the title will her name and these are the repeater fields that I've added here right and then in the footer essentially what we have here is some text and then a gravity form which just is outputted as a shortcode on the page and we're done so this is what it looks like when it's completely built and I will I've got a JSON file essentially that you can upload into advanced custom fields when you're ready afterwards and then you can get this layout you still need to build it in PHP and I'm gonna show you a little bit of that later but that's how we'll sort of look out towards the end once it's been built so just custom fields and then it's assigned to the home page in use different multiple locations there different post types and you can also change it to whatever page you want or if you want to do things with taxonomies or based on page templates if you're not the user fields you can do all that as well but at the moment we're just doing it for the home page is it active yes it's active standard meta box or if you want no background on it where you want to position on the sidebar under the title and then how you want the labels to be displayed left or top and then what you want to need to hide out of the WordPress editor if you want to remove the content editor at the excerpts any custom fields or anything like that you can do that right so it's populate some content so this is what it looks like once you've loaded up in your home page in the page viewer so selecting an image there putting in some text of using a little bit of basic HTML there just to separate separate those lines put in a subtitle field there a little bit of text here and then the button URL as well so as you can see it's pretty simple compared to if you are having to do something like this with you know a normal WordPress editor you would have to be dealing in lots of HTML which would be a real real problem for your client so once that's done save that and load it up and you can move on to the next tab which are pre-populated and I'll re-add that image and a basic whizzy wig editor there can change your normal header styles and in all your normal WordPress editing functions are there as well save that and then this is the repeat of section so as we have can change one of those numbers there and then that will then be displayed on the front end as well so you can add more or you can add less rows you can reorganize them by dragging and dropping those numbers and things that you can drag and drop those into different positions if you so want to or you can use the plus up and down there for 340 days till Christmas and then the same goes with the events I've just got some basic information there the testimonials is the same as well so that's a repeatable section I've just got it in a different layout so that's in a table layout adding some additional content there so that goes through like that and essentially the result is that you get a homepage that sort of looks like that once it's done I mean obviously there's some PHP in the backend for it but in terms of changing all that content it's all available to be done without your clients ever having to kind of dig into any code whatsoever so they should be able to update that website and make it extendable for their business without any real code to be touched going into the code now specifically I and our company use the Genesis framework from StudioPress I use a bones for Genesis child theme to start all our projects and use a SAS no JS grant and Bower and there's a website there for that I use PHP storm as an IDE or a builder and there's a link for that and for version control I use tower and get lab because this is just something I'm still getting into for all that alrighty let's just basically run through a little bit of code here and then we'll see if we got any questions okay so it's a basically builder there's a little bit of secret there if you have an ACF JSON folder in your theme and you sync that to the to the development server it will actually pull down your ACF field so you can back that up as well so basically going through there's some SAS folders and things in there organizing content but what we're doing is building the front page so on the front page there we're pulling through well we're getting there using get field to get the variable then using that and we're getting the hero size which you've defined earlier and once we have that content we're then just setting it as a background image so there's code there to set that as a background image and then some other style things using flexbox we're then getting the title the subtitle outputting the button URL and the button link as well so it should all be pretty straightforward the documentation and all those fields and the code for that is all with the advanced custom fields website as well so there's plenty of documentation about that and what the fields do Elliot the developer has heaps heaps of good documentation around that one so the second area is essentially you know pulling through that content area then pulling through an image so on the right hand right hand side that image will be displayed and we're just pulling through it as a ray object so we just need to get a couple more things about it pulling through the size the width just to make it a bit lighter on the server we're grabbing the large size but that could be obviously the exact size that you need this is some code for a repeater so repeater essentially says if there are rows what do we do with those rows adding a little counter in there as well so I can do some different time displays so once we have those rows what do we do with them and if you're working inside a repeater the code is a little bit different because you need to use get subfield or the subfield which is different to get field or the field because we're working inside a repeater and then you're closing your loop and ending that and moving on to the next section which is very much the same as you go down this is just a custom loop I have for getting some events from modern tribes events calendar and displaying those need to look at that anymore so basic WordPress loop and arguments really standard stuff so it basically goes on until the page is built but as you can see it's pretty simple if you're familiar with PHP if you're not and you're used to working in HTML all the time then you can just plug and play that PHP code inside your original HTML where you would usually have text or you'd usually have that information so you can just plug that in as you see fit so that's the other repeater for the testimonial section and we're grabbing an image and that's just a thumbnail size image for the woman's photo and returning her name down at the bottom as well really I don't know if I can zoom can I video can I zoom in yeah I'll put them up at the demo.chilebin.com.sg side and I'll put them on the meet-up as well and I'll also put up the source code as well for the ACF fields but yeah sorry about that it's a bit small isn't it but all the documentation is available here and I will put up that information there's a WordPress ACF group on Facebook there's ACF extras where people are sharing code Bill Erickson's a good developer who shares a bit of content about it as well and then there's lots and lots of code examples on that site and that's it basically any questions run through creating a home page in 20 minutes Are you primarily seeing this for front-end usage or do you see what's going on? Yeah so once yeah so once a designer has been approved and once it's ready to go all you're sort of doing is giving the client access to build out that design or change that or change their content in that design so you might not have final content when the design is being done or the client wants changes to that content along the way by building a layout in that way I find it's really easy to give it back to them and say look you've got X amount of fields I usually add you know some descriptions around those fields as well to tell them how to use those fields then they can just go into the site plug their content in make any changes and so forth I mean there are other ways of sort of building using advanced custom fields there's a module called flexible content which allows you to define content blocks that say you want a column grid with three columns a column grid of four columns you would then define those and they could sort of use a page builder to build that themselves I think no I sort of replacing page builders I mean I don't think you should give your client layout choices I mean that's why they've come to you anyway yeah I'm wondering if you use some plugins is it different for it for your clients like do your clients require a lot of different plugins because most plugins I would say if they generate content they are not compatible with that so do you think this is an issue or do you think like in practice ever comes up because um most home pages you don't need that many plugins yeah no I mean it sort of depends on what you're doing with your layout and you know if you are using plugins that let's say have short codes and things like that you can plug those short codes straight into a normal WordPress whizzy wig which is part of your ACF module so you want to define your normal let's say hero area and then you want an event calendar or something so you plug in a short code and that will just display in a normal WordPress editor format so WordPress goes through the code and runs all the same functionality that it would as if it was the normal you know normal editor at the top of the screen cool thank you