Monthly Archives: February 2013

Week 4: Plugins, Widgets and Images

50+ Beautiful Non-Profit Websites for Inspiration

non-profit-websitesNon-profit organizations often run their operations on minimal budgets but at the same time, it is important to have an online presence that catch people’s attention and interest. Many non-profit organizations use strong colors and many photographs on their websites to get important messages out and make them clear and easy to understand. However, depending on the photos used this may also work well to influence the visitor’s feelings and mood.

If you are looking for inspiration for designing a non-profit website this article is a collection of more than 50 get example of non-profit websites from around the world. WordPress themes designed for non-profit organizations are interesting and I am sure you can find a theme to fit your needs.

 


PLUGINS

Every WordPress site has different needs, but building a content management system that can accommodate every possible situation would make it complex and bloated. It would also make it very difficult for the core WordPress developers to keep the system stable and secure.

The answer to this dilemma is the WordPress “plugins” system, which lets developers extend the system in every way imaginable. There are more than 13,000 (!) plugins available, which let you do things like:

  • Install contact forms
  • Conduct polls and surveys
  • Integrate content from Twitter/Flickr etc.
  • Advanced spam control
  • Install advanced photo galleries
  • Turn WordPress into a sophisticated events system
  • Copy blog posts over to FaceBook
  • Create a mobile version of your site
  • … and tons more

Some plugins provide new fields or pages for data entry in the Dashboard. Some plugins provide new Widgets. Some plugins alter the post writing interface. Some plugins enable special “quick tags” to use when writing a post. Some plugins have no interface at all. Because there are so many plugins and they all work a bit differently, it’s up to you to read the documentation that comes with each plugin. This may be in a “readme.txt” or “readme.html” file in the plugin directory. It may be built into the plugin’s Dashboard page, if it has one. Or it may be on the plugin developers web site. It’s up to you to find and follow the instructions in the documentation carefully! Support is often available on the plugin developer’s web site.

If there is something you want to do with your site that the core functionality of WordPress can’t handle, chances are someone has written a plugin for it.


Install Plugins 

The easiest is to simply go to the Plugins section in the Dashboard and click the big Add New button:

Plugins2

From there, you can enter a search term to review a list of matching plugins OR click popular to see the most popular plugins.

Plugins3

When you find one that sounds promising, click the Install Now link and the plugin will be installed. To make the plugin active, click the Activate link under its name in the main Plugins interface.

Tip: Uninstall (or at least deactivate) any plugins that are not currently in use. Some plugins can be resource intensive (CPU or RAM-wise) and will slow down your site. It’s also possible for plugins to conflict with other plugins, or to be incompatible with future WordPress upgrades. Install the plugins you need, but don’t keep unneeded plugins sitting around!


Popular Plugins  

BACKUP AND OPTIMIZE

W3Total Cache:

The ultimate swiss-army knife of caching, from the basic page caching (keeping a static copy of the page), to CSS/JS/HTML minification (making your files smaller), as well as handling uploads to a Content Delivery Network

Broken Line Checker:

Dealing with broken links can be pain if you’re waiting for readers to report them – get ahead of the game with this plugin and automatically check all the sites you’ve linked to before they become a problem.

BulletProof Security:

WordPress Website Security Protection: BulletProof Security protects your WordPress website against XSS, RFI, CRLF, CSRF, Base64,  Code Injection and SQL Injection hacking attempts.

SEARCH ENGINE OPTIMIZATION

WordPress SEO By Yoast:

Widely regarded as the SEO plugin for WordPress. This plugin is written from the ground up by WordPress SEO consultant and WordPress developer Joost de Valk to improve your site’s SEO on all needed aspects.

Google XML Sitemaps:

This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and Ask.com to better index your blog. With such a sitemap, it’s much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently. The plugin supports all kinds of WordPress generated pages as well as custom URLs.

SEO Friendly Images:

Adds ALT and TITLE meta tags to your images so you can start getting valuable Google Images traffic.

SOCIAL AND COMMENTING

Askimet:

Comes with WordPress, but if you haven’t activated and added an API key yet, you’re missing out. It really does stop the hordes of spam comments that come every hour. Get an API key here. Akismet checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

Facebook Page Publish:

“Facebook Page Publish” publishes your blog posts to the wall of your Facebook profile, page or application.

Sexy Bookmarks:

A unique style and customisable set of social bookmarking buttons with a huge range of services included. Quite recognizable by readers who are fans of bookmark services.
CORE FUNCTIONALITY
 
WP-Page Navi
 
Replaces the next/previous buttons with good looking paginated buttons. Customizable, and absolutely essential.
Events Calendar Pro
 
A gorgeous events plugin with calendar view or event list, iCal and GCal import buttons. Perfect for club or society meet-ups. ($40 per site)
 
Contact Form 7
 
Create a contact form and embed it on a page with ease. Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
Docs & Support
 
WP-Touch
 
Creates a complete mobile version of your site with ease. Premium version also available that removes branding and allows you to embed ads.
Widget Logic
 
