Wordpress Development

Membership Committee Website & Technology
1

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)
2

The Events Calendar plugin was updated so the Zoom link will include the password when clicking the “Join Meeting” button. Previously, you had to be logged in to get the password.

image
image884×842 22.1 KB

I added the following to the functions.php by going to Appearance > Theme File Editor in the WordPress admin panel. The functions.php file allows developers to add their own custom code to the site.

/**
 * Generate Zoom meetings without an embedded password.
 */
add_filter( 'tribe_events_virtual_meetings_zoom_meeting_password', function () {
	return '';
} );

Instructions were found here: Security and protected content for Virtual Events - Knowledgebase - theeventscalendar.com.pdf (999.0 KB)

EDIT: Appears this did not work!!
EDIT 2: Set the Zoom link to appear when the event is created. This seems to match user preference (you usually get the zoom link in an email ahead of time) so will leave this setting as is unless we have an issue with unwanted people joining the calls.

3

ISSUE: There seems to be a disconnect between Stripe collecting payments but our Membership plugin not receiving this data and updating Member status.

Stripe Webhooks was not set up properly (instructions here).

FIX: I added the webhook endpoint to both the Test and Live Stripe modes.

Haven’t tested it yet, but that should allow for information to go from Stripe to Restrict Content Pro, so payment details are up to date on our website.

4

ISSUE: Members are not receiving Membership emails (first joining, renewal emails, membership expiration emails etc.)

Our Wordpress emails are currently being sent through SendGrid on a free account (the forum emails are currently taken care of by Discourse since we host with them). The SMTP service was setup on Cloudways (our Wordpress host), so if anyone wants to configure it in the future, look there instead of the WP Admin dashboard.

I installed Check & Log Email to confirm that emails are being sent and they are.

I am installing WP Mail Logging to track emails going in and out. I will uninstall once things are working for ~ a month.

Going to fill in the templates and see if things start working.

Edit: Testing the phone number integration below at shows that automated emails are going out to the info@wcu email at least.

5

ISSUE: We are not collecting phone numbers during registration.

Fix: According to the Knowledgebase, this should be possible by updating the functions.php file. The updated code will do the following:

  • Add the phone number field to the registration form.
  • Validate the phone number field during registration.
  • Save the phone number when registration is processed.
  • Add the phone number field to the “Contact Info” section of the WordPress user profile.

@HipGnosis, I’m still working on setting up the webhook to send this information to n8n, but the phone numbers will be stored in user settings.

Current functions.php (backup in case new edits break everything)

<?php 
/**
 * Register/enqueue custom scripts and styles
 */
add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}
} );

/**
 * Register custom elements
 */
add_action( 'init', function() {
  $element_files = [
    __DIR__ . '/elements/title.php',
  ];

  foreach ( $element_files as $file ) {
    \Bricks\Elements::register_element( $file );
  }
}, 11 );

/**
 * Add text strings to builder
 */
add_filter( 'bricks/builder/i18n', function( $i18n ) {
  // For element category 'custom'
  $i18n['custom'] = esc_html__( 'Custom', 'bricks' );

  return $i18n;
} );
/**
 * Display the full access Zoom Join URL with embedded password with everyone, including anonymous site visitors.
 */
add_filter( 'tribe_events_virtual_meetings_zoom_meeting_include_password', '__return_true' );

Updated functions.php

<?php 
/***
 * Register/enqueue custom scripts and styles
 */
add_action( 'wp_enqueue_scripts', function() {
    // Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
    if ( ! bricks_is_builder_main() ) {
        wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
    }
} );

/***
 * Register custom elements
 */
add_action( 'init', function() {
    $element_files = [
        __DIR__ . '/elements/title.php',
    ];
    foreach ( $element_files as $file ) {
        \Bricks\Elements::register_element( $file );
    }
}, 11 );

/***
 * Add text strings to builder
 */
add_filter( 'bricks/builder/i18n', function( $i18n ) {
    // For element category 'custom'
    $i18n['custom'] = esc_html__( 'Custom', 'bricks' );
    return $i18n;
} );

/***
 * Display the full access Zoom Join URL with embedded password with everyone, including anonymous site visitors.
 */
add_filter( 'tribe_events_virtual_meetings_zoom_meeting_include_password', '__return_true' );

/***
 * Restrict Content Pro - Add Phone Number Field
 * The following functions add a phone number field to the RCP registration form and WordPress user profiles
 */

// Add phone number field to RCP registration form
function add_phone_number_field() {
    ?>
    <p>
        <label for="rcp_phone"><?php _e( 'Phone Number', 'rcp' ); ?></label>
        <input name="rcp_phone" id="rcp_phone" type="tel" />
    </p>
    <?php
}
add_action( 'rcp_after_password_registration_field', 'add_phone_number_field' );

// Validate phone number field during registration
function validate_phone_number_field( $posted ) {
    if ( empty( $posted['rcp_phone'] ) ) {
        rcp_errors()->add( 'empty_phone', __( 'Please enter your phone number', 'rcp' ), 'register' );
    }
}
add_action( 'rcp_form_errors', 'validate_phone_number_field' );

// Save phone number to user meta when registration is processed
function save_phone_number( $posted ) {
    if ( ! empty( $posted['rcp_phone'] ) ) {
        $user_id = get_current_user_id();
        update_user_meta( $user_id, 'rcp_phone', sanitize_text_field( $posted['rcp_phone'] ) );
    }
}
add_action( 'rcp_form_processing', 'save_phone_number', 10, 1 );

// Add phone number field to WordPress user profile in Contact Info section
function add_phone_number_to_user_profile( $user_contact_methods ) {
    $user_contact_methods['rcp_phone'] = __( 'Phone Number', 'rcp' );
    return $user_contact_methods;
}
add_filter( 'user_contactmethods', 'add_phone_number_to_user_profile' );

// Save phone number when user profile is updated
function save_phone_number_user_profile( $user_id ) {
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    if ( isset( $_POST['rcp_phone'] ) ) {
        update_user_meta( $user_id, 'rcp_phone', sanitize_text_field( $_POST['rcp_phone'] ) );
    }
}
add_action( 'personal_options_update', 'save_phone_number_user_profile' );
add_action( 'edit_user_profile_update', 'save_phone_number_user_profile' );