Categories
WordPress Templates

WordPress Bare Bones Theming Exercise: functions.php

Introduction to the Functions File

A very important file in any WordPress theme is functions.php. In it, we typically do things like the following:

  • enable theme feature support, like feature images, custom logos, block editor styles, etc
  • enable certain gutenberg block features such as wide alignment or full alignment, etc
  • notify (register) WordPress about how many menus we want to allow the theme to output
  • make WordPress create page titles dynamically
  • load stylesheets
  • load hosted fonts
  • load javascripts
  • notify (registar) WordPress about sidebars (widget areas) we want the theme to have
  • modify / filter typical output such as “read more” links, or change excerpt lengths, etc.
  • set maximum widths for any content the user will input (such as images or embedded video)
  • add image sizes beyond the standard ones
  • enable custom backgrounds in the theme
  • enable post formats
  • etc, etc.

In many ways, functions.php is a like a plugin for your theme.

Here is a “starter” functions.php file for you to use. Make a file called functions.php, saved in the root level of your theme, and then copy the following code into it.

Then where my code has the text THEMENAME, change it to the name of your theme.

<?php
 
if ( ! function_exists( 'THEMENAME_setup' ) ) :
 
   function THEMENAME_setup() {
     add_theme_support( 'automatic-feed-links' );
     add_theme_support( 'title-tag' );
   }
 
endif;
 
add_action('after_setup_theme', 'THEMENAME_setup');
 
function THEMENAME_scripts_styles(){
   wp_enqueue_style('THEMENAME_style', get_stylesheet_uri());
}
 
add_action('wp_enqueue_scripts', 'THEMENAME_scripts_styles');

We are hear dynamically loading our stylesheet. But since we have no styles so far, it’s hard to see a result.

To change that, add the responsive images code to your stylesheet:

img {
  max-width: 100%;
  height: auto;
}

For now, reload your site. Resize the page.

You will see no change: the images don’t yet scale.

The next section will explain why.

Introduction to Action Hooks

The problem is that we need to add something known as a hook to the header and footer of our site.

Open header.php. Just before the closing of the HEAD tag, add the following:

<?php wp_head(); ?>

Open footer.php. Just before the closing of the BODY tag, add the following:

<?php wp_footer(); ?>

What is a Hook? What Does it Do?

What these “hooks” do is allow functions.php (and plugins, too) to write into the page.

Now reload your page and look at the title tag.

If the title of your pages does not show the NAME of your site, make sure that there is no TITLE tag line in the header.php file.

The line add_theme_support(‘title-tag’) gets WordPress to dynamically create all the titles on the site.

If you click on links and go to other parts of the site, the title will dynamically reflect the new location.

Enqueueing

In the second function of functions.php, we here tell WordPress to load (‘enqueue’) the stylesheet.

If we reload the page after adding the wp_head action hook, your images should now scale to their container sizes. This shows that your stylesheet is now correctly loading.

If the images don’t scale, make sure that functions.php, header.php, and index.php are all saved.

In fact, if you now inspect the page, and look into the HEAD, you will see that WordPress has written the stylesheet link there, right where you placed the wp_head hook.

Your Next Task

Style the entire site.

Make it responsive and beautiful.

When You’re Done

If this is a lab exercise on campus, show me or our Instructional Assistant your work when you’re done.

If this is for an online course, please do the following:

  • copy your theme folder (not the site folder) to the desktop
  • rename it bare-bones-firstname-lastname (no spaces)
  • edit style.css in this copied theme. Make these changes:
    Theme Name: Your First Name
    Author: Your First and Last Name
    This is important: it is what will allow me to know your work is yours when I look at it later. You don’t need to change the theme name in functions.php after this change, in case you’re wondering.
  • If this is for a Langara online class, hand the theme in to our course Handin Materials folder on BrightSpace
  • If this is for an Emily Carr online class, hand in the theme to our Moodle course shell.
  • NOTE: do not hand in a duplicator installer / archive package. Just the theme, modified as explained in this section.

Resources