If you’ve ever wanted to dynamically change what’s on your sidebar using standard WordPress conditionals (is_single(), is_page(), is_archive() etc), this is the plugin for you.
E-Commerce
 
Jigo Shop
 
Works great out of the box with the default WP theme, and a very slick style. Built-in payment processors, inventory management and full stats dashboard make this a very attractive and FREE e-commerce solution to rival the best.
PHOTOGRAPHY AND GALLERIES
 
NextGen Gallery:
 
The built-in gallery and photo management in WordPress isn’t ideal – this plugin creates a whole new gallery section to manage your photos, disassociating them from posts. You can then embed albums or galleries in posts or collect all your images on a single page. An extensive plugin in and of itself, you can also download plugins for NextGen Gallery to extend functionality further.
Here’s a link to a great site that lists and explains some very useful WordPress plugins.

Installing a Contact Form Plugin

Let’s say you want to add a secure contact form to your site, so you don’t have to put your email address out there where spammers can find it.

There are many contact form plugins out there, but “contact form 7” is a great one and easy to install Install and activate it..

Now take a look at your Dashboard sidebar – you should see a new “Contact” section:

Contact link

Click it to see an interface something like this:

Plugins5

Working with Widgets

WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly “widgetized” WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure.


Widgets and Sidebars

Widgets all you to modify the contents of your sidebar via drag-and-drop.

If your theme has widget support, you’ll see a Widgets section in the Dashboard sidebar, in the Appearance section:

Widgets1

 

 

 

 

 

 

Your Widgets area should look something like this:

On the left you’ll see a list of “Available Widgets,” while on the right you’ll see the currently available “Widget Areas.” Most themes support just one widget – the “Primary Widget Area.” If you open up the Primary Widget Area, you’ll see its default set of widgets – for search, archives, categories and something called “meta.” Try dragging one of these widgets up or down, then revisit your public site to see how your sidebar has changed.  ?

Notice that each of the widgets comes with a downward-facing arrow – click that to discover what things can be changed about the way that widget behaves. For example, click the arrow next to Recent Posts and change the Title field and the number of posts shown. Click Save, then check your site again.

Widgets3To remove just drag it out of the Widget Area – the change is immediate. See the widget called “Meta?” That’s the one that causes the Login link to appear in your site’s sidebar. That’s there by default to make things easy for new users, but it’s unprofessional to include a Dashboard login link on your site. Start by dragging that Meta widget out of the way.

Adding Widgets

Try adding a new widget. Find the Pages widget and drag it into the sidebar. Click Save and check your site. Assuming you’ve actually created some pages (not posts) on your site, a list of them will now appear in your public sidebar. Notice that the widget also lets you control how your pages are sorted, and lets you exclude some pages so they don’t appear in the sidebar.

“Text” Widget

Grab the “Text” widget from the Available Widgets section and drop it into the Primary area. Once placed, enter some placeholder text and check your site. The nice thing about the Text widget is that it can also contain HTML and/or Javascript, which means it’s a great way to add embed code from other sites.

Widget Logic

Widget Logic is a plugin you can download that lets you control on which pages widgets appear using WP’s conditional tags. It also adds a ‘widget_content’ filter. This allows you to have your content show up in sidebars on pages that you specifically tell it to appear on instead of appearing universal.

Finding more Widgets

In addition to the default set of widgets, your currently installed theme may provide additional ones. You also may end up with new widgets after installing certain plugins. Try searching theWordPress plugins directory for the word “widget” to find more.


 

Managing Links

Many web sites include a list of links to related sites in the sidebar, or on a dedicated “Resources” page. To help you curate an excellent set of related links for your site, WordPress comes with a link management tool, accessible from the Dashboard sidebar. After creating and organizing a collection of links, you can cause them to display on your site however you like – alphabetized, grouped by category, in multiple sections, or any which way to Sunday.

Links1

The Links tool comes with a default set of links, which you can either delete or replace.

Links2

Notice that all links can optionally live in categories, which are not the same as your Post categories. If your list of links is long, categories can be used to group links into logical sets. You can even use link categories to set up multiple link lists in the sidebar, one for category A and a separate one for category B, for example.

The purpose of the Name and Web Address fields is fairly obvious. To avoid mistakes, remember always to paste in URLs, rather than typing them by hand.

The Description field is optional. If used, the description will be inserted into the link HTML. Howit gets inserted is not controlled from the Link manager, but from the widget you’ll be using to add it to your sidebar, or with the PHP code you add to your template. In some cases, the description will be added as a title attribute that will show up when a user hovers their mouse over the link. In other cases, the description will be made visible on the page, right next to the link.

The Categories section works exactly like Post categories, which you’re already familiar with. You can add new categories on the fly, or click Link Categories in the Dashboard sidebar to manage your link categories.

