Customizing WordPress #6 – Introduction to the functions template 5:05
LevelUpTuts
Published on Mar 18, 2014
The 6th video in the Customizing WordPress tutorial series. Here we explain the basics of the WordPress functions.php template
functions.php is where you add a lot of functionality to your theme and this video is just the introduction to functions.php.
You don’t necessarily add all of your custom functions to your theme. The function might better go into a plugin. It just depends.
What can you do with a function? You can enque scripts with it so you can add javascript or css to your site. You can register new widget areas. You can create new image styles that you can then use in your site like predefined image sizes. You can create custom post types.
Here’s a look at the start of the 2017 Theme’s function.php:
The functions.php file is going to be run when WordPress is loading.
So there are a whole bunch of functions being loaded and run in this file.
We’re going to create a functions.php file and place it in our child theme directory (folder).
3:00: And on the first line we will write <?
[Take a minute to look through the whole functions.php of your theme.]
When we look at the the php file we see a bunch of functions.
3:45: And we have our widget area functions.
4:00: And basically we see a lot of functions being run here in this file and these are all doing different things to extend the functionality of our site.
So go through the file and read the comments even if you don’t understand all the functions. You’ll learn a lot just reading the comments.
4:10: So now go back to the functions.php that we created in our child theme. And remember you have to open your php with <?php and you always have to close it with ?>.
4:45: In the next video we’ll start just where we left off here. We’re going to be writing our very first function and writing our very first hook. And we’re going to be enquing a script.
______________________________________________________________
Customizing WordPress #7 – Adding A JavaScript File Part 1
LevelUpTuts
Published on Mar 18, 2014
The 7th video in the Customizing WordPress tutorial series. Here we write and troubleshoot our first function in our functions.php template and show you how to add a JavaScript file to your theme.
Now we’re going to continue where we left off on #6.
0:10: In this video we’ll write our first function [for our child functions.php], we’re going to be writing our first hook and we’re going to be enquing a script.
0:20: So first we’re going to enque a script. Enquing a script is basically adding some javascript to be loaded dynamically into our site.
0:35: So the first thing we need to do is write a function. And here’s our function
So we’ve defined our function and the script. And so now we create ‘extra js’ by creating a folder ‘js’ in our child theme. And now we have a folder for our javascript.
So we’re going to create a new file in our ‘js’ folder. And we’re going to call it ‘extra.js’. And here is the file:
All this file is going to do, is when it loads it is going to send an alert.
5:00: So now we need to give it that path:
We’ve called the extra js and we’ve given it the path whidch is ‘get_template_directory_url ( ) tells us to get the child theme functions.php and the . [dot or period] tells us to add what’s after the dot to the path which is ‘/js/extra.js’:
6:20: In the next video we are going to add a hook so that we can run this function. And then we’re going to be using the codex, the WordPress Codex, to find out what function we should be using and how to correctly spell that function and what exactly it does.
In codex.wordpress.org we can look up enqueue_script to see what it does.
______________________________________________________________
Customizing WordPress #8 – Adding A JavaScript File Part 2 6:06
LevelUpTuts
Published on Mar 18, 2014
The 8th video in the Customizing WordPress tutorial series. Here we troubleshoot our function, using the WordPress Codex, and write a hook to run our function.
In this video we’re going to be adding a hook, fixing a typo and learning to use the WordPress Codex to look up a new function.
So next we’re going to add a hook
From WPBeginner:
In WordPress theme and development, Hooks are functions that can be applied to an Action or a Filter in WordPress. Actions and Filters in WordPress are functions that can be modified by theme and plugin developers to change the default WordPress functionality
So add_action ( ‘ ‘ ) is a function that is going to hook into another function.
Now remember that the extra js file is just going to say “Yo” when we refreshed the page after we’ve finished all the stuff–hook, etc.
2:00 But when we refresh the page, it doesn’t work. No “Yo” visible. The reason is because of a typo. There is an error in the add_action function ‘wp_enqueue_script’ -the hook function should actually be ‘wp_enqueue_scripts’–line 4 is correct but line 7 isn’t
2:30: And there is another typo on line 4–it should be ‘get_template_directory_uri ()’ not _url. So we have:
2:45 – So we save the above and we refresh our page and still no alert “Yo”. So now the author goes over how to troubleshoot.
So we check out the source code to find out what’s not working.
So we look for extra.js file in the source code.
[Here is how we check and edit the source code in WordPress: VIDEO: How to Find Source Code in WordPress and see also How to Edit Source Code and Gain Full Control Over Your WordPress Site from WP Buffs.]
And in his example he finds the file but it is in the the 2014 theme not in the child 2014 theme and so it doesn’t work.
Tip: With the latest versions of Chrome, pressing the F12 key or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.
The search box for elements on the web page is at the left hand bottom of the interactive developer tool.
Now he shows us how we trouble shoot the problem.
So first google get_template_directory_uri () and the first hit is going to be the WordPress Codex.
We’re going to get used to running the Codex a lot.
And here is the problem according to the Codex: the above looks in the main theme, not in the child theme:
Retrieves the absolute path to the directory of the current theme.
Note: Does not contain a trailing slash.
Returns an absolute server path (eg: /home/user/public_html/wp-content/themes/my_theme), not a URI.
In the case a child theme is being used, the absolute path to the parent theme directory will be returned. Use get_stylesheet_directory() to get the absolute path to the child theme directory.
To retrieve the URI of the stylesheet directory use get_stylesheet_directory_uri() instead.
4:00 So the above is not the right function.
Instead we use as we find out from the Codex that the correct f:
