Creating a Post on Your Website

There are two different ways to create a post on your website. The first way is the simplest.

When you are logged into your website, there is a black bar at the top of the page. Roll your mouse over “+ New” and this menu will appear.
newpostfromsite

Click either on “Post” or “+ New.” Both will take you to the create post page.
makingpost

Type your post and then click the blue button on the right on the screen marked “Publish”
newpost_publishbutton

You can also save the post as a draft and come back to it later by clicking “Save Draft” or you can preview the post on your website when you click “Preview.”

The other way you can make a post is through the menu on your Dashboard. Roll over posts and in the menu that shows up click “New Post.”

newpostbutton

Then you can again make your new content and publish or save the post.

Congrats. You now can easily make new posts to publish information about your non-profit.

Adding and Editing Users

If you have more than one person that you want to be able to make changes to your site then you will need more than one account. Adding a new user is very simple and you can easily change their role in the site.

There are two ways to add new users. You can go through the Dashboard menu or you can use the “+ New” menu in the black bar at the top of the page.

users_adding_newfromdashboard

newuser_fromdashboard

Clicking both of these pulls up the below page in which you give the new user a username, password, email, and role. Remember to click the box to send an email to the new user. That way you do not have to remember and go tell them their password. They will receive it by email.

newuser_usernamepicking

A user can either be a subscriber, administrator, editor, author, or contributor. Each role has different actions that it can and cannot do. Only the administrator can do everything. Once you have created a user you can also easily change their role. First, go to “All Users” in the Users menu.

changing_userrole

Select the users whose roles you want to change and then click the drop down menu and select the role that you want to change them too. To actually change the users’ role you have to click the change button.

How to Change Your Favicon

First off you have to create a favicon file using a internet source and name it favicon.ico.  I used http://tools.dynamicdrive.com/favicon/ and just uploaded my image.  But you can also use http://www.favicon.cc/.

Then go to your Bluehost home page and click on the cPanel button:

first_step_changing_favicon

Under cPanel find the File section and click on File Manager:

change_favicon_step_two

The file manager will open in a new tab.  On the left side of the screen make sure you have the public_html folder open:

change_favicon_step_three

Then upload your favicon.ico file using the below button:

change_favicon_step_four

Before uploading your favicon make sure to check the overwrite files box.  To upload your file click the choose file button and find your file.  It uploads automatically:

change_favicon_step_five

After you have overwritten the old favicon.ico in Bluehost the favicon for your website. If it has not changed yet, go to your URL/favicon.ico then hit refresh.

Customizing Site Header – Text

The default text for WordPress headers is “Just Another WordPress Site.” Changing this is a little counter intuitive, but this post will tell you how to do it.

From your Dashboard menu, roll over “Settings” at the bottom of the list and click on “General.”

customize_headertext1

This will pull the General Settings menu up. The text in your site header below your site name is called the “tagline.”

customize_changetagline

Click on the box and type what ever you want your site header to say. Then scroll down to the bottom of the page and click the “Save” button.

customize_savebutton

You have now changed your header text. Great Job!

If you do not want a header you can remove the header in the Appearance –> Header menu. Scroll down towards the bottom and click “Remove Header Image.”

customize_removeheader

This button removes the tagline and website title from above the header picture. Not the actual header picture.

How to Set Up Your Website Hosting and Domain

The first step to having a website is figuring out what domain name you’ll use (hint: most of them are taken). There are many sites you can use for that such as domain.com. Don’t register a domain, just use the tool to find an appropriate one.

For this tutorial, we’ll set you up at BlueHost.com which is currently one of the cheapest hosts available. If you pay for one year, it will run up at just over $70.

bluehost_home

Enter your domain name and hit next.

bluehost_step2

Pick a plan based on your budget. Note that you have to pay up front.

bluehost_step3

You won’t need any additional features to get started.

bluehost_step4

Set up your secure password. If you aren’t already using a password management program like 1Password, we highly recommend setting one up.

bluehost_step5

bluehost_step6

Be sure to bookmark your BlueHost portal page. This is how you’ll manage your website’s hosting account.

bluehost_step7

You don’t need their help (they’ll want to charge you).

bluehost_step8

Continue on to the next step…

bluehost_step9

Now you’re at your CPanel Main menu. This is the main page for configuring your hosting environment.

bluehost_cpanel

Let’s set up your email account. Again, if you aren’t using a password manager like 1Password or Lastpass to generate and save passwords, you may want to look into it.

bluehost_email

After you create an email account, you can go to your webmail client provided by Blue Host here:

bluehost_accessing_email

Feel free to try various webmail clients or set up your own email client, if you have one. This example shows us using horde:

bluehost_email_home

Congratulations! You’ve successfully created a hosting account with Blue Host, obtained a domain name, set up your email address!

Customizing Site Header – Picture

Many themes, including our recommended theme for FoxyShop, have a header picture. The theme starts out using some general pictures. This post will tell you how to upload your own site header and personalize your website.

In your Dashboard menu, Roll over appearance and click on “Header”

customizingsite-header1

That will take you to the header appearance menu. Here you can change the picture, and the text color. If you want to change the text go here. Changing the picture is simple. In the below piece of the menu click “Choose File.”

customize_chooseheaderpic

Your file menu should pop up. Navigate though the side bar to the folder you saved you picture in.

