Build a simple faq page with Wordpress and Advanced Custom Fields

hey everyone this is Kevin Doherty with envision solutions today I'm going to show you how to build a simple FAQ page for your website or for your clients website we're going to use WordPress as our CMS of choice and we're also going to use probably one of our favorite plugins that we use on almost every project which is Dan's custom fields so you can see it right here so I'd go to advanced custom fields comm and learn more about what it can do for you essentially takes your WordPress to another level for for CMS base capabilities and taking meta fields to the next level so I highly recommend this so essentially what we want to do is use this plugin and I'm not going to give a whole lot of background on this plug-in just yet I'm going to I'm going to assume you have some basic knowledge of it maybe in another video down the line we'll get a little bit behind the hood on this plug-in and then show you some other use cases but for now you can even follow along with the same premises using just regular WordPress meta fields we want to be able to easily add a question and easily add an answer and to be able to have them neatly and automatically format the questions at the top and the answer is below and we want them to be able to be hyperlinked so why don't why don't we create our fields which is super simple right now so we're going to name our field group I fake use just something nice and descriptive and we're going to add a field now one of my favorite field types of this whole plugin now it is it is an add-on but worth the money I forget how much the add-on is but I know it's not much and it's worth its weight and gold so it's it's called the repeater add-on it does exactly what it says it allows you to and the administration to add multiples of something and to change the order and you can do it in groupings of other fields so you can even have repeaters inside of repeaters so you can get very inception like it's pretty crazy so we're going to do repeater and here's the rear the fun part comes in so we can add some subfields so usually an FAQ page is comprised of two things question and we'll give it a textarea feel type and we'll add another subfield here and the second part is an answer so for the field type on this one I'd like to use the WYSIWYG editor it just allows your administrator to be able to add you know maybe some additional formatting that might help out in the answer or an extra link sometimes giving that kind of control can can backfire and you know users can accidentally abuse the the editor and you know either add images that don't fit or extra media that aren't really necessary so I really love this option to be able to add a basic editor and even to be able to hide the upload media functionality but at least they can bold and italicize and hyperlink so that's that's nice minimum rows maximum rows we can just leave that as is the layout this is just handy for the user interface when when entering in your FAQ so we'll choose row for that and just to help it along instead of add row we'll make the label add FAQ now this is a great part of advanced custom fields as well we only want these questions or sorry these meta fields to be present on our FAQ page you know so we're going to do page is equal to FAQ so we've already created a page called FAQ now you could also set up this for a custom post type if you wanted to make a custom post type for a fake use there's nothing wrong with that and in fact might even be preferable if you wanted to easily tie in another plug-in to search it you know I think just for the sake of this example we'll just do a basic simple one for four pages there's some other options here to hide other fields on the page but we'll leave that as is and let's go ahead and click publish all right so if we go to our pages FAQ you'll see your regular content editor there and if we scroll down you'll see fa Q's ad faq so that's great so just like you would think let's click the ad FAQ button and this is our first question and I'm just going to throw in a little bit of lorem ipsum here I've snip the key command using text expander for that it's another really helpful add-on text expander and why don't we add another question here so another question and another give it a little bit of substance here and we can add any link that goes to nowhere just for the sake of it and why don't we bold guy all right very cool so why don't we go ahead and we'll update the page and another really great thing here is to be able to change the sorting order so you can see I can drag and drop the fa Q's so you can see another question is up on top here so really handy to be able to change the sorting order view all right so we'll update that again now if we view the page you can see we have nothing so that's only because our template our our WordPress template hasn't accounted for those extra fields that we've just created so that's what we're going to do next so why don't we switch over to our favorite text editor all right so here's our page and we have the slug of our page FAQ here so it inherits that and if you want to figure out how to call in that information you can always go to a CFS page and website and they have a lot of great code example so you can see here here's a code example of how to get our repeater field and the subfields comprised within it so what we want to do is we want to call in the questions we want the questions to be links and we also want to assign targeted anchor IDs to the H rafts of those links and those are going to lead lead to the questions below them if the questions and the answers below them so first things first what we're going to do is we're going to check to see if the frequently asked questions I field grouping exist you now inside of there we're going to do an ordered list that way we can automatically number our questions so I'm also going to use another cool plugin that I'm using on sublime so you might wonder how some of this stuff is Auto expanding its called Emmet it allows for easy tag expansion using tab triggering so you know for example I want to add an ordered list with the class of questions so all I have to do is oh L dot questions and there we go pretty cool all right so we're also going to create a loop within our sub field you so here we have our loop that's going through our subfields of frequently asked questions so what we want to do is create a list item and we want the list item to be an anchor to have an anchor inside of it and for now let's just use a pound symbol I'll get back to how we're going to assign a unique ID to target just in a little bit but for now let's bring in Elise the question so we're going to use the function the subfield and we named our field question which is not to be confused with questions that's a little habit I like to do I whenever use a repeater I like the the main field to be plural whereas if it shares a common descriptive name for the subfield that's when I use a singular alright very cool so that in theory should be calling all of our questions and a list item right there so when we go ahead and save the page and here's a FAQ page and why don't we refresh there we go this is our first question this is our second question so that's great so what we want to do next is why don't we do that all over again but we'll bring in the answers and maybe we'll format the questions below a little bit differently all right so now what we can do is we can essentially just copy and paste the exact same syntax right here so let's scroll down and instead of the ordered list having a question why don't we just call it answers and actually that class should probably call questions that should be pluralized as well alright so answers list item again so that's that's no problem whether you want it to be a list item or a div you know I I'm inclined to call to leave it as a list item you know I would say in this case why don't we wrap it with an h3 tag all right so we'll just make it a little bit more readable and then and what we want to do here is put the answer all right now I didn't wrap the answer and P tags or any other tags just because we are using a WYSIWYG editor and that's automatically going to add some paragraph tags for us so that that takes care of that now one other thing that you'll find very common on a lot of faq templates is a back to top so at the top of our page we already do have an anchor that I've put there previously in my website that's targeting an anchor with the ID of top and then we'll just go ahead and back to alright very cool so why don't we go ahead and save that and refresh our page pretty cool and actually I think that anchor link is a little redundant I don't really think we want that to be an anchor link so why don't we go ahead and get rid of that you you there you go so the one thing we aren't doing right now is targeting these anchor lengths right so the back to top is working just I've already put that that top anchor up on the page and my header template but what we want to do is to be able to easily click on a question and have it go to that answer further down on our page so it's actually pretty simple and it's a pretty common technique that a lot of developers use what we're going to do is we're going to before we start our loop we're going to declare a variable and we're going to use it as a counter and as we loop through the variable it's going to iterate +1 every time and that's going to give us a you a unique number for every question combination right above the loop so we'll open up some PHP tags and we'll create a variable called I and we'll make it equal to 1 all right so just like that and then what we're going to do is we're going to keep the pound symbol there for ID and we can even prefix it with let's say Q for question and we'll give it a dash and we're going to echo that variable we just created and we're going to append plus plus and that's going to add 1 to our integer of what the current variable is so as it loops through it's going to go from 1 to 2 2 to 3 and so on until there's nothing less left to loop through and let's just close out our PHP and why don't we just save that for now and we'll go back and refresh and we'll see if we can see a difference okay so if you look in this the status bar at the bottom you can see it's going from Q 1 to Q - 2 pretty cool right so now we essentially want to do the exact same thing we can just copy this then we can copy this Q equals okay cool and why don't we sign it to the title so we'll create an ID equals q - and then the the variable number so we'll refresh that there we go very cool and just the show that the sorting is working why don't we go back to the admit and we'll bring up another question which is the second question to you the top and we'll just save our page and then when we refresh there we go another question super easy you can also download the custom field templates I'll go ahead and export them for you in case you guys want to easily import them into your WordPress so that's how you create a very basic custom FAQ template page

Channel: NVISION

Views: 46,394

Keywords: wordpress, faq, advanced custom fields, acf, web development, WordPress (Software)

Id: vrAcZTEhVzo

Length: 15min 49sec (949 seconds)

Published: Fri Jan 10 2014