 So like I introduced myself and got to talking to a little bit of you, this is really base level advanced custom fields. So for those of you that have never heard of advanced custom fields, touched advanced custom fields, this is going to be a great entry point for that as far as understanding what advanced custom fields is and being able to utilize that in your site. Throughout this presentation, I'll have some slides that will show website examples, work that I've done, things that I've completed with advanced custom fields that hopefully spur into you some of those thinking, some of those thoughts as to how you can use advanced custom fields for your site. So again, advanced custom fields for the non-advanced. I'm Jonathan Ober. So when we think about our websites and we think about the work that we're doing as designers and maybe even as developers, we really want three things. We want well designed sites. We want our clients to have the complete freedom to be able to edit the content on their sites. And then we also, we don't want our client to ruin them. So as a designer developer, I'm building websites in Photoshop and I'm handing those off to clients and I'm hoping that they don't ruin the work that I've done, the designs that I've done. And so these are some of the problems in the real world that sometimes we face. We're looking at you design a site and you hand it off and all of a sudden the client starts updating content and we know how things can go. So we're going to start first with some examples and these are just sites that I've done, things that I've completed just to kind of give you a little base level of the work that I'm doing. And some of these I'll come back to again in slides later. So a lot of these you'll see slideshows with headings and subheadings, you'll see buttons. You'll see some different visual elements where there's separation of graphics. These are all done in advanced custom fields. This one in particular had some alternating content left and right with images and headings and text. Another slideshow has some buttons. This one actually has a video slideshow that moves as well. Sometimes service elements, you know, a business wants to promote what they're doing and so they'll have little blocks of services. This section of this site here has some sections that detail some of their contact information, other outlets where they've, how they have different locations. They have a gallery, news and articles and we're doing a lot of work there with advanced custom fields. Another example here just a team page utilizing advanced custom fields to show a staff page. So at this point right now what I'm just showing you is design. Sites that I've designed or have worked on and different elements. You know, like I said slideshow services, breakdown of what the client's doing, what the site is trying to convey and that's a beautiful design. And so hopefully some of you, you know, if you are a designer you're designing sites like this and you're, again, maybe looking at some of what I've shown you and you're thinking, well how do I design that? How do I create a home page like that? And so that's kind of what I want to get into now. So we're all familiar with this guy, our WordPress editor, it's gone away soon maybe. But we're familiar with the content editor but we know that as maybe content writers or as designers and developers we're very limited to what we can do in that. We have our headings, we have bullets, we have lists, we have some degree of creating content on the left and the right in the center but there's really not a lot to design when it comes to that. I'll preface this by saying I'm sorry if you're a Gutenberg lover or BFF or whatever but soon Gutenberg's going to be here and I'm not going to talk bad about Gutenberg because honestly I haven't had enough experience with it, I've had enough to make me hesitate right now because of the work that I'm doing in advanced custom fields, it's not quite there for the work that I'm doing but I also will preface this by saying I launched a site for a school with 185 pages about two months ago that's all running on Gutenberg right now and so far so good. So when we're looking at designing our sites and we look at the editor, I talk about how that's very limited in what you can do. You don't have a lot of columns, out of the box you know, the way to align content, put in images and have text next to it, at least not easily, you end up getting that kind of juxtaposition of images that maybe the content flows underneath and you don't have that creative freedom or that ability to really control that. Gutenberg brings in columns and some different block elements that really helps to separate those things but it's still not quite there when it comes to designing full websites. So now we bring in page builders. Love them or hate them, I'll tell you I've used them, I've also probably abused them as crutches to design quickly for clients who don't have funds to really put together a custom built design but at the same time one of my first points was that I'm designing sites and I want the client to edit those but I also don't want them to ruin them and if you've used any one of these, maybe Visual Composer and Elementor and Divi Beaver Builder, you know that once you give that over to the client, say goodbye to the design that you made, right? Now there are some lockdown things that you can do but for the most part, once you give them a page builder, they will ruin it. So we have our problem, we have our desire, and now about our solution. That's advanced custom fields. So advanced custom fields, what is it? It's a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra content fields are more commonly referred to as custom fields, part of the CF and then they can allow you to build websites faster and educate your clients quicker. I will say again, when we look at those page builders, we have our made a page builder site, a Divi site, educating your client on how to edit that, how to drag things in the right order, add some padding, add some margins. It's difficult. You're now giving them design tools, design tools that maybe as a web designer, that you've spent years learning how to properly pad something, give it margins, strokes, whatever it might be, design. So again, part of what ACF is, it gives you the ability to add fields on demand. The ACF field builder allows you to quickly and easily add fields to your WP edit screens with only a click of a few buttons. I know that sounds like magic and easy words, but when you get into it, you start to build a workflow where it really is easy and few buttons. You can take ACF and you can add fields anywhere. So if a custom post type, you want to add fields, you can add fields. You have a post or a page, you can add fields. You want to have advanced custom fields based off of users that are logged in. You can do that. You really truly can add fields anywhere. And then you can show them anywhere. So again, as you're creating fields and you're creating content with advanced custom fields, you can begin to place them around your design, whether it's in the footer, the head or the sidebar. Within your page, you can really build nice sites, great sites, putting content fields anywhere. So let's look at what kinds of fields there are. This list is huge. It might be a little overwhelming. But for me and for what we want to cover, just basic, the fields that I love and use a lot, the text field, the text area field, image field, checkbox and radio buttons, true-false button groups, wissy-wig, I use that one a lot. The... What else do I use a lot? The actual content and the repeater field use those tremendously. Now some of these fields... Advanced Custom Fields is a free plugin, but there are... There is a paid version developer license that gives you all of these fields. So not... If you go and you download Advanced Custom Fields right now, you're not going to see some of these. And I'll be the first to say that Advanced Custom Fields Pro is probably my best investment as a designer developer. I learned about Advanced Custom Fields probably three years ago. I've used it on every website since at the developer level, and I don't get any money for saying that. So now that we know a little bit about, again, our problem and a solution to Advanced Custom Fields, let's look at how we get started with Advanced Custom Fields. So when I get a design, when I get a new site from a client, it's a process. I basically, I look at that website and I say to myself, do I need more than just a content editor? Do I need more than just what the WordPress content editor has to offer or something like Site Origins, Page Builder, or even, you know, Gutenberg and where that's going right now. Do I need more than that? And then I also look at my design and I think to myself, that design, that slideshow, that services offering, that team page, what field groups or fields will I apply to that design? Okay. So we're going to look at that, we're going to look at exactly that and I'm going to walk you through how to get started with Advanced Custom Fields. So the first thing you do in Advanced Custom Fields is you want to create field groups. And typically, my process is I look at the different sections of the site. I look at block terminology, top to bottom, left to right and how I'm going to lay out content on my site. So with Advanced Custom Fields and field groups, I might have a field group for the home page because I have special content on that called actions, services. If I'm using something throughout my site, like a slider on the top of the page, I'll turn that into a field group. So a lot of times just thinking about how you'll utilize those elements on your site within your templates helps to kind of drive how you set up those field groups. So here's an example of some field groups that I've set up. So I had an attachment page, I had a home page slider, an options page, and just a field group that was assigned to my pages. And I'll get into more about how you assign those to different templates later in another slide. So now that I have my field group, it's time to get started adding fields to that group. So field group is kind of the outside box. Fields are the next step. When you set up a new field group, you're going to set up a field name and then you're going to end up setting up the type. So the first thing you do, and we'll look at a slide that has a picture of that, is give it a name and then give it a type. Pro tip. If you're creating field groups and you're creating fields, make sure not to give similar or the same names to your field names, because there can be some conflicts there, especially if you get into multiple field groups and you might have a reference to an image, you don't want to just call it image every time. It's not that one won't necessarily hurt everything, but it gets confusing when you're looking at your code. So this is our field group. Once we've created a field group, we've clicked in now and we're naming our field group. So up here in the top, we'll name our field group just like we name a page or a post. And then underneath of that, we have our field order, label, field name and field type. What you're going to end up doing then is at this point, you'll add a field, which is our blue button here, and then you'll go through some different options. This is a little scrolled down. This is actually in our field group. I've scrolled down and these are other options where one of the powerful things with Advanced Custom Fields is that if you have a field group, let's say you created a custom page or a custom post type using a field group, and you can use these options. You can turn off certain content editor type things like your excerpt field or your content editor altogether, different things within word press. You can turn on and off so that when you're creating a custom page template like a home page, maybe you don't want the original content editor be there, but you want your own fields to be there. So we're going to give our field some settings. We're going to label it and that label is essentially going to auto-generate a name. You can change those, but to me it's like I'm naming something. So I kind of want that field name to be the same. The field name is what's going to be called up in your code and we'll look at some of that PHP code in a little bit. You also select your field type there. That'll be that long list from that prior slide where there was like 30 different options. Each field type has different options here. So I'm selected on the text option, but if you select image or any of the other options, this will using conditional logic will change and reflow depending on which one you select it. So just be mindful of that. There are other settings there, but since we're just talking basic level ACF, I'm not going to get into them. I'll be honest, I don't really use a lot of these either. The top portion here is where the main nuts and bolts are of your ACF field groups or field settings. So now we have our field group and we've assigned fields. So now we've got to tell those fields where to go. So we're going to assign our field groups to our page or post template or a specific area of your site. In the next screen you'll see this, but a pro tip here is you can have a field group, you can create it once and you can assign it to multiple page templates or post templates. It's a pretty sweet thing. So you end up getting this location meta box, which allows you again, you can do an and type thing. So if I select a post type that's in a certain category, it will only show those fields for that. You can use the OR rule. So like, for instance, I create a lot of pages where there's a slide show at the top and I might use that on the homepage, but I might also use that same slide show, the code maybe not the same style on a post or a page template. So I create that slider once and I can use that using the OR. I can assign that to any template. We're about ready to get into some code. Okay. So if this is, if this has so far been scary, I apologize for the next scary thing. If this hasn't been and you're still tracking with me, hopefully you are, this will scare you. So now we're going to display our values in our theme. So the way that ACF works is basically you want to retrieve field value. So again, let's say I have a field that's you know, I'm writing my own custom page and I have a title and a subtitle that I want to kind of override the content editor and I have other fields in there. I'm going to use get field or the field depending on how I want to work my code to basically pull that content that's being entered into the field and I'm going to display that content in my code which will then in turn display on the front end of my site. So we're retrieving a field value as a variable. We're going to use get field function. This is the most versatile function which will allow the return of a value for any type of field and to display a field you can use the field, the underscore field in a similar fashion. So let's look at what that means because right now might not mean anything. So we're displaying a value in our theme. So this is essentially the code, either the top or the bottom that I would want to use to display values in my theme. So again, I can use the very basic level the field and then in the green the field name whatever I've put in that box on that field group will display on my page or on my post because I put that code into my template file. Now one of the things that I've been doing recently is because again I want to prevent clients from ruining my life is sometimes a client might fill in content but they might miss a field box. So what do you do if they don't fill in content maybe just don't display that field. For instance I'll show an example later where there's a staff page and everybody has or most everybody because we don't talk in absolutes we're not sith. Most everybody has like a LinkedIn or a Gmail or something in their profile. Well some of those people just don't want to have that public. So if you use the field name the first one and you're trying to pull that link in it's going to look for that and it's going to create that space in your code. But if you check first to see if that field has been filled in it's going to just skip over it because we're using the get field and it's basically like well you're not there so I'm just going to skip over you. When I learned that part that was like a light bulb revelation for me. It's great. So there's more examples of this on advancedcustomfields.com in their resources. I will say like as a plugin they have superb documentation so all of this can be found there as far as helpful stuff. So now what I want to do is I want to start to show you some examples. So this is a slide show and this goes through each picture and right now in this design the heading and the subheading and the button text is all the same. But the way that I'm controlling this is through advancedcustomfields. So I have a slide show field group called slides and that's here and so I've named that field group slides and what I'm using here is because this particular piece of content is repeat it I'm using the repeater field type. So in that repeater I have these other fields so basically let's just say like I want to do something multiple times I can create a repeater and so it runs that field types each time. So this one, this particular client wanted the ability to have either a video or an image. So the first thing I do is I just check with the radio button is it a video or an image. Advancedcustomfields has conditional logic so I can actually pull that in and say okay if it's a video upload a video file so I can upload that mp4 whatever it might be and then if it's an image it gives me the ability to upload an image. So again on the back end I'm making that choice the client has the ability to choose a video or an image and then they upload accordingly. And then this one has a place for heading text content so that little paragraph underneath and then button text and button link. So again to give the client the full ability to edit that they need to have all these fields now if they remove one of those where they just don't have a field filled out that field just doesn't show so that button doesn't show with just an empty square with no text so they don't fill that stuff in. So this is the field group with its fields this is what the slide show looks like within the WordPress editor so on the homepage I've assigned this field group to the homepage template and now they will see this little slides area where they see that radio button I choose image or video they can upload an image add some little text in there to tell them how big that image should be and then they have a heading text they have that content they have a button text and the button link. And again the way that I'm doing this you'll see the code in the next slide so that's our in the back end admin of WordPress I go to the homepage that's what I'm seeing so oh I didn't preface scary slide so this is code so my HTML and CSS or my HTML and PHP are showing but this is a slide and I know for those of you that might be further back might be a little hard to read but I was trying to fit like all the lines of text on the slide and it was not really working out but basically what this repeater is doing is it's I got a div that's just called slider because I'm a simple man and within that we're looking for the field group slides and because it's a repeater it's going to go through that looking each time does it have an image or a video does it have a heading, does it have a subheading does it have a button text and a button link when it gets to the end of that if the client has three slides or five slides it'll just execute and so this bit of code is basically bringing that in so you can see in the top or maybe you can't see because you sat far back because you don't want to be in the front that I'm getting things like the background image the button text, the button link and all those bringing those variables in and then in my code and again these slides will be up later I think they'll be tweeted out or whatever so another way that I use advanced custom fields is through the wissywig field group so this I kind of condensed it all into one that way you could see it so I have using advanced custom custom fields option page I have an options page, a theme options setup where I have a footer column one where basically it's a wissywig where they can enter the logo and their contact information and this is the one line I kid you not of advanced custom fields PHP that then spits out that text now I've styled that so I'm calling up that class item or column one and styling specifically the gray text and then the bold text is white but it's still controlled in the theme options where the client can come in and change the phone number if they ever change that so another thing that I've done a lot with advanced custom fields it's another repeater, it's a service repeater so this is my field group these are the repeater fields I have image, image, type a title that's a text type content that's a text area button text and button link and so in the WordPress editor I get this walk where I can the client can change the image of that service give it a title, give it some content button text and a button link that's the scary stuff so again that repeater is calling up services from the options page so this is a little different I have a central location for my theme options when you do an options page you have to make sure that you're calling up those options by doing instead of just looking for the field group you have to look for it comma, little quote options, close quote so that way it just knows that it's pooling from that options page the nice thing about that, think of that as like if you've ever done print, like a master page I use the theme options as kind of like global settings, master settings for the site and then on the front end this is what it looks like so when you go to the site you would see their services, they repeat one thing I haven't mentioned yet is repeaters are drag and drop capable so if for instance the client wants to say you know what, we really want to push our assembly let's move that to the center or let's move that to the front, they could just drag that field after they've filled it all in to the top of the list and it'll be right at the top or it'll end up being on the left I have another example of a service repeater I don't have the code up here but again this one has a background image text and then those buttons link out so another example that I'd like to show you is just a staff page this again has images and this is a repeater images with a title, a person's name and then underneath of that the field group has a place for like a description, like what their job description is, their phone number their email address and they have fields that they can just fill in, again if there's not content in that field it just won't show so one person might have you know four bullets next to their name with their different description or anything somebody else might only have three like this guy at the bottom so instead of, so I coded in those slashes because you know we didn't want the client to mess up the putting in slashes to kind of design that there so this is an example of somebody who didn't want their LinkedIn information out there and they just have three options versus the four and this is another this is a sister site of that previous one, this is their staff page I'm very similar, that's just a repeater with the staff members so another thing that you can do with advanced custom fields, I have using some like nth child type shenanigans and tomfoolery I have a repeater but it just alternates that left and right position as far as the image and the text and everything so again if you did gave that over to a client to design a page with a page builder, they'd probably mess that up they'd probably figure out how to use an h2 versus an h1 or whatever it might be put different text on the button, put a different color on the button, how many of you have had clients do like hot pink or hot green text you know so this is just a repeater for the different sections of the site and they can put in the title, the subtitle that content in the button text so another thing that I've done before using advanced custom fields got that big stretched image and you just want some text with a heading and some content in a button again they can just swap out background images and I just have it set to cover so if they unfortunately this is one that they can mess up but I put in text that says use a certain size image but they could upload a thumbnail size you can't 100% dummy proof anything but that's just another example of advanced custom fields so I showed you this slide show before again this has heading text, subheading button text and button link and again the client can control the order of those slides very easily I don't know about you guys but I've used like revolution slider and there's tons of ones out there I actually used just a very simple al slider carousel so it's a little bit of javascript with advanced custom fields to make all this magic work and a nice thing if you were in Tim's talk first thing in the morning so like what seems like a day ago if you had to speak last um if you were in Tim's talk right here he said he stood right here too um it's talking about design systems and one of the things that advanced custom fields has really helped me with is building design systems because if you look at it like the examples I've showed you they all have slide shows they all have service blocks they have staff member pages they're designed differently they look differently but when it comes to the back end advanced custom fields it's all the same like I'll be honest don't show this to anybody that I work for but I go into my sites and I just can export field groups from one site to another just like you export post into another you can export a JSON file open up advanced custom fields import it it'll have your field group it'll say slides and you'll go into it and it'll be your repeater and it'll say image or video and that's like my starting thing I just have a couple JSON files I just reuse over and over again because it works so this is like taking Tim's design style to the next degree as a developer being able to design these so again another slide show button, button text so so I survived thank you Ken for that picture so so hopefully problem solved we want to design better websites I don't know about you I want to design better websites hopefully you as well want to design better websites we want our clients to be able to have complete freedom to edit so I don't need to be called up to say hey can I change the text on this slide show I was like yes you can remember when I taught you advanced custom fields in your site oh yeah and they can go and edit that but I don't want them to ruin it and while I just about you can ruin things it's really hard I will say it's really hard to ruin an advanced custom field site because I'm controlling the fields and I'm controlling the design and I'm just letting the client deal with the content so I think that's it this better not be a math problem okay awesome go ahead yeah I mean there's only so much that I can really control but for the most part advanced custom fields is pretty bullet proof when it comes to that yeah you can set I think you can do there's pretty much min max and a lot of things have like you know if you're uploading like certain file types like limit it I mean I created so for the school district that we just did we I built this convoluted mess but it was a PDF uploader for like school minutes and stuff and it's literally like upload a file but it has to be a PDF because I didn't want to uploading DOC files you know so a lot of the field types have qualifications that need to be met before and they'll get the great red like box highlight and it'll be like hey you did this wrong you cool yeah well yeah you could do yeah required you could do required on everything right yes sir oh it's it's simple let me see if I could find you one that has a field here I'll do what I don't ever like to do and that's called live websites so this is a site that I have these are our field groups and I can go into oh look at that um listen I don't even know how to I guess arrangements oh there we go wasn't turned on I just didn't want you guys to see all my production my notes that I didn't write so your question was adding in specific details so I can come in here and here I can give instructions for the author shown when submitting data so you can put little text like hey this text should be or this image should be a certain size or this text should have a certain amount of characters or this is where this text is displayed in the slideshow underneath the heading like if you want to get super specific but yes you can it's built right and baked right into the system I was expecting that one from him okay so I okay so the other day like Joe tweeted and now he's like I'm doing some ACF stuff in Gutenberg and it's and he was like well that's on ACF and I'm pretty much in the camp of I feel like we're in the witching hour when it comes to like 5.0 like I'm going to wake up and be really upset because I feel like it's just coming there's just bugs still that how ACF integrated into where it falls in the blocks like I was running into things so when I do slides for sites I make it so that the slider is always at the top because in my mind that's where the slideshow is so if I go to this site and I go to edit my slider is at the top well Gutenberg doesn't even acknowledge ACF when I say put this right after the title because you can tell it where in the position and it automatically just drops it after Gutenberg and again I don't know if that's on ACF or if that's just Gutenberg being like I'm the new kid on campus and I don't really care so there are some things there I think yeah I mean I don't really know the answers there's still definitely some things to figure out I have and I'll admit I don't know if this should be on camera but I've been hitting classic editor on a lot of my sites just because the customizations that I'm building Gutenberg is not ready for me to be able to train those clients Will it work with ACF? ACF has gone over a million sites yep Gutenberg is going to roll out and a lot are going to be a lot of issues somewhere down the line there's a great article written and Kevin was just reading it that explains what it does what's coming with ACF well I know with the changes to our right hand sidebar and how content gets pulled in I think Paul had shown a little toggle with short codes and how to get that in there so ACF you can manipulate some of that sidebar content like I often will put in not just a featured image but maybe like this client in particular they have a blog post that on the blog uses a featured image but then the blog uses a different featured image so I just created a secondary featured image while ACF and Gutenberg doesn't like that over in the sidebar so now I'm dropping that down into just another field in that block at the bottom so it's not there yet when it comes out there's going to be tweaks coming from both sides the way I look at it exactly is that just the layout that changes but the function is still the same and it just stops working because that is the worry right from what I've done because the school district site was running both ACF and Gutenberg from what I've done it seems like rhyme and reason there aren't any and sometime like I haven't seen functionality go away but I don't know if that's because my field was filled in and initiated before Gutenberg was installed it's still in the database and aside from flushing that and hoping for the best it's needless I'm not an expert in all things that ACF and Gutenberg are fighting about right now but from what I've experienced it's not there yet good questions so that concludes my presentation I'm not really good at bowling but if you're going to the after party and you want to talk I would probably prefer talking than bowling but if there's a pool table is there a pool table I think if there's a pool table that's probably where you'll find me I don't want to play you, you do math on Saturday pool is just math I mean it's locked too but it's mostly math it's math let's just you guys have been awesome thank you for making it all the way to the end of the day you you might think you won with all this ACF knowledge but I got a free breakfast today because I switched with somebody so