WordPress Templates

WordPress: Film Festival Site Based on Underscores

In this exercise, we will make an Underscores-based WordPress site for the Imaginary Film Festival.

I am not going to cover every single styling component of the exercise. You can take care of those yourself. We will focus on the main templating activities instead.

First, download the sample content. This will be a Duplicator archive of the site at the start of the exercise.

Run the Duplicator installation process on your own computer.

Once you login to the new site and look in the Dashboard, you will see that I have put in about 50 posts, most of which contain a YouTube video of the trailer of a movie, as well as some text on each film from wikipedia.

There is a Contact page, and an About page, too.

In the Duplicator archive, I have supplied you with a downloaded Underscores package. It is the active theme.

Plugins Used In This Exercise

You will also likely notice that there are some additional items in the Dashboard:

  • a section for a Custom Post Type called Notices (I am not using it in this version of this exercise, but will likely add more to the exercise in the future…)
  • a Forms section
  • a Custom Fields section
  • a CPT UI section

These are created by the following plugins:

  • Custom Post Type UI
  • Ninja Forms
  • Advanced Custom Fields

The feature images for the movie posts were automatically generated by a plugin called Video Thumbnails. I highly recommend it if you have a bunch of video posts.

In theme-writing, it is very important to know what files you need to work with. For that reason, you should also install the Show Current Template plugin.

Site Features

The site will have the following features:

  • a header with two menus, one category-based and one for the ABOUT and CONTACT pages.
  • a sidebar with a Registration form and links to Social Media. Despite the name, this section will sit just above the site footer.
  • a home page with at least two custom loops. One will output the films playing this year at the festival, while the other will output a hall of fame of movies.
  • a single page template for the about and contact pages
  • a single category archives form
  • a search results page

The Main Template Files We Will Edit

  • front-page.php ( duplicated from index.php )
  • header.php
  • footer.php
  • functions.php

Template Part Files

A big part of what we are going to do here will depend on template-parts. These are called from within loops.  A template-part file generates one piece of content (in our example, an article) each time we go through the loop. If our loop has 10 posts, the template-part will be called 10 times in succession. The beauty of template parts is that you can call them from different templates. If you output a number of articles with the same (or similar) content, you could use a single template-part file for multiple loops (like in an archive or search result, for example)

SASS Underscores

We will use Underscores-generated SASS in this project. I like to simplify the structure a bit, so I don’t use all the partials that Underscores comes with. The main ones we will work with will be the following:

  • variables: typography, colors
  • typography: copy, headings
  • site: posts-and-pages, and a new partial called layout
  • navigation: links, menus

It is important to understand how Underscores SASS works. A single style.scss file imports a partial file from each of the folders inside the SASS folder. Each of these imported partials is named the same as its parent folder. I didn’t list those partials above, but they are obviously part of the partials import chain.

Fonts

Go to Google fonts and select the following typefaces:

  • Fira Sans Extra Condensed, from 300 weight and up
  • Merriweather, 400 weight and up

From the EMBED  section, get the url of the font download:

‘https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Merriweather:400,400i,700,700i,900,900i’

While designing, we will have this wide range of weights. Don’t forget at the end of the project to delete any weights you are not using. Do not make your user download fonts they do not need to.

Now open up functions.php so you can enqueue the font. About 100 lines down you will come to the ENQUEUE SCRIPTS AND STYLES section.

First paste in the URL you got from Google. It doesn’t matter where you paste it, because we will move it in a second.

Now copy and past the wp_enqueue_style line.

Each enqueue function has a “handle”: a unique name with which WordPress keeps track of it. To reduce the chance of your functions conflicting with those in plugins etc, it is a best practice to have the handles start with your theme name. The theme I am building here is called IFF, so that’s why my handles start with that prefix.

Here’s the copied line (and the original):

wp_enqueue_style( 'iff-style', get_stylesheet_uri() );
wp_enqueue_style( 'iff-style', get_stylesheet_uri() );

Change it to this:

wp_enqueue_style( 'iff-google-fonts', 'https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Merriweather:400,400i,700,700i,900,900i' );
wp_enqueue_style( 'iff-style', get_stylesheet_uri() );

In other words, in the copied line you are replacing the get_stylesheet_uri() with the URI of the google font stylesheet.

Save the file, then go to the front page of your site. Inspect it, and go to the Console. If the file is not enqueued correctly, there will be an error reported in the console.

Test Your SASS Setup

Elsewhere on this site, I have written on how to use SASS with Netbeans. Make sure that you have a new Netbeans project whose SASS is correctly watching the wp-content/themes/iff/sass/style.scss file (outputting to wp-content/themes/iff/style.css). To test that, open up style.scss (the SASS file, not the CSS file) and add a comment in the top comment block. Save it, then open up the generated style.css file to see if the comment was in fact compiled into the style.css file. If not, review the SASS & Netbeans document on this site.

Set Some Variables

Inside the variables folder, open up the _typography.scss file.

Change the $font__main variable to include merriweather as the first font, then the georgia, times, “times new roman”, serif font stack.

Add a new variable: $font__sans: “Fira Sans Extra Condensed”, “arial narrow”, helvetica, sans-serif;

Open up the _colors.scss file. Change $color__background-body to BLACK, change $color__background-site to WHITE and add a new variable: $color__background-header-footer: #eef.

Change your link colors to something less ugly that the Underscores defaults. I used the following:

$color__text-screen: #21759b;
$color__text-input: #666;
$color__text-input-focus: #111;
$color__link: black;
$color__link-visited: lighten($color__link, 20%);
$color__link-hover: red;
$color__text-main: #404040;

Now let’s use some of these variables. Open _headings.scss and set the .site-title a style to $font__sans and set its height to 6rem. Here’s all the SCSS I used on the SITE-HEADER class:

.site-title {
    margin: 0;
}

.site-title::after {
    content: "✹";
    display: block;
    font-size: 16px;
}

.site-title a {
    font-family: $font__sans;
    text-transform: uppercase;
    font-weight: bold;
    
    font-size: 2rem;
    margin-bottom: 0;
    margin: -2rem 1% 0 1%;
    color: black !important;
    line-height: 1;
    text-align: center;
    
    @media screen and (min-width: 800px) {
        font-size: 6rem;
    }
}

Notice how I have embedded the media query inside the .site-title a style? SASS lets you nest queries or descendent elements inside a style. This is very concise, but it can lead to wordy CSS if your selectors are too complex.

Save and test. If there are any errors in your code, the SASS compiler will output them to your Netbeans console (and the browser window, too).

A New SASS File

Here I want to make a new SASS file called _layout.scss. Save it in the site folder inside the sass folder. I like to handle the site’s layout in a single file rather than spread it through a bunch of SASS files. Because this is a new partial file, however, we need to import it into the _site.scss file that is inside the site file. You can do that by copying and then modifying a line in the _site.scss file:

@import "layout";

Add the following to the new _layout.scss file:

@media screen and (min-width: 600px) {
.site {
    margin:24px;
    padding: 24px
    }
}

@media screen and (max-width: 600px) {
    .site {
        padding: 1%;
    }
}

// SITE HEADER LAYOUT
.site-header, .site-footer, .widget-area {
    background-color: $color__background-header-footer;
}

The idea here is that we will give the site a “border” effect by pushing the white-background site box in from the edge of the browser window. Since the body background is black, that will create this border effect.

Then we set our header, footer, and widget area to the “lilac” color that we set in the _colors.scss file.

Test the page. Then try to style the rest of the header and footer content as it is in the screenshot.

NEXT: Generating Home Page Content

Standard