How to Make a Nonprofit Website with WordPress [Step By Step: 2023]

GET HOSTING & FREE DOMAIN
nonprofitally.com/hostgator
LEARN HOW TO MAKE A NONPROFIT WEBSITE
Want to make a complete website, from start to finish, for your nonprofit? This step-by-step tutorial will show you everything you need to know.
Learn how to get hosting, a domain, install WordPress, edit your images, customize the design, add your own logo, set up a donation page that takes live payments, add an event calendar, post latest news and more.
In the end you will have a great looking website for your nonprofit. And best of all, you will know how to keep it updated all by yourself!
WORDPRESS DONATION PLUGIN - GIVE-WP
We use the free Give-WP plugin to create the donation page. But if you want more advanced features (like recurring donations, anonymous donors and more gateway options) check out the Give-WP Premium plugin at givewp.com/addons/ref/463/.
LESSONS
00:00:00 Introduction
00:01:22 What Does It Cost?
00:01:50 Difference Between Hosting, Website & Domain
00:02:49 Signup for Hosting & Domain
00:09:09 Install WordPress
00:15:08 WordPress Settings
00:19:35 Install Plugins
00:26:21 Install Your Theme
00:28:27 Install Theme Template
00:32:43 Back Up Your Site
00:36:34 Add Your Pages
00:43:56 Create Your Menu
00:49:28 Customize Your Colors
00:55:03 Build Your Header
01:08:30 Designing Pages
01:09:29 The About Page
01:22:27 Optimize Your Images
01:44:26 The Services Page
02:01:15 The Contact Page
02:14:24 Edit Contact Form
02:19:28 Add a Calendar
02:29:00 Latest News
02:36:59 Add a Sidebar to Blog
02:45:01 Create Your Donation Page (GiveWP)
02:56:05 Add Your Payment Gateway (Stripe)
03:04:28 Setup Donation Thank You Emails
03:12:35 Design Your Home Page
03:30:28 Customize the Footer
03:44:07 Mobile Friendly Settings
03:51:23 Updating Your Website
03:55:34 Clean Up & Caching
03:58:06 END. You Did It. Congrats!
---------------------------------------------------------
*I use HostGator for hosting and domain purchases, and recommend it in my videos. The above link is an affiliate link, so I will receive a small commission.
---------------------------------------------------------
*I use Give-WP with all of the nonprofit websites I make. It is more than just a donation page. It is a donation platform. I only affiliate with products I trust and use. I hope you find Give-WP to be as useful as I do.
THANK YOU!

[@younisibrahim3968]

Guys, I tell you, this content cannot be found in a paid course. Thanks for the time and effort you have devoted to this super informative and detailed video. This bald guy is a hero.

[@npally]

So glad you are getting something out of this video. I appreciate the feedback and looking forward to making more (similar) videos.

[@ja2ui0]

Oh my gosh. I found myself holding the bag to set up a website for a nonprofit I've been involved with for a while. I have a very strong background in systems administration and tech in general, but web design has been something I've avoided like the plague. This video right here? Probably the best value on KZbin, and I watch a LOT of educational KZbin. Thank you so much for bringing this video to the world, I'm subbed and will spread the word.

[@npally]

Love to hear this! Thanks for the feedback. Let us know if you have questions.

[@theshadowknowz5900]

Thank you for your patience...

[@sherryross2866]

Thank You Steve, You Are A Blessing 🙏🏼

[@user-zq9zi5if7j]

Thank you for taking the time to make this video. Truly appreciate it! This step-by-step made is so easy to get my nonprofit up and running. quickly.

[@npally]

Just what we love to hear. Thanks.

[@richardschneider9279]

Thank you so much. Your step by step instructions helped me create a website for my nonprofit.

[@emmanuelbaidoo230]

Thanks Steve, I really like your way of teaching . This a valuable lesson that could have caused much

[@Atulwebdesigner]

Nice video Steve. Very useful for me as a I am a freelance web designer. Thanks for sharing.

[@npally]

Awesome. Hope you find it helpful.

[@khorshedamath7519]

Thank you so much, Steve! I appreciate your effort in making such a wonderful tutorial. The only thing I have noticed is that perhaps you forgot to mention how to customize the toggle button for mobile view. However, I figured it out.

