How to use jQuery in WordPress – 1 jQuery UI Accordion

go to transcript

In this video I will teach you how to add a jQuery Accordion to WordPress in 4 easy steps. I will show you how to enqueue scripts and customize your jQuery UI Accordion

if you are the content owner and want to remove your content? fill this form
hello everybody so in today’s tutorial I’m gonna teach you how to create a jQuery UI accordion once you’re done you’re gonna be able to have a recording that looks something like this okay and it’s gonna be done in four easy steps so let’s get to it because showing you the end product doesn’t really help you much so I’m gonna go into the background right now and rip out all the code and guide you through it step-by-step so here I’ve ripped out all the code and now we’re gonna go from scratch showing you how to create a JQ accordion so the first thing we need to do is go to our search engines and look for a page called jQuery UI comm slash accordion so this is the jQuery UI home page or page and they show you a sample here for the accordion and what it looks like and they even show you some source code so we’re gonna go into into here where it says vu source code and click on that and it’s going to show us the source code so what we need to do is copy the code right for here starting at this div copy it all the way to the bottom where the div ends just copy that and then we’re gonna go back into our WordPress editor and in this case we’re working with a post page but you can also do this just on a regular page now make sure you’re in your text editor here in the text cat if you’re in visual if you do it here on this tab visual is not gonna work for you so click on the text tab and paste the code that we just copied into there okay now let’s update that and let’s go into our post now we can see that the code that the text is there but nothing really is happening if we click here nothing happens okay so if there the sections are there but nothing’s happening what we want to have to happen is each one of these sections that is enclosed in header three tags once you click on them we want the div that’s directly below it to collapse so you can create as many of these as you want and you can label them whatever you want but the main thing is that whatever is on the h3 tags and the divs that are below it those are the ones that are associated together so if you click on this header it’ll collapse the dip that is directly below it okay so now that we have that UI code copy and on to our post page what we need to do now is go into our text editor I use sublime because you can use whatever one you want and what we need to do is go into our our themes folder in this case I’m using trestle and we need to create a folder for our jQuery code so let’s create that and in this case we’re gonna name that the folder j/s okay and once that folder is created we’re gonna create a file inside there and we’re gonna call that file mm-hmm accordion dot j/s okay so we’re gonna stake that and once we have that according j/s file created we want to put some code in there the codes gonna be something like this and basically what this is telling us is that we want the according to be collapsible we want to add in let me just slow down and there’s in some accordions what you’ll see is that the first I call that according but item you can call it whatever you want that the first section is open and the ones falling it are closed I like all of my sections to be closed by default so I put it to false but if you wanted the first one to be open just put this to true and then I put this thing that’s called height style what that means is that no matter how much or how little content you have in each section of your accordion the height of the accordion section will automatically adjust to cover the content that’s basically what that means so mmm that’s helpful to have there so once you have this code in there just go ahead and save it okay now we have this code here but WordPress won’t use it until we do something cut that is called an cueing the script okay so let’s go ahead and do that now now if you were doing this in a regular website and outside of WordPress and you would just put the your your script inside the header tags but we we don’t do that within WordPress because it could cause conflicts that’s why we have to anchor the script so we go into our functions PHP file and uncute by creating a function and then hooking it on to the script so basically this function is telling us is calling on that accordion job jQuery file that we created and basically what’s gonna happen is when other scripts from the page load this one is hooked on to it so this one will load as well okay so let’s save that and just by putting this on this these two pieces of code from the accordion J’s file and then also this code into the functions PHP file we should have something working already so let’s click on this and refresh it to see what we have so far so you can already see that all the accordion sections are there and they’re all fully collapsed like the way we want them and if we were to click on the header they would expand and collapse so here we go so that’s already working but and if you like it like that then that’s fine right but we want to put some on some styling to this so that it looks a little prettier so let’s go ahead and do that so what we want to do is go back to our at once again to our to our jQuery page and we want to look for an our page that’s called theme water so we go to a page jQuery that UI com slash Steamroller and here what you get the opportunity to do is to customize different pre-formatted themes so if we’re going to gallery it by clicking this tab right here you’ll see a whole bunch of different themes that aren’t available for you and so if we were to click on this one for example you can see that they already have predefined accordions predefined tabs everything that you need so if this is the type of according you like you can go ahead and just download it as it is but if you wanted to change the colors for example to match design of your website you would just click on edit and and then you go ahead make changes as you want for this purpose I’m gonna just download it as it is so we would just click on the download button right here and then it’s gonna bring it to this page now they are gonna try to put a whole bunch of things that we don’t necessarily need so if that’s work we don’t need that for this purpose in widgets as far as widgets go we just want to keep the according widget and then as far as interactions we could get rid of all of those and then from the UI course section take all these two check marks out of the mouse in the position we don’t need those the Corinth oh and this widget one we have to keep those so once you’ve done that go ahead and click on download and save to your desktop I’ve already saved mine so I’m not gonna say that again but you go ahead and save yours and then once what we’re gonna have is we’re gonna have something like this one here the JQ UI that is zipped on your desktop all you have to do is unzip it and then you’ll have a folder something like this and just keep in mind where this folder is because we’re gonna need it in a little while so what we’re gonna do now is go back into our text editor and inside our theme we’re gonna create a new folder and call it CSS I like to keep my CSS styling for the accordion separate from my regular style that CSS it just makes it easier to manipulate later for me but if you really wanted to put it in your style CSS you could do that you would just have to change the decoding a little bit but for this purpose just create a folder called stuff CSS okay so once you’ve created that folder what we want to do is now go to our desktop open this folder that we unzipped and inside you’ll have this a folder let’s go back up one level a folder called JQ jQuery UI 1.11 for go ahead and copy that okay and then you what you want to do is you want to navigate to where your theme is okay okay theme trussell and go into that CSS folder and paste that folder that we just copied into that okay so that’s pasted so now we can go back into our editor and you can see that it’s there so the CSS styling is there but we have to tell WordPress to load that CSS stylesheet so the way that we do that is we have to uncute our stylesheet and in order to our QR stylesheet what we have to do is we have to put a little bit of code in our functions.php file so just go ahead into your functions.php file and put this code in there so let me just move this over so you can see it a little bit better so what this is basically telling it to uncute this file which is located under CSS jQuery UI subfolder jQuery UI 1.11 for custom and the fact that file is jQuery UI dot CSS and it’s gonna basically load that stylesheet so let’s go ahead and save that one thing you’ll notice is if we were to open this CSS folder and then the jQuery folder in within it you’ll see a whole bunch of other folders that were included with when we downloaded that jQuery stylesheet now we can go ahead and delete all these other ones the only one we want to keep this that jQuery UI CSS because that’s the file we’re calling for here and that’s what contains our style sheet so we can get rid of the other ones with they’re not necessary if you want it to leave them there I mean it’s not gonna do any harm but I generally don’t want to keep anything that I don’t need so I usually get rid of them delete them all delete everything even this external folder you can delete that the only two that you really need to keep is the folder called images in jQuery UI that CSS okay so we have to keep those now if we were to go to our webpage now and refresh it we have our accordion happening and there it is now you have your own jQuery UI accordion made from scratch in four easy steps and if you wanted more detailed instructions or if you wanted to have the code available free of a copy and paste just go ahead and go to my website called WP basics org and code will be there for you also if you liked this video don’t forget to Like don’t forget to subscribe and if you do I’ll be doing a lot of you more other tutorials on jQuery so as soon as you subscribe you’ll get notification once these new tutorials are up well thank you for watching my video and have a good day bye

watch on youtube

Check Also

How To Install WordPress In Localhost XAMPP – Learn Step By Step WordPress Bangla Tutorial

go to transcript if you are the content owner and want to remove your content? …

πŸš€ How to Preload Links in WordPress for Faster Website Loading Speeds and Performance For Free?

go to transcript if you are the content owner and want to remove your content? …

How to Customize Header Layout in Astra WordPress Theme

go to transcript if you are the content owner and want to remove your content? …

Leave a Reply

Your email address will not be published. Required fields are marked *