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.

Replaces the next/previous buttons with good looking paginated buttons. Customizable, and absolutely essential.

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)

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.

Creates a complete mobile version of your site with ease. Premium version also available that removes branding and allows you to embed ads.

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.

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.

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:

Click it to see an interface something like this:

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.

---

John Maeda: Designing for Simplicity

John Maeda is the president of the Rhode Island School of Design, where he is dedicated to linking design and technology. Through the software tools, web pages and books he creates, he spreads his philosophy of elegant simplicity.

---

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.

---

 

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.

 

Add Media

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 Title, Caption, 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.

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.

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.

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.

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.

wordpress: photo galleries

 

Add galleries to a post

 

Many sites, such as YouTube and Vimeo, let you embed content into other sites (such as into your blog). This is also true of Google Maps and Charts, video services, widget providers, and more. Look for the “Embed” option on those sites. Here’s what it looks like on YouTube:

After clicking the Embed option, YouTube gives you a bunch of options. The most important one to notice is the Size selector. You should select the size that most closely matches the width of the content area in your site’s theme. For example, if your site’s content area is 700px wide, select the option that’s 640px wide. Notice that you can also embed the content at custom dimensions.

Copy the embed code provided to your clipboard, return to your Post, and switch to HTML mode. This is critical – you cannot paste raw HTML into the editor when in Visual mode.

In addition, there is a potential limitation – only users who have the role of Administrator on the WordPress site can post embed code without having it stripped out.

If you are not an administrator and/or don’t want to use HTML mode, there is an alternative for users of WordPress 3.1 and higher. Go to the Settings section of the Dashboard and enable theAuto-embeds option. Set a maximum width and height at which you want embedded media to appear.

Now, returning to the example YouTube video, don’t grab the embed code. Instead, copy theURL of the page hosting the video to your clipboard:

Back in the WordPress post editor, paste the URL on a line by itself, directly into the body of the post. You do not need to be an administrator, and you do not need to be in HTML mode for this to work. If the service you pasted the URL from is a cooperating “oembed” provider, the media embedding will be taken care of for you, automatically. A list of supported providers can be seen here.

Notice that this technique does not work with Google Maps or Charts.
Flickr Slideshows
To embed a Flickr slideshow, try this: On Flickr.com, go to any Set, Album, or Photostream, and click the Slideshow button. Once in the slideshow, click the Share link at the top right.

At this point, you can copy the code provided in the embed field, but notice that it defaults to 400px wide, which is probably not wide enough. Instead, click the Customize link and you’ll be taken to a new page where you can enter a custom width and grab updated embed code for posting.

---

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

---

 

WordPress Admin Panel

Permalinks

---

 

ADDING CONTENT

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.

---

Creating Pages and Posts

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.