Website Maintenance Manual
This manual for the Community Shares of Wisconsin website consists of three parts:
- The Design Pattern Library Page: A list of the components used to construct our pages
- The Sitemap Page: A list of all pages on the site
- This Page: A maintenance guide with instructions on various topics
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.
Reference: Image Sizes
Hero Image
Width (Pixels)
Height (Pixels)
Notes
Community Shares Logo
179
91
Prior to Divi 4.9.7, the logo’s size didn’t really matter. As of that version, logos larger than 179 x 91 will appear wide and stretched on some pages, and at some window sizes. The fix is to downsize the image to these dimensions. (There’s also CSS that helps address the problem at Divi > Theme Options.)
Hero Image
1260
400
The large header image on many pages. Though the image must look good at this wide aspect ratio, it’s okay if the image is taller, so long as cropping it to 1260 x 400 looks good. That’s the shortest and widest size at which the site will show this image.
Member Logo
200
200
White background; for the logo to appear in all relevant places, the logo’s file name must be formatted as csw-member-SLUG-logo.IMAGETYPE, for example: csw-member-sierra-club-logo.png and csw-member-chrysalis-logo.jpg
Image in Body Content
400-600
varies
Can vary depending on the content; 4 x 3 (width x height) is a good guideline
Featured Image (ideal)
835
626
WordPress featured image for a post; 4 x 3; larger than this provides no benefit and slows page loading
Featured Image (min)
500
375
WordPress featured image for a post; 4 x 3; smaller than this will blur at some screen sizes
Photo for Testimonial
200
200
Should be roughly square, with the face roughly center-top; larger is okay, but might slow page load times
Photo in 50-50 layout
630
varies
Height can vary depending on the content
Causes: Adding a Cause
Several steps are needed to add a cause to the list that CSW supports.
Create Cause Category
- On the Admin side, go to Pages > Causes
- Enter a name, slug, and description like those of existing causes
- Click Add New Cause
Create Logo
- Create a logo similar to those on the Our Causes page
- The logo must be 500 x 500 pixels
- 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
- Create a new page with the cause’s name
- Click Use the Divi Builder
- When prompted, choose to clone an existing page
- Close from the page _TEMPLATE Cause Page
- In the boxes on the right of the screen…check the appropriate cause
- …check all member orgs related to the cause
- …in the Page Attributes box, set the Parent to be the page Our Causes
- 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
- 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
- In the boxes on the right, check the new cause’s name
- Save the page and confirm the cause now appears on the Our Causes page
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:
- Edit the Section (blue controls in the Divi editor) for the Hero Image
- Go to the Background section of the main Content tab
- 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:
- Edit the page using Divi’s visual builder
- Click the module’s properties gear (the gear in the gray controls) for the text module that has the hero’s title
- Go to the Advanced tab
- Open the Custom CSS section
- 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:
- Go into Row Settings (the purple gear)
- Go to the Advanced tab
- Open CSS ID & Classes
- In “CSS Class” add this text: fifty-fifty-reverse
- Save
Members: Adding a Member
Several steps are needed to add a member to CSW’s family.
Create Member Category
- On the Admin side, go to Pages > Member Orgs
- Enter a name, slug, and description like those of existing members
- Click Add New Member Org
Create Logo
- Create a logo similar to those on the Our Members page
- The logo must be 200 x 200 pixels with a white background
- The logo must be a JPG or a PNG file
- The logo file must be named csw-member-slug-logo.png — where “slug” is the slug you used above when creating the category
- Upload the logo to the media library (Media > Add)
- 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
- Create a new page with the member’s name
- 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
- Click Use the Divi Builder
- When prompted, choose to clone an existing page
- Close from the page _TEMPLATE Member Page
- In the boxes on the right of the screen…check the appropriate member
- …check all causes related to the member
- …in the Page Attributes box, set the Parent to be the page Our Members
- Add the member’s logo as the Featured Image for their page
- Edit the page’s content to be appropriate for the new member
Edit Individual Cause Pages
- 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
- Save, then confirm that the new member now appears on that cause’s page.
Edit the “Our Members” Page
- 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
- In the boxes on the right, check the new member’s name
- Save the page and confirm the member now appears on the Our Members page
- 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.
- Edit their category. On the Admin side, go to Pages > Member Orgs and edit the category description to be “Former Member Group”
- Remove the member from Cause pages. For all causes related to this member, edit the cause’s page and uncheck that member’s box
- Remove the member from the Our Members page. Edit the Our Members page and uncheck the member’s box
- 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>