Quick Start Guide

Functions

We have two functions files -

  • functions.php: Contains scripts and enqueueing, sidebars, custom walker menu, helper functions and everything else you'd normally expect to modify.
  • /includes/base-functions.php: Everything useful that you probably don't need to modify on a project-by-project basis — clean up stuff and ux/seo functions.
Sample
/**
 * Return the search results page even if the query is empty
 *
 * @link http://vinayp.com.np/how-to-show-blank-search-on-wordpress
 *
 * @since Scaffolding 1.0
 */
function scaffolding_make_blank_search( $query ) {
	if ( ! is_admin() ) {
		global $wp_query;
		if ( isset( $_GET['s'] ) && '' == $_GET['s'] ) {  // if search parameter is blank, do not return false
			$wp_query->set( 's', ' ' );
			$wp_query->is_search = true;
		}
		return $query;
	}
}
add_action( 'pre_get_posts', 'scaffolding_make_blank_search' );

Template Structure

Post formats are rarely used in client websites, so we've commented out support for them by default.

We have two folders for organizing our files separate from the required theme files.

  • /templates/: Keep page templates organized here. We've included a sitemap page template to get started.
  • /template-parts/: This is where we've put files that are used throughout the theme like pagination and error messaging.

Reference: WordPress Template Hierarchy

Styles

All theme styles are contained in the /scss/ folder.

  • style.scss: Setup file that builds style.css.
  • login.scss: Customize the admin login screen.
  • editor-styles.scss: Set specific styles for the wysiwyg editor.
  • ie.scss: Set overrides for Internet Explorer.
  • /elements/
    • _bootstrap-grid.scss: Responsive Bootstrap Grid - This should remain untouched in most instances.
    • _comments.scss: Comment form and comments list
    • _forms.scss: Simple form elements – compatible with our Gravity Forms styles.
    • _links.scss: Text or button links
    • _lists.scss: Ordered, unordered or definition lists
    • _main-navigation.scss: Specific to the main navigation including mobile and tablet.
    • _media.scss: Images, galleries and videos
    • _pagination.scss: Next/previous post link and full pagination
    • _tables.scss: Simple table reset
    • _typography.scss: Everything typographic related
    • _widgets.scss: Default widgets or custom widgets
  • /libs/
    • _magnific-popup.scss: Magnific Popup modal windows.
    • _normalize.scss: Normalize CSS across all browsers.
    • _select2.scss: Better form dropdowns with Select2.
  • /media-queries/
    • _xs.scss: Contains the majority of the styles. The theme is developed "mobile first".
    • _sm.scss: Small devices (tablets).
    • _md.scss: Medium devices (desktops).
    • _lg.scss: Large devices (desktops).
    • _custom.scss: Define custom media queries outside of the grid breakpoints.
    • _print.scss: Strips out all unnecessary elements for optimal printing.
    • _retina.scss: Specific to retina devices.
  • /modules/
    • _sticky-footer.scss: Just add the "sticky-footer" class to the body.
  • /plugins/
    • /gravity-forms/
      • _base.scss: General styles and common form fields.
      • _other_fields.scss: Less common form fields such as date picker and multi-file upload.
      • _ready_classes.scss: Built-in "ready classes" included in Gravity Forms out-of-the-box.
      • _credit_cards.scss: Compatible with payment add-ons.
      • _submission_and_errors.scss: Validation handling.
  • /utilities/
    • _variables.scss: Define colors, fonts, sizes, grid settings and other variables.
    • _mixins.scss: Helpful set of mixins like Flexbox and utility classes for rapid development.
    • _accessibility.scss: Support for screen readers and other things along those lines.

Getting Started with SASS + Compass

We're using SASS by default to utilize it's organization, speed, and functions. If you've used LESS before, SASS is an easy transition. If you haven't used CSS preprocessors before, you're in for a treat. You can learn more about SASS here.

Compass is like an extension to SASS, giving us access to all sorts of predefined tools. On the most basic level, Compass can generate cross-browser code for CSS3 properties, saving valuable time and keeping your source code clean.

If you haven't used these tools before, the best way to get started is to visit http://compass-style.org/install/ to setup your compiler, or use an app to handle it for you:

Libraries

All of our third-party libraries are stored in the /libs/ folder. This includes css, javascript, fonts and images.

  • Where applicable we have included compressed and uncompressed versions of the files for debugging.

Scripts

All of our custom javascript files are in the /js/ folder.

  • scripts.js: Here we initialize our third-party scripts and define functionality for making the theme responsive (ie. mobile/tablet navigation, responsive iFrames).

Recommended Plugins

Here is a list of plugins we've used on nearly every project.