Wordpress design with Underscores starter theme: work with functions.php

In WordPress, the functions and functionalities of a theme are defined in a file called functions.php. Here you'll find the configuration settings for everything from HTML5 support to sidesbars and menus, to enqueuing of styles, and JavaScripts. Throughout the course, we'll be making changes to and adding content in the functions.php file. So it's important to know what's here out of the box. Whenever you open a core file in underscores, you'll notice there are a lot of comments like the ones you see here in grey. This is because underscores is a starter theme, and as a starter theme it gives you clear instructions on what to do and how to use the different components that are packaged inside the theme itself.

That means, any times you come across something new in underscores and you're wondering why it's like that or why it was done, there's usually an explanation in the form of a comment that tells you either what file you're currently looking at, or what this particular function is doing. And as you start adding new functions and functionalities to your own theme, you should also add in equivalent comments to explain what is going on for future users. Off the top, we start with a large function called popperscores_setup. This is the core setup function that adds theme support for all the different elements that we're going to use in this theme.

And any time you create a new WordPress theme, you always create some form of setup function that triggers whenever the theme is called, and sets up all the necessary functionality. Off the top of popperscores_setup, we load the theme textdomain. I've talked about this previously, it's what allows us to translate strings within the theme. The text domain is popperscores, and any translation files would go under the languages folder inside our theme. Next we add theme support for automatic feedlings, and the title-tag so WordPress handles that all for us, and we don't have to worry about it.

Then we have theme support for post-thumbnails, also known as featured images. So if you want to see the featured image functionality on the back-end of WordPress, you need to make sure you have that theme support added. We also have register_nav_menus, which is an array of different menus that are available on the WordPress back-end. Right now, we just have one, with the machine name primary, and the human-readable name Primary Menu. If you want to add additional menus, so that means additional locations where you can place menus within your theme, then you just copy this line here, paste it in to the array, and then add a new name, add a new human-readable name, and you have additional menus on the back-end of WordPress.

We'll work with both post-thumbnails and menus later on in the course, so I'm not going to dwell on this anymore here. By default WordPress outputs mainly HTML4 HTML content to ensure there is backwards compatibility for older browsers. However, you can enable HTML5 support for select elements, including the search forum, comment forum, comment lists, image galleries, and image captions if you want to. And in underscores, all of these are activated by default. That means anytime you had an image caption, the image will be wrapped inside a figure tag, and the caption is contained within a fig caption.

If you want to change this back to the old way WordPress was doing things, then you need to remove the support for whatever element you don't want to be in HTML5. You can simply take away a line, it won't be HTML5 anymore. Add it back in, it'll pop up as HTML5. This function here hooks into core WordPress functionality, so you don't have to do anything to the rest of your theme. You simply say I want my captions in HTML5, and they will be in HTML5. Next we have support for post-formats. And here we have a list of currently supported post-formats. Aside, image, video, quote, and link.

Now, post-formats are highly contested in the WordPress community, and I'm not going to cover them in any great detail in this course. But, you have support for these five post-formats already built-in, and you can add more if you want to, or you can simply remove this entire function, if you don't want to have post-formats in your particular theme.

The last element inside popperscores_setup is adding theme support for custom background. This allows the customizer to hook into the theme and change the background color, which is currently set to a default of white. And also background image, if you want to set a default background image.

This function here tells the customizer the user can change the background image or background color if they want to. If you don't want the user to be able to do this, then you simply remove this entire function. Scrolling past popperscores_setup, we have some additional features inside functions.php.

We start off with the content_width setting. Out of the box the content_width for all content in underscores is 640 pixels. That means if you place any embeddable content, like a YouTube video, into a post or page, the max width of that content will be 640 pixels.

That also means that if our design's max width is wider than 640 pixels, then we need to go in and change this value. And we'll do so later on in the course. Directly underneath, we have the function that registers sidebars. Now these are actually widgetized areas, you don't have to place widgets in only the sidebar. Right now we have one widgetized area, it's named Sidebar, and it currently appears in the sidebar. And this function setups not only that the sidebar exists, but also gives it an id so we can call it. It also sets up the HTML that wraps around each widget.

So as we can see, currently, each widget is wrapped inside an aside, and the widget titles are wrapped inside h2s, with the class widget-title. To add style sheets and JavaScripts in WordPress themes, we use a function called wp_enqueue_scripts. It runs every time a page is displayed, and we can use this function to hook in style sheets and JavaScripts only when we need them. Currently, we have the main style sheet enqueued, along with some JavaScripts that help with navigation, and later on we'll be working to add new style sheets, and also new JavaScripts in this function.

At the very bottom of functions.php, we have a series of require statements, that require different files that come from the inc folder inside the theme. This is where we queue up the custom-header function which is contained in its own file. We also queue up template-tags, which is where we contain all the advanced functions for building for our theme. The extras file, which has extras for multisite. The customizer file that calls in all the customizer functionality. And finally, support for jetpack, in case the user is using the jetpack plugin.

Now that you've had a quick overview of functions.php, take some time and read through the entire file, read all the comments, and find out what all these pieces are and what they do. Also, try to disable some of them by simply commenting them out, and see what that does to both the back-end, and the front-end code of your site.