Example Websites Archives

Do you ever pull up a website and wonder if it’s WordPress? Even if it is WordPress, it can be hard to know exactly how a site’s assembled. So let’s take a look at how Nonprofit WP itself was written and built!

As long as you understand the building blocks of WordPress, you will have no problem following along.

Hosting

NonprofitWP.org is hosted on SiteGround, my favorite affordable recommended host for nonprofit organizations.

It includes a free Let’s Encrypt SSL certificate to enable HTTPS for security and HTTP/2 for speed. Finally, with PHP7 enabled and the SG Optimizer plugin for enabling custom caching, the site loads really fast.

For additional security and speed, the site runs on Sucuri’s security firewall which actively protects against and monitors for hacking attempts.

Content

Everything about this site derives from the content. When I was first planning Nonprofit WP, I thought about the audience I wanted to target: nonprofit’s using WordPress. More specifically, I wrote for people trying to make a DIY WordPress site.

I then thought about my experiences with that audience and the type of information they needed to know. That list turned into an outline for the site. Over an intense month or so, I devoted lots of time to writing the first pages of the site and revising each one multiple times. When I felt like I had enough information composed to help my target audience—even though there are pages I’ve added since—I launched the site.

Importantly, as I wrote, I sought a consistent style and focused on writing each page for someone that is at a specific step in the website-building process. Following best practices for writing for the web, pages are long but well-organized and use highly-readable formatting. That linear style helped determine the design…

Theme

This site uses a default WordPress theme: Twenty Fifteen! You can view a demo of the theme (this WordPress.com demo is better than the one hosted from where you actually download the theme).

I chose Twenty Fifteen primarily for it’s navigation menu that runs down the left side of the page on large screens. While “old fashioned” in a way, the linear organization and available space reads like a table of contents, perfect for such a content-heavy site!

To give the theme a bit of interest, the site theme was customized using a “child theme.” A few custom colors plus some fancy CSS to allow for an icon with each menu item is just about all that gives this site it’s approachable and user-friendly design.

Plugins

This site uses quite a few plugins for features big and small. They’re divided below based on a few broad categories of need with short descriptions for each.

Content Administration

There are quite a few plugins I use to make it easier to write, display, and manage my content.

Admin Columns helps me adjust the display of the All Pages and All Posts pages with some useful additional information.
Advanced Custom Fields PRO gives me a handy development tool that let’s me handle custom content administration forms.
Content Audit helps me keep the site up-to-date.
Simple TinyMCE is a pared-down text editor with a few custom styles.
Post Status Menu Items helps me track the state of new pages and posts I’m working on.
Simple Page Ordering helps me organize the list of admin pages.
Table of Contents Plus automatically generates the awesome table of contents module at the top of most pages.
ThirstyAffiliates helps me administer and follow best practices for affiliate links (about affiliate links on this site).

Technical Administration Features

A number of plugins add behind-the-scenes features to WordPress that strengthen, fix, or adjust technical issues.

Akismet Anti-Spam connects a service from the makers of Jetpack to help block spam. This same spam filtering is included in paid Jetpack plans.
Cookies for Comments further strengthens spam comment blocking.
Google Analytics for WordPress adds easy tracking of all site statistics via Google Analytics.
Menu Humility and WP Comment Humility both improve the admin menus to focus me on writing good content.
SG Optimizer is a specific plugin from SiteGround to implement their custom caching and easy HTTPS setup.
Yoast SEO primarily adds lots of SEO best practices to the site and also gives me a few tools to improve my SEO.

Site Maintenance

A few plugins make it easy to maintain the site.

BackupBuddy automatically backs up the site and sends it to a cloud server for safe storage.
Infinite WP lets me update the site from a centralized dashboard along with all my other sites.
Sucuri Security connects the site to Sucuri’s scanning and firewall service. It also “hardens” WordPress settings to add even more security.

Front-Facing Features

Gravity Forms and it’s Stripe Add-on run all the forms, including the donation form which can take credit cards.
WCAG 2.0 form fields for Gravity Forms fixes multiple accessibility problems with Gravity Forms.
Jetpack‘s free version has lots of great small features like a nice commenting form, like and share buttons, a spell checker, and the blog’s email subscriptions (and more!).

Look at Examples but Make Your Site Yours

There is no list of plugins every site must use. There is no one theme that all nonprofits can use. It’s valuable to view example sites, but make sure that you plan your website carefully and only use the plugins you need.

Ask Questions in the Comments?

See anything on the site and wonder how it got made? Ask in the comments!

When you start planning your next WordPress website, you should take stock of what your peers are doing. Reviewing example sites will help identify nonprofit website trends, analyze common navigation and layout patterns, and inspire us to aim high!