You can use the Target section to control how a link will behave when clicked. When set to _none, the link will behave normally, taking the user away from the current page. When set to _blank, the link will open in a new browser tab or window (depending on the user’s browser). We recommend sticking with _none (same window). Power users want to control which links open in new tabs and which ones don’t, and get annoyed when web developers make this decision for them. And novice users can get lost or confused when their screen is littered with a ton of tabs and windows.

Links3

The Link Relationship and Advanced fields are obscure holdovers from the old days of WordPress and are seldom used. Ignore them. If curious, see the official documentation (Link RelationshipsAdvanced).

You’ll also notice a “Keep this private” checkbox in the Save/Update panel. Checking this box will cause the link to appear only to you, not to your readers, which is possibly useful for creating documentation links for your authors, or for creating sites meant just for you and your authors.


 

Install a links list via Widget

The most common way to get your list of links to appear in the sidebar is with the built-in Links widget. Go to the Widgets manager, find the rectangle marked “Links,” and drag it to the Primary Widget Area. It’ll look something like this:

Links4

Click Save, and refresh your site’s homepage. Take a look in the sidebar to see your now-published list of links. If you set up more than one category of links, you’ll seem them broken up like this:

Links5

So what if you wanted to break your links up into separate sections, with News at the top of the sidebar and Blogroll at the bottom? Notice that in the Links widget, you can filter by category:

Links6

Go ahead and do that for a single category, and drag the widget to the top of the Primary Widget Area. Next, drag a second copy of the Links widget from the Available Widgets area and into the Primary Widget area, this time to the bottom of the sidebar. Set that second widget to filter by yourother category.

Links7

Again, refresh your site in the browser and take a look at the sidebar. You should now see links in one category at the top of the sidebar, and links from another category at the bottom.

Want to learn how to install a links list without a widget, e.g. on a separate page rather than in the sidebar? See the Page Hacks section of our Modifying WordPress Themes tutorial.

 


Add Media

author-icon-big

There are many ways to add images, video, audio, or PDFs to posts or pages in WordPress. Media can either be uploaded directly to your site through the WordPress media manager, or hosted on an external site such as YouTube or Vimeo (for video) or Flickr or Picasa (for images).

I recommend hosting video on external services, for several reasons:

  1. Videos will probably be much larger than the max upload size allowed by your host.
  2. Video can be tricky to compress correctly (with a good size/quality ratio).
  3. Video can consume a lot of disk space to store and a lot of bandwidth to serve. Many hosts have quotas on these resources, and you can exhaust them quickly.

Images, however, should generally be uploaded directly to your site but there are some up-sides to using external services like Flickr. For example, these services make it easy to create sophisticated slideshows, and may help you capture additional “drive by” traffic from those sites.

I’ll cover direct uploads first, then the process of embedding externally hosted media.

On the right side of the Post field, there are a series of icons to Add Media to your post. Select the appropriate icon and follow the prompts to upload your content.

Adding an Image

Before you start uploading, place your cursor in the text of the Body field where you want the image to appear. This will save a bit of hassle later on.

Just above the formatting toolbar’s icons, look for row of small icons labeled “Upload/Insert.”

The first of these icons is for uploading images – click it.

Click Select Files and navigate to the image file you want to upload (you can actually upload multiple files at once, but we’ll just work with one for now). Click OK, and you’ll be looking at something like this:

Take a moment to study this panel. There’s a lot you can do here!

Clicking the Edit button will reveal a sub-panel that lets you crop, scale, rotate, and otherwise manipulate the image itself (though we recommend doing this kind of image editing in Photoshop or iPhoto before uploading).

The TitleCaption, and Description fields are used in different ways by different templates and gallery plugins. You should use these as instructed by documentation or your webmaster.

The Alternate Text field is not displayed on the page, but is present in the HTML. This field is critical for handicapped users who have “screen readers” dictate the web page to them. The Alternate field is also used by search engines, so they have some sense of what the image is about. Remember, Google is the web’s largest blind user!

The Link URL field lets you control whether the user can click the image to go elsewhere, and if so, where. Set it to None to make the image not clickable. Setting it to File URL will cause the image to link to a full-size version of the same image in a raw browser window, without your site’s design/theme. Clicking Post URL will cause the link to go to an “Attachment page,” which is a special WordPress page that hosts a piece of media associated with a story. This is a good choice for showing larger versions of images without losing the “context” of the site.

The Alignment options are pretty straightforward – set this to None, Left, Right or Center to control whether or how text wraps around the image.*

* Note: For these alignment options to work properly, your theme’s CSS stylesheet will need to include the following rules. Your web developer can take care of this if your theme isn’t aligning images properly:

.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignleft { display:block; margin-right:auto; }
.alignright { display:block; margin-left:auto; }

The Size option lets you control the dimensions of the inserted image. When you upload an image, WordPress makes some decisions about whether to also create additional versions of that same image for use in various contexts. If your uploaded image is larger than your theme’s content area width, or if you just want to show a small version, select the thumbnail or medium version, with the appropriate linking option as described above. To control the image sizes WordPress will generate, see Settings | Media | Image Sizes.