[@elonthomas9821]

Thank you so much for this detail video!!! ❤

[@npally]

Thanks. Glad you found it helpful.

[@samuelbhatti]

Hi Steve! Thank you very much for sharing value able info. I appreciate your effort to make it possible for lay people to be able to create web sites.

[@npally]

Thanks. I see you edited this comment. Did you find a solution for your issue?

[@samuelbhatti]

@@npally Thanks for your concern. Yes, I did manage to solve it. I am working on my website may be I will give you a shout .

[@zreza]

Wow. Such a great video. Very helpful.

[@npally]

Glad to hear. Thanks for the feedback.

[@nmcfbh01]

Thank you so much for the info! I am doing this now step by step…. #fingers crossed ❤️😆

[@npally]

Great to hear. Let me know how it goes.

[@munnagandhi6561]

You are a hero. True legend. trust me boss, Hats off to your content❤️❤️❤️❤️❤️❤️❤️❤️

[@npally]

Wow, thanks. Much appreciated.

[@hopefilmfoundationafrica]

Thank you so helpful

[@npally]

Glad to hear. If you end up completing a website share the link with us. Would love to see what you create.

[@zyaki2083]

I am 15 years old am looking forward into putting my heart into something like this. I want to help the world to make it a better place, and make a website like this so it goes into my collage resume. Thank you for making such an educational, step-by-step video of how to do something like this! Very Nice!

[@zyaki2083]

If I any questions throughout the video, I will ask and be specific as possible.

[@npally]

That is great top hear. You made my day.

[@tyanni21]

Thank you so much!! What you saw is what I saw (for the most part). On Stripe I tried to remove Stripe from the credit card but I was not able to make any changes . Stripe - Credit Card - You are right. This will probably confuse folks. How can I change it? Thanks again for all your help. Awesome job!

[@shogoyeadeshina9143]

You have done a fantastic job. You are a skilled teacher. Well explained and you showed mastery knowledge of the project. Sir, I need more assistance on how I can make my website to rank fast on google, to gain traffic and accept donations in both fiat and cryptocurrency. Thanks

[@uduakudoffia9274]

Hi Steve. I finally finished my website. Thanks for all your support 🙏. Also, I have a question: How do you turn on stripe to accept donations from other countries'currencies?

[@npally]

Congrats on getting your site completed. I believe Stripe supports many currencies automatically. You can read more here - docs.stripe.com/currencies?presentment-currency=US

[@theshadowknowz5900]

Thanks...we need for out of the country donations

[@npally]

Cool. When you get the part about GiveWP you may want to investigate their payment gateway addons - givewp.com/addons/category/payment-gateways/

[@uduakudoffia9274]

Hi Steve. The Logo is showing on the front of the picture on my main page.. How do I adjust the logo to move out of the area?

[@npally]

Sounds like you have the pages transparent background turned on. You can turn this off on the page, by going to pages > edit... then once on the edit screen click the astra logo in the top right. This will open a sidebar with some settings. I believe the transparent options are in the Advanced setttings. If you want this to be done on all pages that is in the customizer. I would suggest just searching KZbin for tips on that - "how to remove transparent header in Astra theme". That should get you more details. Hope this helps.

[@shogoyeadeshina9143]

Also what can we do if our clients are from a country where PayPal and stripe is not allowed?

[@alss-dance-in-the-wild]

Help! The Events Calendar just updated, and now my cell no longer displays the calendar. Any thoughts? Aaaand, this video is priceless!

[@npally]

Hmmm. There could be a lot of reasons for that. Could be a cache issue, could be a conflict with another plugin, could a jQuery issue. Solutions, try going to the plugin support page at wordpress.org/support/plugin/the-events-calendar/. That are usually pretty helpful. If that doesn't work you an try my business contact at web907.com/contact/.

[@uduakudoffia9274]

Hi Steve. How do I create individual emails for my foundation workers?

[@npally]

There are a lot of ways to do this. But I do not have any resources on this. Here are some ideas - if you have access to cPanel, you can create emails directly in there. Just do a KZbin search for "creating emails with cPanel". Other than that you can either sign up for Microsoft 365 for Google Workspace. Again, this is worth a KZbin search as both these products can be complex.

