Website Maintenance Manual

Overview

Our website is developed using the WordPress content management system. WordPress is the most widely used website development tool, estimated to run nearly a third of all websites as of 2021.

WordPress sites get their look and feel from “themes.” Our website is based on the very widely-used Divi theme from Elegant Themes.

When customizing a theme to reflect a given organization’s brand, it’s common to create something called a “child theme” that modifies the base theme (Divi is our base theme). Our site uses a child theme called “Community Shares of Wisconsin – A Divi Child Theme” developed by Andy Giesler of Blazing Moon.

You can learn more about how themes and child themes work at the Envato Tuts post What is a WordPress Child Theme?

You’ll largely manage news posts with standard WordPress tools. Because of its popularity, there’s a great deal of online support and documentation about using WordPress, and the Madison area includes many people experienced in using WordPress.

You’ll largely manage pages with Divi’s page builder, which is a powerful visual editor. Elegant Themes provides excellent tutorials, in both text and video form, for all aspects of using its Divi platform.

Causes: Adding a Cause

Several steps are needed to add a cause to the list that CSW supports.

Create Cause Category

1. On the Admin side, go to Pages > Causes
2. Enter a name, slug, and description like those of existing causes
3. Click Add New Cause

Create Logo

1. Create a logo similar to those on the Our Causes page
2. The logo must be 500 x 500 pixels
3. The logo file must be named csw-cause-slug-icon.png — where “slug” is the slug you used above when creating the category

Create Cause Page

1. Create a new page with the cause’s name
2. Click Use the Divi Builder
3. When prompted, choose to clone an existing page
4. Close from the page _TEMPLATE Cause Page
5. In the boxes on the right of the screen…check the appropriate cause
6. …check all member orgs related to the cause
7. …in the Page Attributes box, set the Parent to be the page Our Causes
8. Edit the page’s content to be appropriate for the new cause

Edit Individual Member Pages

For each member that’s relevant to this new cause, edit the member’s page (from the Pages list on the Admin menu) and check the new cause’s box

Edit the “Our Causes” Page

1. Edit the Our Causes page using the back-end editor (from the Pages menu on the admin site)—not the front-end Divi visual editor
2. In the boxes on the right, check the new cause’s name
3. Save the page and confirm the cause now appears on the Our Causes page

Footer: Contact Information

In addition to our address, the contact section in the footer has links to our social media icons. Unfortunately, WordPress is extremely touchy about this section—if you make any edits to the contact information, WordPress will remove the social media icons unless you manually add them every time.

To edit the contact information while retaining the social media icons:

1. On the Admin side, go to Appearance > Widgets
2. On the right side, click the down-facing triangle to open Footer Area #1
3. Click the down-facing triangle to open Text: Contact
4. By default, you’ll be editing in Visual mode (note the “Visual” and “Text” tabs at the top of the editing area). Click Text to switch into text editing mode.
5. Replace everything in the editing area with the following text, adjusting the contact information if needed:

Community Shares of Wisconsin
612 W. Main Street, Suite 200
Madison, WI 53703
Phone: (608) 256-1066
[email protected]

<a href=”http://www.facebook.com/pages/Community-Shares-of-Wisconsin/304450685362?ref=ts” aria-label=”Facebook” title=”Facebook”><i class=”fa fa-facebook-square fa-2x”></i></a><a href=”http://twitter.com/CommSharesWI” aria-label=”Twitter” titlel=”Twitter”><i class=”fa fa-twitter fa-2x”></i></a><a href=”https://www.instagram.com/commshareswi/” aria-label=”Instagram” title=”Instagram”><i class=”fa fa-instagram fa-2x”></i></a>

Hero Images: Alignment

Hero images are very wide, and by default they will remain centered.

That means for smaller screens or narrower browser windows, the far left and right of the image will no longer be visible: Essentially, the browser will zoom in on the center of the image for smaller screens. At certain sizes, we might lose as much as 25% of an image on either side.

For many images that’s fine since many photos have their area of greatest interest somewhere in the middle 50%. This tends to be true of most CSW images.

But if this centering and cropping causes a problem for a hero image where the visual interest is way on the left or the right, we can tell that specific page to focus on a different area of the image rather than on the very center.

To do this:

1. Edit the Section (blue controls in the Divi editor) for the Hero Image
2. Go to the Background section of the main Content tab
3. Under Background Image Position choose something other than Center, as appropriate for the image

Examples:

• if you want to always keep the upper left portion of the image in view, choose Top Left
• if you want the bottom middle of the image to be locked into view, choose Bottom Center

Hero Images: Custom Color Bands

Our child theme automatically creates a gray color band behind the title text of hero images.

In general, changes to this band should be made centrally by editing styles for the entire site. (Geek note: You do that either by editing global.css directly or—preferably, if SASS is available—by editing SCSS file _design-patterns.scss)

However, if needed it’s possible to change the color of the band for an individual page. Just bear in mind that page-specific edits will make it much harder in the future to implement site-wide hero style changes, since each of these manually edited pages will have to be edited manually to match the new hero style.

To change the band’s color for a specific page:

1. Edit the page using Divi’s visual builder
2. Click the module’s properties gear (the gear in the gray controls) for the text module that has the hero’s title
3. Go to the Advanced tab
4. Open the Custom CSS section
5. Add something like the following CSS to the Main Element section

background-color: rgba(20, 0, 40, 0.7) !important;