Finally, click Insert Into Post. The image will be inserted wherever the cursor was in the text when you began the upload process. If the image ends up in the wrong place for some reason, you can simply drag it to the right spot.

If you upload multiple images into a post, WordPress will give you the option to “Insert as Gallery.” If you take this option, your images will appear as a small gallery of thumbnails, each of which links to the full-sized image on a separate page. See our WordPress Galleries tutorial for more on this topic.

Re-Using Images

When you first clicked the Upload/Insert icon, you may have noticed three “tabs” across the top – From Computer, From URL, and Media Library. You may also see a “Gallery” tab up there. The Gallery tab, if present, gives you quick access to all images that have been previously added to the current post. The Media Library tab gives you access to everything that’s been uploaded to the entire site, ever! If you want to re-use an image you’ve used in the past, don’t re-upload it – just use these tabs to pull it back into your post.

Medialib
select your photos

WordPress will upload all your photos and automatically generate thumbnail images. When it’s finished, it will let you know everything uploaded successfully, as you can see here.

upload complete

How to edit photo metadata

While it’s best to edit metadata in the actual images, if you don’t it can still be done in WordPress. Notice that one of the files uploaded with the name “Doc title” This is the information that was entered into the title field in Photoshop. If you didn’t edit the Title field in Photoshop, you will have to do it here to have a title that is pleasing to read.

Click to Show (the Doc title detail button) to take a closer look.

image detail

WordPress automatically pulled in the Title and Description fields but the caption is blank. WordPress galleries use the description field so this will do for now. Also, make sure to fill in theAlternate text. This describes the contents of the photo for blind users and will help Google better index your site. When you’re done editing your photos, click Save all changes.

Your photos in the Media Library

Saving will take you to the Media Library. The Media Library seems fine at first glance. Notice that when you hover your mouse over a thumbnail you have the option to edit or delete a photo. But if you use a lot of photos, this interface could become unmanageable very quickly. We’ll talk about solutions for that later.

media library

For now take a look at the Attached to column. WordPress expects photos to be attached to posts or pages. Since we haven’t done that yet, all the photos are Unattached. Simply click the Attachbutton and select a post or page to change the status.

Why do we care? Native WordPress galleries use this to information to identify which pictures to show on a given post or page. Generally, it’s better to upload directly from a post or page.

 

You can use this plugin to create any kind of email-able form you like, but let’s start simple.

Select the text in the red/brown horizontal bar and copy it to the clipboard. Now go to the Pages section of the Dashboard and create a new page called “Contact.” Paste the code on your clipboard into the Body field and click Publish.

Now go to your public site and navigate to yourdomain.com/contact. You should see a basic contact form. Fill it out and make sure it actually does send email to your address.

Week 3 – WordPress Pt. 2

HOMEWORK | Week 2 | Review

  • Read/review the client survey’s for all clients listed below. Make notes and questions about things you are unsure of or questions you have for them/the class and post those questions to your blog.
  • Once you’ve chosen your client, (advise the class first) reach out to your them via email. Introduce yourself and set up weekly Skype chats anytime between 10am and 1pm on Wednesdays.
  • Fill out the Competitive Analysis – and post to your WordPress blog. Share this with your client.
  • Create a Google Calendar with your clients name. Add deliverables deadlines for your calendar and share this with your client. Be sure to include weekly Skype chats. Be prepared to start your Skype chats next week.
  • Sort your content by page and put the text/images/video in the correlating folders
  • Make a list of missing or needed items and relay the information to your client. Give them a deadline.
  • Create a Dropbox folder for your client and ask them to begin sending any content they have.

Worpdress Basics Pt. 2

Discovery Phase and Content Development:

Phase I

Creative Brief

The first step in the website development process is the CREATIVE BRIEF. This is a simple document that asks specific questions of the client that are designed to clearly define the project. Because of the time limitations in this semester, the website development questioner and the client survey was sent to your clients prior to the beginning of class. You already have those in your possession and should use them as a blueprint for developing the site.

Research any information related to the nonprofit as defined by your client. This is the “Discovery” phase and will likely result in amendments to the project concept based on the findings of the research. The research must include an analysis of the competition, the ability to meet the needs of your nonprofit and the way that the website will satisfy their needs and problems. The competitive analysis document was DUE TODAY.


Phase II

Content Development

Gather the information for “Content Development.” This is the stage where the information that is going to appear on the website needs to be collected from your client and delivered to you in an informative and easily understood format. You should have already created a login for your nonprofit on your ftp site. Inside that folder should be sub folders. Example:

FTP Organized

  • Examples of some of the main page types:
    • Home
    • About Us
    • Who We Help
    • How We Work
    • Get Involved
    • Contact
    • News / Updates / Blog

    Design Phase:
    A sample template to keep your project schedule up to date


Logging In

Every WordPress site has two faces: One that the public sees, and a private view called “The Dashboard” for authors and editors. Your site’s theme (design) may or may not include a link to the Dashboard on the public-facing site, looking something like this:

