Building a WordPress theme with SASS and _s – setting up

Call me crazy, but I’m about to make a WordPress theme from nearly-scratch, using Automattic’s _s starter theme.

_s is a bare-bones theme that comes with minimal styling, no grid system, and pretty much no opinions on aesthetics at all. Out of the box, it looks like the web in 1995.

Homepage on the _s theme

Not so far off from looking at a web page in NCSA Mosaic, one of the first browsers.

mosaic2

Bootstrapping WordPress

Getting a local installation of WordPress is easy and free. Here are the instructions for a Mac:

  1. Download MAMP
  2. Download WordPress, and place it in a directory on your hard drive
  3. Point MAMP to your WordPress directory
  4. Set up a database in MAMP, by clicking the Webstart button in MAMP, clicking PHPMyAdmin in the navigation, and creating a new blank database
  5. Go to your root site in MAMP
  6. Set up WordPress through the easy wizard, using your new database name and root as the user

There are better tutorials on bootstrapping WordPress, but it is of course an essential first step.

Once you have WordPress up and running, drop your unzipped _s theme to wp-content/themes as its own folder. Mine is wp-content/themes/corey.

Next, select your theme in the WordPress admin interface’s theme chooser. Now, f you go to your local WordPress site, you should see something similar to the screenshot above.

Time for SASS

Clearly, there is a lot of CSS styling to do here. Automattic began offering a SASS version _s, which we will use.

Never heard of SASS? It’s a CSS pre-processor (in other words, you write SASS and compiles into CSS) that lets you write styles in a more concise and organized way.

To get the SASS version of _s, select Advanced Options on the _s site, and choose “_sassify!”

Download the SASS version of _s

SCSS compiles to CSS. That is, you edit SCSS files, and they become CSS files. How does this compilation happen in WordPress?

For that, we turn to a glorious plug-in called WP-SCSS. Install it on your local site.

Specify these settings, specific to _s, in your WP-SCSS settings:

SCSS Location: /sass/
CSS Location: /

Multiple commenters have noted the correct SCSS location is /sass/, not /scss. Corrected above. Thanks!

This tells WP-SCSS to take _s’s SCSS files and convert them to CSS files in the theme’s root directory. For _s, this means take a bunch of SCSS files and converting them to style.css in the theme’s root.

Open your theme folder in your favorite text editor. I’m using Sublime Text.

Go to your _headings.scss file under /sass/typography within the theme.

Style tree in the _s theme

I added color: red to the file, so it would show up like this:

Check out your WordPress site now. The headings are red! In the background WP-SCSS compiled _s’s SCSS files to style.css, which is shown in your browser. Seamless!

Headings shown as red on WordPress site homepage

We’re at the tip of the iceberg. Next we’ll jump more into styling our site, then comes structure, and… a lot more.

Follow me on Twitter, subscribe by RSS, or subscribe to our mailing list below to get updates on this series.

Creating a Ruby gem for one-time announcements, part 4 – performance, views

I’m developing a gem to deliver one-time announcements to users in Rails apps. See the previous parts of this series for some background.

Now, in part 4, we’ll test performance performance and add a view to show the current announcement.

Measuring performance

How much work does the gem have to do in order to retrieve the latest announcement for the current user?

Database calls are often a performance culprit. Queries should be small in number (see N + 1 problem) and minimally taxing on the database.

The gem runs only one query to retrieve the latest announcement.

To see how long that query lasts, we’ll run the method that calls it in the Rails console. The current method of the Announcement model checks for an announcement for the current user.

What if we have 1,000 announcements and 50,000 users? There are a few ways to test performance of a specific method, one of which is a benchmarking gem from Viget Labs. I used Ruby’s built-in benchmark module.

The call to Announcement still comes in at under 1 ms with 10,000 users and 5,000 announcements.

Showing announcements

A view helper called current_announcement will call the current announcement from the model.

Then, the developer using the gem can pull in the current announcement through a view partial.

We still need to let the user close the announcement, and remember the announcements that each user has read.

Integrating with Foundation and Bootstrap

At Cook Smarts, we use Zurb Foundation, and it’s served us well.

The gem will include templates for announcements using Foundation’s and Bootstrap’s existing styles.

It will also include a template for sites that do not use either framework. In that case, it is up to the developer to style the announcements in the app’s CSS.

What’s next

Next, we’ll talk about remembering which announcements have been read by the current user, security, and how site administrators can add announcements.

