Lab 13: SASS and WordPress Templates Review

You will remember that the WordPress theme we are using, “grunterie”, is based on the Foundation web framework and uses SASS for quick and easy modification of CSS. Today's activities are both a review of what we've already learned, and a a push to get started with some design. Let's dive right in.

Editing your SASS files

First, remember how to use your editor. Remember, we have been using Komodo Edit up to now, and you should still have a shortcut set up that looks something like this:

wpid-komodo-prefs.png   komodo-prefs

Notice how I've rewritten the Default path – since you will be doing almost all your work in the grunterie theme, change this to /var/www/PROJECTNAME.hackinghistory.ca/wp-content/themes/grunterie, where "PROJECTNAME" is "cabbagetown", "childhood", or "campbell".

Now, open a remote file:

komodo-open

The files we want for today are in the scss directory. We can also make changes to the .php files in the theme's main directory, which are the template files (Remember this?); I'll talk about that a little later. For now, let's take a quick look at these three files:

  • scss/_settings.scss is where you will do most of your work. It looks like this:
    settings-scss

    Each line either starts with a comment like // comment or a variable declaration like $varname : value. To change the default styles, change the values of one or more variables.

  • scss/app.scss reads the values from _settings.scss and uses them to generate complex rules form the much more complicated foundation stylesheets that are stored in a different place. You won't edit this.
  • scss/style.scss modifies the final product with a series of rules designed to make Foundation fit better with WordPress. You may change a few of these, too, though that's not all that likely.

So, you will mostly be working in _settings.scss, at least for now. Let's get started.

Changing colors

You will almost certainly want to change a number of colors in the site in order to get a look-n-feel that approximates your partner's wishes. The colors in Foundation are not as simple as they should be, and some of them can be a pain to hunt down. Here is a partial list though:

  • $primary-color is a light blue by default, and is used for highlighting links and headings (because those are also links), and the background of the search bar and some other elements.
  • $secondary-color is a steel-grey, and is used for a number of backgrounds and some text colors
  • $alert-color is red, and is usually only used if there's some kind of error.
  • $success-color is similarly rarely used
  • $body-bg contorls the background of the off-grid page body – outside the content area
  • $body-font-color is the main font color (this may be changed a bit in some contexts)
  • $header-font-color is the color non-title headers (titles are links, so are always $primary-color)

There are numerous other color settings but they mostly key off of these "main" colors, or apply only to a few specialized elements. A slightly outdated list is published here; as you can see, most are simple.

Exercise: Using your mockups, choose a provisional color scheme for your site.

Navigation

This theme comes with three navigation menus by default:

  • the primary nav bar, which lives in the top bar
  • the utility nav bar, which lives down in the footer
  • the "additional" nav bar, which is a dropdown positioned on the very right side of the nav bar and is disabled by default. You can activate it by removing the comments from lines 70-82 in the header.php template file, and then add content to it through the wordpress administrative interface.

It is also possible to create a "off-canvas nav" that swoops out from the left on mobile devices and replaces the top bar on those small screens – but it takes a little bit of work, so we'll leave the explanation for another day.

One thing you might want to do is to change the height of the top-bar, at least on large screens. All the top bar settings are in section "34" of _settings.scss, which starts at around line 1368.

If you want a fixed or sticky nav bar, this can also be done; you just have to add a <div class="fixed">...</div> around the nav element in header.php.

Exercise: Increase the height of the top bar to give it a chunkier feel. Change the background color to something that meshes well with your main site color – but make sure that text is still easy to read (complementary).

Grid

Most of the grid structure on Foundation is great, but sometimes you want to fill the whole screen; this will be especially true if you make heavy use of media, or are going for a particularly contemporary look. This is easily done by modifying the $row-width variable, changing it from "rem-calc(1140)" to "100%". Do this as an exercise, and see if it changes your feelings about the colors.

Layout

The part you've done so far can be very fiddly and time-consuming, but for the most part it isn't technically difficult. A lot of the hard part will getting the pages to look the way you want them to. This will be fundamentally pretty difficult, and often involve switching back and forth between SASS/CSS and PHP, because you will need to add HTML structures for your layout CSS to grab on to and change. You may also need to add some custom fields and custom content types – heavy lifting! – but we wil lget to that in another session.

For now, let's try doing a couple of things:

  • make sidebar-less display the default for pages by renaming page.php to page-sidebar.php and page-full.php to page.php. Hmm, can you even do that with komodo? I hope so!
  • Now let's think about layout. All of your sites have different needs, but
    1. you will almost all be using pages, and blog posts will be distinctly secondary if present at all; and
    2. when thinking about layout, the most obvious and easiest elements to lay out together are the main text and some kind of image. WordPress has a ubilt-in feature for highlighting images – it uses something called the 'featured image" in the admin interface, while in the php code itself it is referred to as the "thumbnail". Unfortunately, by default pages do not have "featured images", so let's fix that real quick.

Featured images in themes

First, we need to add featured image support to the 'page' content type. This is the kind of thing that will drive you mad if you don't know how to do it, but is very easy if you do know how. First, find the file functions.php and open it.

On line 50 is the code

add_theme_support('post-thumbnails');

Simply replace that line with

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

OK, that's step one – we can attach a featured image to a page now; but we haven't added the instructions that will get the featured image to display in our page template. To do this we will have to open content.php – which is the template that actually generates the display of postsand find the line that shows the featured image. It's line 16, actually:

<figure><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail('large'); } ?></a></figure>

So, we need to put this somewhere in our template. The queston is, where? We have a couple of options:

  • we can use "the grid" – foundation's amazing way of arranging elements on the page; or
  • we can instead just float the image within the grid, allowing text to wrap around it. How you do this is kind of up to you, but will involve some CSS.

Exercise: decide which method you want to try, and, with your mockups in front of you, try to get a layout that approximates what you are shooting for.

Further Topics

We'll see where we get on other topics today – much will depend on your specific goals.