This login link is present to make things easy for new users, but take a look at “professional” news sites – you’ll never see an administrative login link visible to the world. We recommend removing this link from your site – it’s easy to do, makes your site look more professional, and doesn’t encourage ne’er-do-wells to try logging in to your Dashboard (see the Widgets section of our WordPress: Beyond the Basics tutorial for instructions.)

So, assuming that the Dashboard login link isn’t present, you just need to commit one thing to memory:

/wp-admin

Append that to the end of your site’s URL, i.e.:

http://example.com/wp-admin

to be greeted by the familiar WordPress login screen.

Bookmark the login URL for future reference! If you’re not sure of your username or password, click the “Forgot Password” link circled above. Then check your email for password reset instructions (your username will also be in the email you receive).

Clicking the Remember Me checkbox will cause your browser to remember your login session for 14 days. Once a login session expires, WordPress will require you to log in again to continue using the Dashboard.


Set Your Byline and Password

Before doing anything else in the Dashboard, take a look at your personal “profile” page, which you can get to by clicking your name or username at the top right of the WordPress interface:

We can ignore most of what’s on the profile editing page for now, but there are three important things to take care of right away:

1) Most WordPress installers only ask for a username. But you’re a journalist, and want your full name to appear on the stories you write. Scroll down to the Name section and enter your first and last name.

2) Once those have been entered, click on the dropdown labeled “Display name publicly as” and select your full name:

Most WordPress themes will use this as your byline — if it’s not present, they’ll fall back to your username, which is not very professional looking.

3) At the bottom of the Profile editor you’ll find two fields where you can enter a new password. If you’ve been assigned a password you can’t remember, enter the password you want to use, twice. It goes without saying that passwords should not be re-used between sites, and should not include words that could be found in any dictionary.

SITE PLANNING

BASIC ANATOMY OF A WORDPRESS SITE

  • Header
  • Menu
  • Sidebar
  • Page / Post Content Area
  • Lists: Archive / Category / Tag / Search Results
  • Footer

SITE DEFINITION

Before you start designing your site architecture and layout, or planning content, there are some basic decisions you should make about the site and what it’s purpose is. At the very least, you should create a short document stating the following:

  • Mission Statement – In a few sentences, state what the purpose of your site is
  • Audience – Who is your site intended for? What are they looking for from you?
  • Objectives – What are your business objectives for the site? Are you promoting your services? Selling something? Teaching something?

CONTENT STRATEGY

Once you have a basic definition for the site, you should think about what the static and dynamic content of the site will be.

First figure out what pages will form the basic structure of your site. This is the static content that will be accessible from the menus, and will not change or be added to often. This can include background information about you, your business or services, terms of use, contact information, etc.

Next, determine the post types that will be regularly adding to the content of your type. Think about what categories they might fall into, and how you will want to represent and organize those on the site. Also think about what external sources you might use to pull in fresh content (facebook, twitter, rss feeds, etc).

Based on the decisions you make about the static and dynamic pages, create an outline of the pages and page types of your site. Determine how often each of these will be added to or updated.

SITE MAP

Use the outline to create a visual sitemap of the pages of your site and the main connections between them.

WIREFRAMES

This is a blueprint for the layout of the pages of your site. Since we are using WordPress for your site, keep in mind the basic anatomy that a standard WP site follows. if you are going to diverge from this, it will mean more customization. Create a wireframe for each distinct page layout on your site.


USERS AND USER TYPES

The user account that you created when you installed WordPress is an admin account, and so has permission to change or edit any settings or content in the site. If other people will be contributing to the site, you should consider what level of user you will allow them to be. These are the basic user types (click the links for more details):

  • Super Admin – Someone with access to the blog network administration features controlling the entire network (See Create a Network). This only applies if you have a network of WordPress sites.
  • Administrator – Somebody who has access to all the administration features
  • Editor – Somebody who can publish and manage posts and pages as well as manage other users’ posts, etc.
  • Author – Somebody who can publish and manage their own posts
  • Contributor – Somebody who can write and manage their posts but not publish them
  • Subscriber – Somebody who can only manage their profile

ADDING CONTENT

POSTS VS. PAGES

When adding content, you have to decide if it should be a post or a page. The main difference between these is that a page is non-dated content that is intended to be a permanent, top-level part of your site that does not change often. A post is for dated, time-sensitive content, that you will add on a regular basis to freshen the site. Posts are usually the bulk of the site, with pages providing context and background information. On this site, the weekly lessons are posts and the syllabus is a page.

USING THE PAGE/POST EDITOR

  • Visual vs. HTML
  • Standard Toolbar
  • Kitchen Sink Toolbar
  • Uploading and Inserting Images

CREATING PAGES

Pages are relatively simple. They have the following elements:

  • Title
  • Content
  • Publish Status
  • Page Attributes – Template and Parent
  • Featured Image

CREATING POSTS