[@uduakudoffia9274]

@@npally Thank you 😊. I was able to use Hostgator Cpanel since I used it during my initial website build following Steve instructions.

[@uduakudoffia9274]

Hi Steve I have a question. I finished typing our mission and our vision. How can I publish it in my page? When I click on Edit with element or it seems it's not linking with my main page. Please advise. Thank you!!

[@npally]

Be sure the page you are editing is the actual page that is being linked to in your main menu. 1. First in wordpress > pages menu, scroll over the page you just updated. When you scroll over it a menu will appear below it and you should see "view page" there. Click that and confirm that your updates were made. Then in the browser address bar copy/REMEMBER the URL. Now, click on your main menu of the website to view the page. Is it the same page? Same URL? If not, then it is your main menu that needs updating. Let me know if that helps.

[@morby1296]

Hey steve, I can't find the template you selected in the video. Can you tell me what is the problem?

[@npally]

Do you mean when you type in "Charity" it doesn't show. Try searching for "nonprofit". If you don' find the exact one, that is OK. Just find one you like the look and feel of. You can still follow the rest of the video regardless of which template is installed.

[@KCBridgewater]

If I want to align the top image section with an added video where are the controls to align the video

[@npally]

Hmmm. That would depend on how you added the video. But most likely the alignment would either be in the row or column settings and not the actual video. So it you mouse over the column/row and icon (usually at the top left when you scroll over the element) should appear. Click that to engage the settings for the column/row. Some times there are settings within setting within settings, so you may have to dig down to find which setting is controlling the alignment.

[@KCBridgewater]

@@npally thank you

[@braunzie2]

Thanks Steve. I was able to overcome most obstacles. I do have a question that was not discussed, Links to admin emails were not talked about and how that admin retrieves them. Please let me know.

[@npally]

Sorry I did not get to this earlier. Can you be more clear on what you mean? A link to an admin email is a very broad topic. For what purpose? In relation to what?

[@braunzie2]

@@npally Hi Steve, The template of the website has email buttons that indicate that the user will be able to email the abmin. There is also a form on the contacts page too. However, there is no connection to that email name. While I was able to change the email name, there is no notice on the admin account that will tell me that an email has been sent.

[@npally]

@@braunzie2 OK. So you are talking about getting emails from the email form on the contact page? And you have updated the email form with your email address? Which plugin are you using for the contact form? WP Forms? It can be difficult for emails to get sent from websites.

[@braunzie2]

@@npally Yes. Just receiving emails. It says I have created a form but I cannot see it as a form but I used to. I do see a block under the "Message us" that has a W in it. There are also admin contact references in the footer on every page. I just need them activated so I can get feedback.

[@npally]

@@braunzie2 Sounds like you are missing the shortcode on your contact page. As for the footer, you want to activate the email addresses? That needs html code. It would look something like this: Email Me at [e-mail]. If you want, try reaching out to me via my business contact page at web907.com. Thanks.

[@jobuexplorers]

How long can it take for one to start receiving donations?

[@npally]

Technically, you can start getting donations within minutes of setting it up. But you will need to let people know they can donate. You can use your email list, Facebook page, blog post, etc. to get the word out. So people will need to be directed to your site and inspired to donate. This video is mostly about setting up the website. Here is a playlist with videos on getting donations - kzbin.info/www/bejne/mZ63e39pgston7c

[@braunzie2]

Hi Steve, The purchase of the domain was easy but I keep getting a 404 error message when trying to access the website. I tried to add a template in the wordpress install but to no avail. Not sure what to do.

[@MORONGTRAITIMHEARTOPENINGFOUND]

i got the same error, what should i do now please?

[@elizabethwilliams2333]

Hello, I was creating a website but needed to update the Latest News in order to complete the webpage. I keep getting a message (Publishing failed. The response is not a valid JSON response) Can you please give me information to correct this issue. I have really learned a lot from you. Thanks so much for this video.

[@npally]

