Factor1 Small Site Setup

Link to blueprint zip: https://github.com/factor1/developer-resources/tree/master/F1%20Small%20Site%20Blueprint

(f1-small-site-2.06.zip is the most current version)

Link to demo theme: https://github.com/factor1/f1-demo-theme

How to Import a Blueprint in Local

1. Under your Mac's Finder menu, go to Go > Go to Folder
2. Enter ~/Library/Application Support/Local in the field
3. Put the .zip folder in the blueprints subfolder

The blueprint should now be an option when creating a new site in Local

Site Installation

Create a new Site in Local using the blueprint from above

This blueprint should include both the plugins and a theme named f1-demo-theme

Update the demo theme for your project

Theme Updates

1. Update the theme’s directory name to your project’s name (you will need to reselect the theme under Appearance > Menus in the Admin)

2. In Terminal, navigate into the demo theme directory

   cd path/to/wp-content/themes/f1-your-theme-name

3. Update the following files:

   • .env - Update the url with the development domain found in Local
   • style.css - update the information here
   • package.json - update the theme name here

4. Package Installation

   • Run yarn to install theme packages
   • Run yarn build to compile theme assets

5. Create git repo and add to Github

   • git init, git add . , git commit -m “Initial commit of theme files”
   • Create a new repository in Github and follow the instructions to commit an existing repo from the command line

Admin Updates

1. Update the site name under Settings > General
2. Run any plugin/database updates if prompted
3. Under “Site Options,” update the header and footer logos
4. Update all menus under Appearance > Menus

• If ACF field groups are missing, there is a zipped demo-theme-acf.json.zip export within the theme that you can import under Custom Fields > Tools

Styling Updates

Here is a brief list of files that will likely need changes for your theme

• inc/enqueues.php - include any missing assets (Font Awesome, Google Fonts, Typekit, etc)

• assets/scss - make any needed changes to the following files

  • settings/_variables.scss
  • globals/_typography.scss
  • mixins/_sugar.scss (a buttons mixin lives here)
  • components/_nav.scss
  • components/_social-menu.scss
  • components/_buttons.scss
  • components/_menu-icon.scss
  • components/_pagination.scss
  • components/_forms.scss

• inc/tweaks.php

  • Add theme colors to the custom_editor_colors function
  • Add any special typography classes to the custom_wysiwyg_options function
  • Update the custom_loginlogo function

• dist/editor-styles.css

  • Add the CSS styles for the site typography here (use assets/scss/globals/_typography.scss as a reference)
    • ** Note that in version 2.0, this step is no longer required. See Version 2.0 New Features for details

• assets/scss/parts/**

  • Make any color/padding/misc style changes as needed

• header.php

  • Add a theme color to the meta theme color (line 12)

General Updates

Not every site will need all of the available features included in this blueprint. To keep things as simple as possible for the client in question, delete features that aren't needed. Refer to the site design/tech notes to determine which features can be deleted.

For example, hero sections may not use background videos at all. If this is the case, delete the relevant ACF fields & code.

Version 2.0 New Features

In addition to the latest versions of WP & our regular plugins (as of 3/2023), version 2 comes with several new features & changes to the existing ACF groups. (A new ACF zip has also been included in the demo theme.)

See How to Import a Blueprint above for directions on importing this blueprint.

Buttons

1 source of truth

Buttons are now controlled via 1 ACF group in the admin (the inactive, cloneable Buttons group) and via 1 component file in our demo theme, under components/buttons.php.

Button preview windows

Within the button repeater group, you'll see a Button Preview ACF message field. Our theme appends a preview window to this field that displays what a button will look like on the front end for our users.

This preview window will inherit the button styles you set on the front end (make sure to align these with the classes set in the Button Color sub-field in the repeater).

Background images (hero & banner)

Background images are now also a cloneable ACF group, and by default are used within the Hero & Banner sections.

There are options to select the thumbnail size (add options from your theme as needed) as well as percent-based horizontal and vertical alignment of the background image. There is also an option to include an overlay on the image.

Background color swatches (update acf)

There is now a cloneable Background Colors ACF group, which is cloned into sections like the Centered Text Block and to which you can add in theme colors as needed.

In lieu of installing the ACF color swatches plugin, our theme now automatically appends color swatches to that list.

Available Shortcodes

Our theme now includes 3 shortcodes by default: [name], [social_links], [social_share_links], and [typewriter_text]. Details as to options for these and how they work can be found under the Shortcodes tab in Site Options.

Automated admin styles

Our theme now automatically pulls various styles into the admin, so there is no longer a need to manually create an editor-styles.css file.

New Slider Library (SplideJS)

As of version 2.06, our demo theme uses SplideJS in place of Slick Slider. SplideJS doesn't not need jQuery so we save some processing power by this switch.

Font Awesome version

As of version 2.06, our theme defaults to using Font Awesome 6.