Posts have most of the same elements as pages with some additions. They do not have parents.

Categories – You can use these to organize your posts. Categories can be added right from the post page or from the Categories item in the left side dashboard menu.

Tags – Tags are a looser way of associating posts with a list of keywords that describe the content of a post. Some themes will show all the tags on a post as hyperlinks, so you can quickly jump to other posts tagged with the same term.

Format – As of WP 3.1, there are a number of options for a post format besides the standard type. The effect of choosing one of these rather than the standard format is going to depend on your theme.

  • aside – Typically styled without a title. Similar to a Facebook note update.
  • gallery – A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  • link – A link to another site. Themes may wish to use the first <a href=””> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
  • image – A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
  • quote – A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  • status – A short status update, similar to a Twitter status update.
  • video – A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
  • audio – An audio file. Could be used for Podcasting.
  • chat – A chat transcript, like so:
Adam: what's up?
Luis: not much
Adam: that sounds boring

CUSTOMIZING YOUR WORDPRESS SITE

THEMES

WHAT IS A THEME?

A theme is simply collection of files that allow you to “skin” your WordPress site. A theme is comprised of template files, that determine the components that will go on each type of page, and a styles sheet or sheets that control fonts, colors and layout. Themes are stored in wp-content > themes.

CHOOSING THEMES

When choosing a theme, make sure that it is compatible up to your version of WordPress ( the current version is 3.2.1). Many new features were introduced in WordPress 3.0, and you want to make sure to take advantage of them.

Installing Themes

There are two ways to install a new theme, through the WP admin tools, or by downloading and uploading it into the themes directory. Which you use will depend on how you FTP into your hosting account.

INSTALLING VIA ADMIN

From the admin, go to Appearance > Themes then click the “Install Themes” tab at the top of the page.

THEME OPTIONS

Some themes have an options panel that allow you to further customize appearance and layout. What the options are will vary from theme to theme, and may be broken into multiple panels.

CUSTOM MENUS

Most up to date themes allow you to add at least one custom menu to your site. You can build a menu of links to categories, pages and custom links.

SIDEBARS AND WIDGETS

Most WordPress themes include at least one “sidebar”, an area to the right or left of the page content that can contain a variety of things, including search, lists of recent posts, your blogroll, and admin links. These components are called widgets, and are managed through the widgets panel. Some themes also support the addition of widgets in other areas of the site, such as the headers and footers.


 HOMEWORK | Week 3

  • Reach out to your client via email and set up next week’s Skype chat anytime between 10am and 1pm on Wednesdays.
  • Send the Competitive Analysis to your client and ask for feeback and comments.
  • Share your Google Calendar with your client AFTER you’ve added deliverables deadlines. Be sure to include weekly Skype chats. Be prepared to start your Skype chats next week. Start adding deadlines for content delivery. By week four they should have sent you images and text for the new website.
  • Sort client content by page and put the text/images/video in the correlating folders
  • Create a site map and share it with your client.
  • Create the Site Definition for your site. Here’s some examples:
  • Sitemap
  • Start sorting through the files that your clients are sending you and prep the images making and color corrections on contrast corrections necessary.
  • Sort your content by page and put the text/images/video in the correlating folders
  • Make a list of missing or needed items and relay the information to your client. Give them a deadline
  • By next weeks class you should have a final site map and a clear vision for your nonprofit website. Go page by page and think about how you will start laying out the information. If your sitemap is final, start drawing some wireframes to see how all the content will fit on your site.

Week 2 – WordPress Basics

Below are the nonprofits who contacted us regarding a new web build.

  • Read/review the client survey’s for all clients listed below. Make notes and questions about things you are unsure of or questions you have for them/the class and post those questions to your blog.
  • Once you’ve chosen your client, (advise the class first) reach out to your them via email. Introduce yourself and set up weekly Skype chats anytime between 10am and 1pm on Wednesdays.
  • Fill out the Competitive Analysis – and post to your WordPress blog. Share this with your client.

NONPROFIT CLIENTS

The Thompson Scholarship Foundation

The Thompson Scholarship Foundation, the initiatives we have set forth, and our focus on giving back the community. Founded in 2007, the Thompson Scholarship Foundation works to address the educational and social needs of urban communities by developing programs and supporting community-based organizations. It is recognized as a non-profit public charity under section 501(c)3 of the Internal Revenue Code.  We awards scholarships to high achieving high school students in Philadelphia. The goal of the Thompson Foundation is to provide financial support, encouragement, and/or direction to high school seniors who need help navigating the financial aid process.

The African American Atelier, Inc.,

A non-profit art organization, seeks to promote an awareness, appreciation and sensitivity to the visual arts and culture of African Americans and to work in harmony with other ethnic groups.  The organization is based in Greensboro, NC and was officially formed in 1990 by the late Eva Hamlin Miller and Dr. Alma Adams.

In addition to hosting 6 rotational exhibitions a year, the organization implements an extensive year round art program for children from low-wealth communities and families. Many of these children would not be able to participate in any other form of art instruction without the programming that the Atelier offers.