Searching across tables with Wice Grid in Rails

Say that in your Rails app’s admin interface you have a table of orders, each of which is associated with a customer. You need to find orders belonging to a particular customer, by e-mail address. This is a search across two tables, orders and customers.

Wice Grid, a fantastic data grid for Rails, makes this search easy. Check out our intro to Wice Grid if you haven’t already, then come back here for this trick.

In your controller, when you declare your grid, include the other table that you’re searching.

Now, in your view, when you define the column that contains the customer’s e-mail address, reference the model (Customer) and the field within that model (email).

Wice generates a search box above the customer e-mail column. Enter an e-mail address to find orders a associated with that customer.

Try out Wice Grid in your Rails app! It makes admin interfaces much easier to build.

For more background, check out our intro to Wice Grid.

If you’re building a broader search feature for your app’s users, check out our intro to full-text search in Rails.

Creating a Ruby gem for one-time announcements, part 3 – targeting messages to users

This is part 3 of building a gem for targeted, one-time announcements to users in Rails. See part 2 and part 1.

We’ll focus on targeting announcements to certain types of users. For instance, the admin may want to deliver an announcement only to users who have subscriptions.

A field in the Announcements table called limit_to_users will specify which types of users should receive the announcement.

limit_to_users can contain multiple conditions, so we’ll make it an array of hashes. ActiveRecord allows objects like these to be stored in text fields in the database, using the serialize method in a model.

This test validates that the field works as intended, storing conditions and allowing them to be retrieved. Here, we are sharing the announcement only with users who do not have a subscription.

Querying serialized fields is tough

It’s risky to query serialized fields in a relational database. MongoDB and similar noSQL databases are tuned for fast queries of free-form information, while Postgres and its SQL siblings are not.

We need to figure out which announcement to serve to which user, even though the conditions are stored in a query-resistant serialized field.

Houston, we’ve got loops

Maybe we should grab all active announcements that the current user has not read, and cycle through them to find the latest one that is relevant to the user.

My first try at this includes two loops, one inside the other, which:

  1. Cycle through each active, unread announcement
  2. For each announcement, cycle through each condition

Loops carry potential performance issues, especially when nested. In this case, we came as far as we could with a query, and used loops for the rest.

The loops do not re-query the database, thus avoiding an n+1 query problem, so they should be pretty quick. We’ll test performance in past 4, coming soon.

Creating a Ruby gem for one-time announcements, part 2 – TDD, marking as read

In part 1, I talked about the need to announce things to users in a Rails app. The announcements should be scheduled, shown to each user only once, and targeted to particular types of users.

We’re building a Ruby gem to enable this.

Tests

I started by writing tests, describing what the one-time announcements gem should do. Test driven development (TDD) can be controversial, but I find that it helps me plan and identify issues earlier in development.

I learned how to test from Everyday Rails Testing with RSpec. The author continually updates it as new versions of Rails and RSpec are released.

The first tests confirm, at the model level, that announcements can be:

  1. Created
  2. Scheduled
  3. Marked as read

These tests pass with the current Announcement model:

Marking announcements as read

Each user should see a particular announcement only once, so I needed a way to mark announcements as read.

The unread_by scope above shows only those announcements which the user has not read. It uses the AnnouncementView model to see who has read which announcements:

The current method chains the ready_for_delivery, unread_by, and in_delivery_order scopes to determine which announcement to deliver.

This StackExchange thread helped, and I took inspiration from a gem specifically for marking messages as read.

What’s next

In part 3, we’ll look at how to target announcements to particular types of users. For instance, what if you have an announcement just for users on a particular subscription plan?

Creating a Ruby gem for one-time announcements – part 1

At Cook Smarts we need a way to provide one-time announcements to customers, right inside our Rails app.

For instance, we may want to notify our paying users of a new feature when they log in.

Once the customer reads the announcement, he or she can close it and will never see it again.

The closest Ruby gem I could find is thoughtbot’s paul_revere. It’s elegant and simple, providing one-off announcements to an app.

It does not, however, support:

  • Start and end dates for an announcement What if an announcement is relevant only for a period of time?
  • Announcements to a subset of users What if an announcement is relevant only to some users?
  • Remembering across devices that a user closed a message If the user already read a message on desktop, why should they see it again on mobile?

What about keeping it simple?