This could be a permalink issue. See if changing the permalinks to a different type (like plain) and see if that works go to Settings > Permalinks. Be sure to click Update at the bottom of the page. Ideally though your permalinks should be set to "post". In the end, this can be a tricky one to diagnos. Here are couple more links to try for troubleshooting, themeisle.com/blog/how-to-fix-updating-failed-the-response-is-not-a-valid-json-response/#gref. rankmath.com/blog/fix-invalid-json-error/.

[@elizabethwilliams2333]

@@npally I want to thank you for your help. The first issue is solved now I'm getting a 404 message code for my calendar and my donation page. Everything went so well until I got the the end. Do you have any suggestions. I really want to be done with this website. Lol

[@npally]

@@elizabethwilliams2333 If you changed the permalinks and did not return them to the original setting this could cause the error. So you can either update the links in your menu to these pages or return to the original permalink settings. The best recommneded permalink setting is "posts". If this doesn't fix it then it could be a variety of other things. Hard to tell without access to the site.

[@elizabethwilliams2333]

@@npally Thank you so much for all your help I finally got it settled. It is now live and working very well.

[@KCBridgewater]

i preformed and test donation but im have not received an email what did i do wrong?

[@npally]

There are a lot of reasons an email may not get recieved when sent from a Wordpress website. It many be you need to add an SMTP plugin to your website. I would suggest just searching KZbin for "not getting emails from Wordpress website", you'll find lots of potential fixes that way. But first check your Donations > Settings > Emails > Email Settings. And go down to "From Email" and be sure the "from email" is using the same domain as your website. If your website is "savechildren.com" your "from email" should use the same domain, for instance [e-mail] or [e-mail]. If these don't match the an email server may reject the email as spam. Then in Donations > Settings > Emails > Admin emails, you can still have this send to whatever email you want. Hope this help.

[@emmanuelbaidoo230]

Hello, Steve Please some of my page content did not show up after installing the theme. The home page footer widget (E-mail Form) did not show up Only the contact details showed how I can restore or upload that content. The same applies to the Contact Us page. The E-mail form did not show up. how can I restore or upload those content?

[@npally]

That is odd. You can try reinstalling the template [timestamp 28:27]. If that doesn't work, I would contact the support team at Astra. It should just install the whole template site.

[@emmanuelbaidoo230]

It worked thank you @@npally

[@hothumblegenius]

Why are you using WordPress plus another website builder? Doesn’t WordPress host domains and websites on its own?

[@npally]

Wordpress is the platform. It has a very basic and difficult to use page builder built in (Gutenburg). Most designers will install page builders like Beaver or Elementor as they are far more powerful and a lot easier to use. Wordpress is a stand alone application that gets installed on a server (as we demonstrate) and it is FREE. I think you are referring to WordPress.COM - which is a fee based service that will install and host WordPress on their own servers. It also limits your use of plugins, upsells their services and has a go-between interface that makes it difficult to customize wordpress and install plugins. We do not recommend Wordpress.com. We recommend getting your own hosting and installing Wordpress (wordpress is FREE). I realize this can be confusing. Hope this helps clarifiy things.

[@jobuexplorers]

I have a problem. I have tried to do away with the billing section but it is not working, though I didn't use stripe. What do I do?

[@npally]

Can you be more specific. What do you mean by "billing" section. The site does not include such a plugin. I would need to know what you are specifically referring to to help more.

[@jobuexplorers]

@@npally billing details and credit card info on the donation page.

[@npally]

@@jobuexplorers That is going to be controlled by your payment gateway (donations > settings > payment gateways). But I am only familiar with Stripe. If you are not using Stripe then the setting may not even be there. Every gateway is different. Some may not include the option to turn this off.

[@jobuexplorers]

@@npallynpally thanks for the info, my last question is, can one ignore the billing part while making a donation?

[@npally]

@@jobuexplorers If it is put their by the payment processor, the I don't think is it optional. If you really want it gone, I'd suggest using Stripe.

[@jobuexplorers]

Elementor is not loading on my end, what do I do?

[@npally]

Are you getting an error screen? It installed correctly? Sometimes an error can occur when you don't have enough memory set up for your website. This is somewhat technical but here is a short article on how to do it - themeisle.com/blog/increase-wordpress-memory-limit/. I'd suggest adding "define('WP_MEMORY_LIMIT', '256M');" (without the quotes) to your wp-config file. The link I gave goes over this. Hope this helps.