To learn more about Atelier Around the World please view the following links
https://picasaweb.google.com/atelieryouthprogram
http://www.youtube.com/watch?v=QkgWtHWD2VI
http://triadhomes.news-record.com/content/2008/08/24/article/stairwell_art_tells_a_story

Attached are the organization’s brochure and the Atelier Around the World Brochure.

I saw your listing on Idealist about the web design for small non-profits. Is this only limited to organizations based in New York? I work with a phenomenal community-based Arts organization that is located in Greensboro, NC and they are in desperate need of a website redesign.

The organization provides visual arts lessons to about 5000 Guilford County students from low-income communities a year. They have an operating budget of less than, $200,000. Please let me know if there is anything that you can do.

African American Atelier – www.AfricanAmericanAtelier.org

Brittney Drakeford
Master of Arts in Management 2011
Wake Forest University
301.412.1987

britt.drake@gmail.com

http://www.greensborosheart.com

 

 

TAHO’S CONNECTION FOR FAMILIES

TCF is a small 501(c)3 nonprofit organization in North Lake Tahoe. It has 2 part-time staff members, 1 AmeriCorps volunteer and a volunteer Board of Directors, none of whom are deeply technology savvy. Its annual budget is approximately $120K. The organization is the area’s only child development and parent education center for families with children from infants to age 3.5 years old. TCF offers parenting classes on a huge range of topics and has over 2,000 sq. ft of open play area with a variety of developmentally and age appropriate toys, books, games and equipment for the children to use. It offers a weekly English-Spanish bilingual program and periodic enrichment classes, such as art, music and movement. It’s not a daycare, and a parent or caregiver must accompany the child. For many families in our area, TCF is often described as a “lifesaver” and a “place they and their children love.” I wanted to include this description to frame up its services and how its customers view it before you check out the current website.

The website is http://www.tcfkids.org. I do not know how long ago it was created. Some content is updated monthly (class schedule) and some annually (Board of Directors) and some in the past 2-3 years (children’s photos) but other than these pages, I don’t think it’s been updated or revamped in a very long time, likely since its initial design and launch. I don’t know the hosting information but can find out. We would love to make it slicker and much more playful and compelling for our current and prospective customers, as well as for individual donors and grant making bodies.

We can tackle the content, but where we fall short in volunteer skills is in the design. We would graciously appreciate your students taking our website on as a redesign project.

Please let me know what other information you need. Feel free to contact me via email or phone at 775-313-5740. Thank you for your time and consideration. Karen Hovorka <klhovorka@yahoo.com>

Karen Hovorka

TCF Board of Directors, President 2013-2014

THE TRIPLET CONVENTION

  • Omar Thompson <omarthompson412@yahoo.com>
  • Triplet Convention <tripletconvention@gmail.com>
  • britt.drake@gmail.com <britt.drake@gmail.com>

The Triplet Convention is a non profit support organization for families with higher order multiples (triplets, quadruplets, quintuplets or more.)  The convention meets annually and is an opportunity meet and reunite with other families that have similar experiences.  We have workshops in support of family development for adults and teens, and educational activities for the younger children.  The convention is about 25 years old.  The convention’s current website is www.tripletconvention.com. 

We do not have a logo or any marketing materials.

The Triplet Convention was previously under the umbrella of the Triplet Connection.  It is now a stand alone entity.  However, the Triplet Connection will still have a link on its website to the Triplet Convention.

Website questionnaire


Discovery Phase and Content Development:

Phase I

Creative Brief

The first step in the website development process is the CREATIVE BRIEF. This is a simple document that asks specific questions of the client that are designed to clearly define the project. Because of the time limitations in this semester, the website development questioner and the client survey was sent to your clients prior to the beginning of class. You already have those in your possession and should use them as a blueprint for developing the site.

Research any information related to the nonprofit as defined by your client. This is the “Discovery” phase and will likely result in amendments to the project concept based on the findings of the research. The research must include an analysis of the competition, the ability to meet the needs of your nonprofit and the way that the website will satisfy their needs and problems.


Phase II

Content Development

Gather the information for “Content Development.” This is the stage where the information that is going to appear on the website needs to be collected from your client and delivered to you in an informative and easily understood format. You should have already created a login for your nonprofit on your ftp site. Inside that folder should be sub folders. Example:

FTP Organized

  • Examples of some of the main page types:
    • Home
    • About Us
    • Who We Help
    • How We Work
    • Get Involved
    • Contact
    • News / Updates / Blog

    Design Phase:
    A sample template to keep your project schedule up to date


WordPress – getting started 

Everything you need to get started with the WordPress content management system, including installation, setting up pages, managing themes and adding plugins.

INTRO TO WORDPRESS THEMES.

WHAT IS A THEME?

A theme is simply collection of files that allow you to “skin” your WordPress site. A theme is comprised of template files, that determine the components that will go on each type of page, and a styles sheet or sheets that control fonts, colors and layout. Themes are stored in wp-content > themes.