One-off announcements may seem simple at first, but in practice, they benefit from more granularity.

Showing people only the announcements they need, at the right time, and only once, increases the messages’ potency.

Filtering announcements by user characteristics

Each announcement will be filtered based on conditions about the current user. For instance, is the user on a free trial or paid plan? When they did they sign up?

Perhaps we need to grab all announcements the user has not read with a simple database query, and then use some logic to see which of those is relevant to the user.

In any case, I’m looking for a safe, customizable way to target one-time messages.

What’s next

Next, I’ll take you through the process of creating a Ruby gem for one-time announcements. Stay tuned for part 2…

Supporting guest users in a Rails app

Many apps place content behind an account wall. Bringing that wall down and allowing guest users can make content more discoverable and open it up to search engines.

You might often reference the logged in user, to get their first name, for instance. Most authentication gems, like Devise, provide a current_user helper that contains whoever is logged in.

If no one is logged in, however, current_user will trigger an error if you try to a call a method on it. For instance, current_user.first_name would result in an error if no one is logged in.

To get around this, create a guest user class called GuestUser, and give it properties that a real user would have.

Add any other properties that you use with current_user.

Finally, adjust the current_user method to use GuestUser:

If you are using Devise, use this code instead of the previous block to avoid a potential conflict:

Now, you never have to check current_user for nil because it will always equal an actual user or the guest user.

Explore this concept:

Use ActiveRecord scopes, not class methods, in Rails to avoid errors

In Rails, scopes provide a shortcut your models’ most frequently used queries.

For instance, on a Widgets model, you might have a scope called available, which runs Widgets.where(“quantity_in_stock > 0”).

You can achieve the same effect with a class method on the Widgets model.

In either case,  Widget.available returns an ActiveRecord relation with the matching records, just as if you had called the where method directly.

If class methods and scopes do the same thing, why would you use one over the other?

Scopes, it turns out, are less error-prone.

To find out why, we need to examine a more complex query.

Say that widgets have a discontinuation_date. Once a widget hits that date, it is no longer available.

We’ll expand our available scope/method to take the discontinuation_date into account.

Here, we show widgets that are currently available and haven’t hit their discontinuation date.

Now, say you called Widget.available(nil).order(“title”).

The class method returns a nil object, and you receive an error stating that there is no method order on a nil object. Not good!

The scope, on the other hand, returns a blank ActiveRecord relation. Running order on a blank ActiveRecord relation returns that same relation. No error. Good!

Choose scopes over class methods in your models.


Scopes avoid the problem of nil objects, which make code messy and error-prone.

Scopes don’t return the dreaded nil objects, instead returning a blank relation on which you can run any ActiveRecord method. You could say they implement the null object pattern.

The most direct and bullet-proof way to avoid nil object errors is to avoid nil objects
If You Gaze Into Nil, Nil Gazes Also Into You by thoughtbot

For more details on the differences between class methods and scopes, check out Active Record Scopes vs. Class Methods on Plataformatic’s blog.

Easy data grids for your Rails app, with Wice Grid

Sometimes we need to show tables of data in a Rails app, sort of like souped-up spreadsheets. The tables, or grids, should handle tons of records, support searching and filtering, and allow for customization.

Ever try coding a data grid yourself? It’s hard. You need to implement pagination, filtering, searching, ordering, etc., every time. Why not use a pre-built solution and built off of it instead?

Wice Grid is the quickest grid solution out there for Rails. It takes care of both the client and server. It’s not AJAX-y and gorgeous, but it’s functional and reliable.

At Cook Smarts, we used Wice Grid to improve the admin interface without leaping to a full-scale solution like Rails Admin.

For instance, Cook Smarts’ customers can purchase gift certificates for their friends. Site admins need to see all gift certificates and search for particular ones. The easiest way for them to do this is through a data grid.

To get started, check out the Wice Grid page on GitHub.

Getting up and running is easy:

Follow the installation instructions on the Wice GitHub page

Add the grid code to a controller method, with the model whose data should appear in the grid.

Then, add the grid code to a view, referencing the grid you specified in the controller. Add columns, specifying the attribute as the field name in the database and the name as the text to appear in the header of the grid.

Customizing the order, filtering, search, and pagination is easy. Check out the Wice Grid GitHub page for instructions.

Wice Grid would be even better if it incorporated AJAX, to avoid page reloads when searching, for instance. However, that is the trade-off for its extremely quick setup.