Wiring up functions.php and CSS the right way

Thanks for waiting. The style.css we’ve been building up all this time finally gets wired into the page. The tool for the job is the theme’s third leading player—functions.php. If templates are the files that build “the page’s look,” functions.php is the file where you write the settings and features for the whole theme.

What is functions.php

When you place a functions.php in your theme folder, WordPress loads this file before displaying any page. This is where you write “this theme runs with these settings.” Let’s create it now. Your folder will look like this.

shimaenagado/
├── 404.php
├── category.php
├── footer.php
├── front-page.php
├── functions.php   ← the one we're making now
├── header.php
├── home.php
├── index.php
├── page.php
├── single.php
└── style.css

Unlike templates, functions.php is not a place to write HTML. Its contents are PHP only. The opening lines look like this.

<?php
// Write this theme's settings and features here

Loading CSS the right way: wp_enqueue_style

In the HTML course, we hand-wrote <link rel="stylesheet"> in the head. In WordPress, we take the approach of asking WordPress to “please load this CSS.”

<?php

// Load CSS and JS
function shimaenagado_enqueue() {
  wp_enqueue_style(
    'shimaenagado-style',       // name (a name unique within the site)
    get_stylesheet_uri()        // the location of style.css
  );
}
add_action('wp_enqueue_scripts', 'shimaenagado_enqueue');

Here’s how to read it.

1. Define a function of your own called shimaenagado_enqueue (its contents are “please load style.css”)
2. With add_action(...), reserve with WordPress that “when the time comes to load CSS, please call this function”

Save, reload the front end, and—all the CSS you’ve been building up appears at once. The hero turns light blue, the news lines up neatly, and the site suddenly takes on the face of the “finished image.”

Theme support: automating the title tag

We also pay off the setup from not writing <title> in header.php right here.

// Enable theme features
function shimaenagado_setup() {
  add_theme_support('title-tag');        // leave <title> to WordPress
  add_theme_support('post-thumbnails');  // enable featured images
}
add_action('after_setup_theme', 'shimaenagado_setup');

When you declare add_theme_support('title-tag'), WordPress automatically generates an appropriate <title> for each page (article name | site name, and so on) and slots it in through the wp_head() hole. The foundation for SEO is set with this one line.

post-thumbnails is the switch for an article’s featured image (thumbnail) feature. Enable it and a “Featured image” panel appears in the post editing screen, and on the template side you can display it with the_post_thumbnail().

Summary of this lesson

1. functions.php is the theme’s settings file. It’s loaded before every page. PHP only, and write no closing tag
2. Wire CSS with the request approach of wp_enqueue_style plus add_action('wp_enqueue_scripts', …)—don’t use a hand-written link
3. add_theme_support('title-tag') automates <title>, and 'post-thumbnails' unlocks featured images