Your WordPress install comes with two themes installed, but there are thousands of third-party themes that you can install yourself. You can browse them on the WordPress.org site or Google “free WordPress themes”.


CHOOSING THEMES

When choosing a theme, make sure that it is compatible up to your version of WordPress ( the current version is 3.5). Many new features were introduced in WordPress 3.0, and you want to make sure to take advantage of them.

RESPONSIVE THEMES

A responsive WordPress theme is a theme built to adapt it’s design to tablets and smartphones, creating a great user experience. Previously, dedicated WordPress mobile themes was the best option, but in 2013, responsive WordPress themes are the hot new trend. With the rapid growth of smartphones, tablet computers and Internet enabled gadgets, we have to take mobile web design seriously and ensure that your theme is can be viewed easily on any mobile device.

Responsive web design allows your website content to be displayed correctly by adjusting the layout to accommodate screens of different orientation and sizes. From a branding perspective, responsive themes allow you to maintain one theme and provide one consistent look and feel no matter how visitors access your website. This is a huge money saver for clients as there is not longer the need for mobile versions of websites. To test responsive layouts, check out some responsive web design tools.


CHECKING YOUR THEMES

A quick note on downloading and installing themes. There are thousands of FREE and PREMIUM themes out there and not everyone is as honest and straightforward as we hope they’d be. It’s good practice to check your themes prior to installing them.

Take a look at: TAC (Theme Authenticity Checker)

Scan all of your theme files for potentially malicious or unwanted code. Be aware of advertisements or dangerous JavaScript inserted into legitimate themes by third party theme download sites.

Future versions will allow to check for other theme vulnerabilities.


Installing Themes

There are two ways to install a new theme, through the WP admin tools, or by downloading and uploading it into the themes directory. Which you use will depend on how you FTP into your hosting account.

INSTALLING VIA ADMIN

From the admin, go to Appearance > Themes

To install a NEW theme that is not currently available through your WordPress panel, do the following.

  1. Go into your ADMIN panel
  2. Go to APPEARANCE
  3. Go to THEMES
  4. Click on INSTALL THEMES
  5. Click on UPLOAD and upload the theme that you’ve already downloaded from the web and saved to your hard drive
  6. Click on BROWSE and UPLOAD the theme
  7. Click on INSTALL and then PREVIEW

THEME OPTIONS

Some themes have an options panel that allow you to further customize appearance and layout. What the options are will vary from theme to theme. “Paid” themes usually offer you more options and more documentation.

CUSTOM MENUS

Most up to date themes allow you to add at least one custom menu to your site. You can build a menu of links to categories, pages and custom links.

SIDEBARS AND WIDGETS

Most WordPress themes include at least one “sidebar”, an area to the right or left of the page content that can contain a variety of things, including search, lists of recent posts, your blogroll, and admin links. These components are called widgets, and are managed through the widgets panel. Some themes also support the addition of widgets in other areas of the site, such as the headers and footers.


Beginner’s Guide to WordPress Menus

Paul Kaiser explains the menu system basics and how to start using them on your site. Working with the original WordPress menus WordPress menu management to the rescue Drag, drop, and done RESOURCE:Read more about WordPress menus.

Mastering The WordPress Visual Editor

wysiwyg-bigWhat You See Is What You Get Add, Edit & Remove Links Insert More Tag Fullscreen Mode Headers & Paragraph Types Paste As Plain Text/Paste From Word Remove Formatting Insert Special Character RESOURCE:The WordPress Visual Editor

 

How To Choose a Great Color Scheme For Your Website

paint

  • 3 important considerations when choosing website colors
  • How many colors should you use?
  • Shades and tones for greater variety
  • Free tools to help you choose a color scheme
  • Colors On The Web
  • Kuler

A Flash-based library of professional color themes. 

A design community where people share thoughts and ideas on colors, patterns and lots of other cool stuff.

  • PHOTOCOPA
      This tool allows you to create a palette based on colors extracted from a digital photo. Also includes a range of other color creation tools.

RESOURCE: How To Choose a Great Color Scheme For Your Website

HOMEWORK | Week 2

  • Read/review the client survey’s for all clients listed below. Make notes and questions about things you are unsure of or questions you have for them/the class and post those questions to your blog.
  • Once you’ve chosen your client, (advise the class first) reach out to your them via email. Introduce yourself and set up weekly Skype chats anytime between 10am and 1pm on Wednesdays.
  • Fill out the Competitive Analysis – and post to your WordPress blog. Share this with your client.
  • Create a Google Calendar with your clients name. Add deliverables deadlines for your calendar and share this with your client. Be sure to include weekly Skype chats. Be prepared to start your Skype chats next week.
  • Sort your content by page and put the text/images/video in the correlating folders
  • Make a list of missing or needed items and relay the information to your client. Give them a deadline.
  • Create a Dropbox folder for your client and ask them to begin sending any content they have.