This is a CSS color code—and is actually the code used for the hero at the top of this documentation page, specifying a purple bar that’s a little darker than normal. The rgba means you’re numerically specifying the Red, Green, and Blue color components, as well as the Alpha (transparency) weight.

The default color code being used for all pages as of launch is gray with medium opacity:

background-color: rgba(0, 0, 0, 0.5) !important;

Layout: Alternating Text-Image Sections

Imagine you have a page with alternating text/image sections like this:

For a full-width browser on a desktop computer or a laptop, the sections are arranged as shown in the screenshot, which is very reasonable:

• text #1 – image #1
• image #2 – text #2
• text #3 – image #3
• etc.

But when the browser window is narrow enough—for example, on a tablet or a phone screen—there isn’t room for the text and images to be side-by-side. They collapse int a single column of text and images:

• text #1
• image #1
• image #2
• text #3
• text #3
• image #3
• etc.

This is confusing for visitors: notice that sometimes two images or two text sections are directly above and below each other. It’s not visually obvious which image goes with which text.

For clarity, on smaller screens we want any “text – image” rows to reverse their content, changing from “text – image” to “image – text” so that all sections begin with an image and follow with text:

• image #1
• text #1
• image #2
• text #3
• image #3
• text #3
• etc.

To do this, we need to tell any text-image sections that when the screen is too small for text and an image to appear side-by-side, they should reverse the content and show the image first.

If you add a text-image design pattern (50-50 or 67-33) directly from the Divi Library, you’re golden: This fix is already in place.

However, if you ever create a layout like this from scratch, you’ll need to make the fix yourself to all rows where text appears on the left: 

1. Go into Row Settings (the purple gear)
2. Go to the Advanced tab
3. Open CSS ID & Classes
4. In “CSS Class” add this text: fifty-fifty-reverse
5. Save

Members: Adding a Member

Several steps are needed to add a member to CSW’s family.

Create Member Category

1. On the Admin side, go to Pages > Member Orgs
2. Enter a name, slug, and description like those of existing members
3. Click Add New Member Org
   

Create Logo

1. Create a logo similar to those on the Our Members page
2. The logo must be 200 x 200 pixels with a white background
3. The logo must be a JPG or a PNG file
4. The logo file must be named csw-member-slug-logo.png — where “slug” is the slug you used above when creating the category
5. Upload the logo to the media library (Media > Add)
6. Note: It’s fine if WordPress append some characters to the end of the file name—for example, csw-member-connextions-logo-e1610565872118.jpg

Create Member Page

1. Create a new page with the member’s name
2. At the top, edit the page’s slug so that it’s the same as the slug you used above; this is necessary for the member’s link on the “Our Members” page to work
3. Click Use the Divi Builder
4. When prompted, choose to clone an existing page
5. Close from the page _TEMPLATE Member Page
6. In the boxes on the right of the screen…check the appropriate member
7. …check all causes related to the member
8. …in the Page Attributes box, set the Parent to be the page Our Members
9. Add the member’s logo as the Featured Image for their page
10. Edit the page’s content to be appropriate for the new member

Edit Individual Cause Pages

1. For each cause that’s relevant to this member, edit the cause’s page (from the Pages list on the Admin menu) and check the new member’s box
2. Save, then confirm that the new member now appears on that cause’s page.

Edit the “Our Members” Page

1. Edit the Our Members page using the back-end editor (from the Pages menu on the admin site)—not the front-end Divi visual editor
2. In the boxes on the right, check the new member’s name
3. Save the page and confirm the member now appears on the Our Members page
4. If the member appears but their logo doesn’t, try re-adding the logo to the media library

Members: Removing a Member

To remove a member, we only need to undo a few of the steps we took when creating the member. This is because some of the member’s data will remain on the site. It just won’t be prominently featured for visitors—for example, the member won’t be listed on the Our Members page.

1. Edit their category. On the Admin side, go to Pages > Member Orgs and edit the category description to be “Former Member Group”
2. Remove the member from Cause pages. For all causes related to this member, edit the cause’s page and uncheck that member’s box
3. Remove the member from the Our Members page. Edit the Our Members page and uncheck the member’s box
4. Delete the member’s page. From the Admin side go to Pages, edit the member’s page, and in the Publish box in the right-hand column click Move to Trash (or if for any reason you want to keep the page but make it inaccessible to visitors, in that same Publish box edit the status from Publish to Draft)

“Read More” (Home Page Featured Story)

For visually-impaired people visiting the site with the assistance of screen reader software, links that say simply “Read More” are not always helpful: The visitor lacks the visual context of what that link is near, so sometimes they have to guess what they’re reading more about.

Any “Read More” link associated with any news story on the site will automatically be enhanced with context information (via an “aria label”). This additional information doesn’t appear for sighted visitors, but will be read aloud for those using screen readers. These aria labels give visitors the context then need to interpret the link. (If you want to experience this site, or any other, using screen reader software for the visually impaired, you can download the free NVDA screen reader.)

Any “Read More” link that’s added manually—such as the one for the featured story at the top of the home page—should address this accessibility need somehow.

By far the simplest way to do this is to make sure the link is meaningful and stands alone. For example, rather than just “Read More” the link could say:

Read more about The Big Share

If you’d prefer, it’s also possible to manually edit the link in text mode and add aria labels that will be read by screen reader software, like so:

<a href=”https://www.thebigshare.org/” aria-label=”Read more about The Big Share” title=”Read more about The Big Share”>Read more about The Big Share…</a>