7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 The functions.php File

Hey, welcome back. With our roadmap complete, let's move on to writing the first file in our list, which is the functions.php. So I'm gonna open this. I'm gonna start with some php tags and some comments. And I'm just gonna put the file name here to start with, and then a small description. The theme's functions and definitions. We start with the very first thing, number one, we're just gonna number these, which will be about defining some constants. Now these constants will be used throughout the theme. And the way to do that is to start with the define function, and we're gonna start with the actual constant name. First one will be 'THEMEROOT' and then the value, and the value we want to refer to the very basic path to our theme, which is this one right here. So we can actually get the location of our style.css file. In here, we can say get_stylesheet_directory_uri. And this is also a function that will return the path to style.css. The next constant will be for the images folder. So we're gonna say define( 'IMAGES' and it will go to THEMEROOT.'/images' ). So, basically we're taking the THEMEROOT constant and appending the /images folder to it. The next constant will be for our scripts folder. So 'SCRIPTS' will be THEMEROOT.'/js' ). So that's going to be our js folder. And finally we're going to define the fourth constant, which will be for our framework. Now the framework will be a folder in which we'll keep the widgets at first, but it can be expanded to include plugins, any kind of short codes you might use. So it's a good place to start. And for this, I'm gonna show you another way to get to this folder. We're gonna say get_template_directory, which is a function, and we're gonna append the '/framework' folder. Yeah, so let's go ahead and create these folders in here. I'm gonna say images, I'm gonna say js, and I'm gonna say framework. Next up, we're gonna load our framework, which will eventually include the widgets. So I'm gonna put number 2 here, load the framework. I'm just gonna say require_once( FRAMEWORK '/init.php ). So this will load the init.php file from the framework folder. So let's go ahead and create that, framework/init.php. Let's do a php tag, and then init.php. And we're gonna work on this at the very end when we're gonna add the widgets. Okay, next up we're starting to write some WordPress specific functions. So number 3 will be about setting up the content width, and this is useful for different themes. When you're uploading an image, WordPress will automatically create a version of that image based on the width you specify. So if you have a blog page in which the content has a maximum width of 800 pixels, for example, this is the width you gotta put here. So I'm gonna say if the content width variable isn't set, so I'm gonna say not isset( $content_width ). Then we're gonna say $content_width = 800. And this will change from theme to theme. If you have theme that has a very large area for displaying a post, then you can change that to a 1,000, 1,200, whatever you need basically. Okay, now coming up, this is very, very important. It's a function that will set up theme defaults and will register the various features of the theme. So this is number 4, and then we're gonna say it's gonna be a function called alpha setup. And the proper way to do this when creating a WordPress theme is to ensure that this function doesn't exist yet, because if you're using a child theme, then you might have a conflicting function. So that's not good, so we start with this. If not function_exists( and we're gonna put in the function name here which is 'alpha_setup' ). Then we're gonna declare the function, so function alpha_setup(). Okay, and basically we're saying if the alpha_setup function doesn't exist, we're gonna declare it here. And inside we're gonna write all sorts of things. But this function needs to be executed at a specific time, and that time is when a certain WordPress function executes. So we're going to add a hook. I'm going to show you what I mean in just a little bit. We're going to say add_action( 'after_theme_setup', 'alpha_setup' ), which is the name of our function. So how exactly does this work? Well, after_theme_setup here is a WordPress function. It executes pretty early when you're loading a WordPress theme. And by adding a hook, which is done via this function, the add_action, you're basically telling when you execute this function, also execute this function which is our own custom function. So for example, the first one is to make the theme available for translation. So we're gonna say make the theme available for translation. And we're gonna start with a variable called $lang_dir, which is language directory basically. We're gonna use the THEMEROOT constant, and we're going to append '/languages'. So that means all the files necessary for translation will be placed in the languages folder. And then we're gonna say load_theme_textdomain 'alpha' ), which, if you remember from the style.css, this is what we wrote here. So alpha is our text domain, and then $lang_dir. Now this may not make any sense right now, but it will later on. What we're saying here basically is here's the directory in which you can find the translation files. And then we are gonna load those files so that our theme will appear translated. Okay, next up is post formats. Post formats is a feature of WordPress which allows you to create different post types. You can create a post that's a quote or a video or an audio and so on. And there are several types, but in our framework we're only gonna support a few, just to demonstrate. So we're gonna say add_theme_support. Now this supports two arguments. The first one is 'post-formats'. So what are we adding support for? And then the second one will be an array of all the post-formats supported. So I'm gonna put a comma here, and in here I'm just gonna say an array with 'gallery', 'link', 'image', 'quote', 'video', and 'audio'. So what we're saying here is add_theme_support for post-formats with these 6 formats, and save. Next we're gonna add support for automatic feed links, and this will basically add RSS feed links to the head portion of your pages for posts and comments. And this is very simple. You just say add_theme_support( 'automatic-feed-links' ). Next you're gonna add support for post thumbnails. Add_theme_support( 'post-thumbnails' ). Now post-thumbnails refers to that featured image you can attach to a post. Okay, now the last thing we gotta do in this function is to register the nav menus. So we're gonna say Register nav menus. Register_nav_menus, this is the function that we need, and we pass in an array of values. So we're going to say array(, and then each item will be set up like this. A slug, which is 'main-menu', it's like an ID, and then the title of that menu, so 'Main Menu'. And this is how this little bit will appear in the WordPress back-end, but this is in english right now. What if the theme needs to be translated? Well, we're gonna mark this string for translation. So we're going to use this function, __ and then the first parameter will be this string and the second one will be the text domain, 'alpha', which is used right here, okay? So save this and we don't need that semicolon there. And that's it basically for this function and, indeed, for this lesson actually, because currently this is all we've got to do the functions.php file. There will be more to come, but we will add them as we go along, as we write the other files. Now let's see, next on the list is the index.php file. So I'm gonna write that in the next lesson.

Back to the top