customize_selectingheaderpic

Click on your picture and then select “Open.” The picture will upload to the site. The original menu will now have your picture name in the box. Click the upload button to the right of the box.

customize_uploadheaderpic

The picture will upload and take you to a new page where you can crop the picture. The original size of the box looks great with the theme, but you can make it bigger to encapsulate the whole part of the picture you want to appear. If a part of the picture is not inside the box, it will not appear in your header.

customize_croppingheader

Click “Crop and Publish” to save the picture. If you do not want to crop the picture you can click “Skip Cropping, Publish Image as Is.” The page will reload, and a notification will appear at the top telling you that you have changed your header.

customize_successfullychangedheader

Your header is now glorious, but make sure you remember to save everything. Scroll down to the bottom of the page and click “Save Changes.”

customize_savebutton

Congrats on the new header!

Changing the Background Color

To change the background color of your site first click on the appearance tab in your Dashboard menu:

change_background_step_one

Then click on either of the background links:

change_background_step_two

EITHER you can then upload an image for your background or choose one from you media library:

change_background_to_picture

OR you can simply change the color.  To change the color you can either type in a  color code (found via the internet) or select a color with the color palette:

change_background_color

Finally don’t forget to save the changes that you made.

Installing WordPress on Bluehost

Once you have your domain name set up. Let’s go ahead and install WordPress.

Go to your cPanel in Bluehost.

bluehost_cpanel_wordpress

Click on WordPress in the Site Builders menu and then follow through the directions.

bluehost_wordpress

bluehost_wordpress_step2

In the next step, you tell them where to install WordPress and what name you want to give your site.

bluehost_wordpress_step3

If after you submit the page you get a warning about the directory already existing and data being overwritten like so:

bluehost_wordpress_issue

That’s OK. Just go ahead and resubmit the form.

bluehost_wordpress_installing

When that’s done, you’ll be shown your WordPress admin url, your login, and your password. Save this information in your password manager or some other secure location.

Your site now has WordPress on it so you probably want to install your theme.

Installing and Configuring FoxyShop and FoxyCart

A great tool for ecommerce in WordPress is FoxyShop, a free plugin to the FoxyCart ecommerce platform. This post will walk you though installing FoxyShop and configuring FoxyCart.

To install FoxyShop, search for it from the Plugins menu and click Install Now.

wordpress_foxyshop

Next, we need to activate the plugin.

wordpress_foxyshop_activate

Your FoxyShop plugin is now installed!

wordpress_foxyshop_activated

Now we’ll take a quick pause from this configuration and set up a FoxyCart store.

Go to www.foxycart.com

foxycart_merchant

foxycart_signup

foxycart_getstarted

Fill out the sign up form to create your account at FoxyCart.com. The screenshot below also shows how you can use a password management system like 1Password to generate a password for your account. You don’t have to have this, but it’s highly recommended. Either way, don’t share or reuse passwords online.

foxycart_password_management

foxycart_signup_form

The next step is to create your FoxyCart store.

foxycart_create_store

Next create your default product category. Since you’ll be doing a donation page, you don’t need any shipping.

foxycart_default_category

Then configure a Stripe payment gateway in test mode.

foxycart_payment_gateway

FoxyCart has a few main templates. The cart, checkout, receipt and email receipts. Each one can be configured to start with the standard default theme as shown below.

foxycart_cart_template foxycart_checkout foxycart_receipt

For the email theme, you’ll have to specify an email subject.

foxycart_email_1 foxycart_email_2

Congratulations! You’ve now set up your FoxyCart store! Let’s head back over to our WordPress admin and finish configuring our FoxyShop plugin.

foxyshop_setup_1

We’ll need to take some settings from FoxyCart and save them in your FoxyShop plugin, and some settings from FoxyShop to save over at FoxyCart.

foxyshop_setup_3

You can get the FoxyCart subdomain here:

foxycart_settings

For the Store / Advanced settings, you can paste the copied values from FoxyShop here.

foxycart_advanced_settings

After you save everything, your FoxyShop plugin should be installed.

foxyshop_setup_complete

You’ll also want to configure FoxyShop to support subscriptions for your online donations. You can turn that on here:

foxyshop_enable_subscriptions

That’s it! You’re all set with a powerful online ecommerce platform on your website.

Installing a WordPress Theme

Installing a WordPress theme is very easy and you can find thousands of themes. For this tutorial, we’ll walk you through installing a very specific theme customized for FoxyShop. Please download it using this link:

foxyshop-starter-theme-with-donation-single-product

It is a slightly modified version of the theme mentioned here because we’ve gone ahead and added code for custom price fields functionality for your donation page along with a couple pages for your checkout and receipt templates.

Now let’s go ahead and install this theme to your fresh WordPress install. Go to your domain /wp-admin where you should see this login screen:

wordpress_loginscree

Now go to where themes are managed in the Appearance section, click install a theme and then the upload link:

theme_upload

This is where you’ll upload the starter theme you downloaded above.

theme_choosefiletheme_choosingfiletheme_installnow

The below page will pop up and all you have to do is activate the theme.

theme_activate

Once the theme is activated, you should see it as a theme you can manage:

theme_setupgoodtogo

Congratulations! Your FoxyShop starter theme, configured for a custom donation page is now installed.