WCU Website Development with Wordpress

Redoing the website to

  1. Save the org money so it does not have to pay for Webflow + AddEvent (~$60/month)
  2. Cloudways + Wordpress will be ~$8/month.

Hosting

Hosting will be on Cloudways (owned by DigitalOcean). Cloudways is a management layer for “bare metal” VPS providers like DigitalOcean. At the lower end of the price scale, we are paying approximately $5/month more for this service. In return, we do not have to worry about setting up firewalls, SSL certificates, or updates to the server (not just WordPress), and it already has optimizations for performance.

I have not used Cloudways before but have hosted WordPress blogs on DigitalOcean directly. We will see just how much of the PITA stuff they deal with.


Setting up WordPress

On the Dashboard, on the Screen Options, disable At a Glance, Quick Draft, WordPress Events and News, and Welcome.

Go to Settings > General:

  • Site Title: Working Class Unity
  • Tagline: Building working class power.
  • Time zone: Los Angeles

Go to Settings > Reading:

  • Your homepage displays: A static page

Go to Settings > Media:

  • Medium Size changed to 960 in width and height
  • Large size changed to 1920 in width and height
  • Uncheck “Organize my uploads into month- and year-based folders”
  • The default images sizes are too small for modern monitors. And organizing by year/month is not the best method.

Installing Bricks Theme

  • Go to Appearance > Themes
  • Added the Bricks Main parent theme and the Child Theme
    • Child themes in WordPress are designed for safely customizing a parent theme. When you update a parent theme, and customizations you made directly to its files will be lost because new versions of files will replace old versions. The Child Theme allows you to add customizations to the design of the website and these changes will remain when the Parent Theme is updated. Any files or functions that are not modified will fallback to the Parent Theme.
  • All other themes should be removed.
    • Keeping them is an unnecessary security risk.

Installing Plugins

Automatic.css

This is a CSS framework for Wordpress. It lets you set pre-defined classes for various styling needs like layouts, typography, colors, spacing, and responsive design. That way all these things can remain consistent throughout the website no matter who is working on designing a page layout in the future. For those unfamiliar with the low-no code webpage builders today, imagine building a house with pre-made parts instead of measuring out every piece of lumber by hand. Automatic.css will allow for faster and consistent work moving forward. And if we need to make a design change in the future, most changes can be made sitewide by changing one variable, instead of going page by page.

Frames

Made by the same people as [[Automatic.css]]. Frames gives you templates that work well with Automatic.css. That allows you to set up the basic framework of a page without too much work. But all the templates are unstyled so the design work is still left up to the user.

Configuration

Automatic.css

Listing all changes from default
Viewport

  • Content Width: 1360
  • Website Background Color: var(–white)
    Palette
  • Color Scheme
    • Website Color Scheme: Light
  • Action:
    • Hex Value: ff9f48

Typography

  • Default text color: var(–base-ultra-dark)
  • Headings
    • Base Heading Size: 16 and 20px
    • Desktop Scale: Perfect Firth (1.500)
    • Head Colors: var(–base-ultra-dark) for all
    • Head Line Lengths: 100% All
    • Heading Size Overrides
      • H5: 16 and 18px
      • H6: 14 and 16px
  • Text
    • Text Size Overrides:
      • Small 14 & 16px
      • X-Small 13 and 14px
        Spacing System
  • Section Spacing
    • Base Multiplier (Desktop): 3
    • Base Multiplier (Mobile): 2
    • Inline Padding (Gutter) 16 and 60px
      Buttons and Links
  • Button Defaults
    • Minimum Button Width: 150px
  • Turn off: Secondary, Accent, Base Button, and Bottom Button
    Additional Styling
  • Selection Background: var(–action)
  • Selection Text Color: var(–action-dark)
  • Alt Selection Background: var(–base)
  • Alt Selection Text Color: var(–white)
    Options
  • Enable CSS Smooth Scrolling: On
  • Framework Seetings
    • Pro Mode: Active
    • Flexbox Classes: Off
      Form Styling
  • Load Form Styling: Yes
    Frames
  • Table of Contents: Yes
  • Modal: yes
  • Trigger: Yes
  • Color Scheme (Beta): Yes
  • Will have to revisit as we develop website

Bricks Builder

Settings > Theme Styles

  • Create a new one, name it Global.
  • Conditions > Entire website
  • Typography
    • Body:
      • Font Family = Acumin Pro
      • Do not set anything else
    • All Headings
      • Font Family = Akira Jimbo
      • Do not set anything else
  • Element Container
    • Width: 1366px (to match Automatic.css settings)