How to Build a WordPress Theme Part 5 – Functionality
WordPress Theme Building Course!
This article is part of the How to Build a WordPress Theme course. If you’re new to WordPress theme building, be sure to start from the beginning of the course to get a complete picture.
FULL COURSE
What we’ve done so far in this course is familiarize ourselves with not only Underscores, but also the typical behavior of a basic WordPress theme.
We know which files to use to make our HTML/PHP templates and we know how to manipulate those templates for organization, efficiency, and unique functionality.
What we need to do now is take WordPress theming to the next level. The greatest thing about using WordPress is the fact that its functionality can extend in an endless number of directions using PHP and the WordPress Codex.
In this lesson, we’re going to do just that using our functions.php file and a few others from Underscores.
Building Functionality Into WordPress Themes
Open up your functions.php file from Underscores and take a look inside.
The first thing you’ll notice is that this is not a template file. This is another WordPress-recognized file that is responsible for the setup and functionality of your theme.
View your functions.php file as a multi-purpose plugin. Why? Because that’s what it is. It’s a file filled with code that does the same things plugins can do. This means you need to wrap your head around the idea that plugins are nothing “extra” or special. They’re just code placed in a separate plugin file as opposed to the functions.php file… effectively separating them from the theme itself.
The thing you must understand about a WordPress theme is that it doesn’t do very much for you. Theme developers have to use code to setup a theme’s basic features.
So even though almost every theme you have ever used included a sidebar or some kind of widgetized area, understand that WordPress themes do not have that functionality by default. The code must be written, and that usually happens in the functions.php file.
Example – Creating Widgetized Areas
In your functions.php file, you should have an Underscores function that has a WordPress function inside of it called register_sidebar(). Find it. That function is responsible for creating widget functionality and can be found right in the WordPress Codex ready for use.
The reason this code is placed inside of your functions.php file is because as long as your theme is the active theme in your WordPress install, its functions.php file is guaranteed to be ran.
That means if your theme is built to have a widgetized area as part of the structure, functionality, and design, you can be sure that it will always be there because the code for it is in this important file.
It’s that simple.
Understanding What You’re Learning
It’s important to realize that this course is not here to teach you how to register a sidebar area. It’s not here to teach you how to create navigation menus.
All of that responsibility lies on the WordPress Codex. It’s pointless to teach that information here because this course would end up being 500 lessons long. That’s what the Codex is for.
Instead, what you need to understand is the concept behind building WordPress themes. It’s not about how to register a sidebar, because that code is given to you. It’s about where, when, and how to use that code.
If the Codex gives you the code to register a new navigation menu, where do you put it? That’s what you’re learning here.
The reason why this approach to learning makes more sense is because you will not accidentally limit yourself only to the code you already know. If I teach you how to register a navigation menu and a sidebar, you’ll start building themes with nothing but navigation menus and sidebars. Lame.
I’d rather you learn that navigation menus and sidebars are simply two of many snippets of code you can use to extend WordPress functionality. So the lesson to be learned is how do you use the code in your theme… not necessarily what code you should use.
Does that make sense?
Underscores functions.php Functionality
Getting back to Underscores, its functions.php file is the hub of its functionality.
It uses WordPress actions and filters to “hack” into core WordPress functionality and make your theme do certain things. Keeping with the previous reference, here’s an example from Underscores.
register-sidebar-wordpress
That’s the code responsible for registering Underscores’ one widgetized area.
Because WordPress was built strategically with actions (also known as hooks, in this case), it recognizes those hooks and does whatever a theme or plugin’s code tells it to do in regards to those hooks.
In this case, widgets_init is the hook used to register widgetized areas.
So in the code you see in Underscores, a custom function has been created and inside of that function lies the code for registering a widgetized area.
That custom function with widget code inside of it means nothing as-is. Instead, the custom function now has to be “hooked” into widgets_init so that WordPress will run the code, considering WordPress knows what to do with widgets_init by default.
This means that for every widgetized area you want to register in your theme, it will need to be hooked into widgets_init. This can be done in multiple places or in one custom function like so.
Like we discussed before, it’s not about knowing the code for registering a widgetized area. That’s given to you in the Codex. It’s about knowing where, when, and how to use that code.
Look through the functions file for other actions being used. Another important one is after_setup_theme. You can read about it on its Codex page. You’ll see it quite often.
Extending the functions.php File
In part 1 of this course, I stated that while basic PHP can be used to extend this file’s reach to other PHP files, it is perfectly normal to build your theme details here.
Underscores has done both. Its functions.php not only has code in it like what we discussed above, it also “calls” a few other files that have functionality written into them as well.
Remember when we discussed the file and directory structure in part 1? In the Root Directories section, we talked about the “inc” directory of the Underscores theme and how it held additional file that extended functions.php file functionality. Here’s how.
The require() function is a very basic PHP function and is not specific to WordPress. In this context, what it is essentially doing is exactly what the header, footer, and sidebar functions we learned about in part 3 of this course.
Instead of placing a ton of code inside of your functions.php file, individual groupings of code/functionality are placed in remote files for organization and then called to from the functions.php file.
As WordPress reads through the functions.php file, it will treat the code that’s required from those remote files as if it was in the functions.php files itself.
That said, you can take your theme organization even further by keeping your important functions.php file clean and moving your theme’s core functionality to remote files away from the action. If you are building a theme for distribution, this is a smart move because users are more apt to add code to their functions.php file than any other and you run less of a change that they’ll screw it up, to be honest.
Getting back to Underscores, go ahead and look through the files that its functions.php file required from the “inc” directory. You’ll see that it’s organized by what it does and it’s formatted similarly to the functions.php file.
These additional files basically inherit the importance of the functions.php file. That’s all.
Seeing the Big Picture
What you need to take away from this lesson is that WordPress functionality can be built into your theme however you see fit.
Forget about the details of how to do a specific task. Instead, concern yourself with how WordPress expects to learn about those tasks through your code structure.
The functions.php is the base for your theme functionality and can be extended to any number of other files in your theme. Likewise, all code that adds to or alters the functionality of WordPress can be used in your theme through this file and its inclusions.
In other words, Googling “how to ________ in WordPress” makes more sense than only doing what you already know how to do. With this lesson, you understand where functionality is built. So all you need to do now is find (or write, if you’re awesome like that) the code.
This article is part of the How to Build a WordPress Theme course. If you’re new to WordPress theme building, be sure to start from the beginning of the course to get a complete picture.
FULL COURSE
What we’ve done so far in this course is familiarize ourselves with not only Underscores, but also the typical behavior of a basic WordPress theme.
We know which files to use to make our HTML/PHP templates and we know how to manipulate those templates for organization, efficiency, and unique functionality.
What we need to do now is take WordPress theming to the next level. The greatest thing about using WordPress is the fact that its functionality can extend in an endless number of directions using PHP and the WordPress Codex.
In this lesson, we’re going to do just that using our functions.php file and a few others from Underscores.
Building Functionality Into WordPress Themes
Open up your functions.php file from Underscores and take a look inside.
The first thing you’ll notice is that this is not a template file. This is another WordPress-recognized file that is responsible for the setup and functionality of your theme.
View your functions.php file as a multi-purpose plugin. Why? Because that’s what it is. It’s a file filled with code that does the same things plugins can do. This means you need to wrap your head around the idea that plugins are nothing “extra” or special. They’re just code placed in a separate plugin file as opposed to the functions.php file… effectively separating them from the theme itself.
The thing you must understand about a WordPress theme is that it doesn’t do very much for you. Theme developers have to use code to setup a theme’s basic features.
So even though almost every theme you have ever used included a sidebar or some kind of widgetized area, understand that WordPress themes do not have that functionality by default. The code must be written, and that usually happens in the functions.php file.
Example – Creating Widgetized Areas
In your functions.php file, you should have an Underscores function that has a WordPress function inside of it called register_sidebar(). Find it. That function is responsible for creating widget functionality and can be found right in the WordPress Codex ready for use.
The reason this code is placed inside of your functions.php file is because as long as your theme is the active theme in your WordPress install, its functions.php file is guaranteed to be ran.
That means if your theme is built to have a widgetized area as part of the structure, functionality, and design, you can be sure that it will always be there because the code for it is in this important file.
It’s that simple.
Understanding What You’re Learning
It’s important to realize that this course is not here to teach you how to register a sidebar area. It’s not here to teach you how to create navigation menus.
All of that responsibility lies on the WordPress Codex. It’s pointless to teach that information here because this course would end up being 500 lessons long. That’s what the Codex is for.
Instead, what you need to understand is the concept behind building WordPress themes. It’s not about how to register a sidebar, because that code is given to you. It’s about where, when, and how to use that code.
If the Codex gives you the code to register a new navigation menu, where do you put it? That’s what you’re learning here.
The reason why this approach to learning makes more sense is because you will not accidentally limit yourself only to the code you already know. If I teach you how to register a navigation menu and a sidebar, you’ll start building themes with nothing but navigation menus and sidebars. Lame.
I’d rather you learn that navigation menus and sidebars are simply two of many snippets of code you can use to extend WordPress functionality. So the lesson to be learned is how do you use the code in your theme… not necessarily what code you should use.
Does that make sense?
Underscores functions.php Functionality
Getting back to Underscores, its functions.php file is the hub of its functionality.
register-sidebar-wordpress
That’s the code responsible for registering Underscores’ one widgetized area.
Because WordPress was built strategically with actions (also known as hooks, in this case), it recognizes those hooks and does whatever a theme or plugin’s code tells it to do in regards to those hooks.
In this case, widgets_init is the hook used to register widgetized areas.
So in the code you see in Underscores, a custom function has been created and inside of that function lies the code for registering a widgetized area.
That custom function with widget code inside of it means nothing as-is. Instead, the custom function now has to be “hooked” into widgets_init so that WordPress will run the code, considering WordPress knows what to do with widgets_init by default.
This means that for every widgetized area you want to register in your theme, it will need to be hooked into widgets_init. This can be done in multiple places or in one custom function like so.
Like we discussed before, it’s not about knowing the code for registering a widgetized area. That’s given to you in the Codex. It’s about knowing where, when, and how to use that code.
Look through the functions file for other actions being used. Another important one is after_setup_theme. You can read about it on its Codex page. You’ll see it quite often.
Extending the functions.php File
In part 1 of this course, I stated that while basic PHP can be used to extend this file’s reach to other PHP files, it is perfectly normal to build your theme details here.
Underscores has done both. Its functions.php not only has code in it like what we discussed above, it also “calls” a few other files that have functionality written into them as well.
Remember when we discussed the file and directory structure in part 1? In the Root Directories section, we talked about the “inc” directory of the Underscores theme and how it held additional file that extended functions.php file functionality. Here’s how.
The require() function is a very basic PHP function and is not specific to WordPress. In this context, what it is essentially doing is exactly what the header, footer, and sidebar functions we learned about in part 3 of this course.
Instead of placing a ton of code inside of your functions.php file, individual groupings of code/functionality are placed in remote files for organization and then called to from the functions.php file.
As WordPress reads through the functions.php file, it will treat the code that’s required from those remote files as if it was in the functions.php files itself.
That said, you can take your theme organization even further by keeping your important functions.php file clean and moving your theme’s core functionality to remote files away from the action. If you are building a theme for distribution, this is a smart move because users are more apt to add code to their functions.php file than any other and you run less of a change that they’ll screw it up, to be honest.
Getting back to Underscores, go ahead and look through the files that its functions.php file required from the “inc” directory. You’ll see that it’s organized by what it does and it’s formatted similarly to the functions.php file.
These additional files basically inherit the importance of the functions.php file. That’s all.
Seeing the Big Picture
What you need to take away from this lesson is that WordPress functionality can be built into your theme however you see fit.
Forget about the details of how to do a specific task. Instead, concern yourself with how WordPress expects to learn about those tasks through your code structure.
The functions.php is the base for your theme functionality and can be extended to any number of other files in your theme. Likewise, all code that adds to or alters the functionality of WordPress can be used in your theme through this file and its inclusions.
In other words, Googling “how to ________ in WordPress” makes more sense than only doing what you already know how to do. With this lesson, you understand where functionality is built. So all you need to do now is find (or write, if you’re awesome like that) the code.
Share story
0 comments: