Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A little button down here somewhere, you can click on the button and this content is hidden and then you click on the button again and it shows the content again. To make that work I am going to use some jQuery Scripts, but before I can add the script I need to add the button. In my child theme I'll open welcome.php, scroll all the way to the bottom, and here I'm simply going to add a regular button. I'll wrap it in a div with a class, call the class hide-button, and inside this div I'm going to put a regular link.
What we're doing here is adding a jQuery function. The function starts out by looking for a link that's wrapped in the class hide-button that's a link we just created down here, link wrapped in the hide-button class. It says when that link is clicked, run the following function. And the function does the following. It's finds the ID front page intro, which is the ID that wraps all the content in the welcome page. And then it says, slide toggle that front page intro slowly.
Previously in the course we looked at enqueuing and dequeuing scripts and styles, and now we're going to use that same technique, to add a new script into our sites via our child theme. Enqueuing happens in functions.php, so I'll open functions.php in my child theme, scroll all the way to the bottom, create some more space and then I'll go back to my codesnippets file and find the function I need. It's right down here. I'll copy out that function, paste it in, and now we'll take a quick look at what it's happing here.
I create a new function called ChildOfTwentyTwelve_hideMeta. This function only works if this is not an admin page, because we don't need it for the admin page. What the function does is it first registers a script we give the script the name hide. We find the script in the stylesheet directory that is the directory for the child theme under the JS folder and the file is called hide.js. That's a file we created just a bit earlier. Then we associate hide.js with the jQuery scripts that's packaged inside WordPress and finally we enqueue this hide scripts.
The last part is an add_action call that on an initiation of the theme calls ChildOfTwentyTwelve_hideMeta which is this function. When I save this and reload my page again, you'll see that now the Hide/Show function works. I can hide the content, and when I hide it the text changes to Show and then back to Hide again. The last step in this process is purely cosmetic. It looks kind of weird right now because the hide is associated with the post directly underneath it.
What I want to do is add some styling to move Hide over here and make it visually associate with the box with the welcome content. So once again I'll go back to my codesnippets scroll down and here I'll find a little bit of style code that I can copy and paste into style.css in my child theme, so I'll open style.css, scroll down to the end of where I have the style for the front page and just paste that style in. If you look closely you'll see all this is a styling that affects the button, so that the button looks different, it has some borders on it, and it has a different color, and it also floats to the right.
Adding too much fancy JS often leads to a clunky site that takes away from the content. What you have seen here in the few last movies is how we can add advanced features into our site in a very easy way and add extra functionality for our visitors. And that's kind of whole point of using a child theme, you make the experience better for your visitors.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103097 Viewers
58 Video lessons · 55548 Viewers
61 Video lessons · 89740 Viewers
56 Video lessons · 104938 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.