- View Offline
- Picking a parent theme
- Creating and activating a basic WordPress child theme
- Using the developer tools
- Changing the header image size
- Using conditional statements for customized effects
- Adding custom menus to the child theme and/or a template
- Changing the default footer content
- Adding featured images to posts
- Changing the display of meta content (such as date, author, category, etc.)
- Excluding categories from the front page with custom queries
- Including functions from external files
- Identifying and fixing common mistakes
Skill Level Intermediate
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.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.