wellspringnc.com Website Maintenance - WellspringChurchNC/prod-team GitHub Wiki

Sections in this doc ...

Background / Content Overview:

Most of the main pages and content is done using wordpress with a tool called beaver builder and can be edited easily / directly from there.

add SEO requirements

  • Menu - go to Appearance-->Menus on left navigator
  • Home page - go to Pages on left navigator, then hover over Home and then click on Beaver Builder
    • Slider (slide show) - hover over the slider, click on the wrench icon, click on the Slides "tab" to add, edit, remove, and/or reorder slides.
      • DONE define standards for slider graphics ... 1920x974
    • 3 column content (Happening Now ... section) - it's content comes from Posts
      • the design for the 3 column section might be under Beaver Builder-->Saved Modules and is titled Posting Module From Homepage it appears that it actually is it's own posts module within the home & visit pages ... you have to edit it on each page to make changes to it ... so the changes (on the 3 column settings, not the individual "cell" contents) have to be reproduced on both the home & visit pages (ie the post display order)
      • this element is edited on the home and the visit pages
      • If you need to change the button text from Read More to something else, you need to open the module in beaver builder and then select one of the buttons, then the wrench to open the posts window. At the bottom of the layout tab there is a More Link Text field ... note that this change applies to all 3 buttons
      • the wordpress Posts navigator has the content that is displayed for the 3 columns - published posts are displayed in one of the 3 columns
        • you can have more than 3 posts saved / available (recommended) ... ideally set non-displayed posts to Draft
        • posts were displayed by date created (most recent first) ... ~~it is now displayed by last modified date`` (most recent first) ... this can be a bit tricky to get the desired result ... you can use the quick edit option in wordpress to set the "published" date to any month (ie display order 1=Jan, display order 2=Feb, etc) ... make sure the year is the same year for all posts to get the desired result
        • you can remove a post from being displayed by changing the Visibility field to Private (right side of wordpress editor for the individual post) OR make sure that there are at least 3 other posts that have been modified more recently that have earlier months set (since we're now using the published date to define/control display order) OR put the post in Draft (best way)
        • make sure the Excerpt box is checked under Screen Options on the top right (under your name)
      • easiest way is to make a new post by clicking the New Draft link on an existing post (makes a copy)
        • using the wordpress editor change:
          • post title/name (field between Edit Post and Permalink ... looks like word1 <span class="bold-text"> word2</span>
          • Permalink (or verify it)
          • Snippet for Yoast SEO content & possibly Focus keyword
          • Excerpt --> 3 very short lines, see other posts for examples
          • Slug --> basically your post or page title ... hyphenated word(s) should match what's in Permalink
          • Featured Image on the lower right side, upload appropriate image (ideally w/o text on the bottom half of the graphic) and is sized at 353x239. Add it to the media library with standard caption & description, make alt text meaningful
          • click Update button to insure changes are saved, then launch beaver builder and add/edit top graphic (size TBD) - Row Settings / Background Photo, and the text - Text Editor (bold "title", then some italics, then some normal body text)
  • Major pages - go to Pages on left navigator, then hover over the page name and then click on Beaver Builder
    • page name is obvious for Home, Visit, About, Next Steps, kidSpring, LIFEgroups, Join The Team, Invite, & Podcast
  • Links? Don't recognize any there ... but think we may want to have ability for custom links that point elsewhere (ie ... current series).
  • Forms - these look like they are done with a combination of Forms (where the fields are defined) & Popups (how they are displayed) via the left wordpress navigator ... there are currently 3 defined (sign up for Discover Wellspring, general Contact Us, and a Get Baptized)
  • Media (Library) - where all the of the image / graphics "files" are stored
  • Podcast - generally this is not changed using the wordpress interface ... all of the content shown here (graphics & sermon audio) is udpated by the tech team

Routine Changes / Updates

To help with managing requests for changes / updates, a trello board was created and has templates for the most common things asked for. Going forward (and to document the work), all changes should be requested using this board. Before making any change ... it's a good idea to review these prereqs / notes / checklist / good practices:

  • familiarize yourself with the general layout, menu structure, re-used components of the actual published site
  • review from above where the changes may need to be made (page, post, form) within wordpress
  • make a backup copy before performing the change (this can be done using the new draft or clone option)
    • have a plan to reverse the change / restore it back to the way it was (this can be done on many elements with the revision review option).
    • if there is no immediately / easily recognizable way to back out the changes then make sure you have a way to restore using getflywheel.com (we have an account)
      • this may be the safest / easiest way to restore a change as backups are done daily and if you try to make no more than a single request / update per day, you can reduce rework if you need to do a restore (clearly not practical if working on a major site rework / redesign).
  • test the change on multiple platforms (laptop, tablet, phone)
  • have one or more peers also test the change (preferably on multiple platforms)
  • watch out for (page) 301 redirects (they can be found, created, edited by going to the plugins / redirect plugin / settings navigator options within the wordpress admin console)

Sermon series ... need to change / update the following (url is current-series1)[wellspringnc.com\current-series1]:

  • if requested, Home page slider (add a graphic / slide in the slider) ... pay attention to slide order & size of graphic
  • column(s) on "Happening Now ..." - should update automatically when you add / edit the posts:
    • in general, keep Current Series group link and join the team posts (ie, don't delete them) ... only the current series post should be edited / updated / kept current; the other 2 may only need minor modifications over time. Note we also added a you're invitedgeneric post so that at a minimum we will always have 3 "default" posts
      • might be useful to clone the "current series" post (making a copy) ... the clone is set to draft ... change the url to something other than current-series1 and then it can be republished if you want the history available
      • pay attention to the details above starting at the overview bullet above that begins with 3 column content (_Happening Now_ ... section) for adding / creating new posts ... change the visibility of the post you don't want show up when adding a new one.
    • review the entry in the slug field using wordpress (not beaver builder), it shouldn't need to be changed for the current series post
    • change the text in the Excerpt field (scroll down to bottom, when editing Post in wordpress (not beaver bulder)
    • to insure that the posts shows up in the correct order in beaver builder; do a quick edit/modify/publish for the one you want on the right and set the month to Mar (03), the one in the middle set the month to Feb (02), and the one on the left set the month to Mar (03)
    • update the small graphic (in the wordpress view) and the large graphic & text (in the beaver builder view)
    • the Current Series page is the major content in its post (see above) with its link set to www.wellspringnc.com/current-series1/ ... review that the link and content looks as expected
  • Invite page (to update graphics there) ... would like to discuss relevance of this content (or need to change it often)

Events ...

  • basically, these would get published with one ore more of the following elements:
    • slides for home page
    • posts for happening now 3 column section
      • to insure that the posts shows up in the correct order in beaver builder; edit/modify/publish the one you want
    • downloadable media for the invite page

Announcements (i.e. Church cancelled / no service)

  • typically, we just add a slider ... need to confirm sizes and layout size should be 1920x974
  • noticed a particularly tricky problem with text on graphics getting overwritten by life is better together text and plan a visit button ... these are currently "turned off" and was accomplished by doing the following:
    • edit home page with beaver builder, scroll down between slider and Happening Now ..., you'll see an "empty" box with a wrench ... click on that to bring up the properties dialog
    • click on the advanced tab, turn it off, set Visibility to Never, then click Done and Publish
    • when the slide is removed (announcement is over, etc), easy way is to reverse / revert the revision in the wordpress admin edit page view ... while this may be "easy" probably not the best way to do it we are leaving it off for now, too many graphics have text and other features that get blocked by the text & button

Broken Stuff:

  • Communications & Timing
    • what is the expectation on how soon changes need to me made ... think this should be written down
      • ie for new sermon series / when events complete ... Jim can currently update the Sunday evening after the series or event ends
    • How does the "webmaster" get notified of new things that need to be posted ... currently Eric emails & texts we're now using a trello board - typically Bruce fills out the cards for updates and changes.
      • an example of how this did NOT work well, no service graphic ... *dave slacked me that he was waiting for a graphic, but no follow up
        • i happened to watch trello for it (but what if i didn't have access or watch it ... ie lost power, no internet access, had a storm issue to deal with, not available / on vacation) ... probably need a backup / plan b as this could be a real problem
        • i added a trello-notifications channel to slack and now get notified every time a card is moved (ie from in progress to complete)
  • Home page slider
    • ~~want to selectively turn on / off "LIFE IS ..." and "PLAN A VISIT" - they interfere with words that are on slides home page ~~ NOTE THIS IS NOW TURNED OFF ... see info below
    • there are different size graphics used on sliders ... causes strange sizing behavior on home page (especially on "portrait" screens) ... FIXED - set standard as 1920x974
  • Home & Visit page in Happening Now at Wellspring ... section
    • update sermon series ... now FIXED there is a single post for the current series and it should be updated each time there is a new series
    • FIXED Read More buttons don't line up (when 3 columns are displayed)
    • FIXED GroupLink graphics & text should be consistent ... graphics has incorrect grammar (or spelling) https://www.wellspringnc.com/wp-content/uploads/2017/09/GroupLink_AnnouncementSlide.jpg GroupLink Announcement
    • this would be a good example for us to start having "templates" of graphics so we could make minor changes instead of having to go to Gabe for every update/change
    • FIXED 1/23/19 somehow a 2nd visit page was cloned/copied in Dec or Jan ... it was moved to trash
  • About page
    • Learn More button for LIFEgroups (should link be updated / corrected to LIFEgroups instead of life-groups?) - DON'T FIX - a minor issue that ultimately doesn't matter and may be a hard requirement of wordpress
    • Wellspring Story ... extra ! in 26 kids! is incorrect punctuation
    • What we believe
      • capitalize His in Jesus, Him in Eternity
      • add the word sin to Human Beings
      • fix self- ruled hyphenation in Salvation and don't capitalize Spiritual
    • Rework the meet the team page ... get real pics done
    • Eric ... should married to Laura be since 199x or we have to update 18 years every year
    • Family pic at bottom should be updated ... very old
  • Next Steps
    • Discover Wellspring ... is it still an hour long class? SHOULD BE CHANGED TO GROWTH TRACK
    • validate sign up now buttons for discover & baptism ... they have same links when mouse is hovered, but seem to show proper form when clicked ... think the real change is to see if the link can be changed from serve to sign-up
  • Visit page
    • FIXED - "Your First Visit" ... to ... "Your first Visit"
  • kidSpring page
  • LIFEgroups
    • update photos for groups ... consistency?
  • Join the Team
    • update photos for teams ... consistency?
  • Invite
    • Use these tools to ... - what tools?
    • Download buttons show graphics ... what's the intent?
    • in the absence of further direction, put up some "common" brochure / mailer types of "invite" materials
  • All contact us or sign up "forms" should be reviewed for content / completeness
  • All buttons need to be verified that they link / work as expected

Prep for a major rework of the site ... multiple questions need to get answered:

  1. Is the mission being reworded? From what to what exactly?
  2. Can we reuse the LIFE boxes (ie just change the text content in each box) on the home page or do we need to completely rework that section (ie the layout / interaction)? I was able to use the staging site to show several leaders an advance / draft version of what the changes might look like doing this on 9/11/19; and the impression I got was that it was an acceptable approach. So that's the current plan.
    • note that these changes had some unexpected behavior. there appears to be extra h2 modules stored in the design that are only editable / visible if you switch the beaver builder viewer to "mobile compatibility mode" ... suggest to proceed with changes slowly.
  3. What changes need to be made to the about page ... ie the 1st paragraph of the wellspring story
  4. Any changes on the next steps page? https://www.wellspringnc.com/next-steps/
  5. Any content updates for invite page?
  6. Any content changes for join the team? dream team?
  7. Does LIFEgroup need to change to Lifegroup throughout? unclear on direction

Some overall change log type of stuff

  • 2020 May 7th - prepping for turning over maintenance to Gabe
    • updated / refreshed staging site - to test all updates for plugins, etc
      • meant to test plugin updates on staging, but it looks like I accidentally did it on prod (and killed the site w/a critical error) - was able to restore it w/today's backup so back to where it was
      • tried again to update plugins ...
        • selected all EXCEPT the two beaver builder ones - OK
        • beaver builder (probably can't update because it's tied to normal site) ... licensed
        • UABB updated ok
      • probably can't update forms on staging either (new version available) ... licensed
      • popup maker indicator was just ad for other extensions ... just viewed them all and it went away
      • yoast seo update, worked fine
      • theme updates ... all but beaver builder updated
      • site health report - looks like most of the issues are associated with this being a staging site
        • verify SSL insecure content filter plugin ... delete it? it isn't active ... will validate on the prod site
      • browsed all main pages ... everything seems fine
    • on to prod site ... if there's a problem, we can restore with backup from May 7th (assuming nothing new added to the site)
      • updated all plugins except beaver builder
      • cleared popup maker indicator "ads" for other extensions
      • yoast seo update, worked fine
      • problems
        • can't update beaver builder (looks like the plugin is an agency version) ... can't update theme either
        • gravity forms license key invalid or expired
  • 2020 Mar - Lots of changes with reacting to COVID19. See trello board for history. A high level summary ...
    • created a 2nd redirection for lifegroups (ie similar to what we do for students)
    • updated students page ... new elements, removed elements, backed up (copied) original
    • added a post for students page (to be in main page happening now) that then does a redirection to student page
    • re-enabled slider button for "watch online" re: notes that it's OFF in above sections:
    • added a prayer page/form (request from Vic via email ... not in trello)
  • 2020 Feb - Investigated the possibility of using google drive to update graphics for "happening now" section of the students page.
  • 2019 Dec to 2020 Jan - Created Students page
  • 2019 Nov-6 - running https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.wellspringnc.com%2F
    • mobile = 38, desktop = 81 (got poorer scores in the office earlier)
    • setting up smush plugin to improve a few things (primarily serve images in next gen formats and lazy load (page insights also suggested amp plugin ... will wait).
    • mobile = 70/62/41/40/76/55/52, desktop = 86/78/83/83/85/79
  • 2019 Oct-31 - installed and enabled scriptless social sharing plugin for the posts
  • 2019 Oct-11 - created a [email protected] gsuite account, created 2 monitors on uptimerobot.com and a slack webhook URL https://hooks.slack.com/services/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 connected to the website-monitor private channel, need to watch if there are any ill effects from this.
  • 2019 Oct-04 - signed up for and enabled reCAPTHCA v2 (v3 seemed to not fit our use cases as well) as we were seeing a LOT of bot posts on our contact us form (typically only 3 a month to 96 in Aug, 198 in Sep, 19 in the first 4 days of Oct)
  • 2019 Sep-03 - enabled a staging site on flywheel as a prep for a possible complete rework of the main (and other pages) is expected
  • 2019 May-30 - changed DNS entry from 104.131.179.199 to 151.101.194.159 (per email from flywheel on 5/30)
  • 2019 Mar - "onboarded" Dave Leonard / [email protected] to help primarily with ads (facebook and/or google); he has access to:
    • wordpress admin, godaddy, goflywheel, search console, analytics, my business, (non profits)
    • Dave enabled SSL / HTTPS via flywheel's free LetsEncrypt SSL ... all certs are automatic
  • 2019 Feb - obtained access to godaddy account (provide our domain name registration)
  • 2019 Jan - drafted graphics "standards" doc for common "web" graphics
  • 2018 Dec - contracted Erica Switzer to make updates to improve SEO
  • 2018 Nov - obtained access to goflywheel.com and was able to do a backup / restore
  • 2018 Oct - learning the site ... how it works, things that need to be changed routinely, how to do it safely
  • 2018 Sep - started documenting website: status, questions, issues, things that have to be routinely changed

ToI / background / questions for Jason ... when site was first turned over for routine maintenance (Oct 2018)

home page slider / turning off LIFE IS ... and PLAN A VISIT

  • without some coding, can't be turned off dynamically (by content), but I can turn it off (hide it) when needed
    • edit home page with beaver builder, scroll down between slider and Happening Now ..., you'll see an "empty" box with a wrench ... click on that to bring up the properties dialog
    • click on the advanced tab, turn it off, set Visibility to Never, then click Done and Publish
    • original code in the for the button / text
<div class="slideheading">
    <h1><span>Life</span> is Better Together</h1>
   
</div>

<div class="homebtn">
    <a href="/visit/">PLAN A <span>VISIT</span> <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
    </div>
    <div class="scoller">
        <a href="#content">
<img src="/wp-content/uploads/2017/08/mouse.png"/></a>
    </div>
    </div>
  • what should a slider graphic be sized as? current sliders are: 1920x974 (2), 1024x768 (unchained), 1800x1189 (storm trooper), 1800x1200 (kidspring block party) ...
    • any differences for mobile vs PC? designed around wc3 standard
    • any other graphic (size) standards that should be observed? probably 1920x974
  • (think i've figured this out now) how does the 3 column "happening now" element get edited
    • looks like it is solely based on posts
    • have to enable the "excerpt field" using Screen Options on the upper right
    • change the post title/name, the pic, the excerpt text, and maybe the slug field; and that should update the 3 column views
  • was able to edit the "current series" post but the links no longer work ... goes to wrong page/section
    • turned out to be an artifact left over from previous / first site design ... changed page to current-series1
  • how can I configure the notifications for forms ... says {admin_email} currently for email address (where is that defined) ... looks like it's the one in wordpress-->settings
  • lots of users listed ... seems like some should be cleaned up - current list: dlxteam ([email protected]), fiyzv9 ([email protected]) - where does this go?, jason ([email protected]), jmpollard3 (me), John (jonhenry), newkrik (eric)
    • deleted above users that are struck through, added user for Gabe Reyes at Eric's request for SEO work
  • is there any kind of global / comprehensive & regular site backup
    • major elements in wordpress have a revisions review and you can restore revisions that way
      • click Edit on the page (or other element) in wordpress admin (not beaver builder)
      • select Browse link next to Revisions on the right side
      • select the revision you want to restore and then the Restore This Revision button
      • re-open the page in beaver builder and then click Done and Publish
    • looking for a way to backup the entire site and be able to restore it to one or more point-in-time backups
      • we have an account for getflywheel.com ... Eric & Jason both have accounts ... created an account for [email protected] (username wellspring)
      • i tested that you could restore a backup (i first turned off the LIFE IS ... and PLAN A VISIT elements and verified that the changes made it/stored) ... restored Nov 13th 2018 backup (and the elements came back).
  • is there any way to see unpublished changes (every time I open a page in beaver builder it says Edited in the upper right (or is that "normal" behavior) ... ie can i see the "Edits" think this is just misleading ... nothing to worry about if ever concerned then click Done and Discard
  • Long term suggestion ... at some point may want to move site to convesio.com for web serving (Tom can migrate)

Tips

  • youtube video embed controls https://wpsmackdown.com/embed-youtube-video-wordpress/#using-iframe

    • when embedding youtube videos using iframes make sure to add ?rel=0 to the end of the src url (within the quotes)
    • for emails, texts, etc ... this example seems to work https://www.youtube-nocookie.com/embed/videoid?rel=0

  • images should be converted (optimized) to reduce size, load time, page load speed, etc

    • using https://imagemagick.org/index.php
    • from google
      • Follow the best practices for serving responsive images
      • Follow the image optimization checklist for individual images
      • verify that images are actually made smaller (sometimes they can get larger)
      • For example, you can use convert binary to optimize your GIF and PNG images with the following command (parameters inside brackets are optional): convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
      • JPEG is a lossy format. The compression process removes visual details of the image, but the compression ratio can be 10x larger than GIF or PNG.
        • Reduce quality to 85 if it was higher. With quality larger than 85, the image becomes larger quickly, while the visual improvement is little.
        • Reduce Chroma sampling to 4:2:0, because human visual system is less sensitive to colors as compared to luminance.
        • Use progressive format for images over 10k bytes. Progressive JPEG usually has higher compression ratio than baseline JPEG for large image, and has the benefits of progressively rendering.
        • Use grayscale color space if the image is black and white.
        • For example, you can use convert binary to optimize your JPEG images with the following command (parameters inside brackets are optional): convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg - example convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

Home

⚠️ **GitHub.com Fallback** ⚠️