Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have the theme info setup, it's time to start configuring the baseline settings and functions for our theme. Most of this work is done from the functions.php file, which, as the name suggests, contains the custom functions that control the theme. The default functions.php file for underscores is well built out and has most of the elements we want either activated or waiting to be activated. All we have to do right now is go in and make the changes we want.
So let me walk you through this file as I make changes, starting at the top with this value called content_width. By setting the content width, you're telling WordPress that if someone places content within the content area of a post or a page, it can never be wider than this amount. So if they grab a YouTube video or an image from Flickr, or something like that, this value will contain it within that set width. To figure out exactly what that width is, I have to go check out my design. So in my design I can measure the width of my contents, and here you see it's 600 pixels wide.
So then I can go and change this to 600 pixels, and now, nothing will ever be above 600 pixels when it's inside the contents. Scrolling down, I have the my_simone_setup function and this is the main function of the theme. Now you'll notice that the my_simone_setup function is wrapped in a conditional statement that says, if not function exists, my_ simone_setup, then run the function. This is really important and this is what's called a pluggable function. Basically, if someone wants to make a child theme based on this theme, they can create a new function.php file and create a new function within that function.php file called my_simone_setup, and that function will automatically override R function.
Simply because when you use a child theme, the child theme functions.php file is called first and then the parent theme function.php file is called. So if you want people to be able to make child themes and you want them to be able to disable some of your functions, you simply wrap them in this type of conditional statement and make them pluggable. Scrolling down, you'll see this is where most of our features are activated. Here you have the text domain feature, which allows translation. We also have theme support for automatic feed links so that default polls and comments, RSS feeds link to the head of the page.
And then we have a commented out feature. Here we can enable support for post-thumbnails, or featured images if you want to. So here I'm going to remove the comment, so that post-thumbnails is activated, and later in the course, we'll define the sizes of our featured images and have them into our theme. Next, we have registered nav menus, which is where you define the custom menus for the theme, and as you can see, we currently have one called Primary Menu. Then we have theme support for post formats, and here you see the theme currently has support for asides, images, videos, quotes and links.
So I'm going to remove all but aside here. If you want to you can leave the ones that are there or you can add more if you like, but I'm not a big fan of post formats, I'm just going to leave aside. Then we have the function that allows the user to define a custom background color. This is a core function in WordPress, but it's one that I don't really like, so I'm actually going to deactivate it. And here I'm going to show you a little trick in NetBeans. If you want to comment out more than one line, you can simply highlight it, and then hit control or command and forward slash, and the application will automatically comment out all of those lines for you, so you don't have to do them line by line.
Scrolling down I have support for HTML5 markup. Now this is cutting edge and like I said, when you're working with underscores you have the most recent and most up to date web standards in mind. So here we have HTML5 support for comment list, search-form, content-form, and gallery and I'm going to add one more, so I'll add in caption so that my captions and my images are also wrapped in HTML5 tags. And as HTML5 progresses, I'm sure there will be more features that will appear here as well.
And then at the bottom of functions.php we have a list of required template files. And here you see that we have a call to include template tags, include extra, include customizer, and include jetpack, which are older files you will find under the include folder. There is also an optional one here. The top one, which implements to Custom Header feature. I want the Custom Header feature, because it allows to use it at a Custom Header image into the site. So I'm going to activate this feature.
Now before I save, let me just show you what WordPress looked like before I made all of these changes. So I'm going to swap back to WordPress, here I am in admin, and you'll remember I made a lot of changes to the appearance of the site. So right now you see when I hover over Appearance, we have Themes, Customize, Widgets, Menu, Background, and Editor. But you'll remember I've removed Background and then I added the Custom Header feature instead. So if I go and save functions.php now with my changes, and then go and reload the admin panel here and hover over Appearance again, you'll see in place of Background, I now have Header.
This is just one example of the different things that we changed from functions.php.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103158 Viewers
58 Video lessons · 55703 Viewers
61 Video lessons · 89845 Viewers
56 Video lessons · 105006 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.