Since I build WordPress websites for lots of nonprofits, I hear what sites people like and want to emulate. It’s surprising how often the same few sites come up. Reacting to these websites will always be a critical part of planning a site, but it’s also a process that can lead people astray.

When looking at sites, don’t just take in the visuals. Make sure to consider the audience, goals, and budget of the sites. Choose your role models wisely!

Does your nonprofit website serve the same audience?

The needs of your visitors should always drive your website’s design and content. So if you’re an association of trial lawyers, will the design of a site targeting young environmentalists make sense for your organization? Probably not.

It’s surprisingly easy to look past important differences between your organization and another when you’ve come to review a homepage layout. One especially common issue I see? Many large organizations you’ve probably heard of—think the Audubon Society or AARP—have such pervasive reputations that they don’t need to spend much time explaining their work to their visitors. Yet if a new visitor can’t figure out what your organization does, they will leave. Guaranteed.

To avoid learning the wrong lessons from other websites, think about the target audience of the site you’re viewing including their age, primary device (i.e. phone vs. desktop), cultural background, education level, and the top tasks they seek to accomplish.

An exact copy of a site will never be as effective for your organization. Learn from examples, and then adjust your website’s design and features for your audience.

How do your website goals support your nonprofit’s mission?

Just as each organization serves a different constituency, each nonprofit’s website supports their work in a unique way. The primary “business goal” of your website might be any of the following:

Increase individual donors
Develop institutional donors (completely different from individuals!)
Grow [social] media reach
Inform public about a specific issue
Provide a service (or intake for an in-person service)
Supply in-depth resources for research

Beyond the primary goal, sites must often serve multiple purposes. In most cases, the way your site supports your mission is different than each example site you look at. Again, this doesn’t mean you shouldn’t look around. It means you should seek to figure out why a website was built the way it was and how your site might differ.

(It’s common to see a website and be unsure of its primary goal or question whether that goal is the right one. Organization’s experiment and make mistakes. Don’t assume that every decision a favorite website makes is a good one!)

Budget Constraints Require Smart Decisions

Funding for technology is a constant struggle for small nonprofits. It’s critical to set expectations that align with your budget.

This is the worst part of looking at example sites: Especially with large, national nonprofits, the cost of their website may far exceed what you can spend. Heck, some nonprofits spend more on a website in a year than a small nonprofit’s annual operating budget!

When it comes to high-cost websites, watch out for:

Highly customized graphics or interactive navigation tools
Some types of ecommerce or donation setups (Though check out Give for an awfully nice WordPress donation plugin)
Branded fancy animations
Significant use of many high-quality large photographs and video

The more complicated a site is, the harder it will be to reproduce on a shoe-string budget.

Does the site even use WordPress?

WordPress is great at some things and less-so at others!

The control over design isn’t as fine-grained as SquareSpace, but it gives you way more ability to grow over time.
The online store integrations aren’t as good as Shopify, but you can blog up a storm.
Drupal and Plone handle content permissions way better than WordPress, but good luck training your new intern on updating the site!

You can see why certain organization’s might choose one tool over another. It’s true that WordPress can do just about anything, but that’s only true, as they say, given unlimited time and budget.

You should talk to consultant or experienced WordPress volunteer if you’re not sure if WordPress is best for you.

When you’re looking at example sites, keep in mind that they may use certain tools or customization time that don’t make sense for your organization.

How to tell if a nonprofit website uses WordPress

If you do want to know whether a site uses WordPress, it’s easy to find out! Enter the address of any website into WP Theme Detector. It detects a limited set of plugins and tells you what theme it’s using. Pay attention to whether it uses a prebuilt theme, a custom theme, or child theme.

Try it out for NonprofitWP.org! (This site is built with a custom child theme of Twenty Fifteen.)

Black iMac Computer Monitor Icon — Fill in the blank with something made just for you!

Getting the Most Out of Your Site

If you keep in mind the audience, goals, and budgets when looking at other nonprofit’s websites, you’ll end up with a better website. Why? Because you’ll start thinking about websites differently.

Instead of looking at a really fancy video and wanting a really fancy video, you can look at a fancy video and think about how you can appeal to your site visitors to achieve the same thing.

Both the nonprofit sector and open-source software share a love of collaboration, support, and openness. These are good things that make everyone better, but only when we make thoughtful choices for ourselves and avoid blindly following the latest trend.

So choose your website role models wisely:

Identify how those organization’s and sites differ from your own
Take inspiration from beautiful amazing websites

When you’ve done that, you’re ready to make the best possible website for your nonprofit.

Tag: Example Websites

The WordPress Recipe for NonprofitWP.org