[@jobuexplorers]

@@npallynpally Thanks for this, I have actually installed elementor successfully. I now have a problem with the theme template which has failed to install, it is stuck on 7%

[@npally]

@@jobuexplorers Oh, that sounds frustrating. This can be caused by slow internet speeds or slow servers. The memory settings should help. If the issue persist you may want to call your host and have them adjust the max execution and memory. If you are using hostgator as suggested in the video here is how you can access this - www.hostgator.com/help/article/what-is-php-ini

[@jobuexplorers]

@@npallynpally Thanks for the beautiful response, lemi try other options

[@monroecanes]

I Followed the first steps, and when i clicked on my link for admin dashboard and also my website, I'm getting the error "404 error, Page does not exist

[@npally]

That is not an uncommon issue. It could be that your domain and website are so new that it just hasn't propagated yet. If you are using hostgator just give their customer support a call (866-964-2867) and let them know. They usually can fix it right away.

[@katojkalemba]

Hello, why does my woocommerce block donation

[@npally]

Hi, Woocommerce shouldn't block the donation. In this video we don't even install Woocommerce. But even it you have it installed, it should not interfer with GiveWP. Are you getting and error? How do you know it is being blocked? You may want to try contacting the GiveWP support team. They are pretty responsive and helpful.

[@Ekelinus932]

Can I make payment using my local credit card

[@npally]

Not exactly sure what you are referring to. Payment for what? Hosting? GiveWP donation page? Either way, a standard CC should work.

[@Ekelinus932]

@@npally for givewp donation page

[@user-ge2kd7xv9k]

Hello, please my Donate button is not showing in the mobile version of my website, any solutions?

[@npally]

That is an odd behavior. It shows on the desktop but not the mobile? Is it just the button that is missing or the whole form? There are setting within Elementor that will turn things off/on for mobile. If you changed those that may be the issuse. If the form is showing but just the button is missing, then that is odd. I would check with the givewp.com support for help with that.

[@user-ge2kd7xv9k]

@@npally No. I mean the donate button on the navigation bar of the website

[@npally]

Oh, thanks for the clarification. Go to Customize > header builder. In the bottom left you should see options for desktop > tablet > phone (they are just little icons). Select the "phone" icon. You then then add the Button to the header. Double check the tablet versions as well.

[@user-ge2kd7xv9k]

@@npally i just tried this but the donate button is not showing under the list of the menu

[@npally]

@@user-ge2kd7xv9k OK. Kinda hard for me to help without seeing the issue. I would suggest getting a hold the Astra theme support. Give them full details, screenshots or even better a screen recording. Astra support is at wordpress.org/support/theme/astra/

[@allykamila3445]

My wp link keeps telling me "Sorry, this page doesn't exist. Please check the URL or go back a page. 404 Error. Page Not Found."

[@npally]

If you just installed the site, this can happen. It is likely the domain is still propagating. Are you using hostgator? If so, just contact them, then can fix it in real time.

[@allykamila3445]

@@npally Yes am using Hostgator.

[@npally]

@@allykamila3445 Great - just give them a call, they are very helpful. Here is their support number 866-964-2867

[@allykamila3445]

@@npally Thanks very much, solved.

[@jobuexplorers]

After you've pasted the link, I didn't see where you published it.

[@npally]

Can you be more specific? What timestamp?

[@jobuexplorers]

@@npally I got lost where after you pasted the link for the donation, did it get connected automatically? It's only that point that I didn't understand, otherwise, the rest of the video is dope

[@SteveVickAK]

@@jobuexplorers I am assuming it got connected automatically. Though still not sure what link you are referring to. The link connecting Stripe to GiveWP (the webhook)?

[@emmanuelbaidoo230]

@@SteveVickAK No he means the link connected to the Donate and the the stripe he got lost after you pasted it Donation

[@npally]

@@emmanuelbaidoo230 I someone can post the video timestamp, that would be the best way to know exactly where the question is. Thanks.

[@allykamila3445]

My country doesn't support paypal nor stripe🥲🥲