General Advice

The Theme

“Floating” Content

Page Jumps

Recommended Image Sizes

Resizing and Optimizing Images

Updating a Slider

Plugin Descriptions

Google “My Maps”

General Advice

  • I’d recommend not choosing a specific font-size when editing/adding content whenever possible. When a specific font-size is chosen, it doesn’t “scale” well to different screen sizes. That means you can end up with very tiny or very large text on some screens. Instead use the “Heading” sizes such as Paragraph, H1, H2, etc.


  • Try to limit the number of items on the menu. It doesn’t have to be spartan, but not so many you find yourself accidentally clicking the wrong page. Similarly, I don’t recommend going beyond one level of dropdowns. Sub-sub-sub-menus make it very difficult to navigate a site.


  • For most work/editing on the site, stick to the “WP Admin” area. The interface looks quite nice, but for lags behind in speed and features. It also hides important settings when your site uses plugins.


  • It helps to preview content on different screen sizes (such as a phone). Especially if you’ve formatted content by manually adding spaces or line breaks. Those will often be “stripped” out by WordPress and won’t look the same on any other screen size or device.



  • I find that the “Infinite Scroll” and “Lazy Loading” settings in Jetpack are often more trouble than they’re worth. Using those settings can result in “blank” images or missing posts. Both issues are long-running and considered low-priority bugs.




  • Rather than share one WordPress. account to manage the site, it’s best if you use the People page to “invite” additional staff. They can still be administrators, but it’s much easier to manage users later if they have their own account. And it’s better for password security.


  • Make sure the “owner” account stays with the organization during any turnover. Otherwise you may need to go through’s “account recovery” process: That’s another reason ensuring each staff member has their own account is helpful.


  • Do NOT enable the “Jetpack Mobile Theme”. Despite the name it doesn’t add mobile features to your site. Instead it replaces your theme with a default blue one for visitors on mobile devices. This feature has been pending retirement for about 3 years.




  • Pages = “static pages“. They’re best for content such as an “About Us” or “Contact Us” page. Unfortunately you can’t convert posts into pages or pages into posts. If you make a mistake you’ll want to manually copy the content.

Return to Top

The Theme

I’ve used the “Shoreditch” theme for your site, as it seemed to match the old site best. However, I’ve added quite a bit of “CSS” to style it in a way that mimics the previous design and layout.

I’ve attempted to clearly label the CSS. If you need to adjust it/add to it, you can access the CSS area by opening the customizer:

Then clicking the “Additional CSS” tab.

I’d recommend not making any changes unless you’re familiar with CSS, but if you accidentally delete something or otherwise break the CSS, don’t panic. There’s a button named “See Full History” in the Additional CSS area that will let you restore a previous revision.

For that reason I also don’t recommend changing the theme unless you want to completely redesign the site. CSS is often specific to a single theme (there’s no universal standard), so there’s no guarantee it will work on another theme.

Return to Top

“Floating” Content

When using “Align left” and “Align right” on multiple images and paragraphs, you can end up in situations where the content is staggered oddly in the editor’s Visual mode.

If you publish the page it will behave normally, but within the editor itself it looks chaotic. To get around this we can use “Clear Floats” to separate these chunks of images and text.

Make sure the cursor is at the end of one image and text group (in the example here that would be at the end of “Email: DuncanC (at)”.

Then, click the “Clear Floats” button.

That adds a “Clear” line between the two sections that tells the HTML “Don’t wrap the text that follows around the previous image.”

On pages where you’ll have multiple left- or right-aligned images (such as the Leadership page), adding a “clear floats” between each image+text group saves you the frustration of trying to manually line everything up with spaces and line breaks.

Return to Top

Page Jumps

The support page for creating Jump Links is excellent, but here are the highlights.

You’ll need to use the “Text”/HTML view to creating the “ID” for the page jumps.

It’s simplest to choose text that already has a “tag”, such as a h1, h2, etc. This is why using heading text is a natural choice for page jumps.

Modify the “opening” tag and type in id="tagname". The ID can be anything you like, but make sure it’s a single word or that it contains no spaces.

Next you need to add the ID to the page URL. In this example I’m using the page.

Add a single “hashtag”/”pound symbol” to the end of the page URL, then type in your ID name from the previous step.

Think of the page URL as the street address of a building, and the ID is the apartment number.

Now when someone clicks the link:

They’ll be taken straight to the “Our Team” section of the Leadership page.

On long pages you can also add a “return to top” link. This one is easier, because you can use the same exact HTML on any page:

<a href="#">Return to Top</a>

Using a single hashtag as the “URL” creates a link that jumps to the top of the current page.

Return to Top

Support our COVID-19 Relief Housing Fund