Tutorial: WordPress: Getting Started (1-12)

By Scot Hacker
Introduction
Though known originally as a blogging platform, WordPress has evolved to become a very capable content
management system for many kinds of sites, including small publications, blogs, magazines, FAQs and
handbooks, events directories, hyperlocal news organizations and more. WordPress now powers almost 10%
of the web. is also used by many big-name publishers looking for a simple way to manage content.
This tutorial is aimed primarily at WordPress authors and editors. You’ll learn how to use WordPress to post
articles, to manage your growing collection of content, navigate the myriad publishing options in the
Post/Page editing screen, upload media (images, video, etc.), and more. Other tutorials on this site cover
WordPress system management and settings, installation, plugins and themes, and theme modification.
For now, we’ll assume you have a basic WordPress installation to work with, and permission to publish
content.
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.
Your First Post
Let’s dive in! First, take a quick look at the vertical sidebar along the left side of the Dashboard.

Roll your mouse over a section, and a downward-facing arrow will appear (#1, pictured above). Clicking that
arrow will expand that section of the navigation, allowing access to more options. Try doing that with all of
the downward-facing arrows in the sidebar, just to get oriented – we’ll revisit all of these sections in other
Berkeley Advanced Media Institute WordPress tutorials.
With the Posts section expanded, you’ll see an “Add New” link (#2 left, pictured above). Note that you’ll
also see a big New Post button near the top right while you’re in most sections of the Dashboard.
The main aspects of the New Post screen are fairly self-explanatory. Your headline or post title goes in first
main field, and your story goes in the second.
Across the top of the main field is a row of formatting icons. The first nine should look familiar if you’ve
ever used a word processor – select some text then click these buttons to control the appearance of your text.
The lone exception is the icon that looks like a pair of quotation marks – this is used for setting off a chunk
of text as an HTML “blockquote,” which you’ll generally use when quoting some external source at length.
The appearance of a blockquote on the public site will be controlled by your theme.
The chainlink icons are used for linking words or images to other pages on the web (or on your own site).
Copy a URL from your browser to the clipboard, select some text, click the chain link icon, and paste in the
URL. Click OK and those words will become a hyperlink. Use the “broken chainlink” icon to un-do an
existing link.
Pay special attention to the icon that looks like a pair of stacked rectangles – it’s used for creating a “More”
break in your text. Clicking it produces the horizontal dotted line seen in the image above. On your
homepage or category pages, only the text above the “More” break will appear, while the whole story will be
displayed when a user clicks through to read the full content. It’s important to use this whenever a post is
longer than, say, a paragraph – you don’t want to overwhelm your homepage with full-text stories!
Also note the small diagonal lines at the bottom right of the post window – grab these and drag to make your
text editing field larger. If you really want a large editing area free of distractions, click the small blue icon
circled on the toolbar above to go full-screen, then click it again to exit full-screen mode.
Finally, note the last icon on the toolbar, dubbed “kitchen sink.” Click this to enable another row of icons,
with less common purposes. The purpose of all of the toolbar icons is explained in Appendix A of this
tutorial.

A second row of formatting icons is revealed by clicking the “Kitchen Sink” icon.
Editing the slug
Once the post has been saved in the database, you’ll see a Permalink field under the title field:

Clicking the Edit button on this line lets you alter the URL of the completed post, and can be useful if you
want to make sure the keywords you need for good SEO are present.
Publish!
When you’re done writing, look to the right of the post editing field for the Publish section. You’ve got
choices!

Clicking Preview will let you see how your post will appear, but without actually making it live on the site.
Clicking Save Draft will save your post to the database, but without actually publishing it – use this if you’re
not done writing.
Clicking Publish will cause your post to go live on the site immediately.
If you click the “Edit” link next to Visibility, you’ll have the option either to password-protect your post, or
to mark it as “Private.” Private posts can only be seen by you – not by the public and not by any non-
administrative editors of the site.
It’s also possible to modify the publication date for a post by clicking “Edit” next to the words Publish
Immediately. This is useful in two circumstances:
1) You may need to back-fill a site with older content, while preserving the old article datelines.
2) You may want to set a “drip date” by setting the publication date in the future. When you do this, the post
will become visible on the site as soon as that date and time comes around – a great way to have posts go live
in the middle of the night, or while you’re on vacation!
Trash
Clicking Move to Trash works as expected – the post will be kept in the database, but removed from the
public site. We’ll explain how to retrieve trashed posts later on.
Take a Look! (and keep tabs)
Once your post is live, you probably want to see how it looks on your public-facing site. You can click the
new View Post link, but if you do that, you’ll lose your place in the Dashboard. It’s easy for users to get
confused, trying to navigate between the Dashboard and the public site constantly.
Any time you’re working in a content management system (like WordPress), we recommend using the
“Tabs” feature in your web browser to keep both views open at the same time. Then you can use browser
tabs to toggle back and forth between the Dashboard and the public site without losing your place in either.
In most browsers, you can pull down File | New Tab, or hit Cmd-T (Mac) or Ctrl-T (Windows) to open a
new tab. Most browsers also let you open a link in a new tab by holding down the Cmd, Ctrl, or Alt key
while clicking the link. So try Cmd-clicking that “View Post” link instead.
The Admin Bar
WordPress 3.1 makes it a bit easier to keep track of your place without using browser tabs by displaying an
“Admin Bar” above the content on the public site.

Note that this bar is only visible to you while logged in, not to the general public. The Admin Bar will let you
quickly edit the post you’re currently viewing, or create new posts or pages, or jump directly to your
Dashboard. We’ll cover other features in the Admin Bar later.
HTML vs. Visual Modes
When editing a post or page, you can select either Visual or HTML mode at the top right of the editing area.

Visual mode operates much like a word processor, and lets you work without seeing or touching any HTML
code whatsoever. But note that the Visual mode does not completely reflect how things will appear on your
live site, since your final design is controlled by the CSS stylesheets in your theme, while the Dashboard
focuses on the structure of your content.
HTML mode offers advanced users an added level of control when formatting media and text (i.e. there are
many more HTML tags in existence than are represented by the toolbar icons). HTML mode is also used
when you need to insert “embed” code in your posts, such as the code provided by YouTube for embedding
videos in other sites. We’ll come back to that.
If you prefer to stay in HTML mode permanently, you can disable the Visual mode from your Dashboard
Profile page (click your name at the top right of the Dashboard).
You’ll notice that the formatting toolbar icons also change when you switch to HTML mode. The purpose of
most of them should be fairly clear, but see the toolbars appendix for full descriptions.
Posts vs. Pages
So far, you’ve been creating Posts exclusively. But take a look under “Pages” in the Dashboard navigation
and you’ll see that you can create a new Page just as easily.

While Pages and Posts may look superficially the same, their behavior in a WordPress site is very different.
A Post is your basic story unit. A Post has a timestamp, and can be sorted chronologically alongside other
items. Posts can also belong to categories, and can have tags (more on those later).
A Page, in contrast, is used for “permanent” content, such as your About page, or Contact page, or Company
History, etc. Pages do not have timestamps and thus can’t be sorted chronologically. Typically, the pages you
create will be visible in your site’s main navigation, while Posts will not.
Pages can also be stored in a hierarchy, so that, for example, both History and Brochure could be subordinate
to About. When you store pages in a hierarchy (which is done by setting the “Parent” for a Page), the
resulting URLs reflect that hierarchy, e.g.:
http://example.com/about/history
You can also set up your navigation menu to automatically reflect the hierarchy of pages, so that rolling over
About would reveal a submenu containing History and Brochure, for example. However, this ability has been
superseded by the new Menus system in WordPress 3.1.

Screen Options
At the top right of the post editing screen, you’ll see a “Screen Options” link, giving access to a bunch of
less-common post writing options. We cover these in detail in the Screen Options appendix of this tutorial.
Categories and Tags
There are two main ways to organize content on a WordPress site – by “Category” or by “Tag.” In most
cases, you’ll want to do both.
Categories
Think of Categories like the “beats” in a newspaper – you have the Sports section, the Health section, the
Science section, the Politics section, etc. Those big “topic” buckets become the main taxonomy of your site.
Typically, your site’s list of categories will appear in the main navigation menu. Therefore, it’s best to not
create too many of them – keep your list of categories relatively confined.

On this site’s navigation system, the menu is built from a combination of Pages and Categories (the
Categories are in the red box).
You can place a post in more than one category. A story about socialized medicine might appear in both the
Health and Politics sections of the site.
By default, all stories will appear on the homepage. But they’ll also show up on any relevant category pages,
as well as any “date index” pages, if your site uses them (e.g. in a listing of all posts from March 2011). Not
all themes use the default WordPress behavior, however.
To place stories in categories, simply check the boxes for all relevant categories in the Post editor:

If you have administrative permissions on the site, you can also create additional categories at any time,
either from the “Add new category” link you see here, or by clicking the Categories link in the left sidebar of
the Dashboard.

That interface lets you create, edit, or delete categories. It also lets you “nest” categories within categories,
which is useful for special purposes not covered in this tutorial.
Tags
On the surface, Tags work similarly to Categories – they let you group related content together. But Tags are
meant to be used in a more “ad-hoc” fashion, and can be much more granular than categories. An author
might put a story in the Health category but give it the tags “Nutrition,” “Diet,” and “Exercise.”
Tags can be added to a Post by typing them directly into the Tags field while editing a Post. If you don’t see
the Tags field, enable it from the Screen Options tool at the top of the page.

You can manage your site’s entire collection of tags by clicking “Post Tags” in the Dashboard sidebar,
within the Posts section.
Because tags are much more granular than categories, you generally won’t be putting them in your
navigation menu. Instead, you might use them to show a list of “Related Stories” at the end of every story,
where “related” is defined as “other stories sharing one or more of the same tags.”
Another popular use is to build a “tag cloud,” which is a list of all tags used on the site, with their font sizes
automatically changed to reflect how commonly they’re used, like this:

However, most usability experts now agree that tag clouds are of questionable value to readers. Your best bet
is to use tags for tracking related content.
Managing Content
WordPress includes a very nice interface for quickly searching for stories to edit (or delete). You can also use
this interface to filter content by category or date.
Click the Posts link in the Dashboard sidebar to see all of your content listed by date.
Use the status section (1) above to filter by posts that have been published, in draft mode, in the trash, or all
posts.
Use the Search feature (2) to find posts by keywords in the title or body of the post.
Click column headers (3) to sort the results by Title, Author, or Date.
Click a post title to edit just that post.
This interface also provides some very powerful batch-management capabilities, letting you change the
categories, tags, authors, or publish status for hundreds of posts at once. See our Beyond the Basics tutorial
for more on that.
Deleting Posts and Pages
If you want to delete a post, click on the checkbox for the post you want to delete. From the Bulk Actions
dropdown, select “move to trash”.
There’s also a “move to trash” link on each post-editing view. The Trash link is to the right, at the bottom of
the Publish section.
To restore items from the Trash, view Trash from the Posts manager, then roll your mouse over the item you
want to restore. You’ll see options to Restore or to Delete Permanently.

Adding 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).
In general, we 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. However, there are some up-sides to
using external services like Flickr. For example, these services make it super easy to create sophisticated
slideshows, and may help you capture additional “drive by” traffic from those sites.
We’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.

See also: Our tutorial on working with WordPress photo galleries.

Embedding External Media
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 the Auto-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 the URL 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.
Appendix A: Post Toolbar Icons
Here is a complete guide to the formatting icons found in the WordPress post/page editor. Since the icons
change when you switch between HTML and Visual modes, guides to both modes are shown below.

Make text bold

Make text italic

Strikethrough text

Create an unordered list

Create an ordered list

Convert to blockquote

Align text left

Center text

Align text right

Convert text into a hyperlink

Remove hyperlink
 Creates a “More” break*

View the editor in fullscreen

mode
A final icon at the right-most end of the toolbar enables “Kitchen Sink Mode,” and turns on a second row of
buttons with more advanced functionality not covered here.
* The “More” tag creates a break between the “teaser” that will appear on index pages such as the homepage
and the “body” section of your post, which will appear on the post’s individual “permalink” page (the actual
story page).
Icons in HTML Mode
If you switch from Visual to HTML mode, you’ll see a somewhat different set of toolbar icons:

Most of these follow the functions of the Visual mode icons pretty closely – bold, italic, link, blockquote,
and more all work as expected. The “ul” and “ol” buttons create unorderd and ordered lists, respectively,
while “li” creates a list item within those lists.
The “del” and “ins” buttons are for making corrections to posts. Select the text you want to change and click
“del” and it will be rendered in strikethrough. Enter your new text, select it and click “ins” and the new text
will be styled by the browser or stylesheet. WordPress will add a timestamp to show when the insertion was
made (which you can remove if you like).
The “img” button does not take you to the WordPress media uploader – it lets you insert an image from a
known URL instead.
The “code” button is for adding computer code samples to posts – it wraps text in the HTML “code” tag
which is styled specially by the browser or stylesheet.
“lookup” provides a quick way to look up a word in an online dictionary, while “close tags” does its best to
close any unopened HTML tags.
Appendix B: Screen Options
When editing a Post or Page, there are many more options available than those you see by default.
Depending on your site’s needs, you may or may not ever need access to these “power features,” but it’s
worth familiarizing yourself anyway. Look for the “Screen Options” link at the upper right corner of the
screen:

A panel will drop down, similar to this one:

Each item in this panel represents a “section” of the Post-editing interface, which you can show or hide via
checkbox. You can also switch your overall layout from 2-column to 1-column. Doing so gives you a wider
space to work in, which is nice, but pushes the all-important Publish section further down the page.
Sections of the page can actually be dragged around to other positions – try it! Your preferences will be
saved automatically, and will remain in effect on the next post you edit as well.
Experiment with the options here – you can’t break anything! Here are notes on some of the section options
available:
Format: The vast majority of posts you create will be “Standard” format. “Gallery” and “Aside” are used
only in special circumstances – your theme may direct you to create posts of these types when creating
certain kinds of content. You can generally ignore this option.
Categories and Tags: These let you position the current story in a “taxonomy” for your site. We’ll discuss
these in detail later.
Featured Image: In the course of writing a Post, you may upload many images to that Post’s internal
“gallery.” But in some site designs, certain stories get displayed prominently, with big images to go with
them. Featured Image lets you tell WordPress which associated image is to be considered the “main” one.
With the right setup, Featured Image can also be used to set a custom banner image for the current post.
Excerpt: This optional field is mainly used when generating RSS feeds for a site. If you don’t specify an
Excerpt, the first 55 words of the post will be used by default. If the lede of your post doesn’t do a good job
of summarizing the content, use this field to override the default.
Send Trackbacks: When you create a post that contains a link to another site, and Trackbacks are enabled,
WordPress will attempt to “ping” that other site. If that site is also Trackback-enabled, a link to your site will
appear in that site’s comments section. In this way, sites can communicate automatically about whether
similar conversations are happening on the web.
Custom Fields: WordPress can store arbitrary “meta” information about a post, which can then be used in
the theme’s templates. For example, your theme might support “extra wide” posts, which cause the sidebar to
disappear so your content can use the full screen-width. Such a theme might instruct you to use Custom
Fields to “wide” to “true.” You’ll only need these fields if your theme’s instructions (or your web developer)
tells you to use them.
Discussion and Comments: These two fields are related but different. Discussion lets you control whether
people are allowed to leave comments on the current post. Comments let you manage the actual comments
that have been left on this post (you can also manage comments from the main Comments portion of the
Dashboard sidebar).
Slug: When you write a headline, WordPress automatically creates a “slugified” version of that headline —
all lowercase, punctuation removed — for use in the URL. For SEO and convenience reasons, you might
want to edit the slug and alter the URL. This field lets you do that.
Author: By default, all posts you create will appear as though they were authored by you. But if you work
on a multi-author site and sometimes post content for other writers, this lets you set the byline to their name,
rather than yours.
Revisions: Every time you save a post to the database, WordPress saves your changes to a “revision,” which
can later be restored. This is a nice safety net, protecting you against authoring accidents.
About this Tutorial
This tutorial was written by Scot Hacker, webmaster for the Knight Digital Media Center and web host
specializing in WordPress platform development. This tutorial was written primarily for fellows of Berkeley
Advanced Media Institute digital media training programs, but is appropriate for anyone getting up to speed
with WordPress for the first time.
This is an introductory level tutorial intended primarily for writers. Other tutorials on this site are aimed at
site administrators and developers.
Republishing Policy
This content may not be republished in print or digital form without express written permission from
Berkeley Advanced Media Institute. Please see our Content Redistribution Policy at
multimedia.journalism.berkeley.edu/content_redistribution/.
Tutorial: WordPress: Managing Settings (13-17)
By Scot Hacker
For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/wp-settings/
Introduction

Image by Debs
You can control dozens of aspects of WordPress configuration and behavior from the Settings section of the
Dashboard control panel. If you’ve just read the WordPress: Beyond the Basics tutorial, read this one next to
learn how to configure WordPress itself.
The settings section of WordPress is accessible only to users with the Administrator role. It goes pretty deep,
but we’ll do our best to document every important aspect of it.
General
Site Title and Tagline: These are generally called from the banner area of most themes. However, themes
are free to place these wherever they like, or not use them at all. For SEO reasons, it’s a good idea to include
the site title in an H1 tag in your theme.

WordPress Address and Site Address: These let you establish the URL of your site, which may be simply
a domain name (http://example.com) or a domain name and path (http://example.com/blog). The Site
Address field is usually the same as the WordPress address, but may differ if you don’t want the WordPress
installation files living in the document root of your main web site.

E-Mail Address: This is the address of the site’s main administrator. Even though each User in the system
has their own email address, this address will receive comment moderation emails.
Membership: In most cases, you’ll want this turned off. If enabled, users will be able to sign up for accounts
on the site. This is generally useful only in two cases: 1) If you only want to accept comments from
registered users, or 2) If you want to accept content contributions from the community.
New User Default Role: if the Membership option above is enabled, this will set the role for newly signed-
up users. Set this either to Subscriber or Contributor. It is extremely rare that you would want newly signed
up users to have a higher role (and it could be a big security risk).
Timezone: Be sure to set this as soon as you install a new site, since it will affect the timestamp of all posts
you create in the system. WordPress will look at the system clock of the server it’s installed on and adjust
timestamps accordingly if necessary.
Date and Time formats: These are self-explanatory.
Writing
Size of the Post Box: How many rows of text should appear in the Post writing box by default? You’ll want
to change this if you use a very small or very large screen. However, note that in most modern browsers, you
can change the size of the post writing box by dragging its lower right corner:
You can also use the Fullscreen button on the toolbar (circled, above) to use your full screen width for
editing.
Default Post Category: If you forget to put a post in a category, it still needs to show up in some category.
By default, this is “Uncategorized,” but you can change the name of that category from the Posts | Categories
manager.
Default Post Format: This should be “Post” for almost all sites.
Post by Email: Lets you create posts by sending to a special email address, which you’ll need to set up on
your server. The usefulness of this feature is debatable. When would you have access to email but not to the
web? And if you have access to the web, why wouldn’t you just post through the Dashboard? If you want to
use it, full instructions are present in this section of the settings.
Remote Publishing: If you find the WordPress Dashboard lacking, you might prefer to use desktop software
to publish to your WordPress site. In the past, tools as Ecto and MarsEdit were very popular. But as the
Dashboard has evolved over time and gotten better and better, their usage has waned. If you do choose to use
one, enable the protocol specified in the settings here, then configure your desktop publishing tool to match.

Mars Edit is an example of 3rd-party software that can be used for posting to a WordPress site without using
the Dashboard.
Update Services: You can configure WordPress to “ping” an external service whenever you create a new
post. Most such services are blog directories. You could potentially benefit from some increased traffic by
listed in these directories, though these sites are not nearly as well visited as they once were.
Reading
Front page displays: WordPress isn’t just for blogs – sometimes you’ll want to use it for building other
kinds of web sites as well. A great way to push the “bloggy” front page off to another location is to build a
custom front page however you like, then come here and tell WordPress to use that page as the front page.
If you still want a Posts listing on another view, create a blank page in the system (which creates its URL),
then select it as the Posts Page here.
Blog page shows at most: By default, WordPress will display the 20 most recent posts on the homepage and
on “index” pages such as Category or Date listings. You can change that number here. The Syndication
setting just beneath this option does the same thing for your site’s RSS feeds.
For each article in a feed, show: People disagree about whether it makes more sense to provide full article
text in your RSS feeds. RSS addicts love it, but it will probably mean less direct traffic to your site, and thus
less ad revenue. However, people really enjoy getting full-text in their feeds, which may result in more
positive buzz for your publication in the end. You might want to read more about this ongoing debate.
Encoding for pages and feeds: In almost all cases, you should leave this set to UTF-8 for best handling of
international and unusual character sets (including those pesky special characters pasted in from MS Word
documents).
Discussion
Default article settings: Note that these options relate to the default settings for newly posted articles. You
can always override these settings on a per-article basis. Turning them on or off will not affect existing posts
in the system – if you want to do that, use the Batch Management tools described earlier.

The first two options relate to “notifications” or “pings.” This is a technology through which two blogs
discussing the same topic can include links in one another’s comment stream. If I link to your blog from one
of my posts and we both have notifications enabled, a link to my blog will automatically appear in your
post’s comments.
Comment author must fill out name and e-mail: This setting is strongly recommended for all sites –
allowing anonymous comments makes it much more difficult to keep spam under control.
Users must be registered and logged in to comment: This is a fantastic way to keep spam levels down, but
at a high cost: Most users aren’t willing to register just for the privilege of commenting. Expect your
comment traffic to go way down if you enable this (we don’t recommend it). Akismet and other tools
(described earlier) are a much better way to fight spam.
Automatically close comments on articles older than xx days: A lot of spam shows up on older articles,
while most legitimate comment activity happens on recent articles. You can cut out a lot of spam by simply
closing comments on older posts. However, this can be very frustrating to users who happen to stumble
across one of your old posts and have something useful to contribute. Again, we don’t recommend doing this
– there are better ways to fight spam.
The rest of the options in Other Comment Settings are pretty self-explanatory, as are the “E-Mail Me
Whenever…” options.
Before a comment appears: Since WordPress knows which commenters you’ve approved in the past, you
can allow it to automatically accept new comments from people who have been previously approved. This
setting is highly recommended, but the other one – Requiring administrators to always approve comments —
is a little heavy-handed, we believe.
Comment Moderation: This section lets you give WordPress additional rules about how to determine when
a comment should be held for moderation. Since many spam messages include lots of links, WordPress
defaults to marking any comment with more than two links as needing moderation. You can change this. You
can also establish a set of “stop words” that should automatically trigger either moderation or immediate
marking as spam.
Avatars: Years ago, a service called Gravatar let users set up a personal icon/avatar associated with an
avatar. When that user left a comment on any blog or site that used the Gravatar plugin, their icon would
show up, universal across the web. Automattic later bought Gravatar and integrated it with WordPress. From
this panel, you can turn avatars on or off, and protect yourself from avatars that might potentially be
offensive, with a movie rating-like system. You can also set the default avatar for users who haven’t yet set
up their Gravatar.

Media
Image sizes: When you upload an image to a WordPress site, the system automatically creates a thumbnail
version of it (for use on index pages and in galleries) and a medium size version for use in story bodies, if the
full-size version is too large. This means you don’t always need to resize your images in Photoshop before
uploading (though it’s generally still a good idea). This page let you control the sizes at which WordPress
should do its resizing for each of the three versions.

Embeds: Many sites, such as Flickr and YouTube, provide “embed code” – chunks of HTML and Javascript
that can be pasted into other sites, so that media from the external site is embedded directly into the blog.
That’s wonderful, but comes at a price – allowing arbitrary embed code can be very dangerous, since it could
be manipulated to include malware. Therefore, WordPress only lets users with the Admin role embed this
code into posts.
Of course, normal authors want to be able to embed legitimate external media too! To get around this
problem, WordPress 3 supports an emerging protocol called oembed. With this system, the post author only
needs to paste in the URL of the page that hosts the external media, not the actual embed code itself. When
WordPress detects this, it reaches out and grabs the actual code to embed in the post. Therefore, there is no
risk of bad things happening, and normal authors can safely embed external images and videos. Be sure to
turn this option on – it rocks!

To embed media from external sites with the oembed option enabled, just paste in the URL, NOT the embed
code! This lets unprivileged users embed external media, not just admins.
WordPress scans the URL, determines that embeddable code lives at the end-point, fetches it and inserts it
automatically.
Uploading Files: By default, all directly uploaded media is added to the wp-content/uploads folder on the
server. Don’t change this unless you know what you’re doing, and its potential impact on existing images.
You should also definitely keep the “Organize into month- and year-based folders” option enabled – if you
don’t, and you upload a lot of media, you’ll end up with a single folder cluttered with thousands of files over
time. Trust me – you don’t want that
Privacy
The only option here is whether to allow search engines to index your content. The only time you wouldn’t
want that is if you’re developing a site that isn’t yet ready for public consumption and you don’t want visitors
arriving early (though in that case you should be using a plugin to block the whole site from unregistered
users). If you turn this on, remember to turn it off again when your site goes live, or you’ll be mystified why
you’re not showing up in search results! Later versions of WordPress will warn you if you accidentally leave
this turned on.
Permalinks
It’s important that your URLs are not just machine-readable, but human-readable as well. A URL like:
http://example.com/?p=2392
Does not tell the reader where in the site hierarchy they are, nor what date it was written on. And it doesn’t
give search engines any keywords to help in the indexing process. These URLs, however, are meaningful
both to search engines and to humans:
http://example.com/about/products
http://example.com/2011/05/18/plasma-tvs-compared
But web servers need to give a hint called a Rewrite Rule to WordPress so it can translate those friendly
URLs into database IDs, so the right content can be served up. For most purposes, we recommend the Day
and Name URL structure.
You can also set a different URL base for category view, so that, for example, your photography category
has the URL:
http://example.com/topics/photography
When you click the Save Changes button, WordPress will attempt to write to a special file called .htaccess on
your server and you’ll be all set. If WordPress doesn’t have permission to write to the directory on the server,
it will give you a block of code instead. You’ll need to log into your server’s file system and create a file
called .htaccess, then paste this code into that block. See our FTP 101 tutorial if you need a hand.
Tutorial: WordPress: Beyond the Basics (18-31)
By Scot Hacker

Introduction

Image by Huasonic
This tutorial is for site owners and administrators – anyone who has the “Administrator” role in a WordPress
system and is allowed to change more than just the content of the site. We’ll cover the built-in Links,
Widgets, and Menu-building system, Account creation, comments and spam, and batch-content editing.
We’ll take a tour through all of the advanced WordPress settings in a separate tutorial.
If you don’t have the Administrator role on your WordPress site, many of the features shown in this tutorial
will not be visible to you.
If you’re not already up to speed with WordPress, please take a look at our WordPress Basics tutorial before
reading this one.
Working with Widgets
Let’s start by modifying the contents of your sidebar. A few years ago, this meant manually editing the
sidebar.php template file in your theme. But the vast majority of themes developed in the past few years
come with support for the newer WordPress “Widgets” system, which, in most cases, lets you control 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:

If you’re using an older, non-widgetized theme, you can either widgetize it yourself or be prepared to
manage everything in your sidebar template with raw PHP code, by editing the sidebar.php template in your
theme.
In the next section, Managing Links, we provide an example of modifying the sidebar manually rather than
with widgets.
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. Cool, huh?
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.
And what if you want to remove a widget? 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 (do you see one on the web site of your favorite newspaper?) Start by dragging that
Meta widget out of the way.
Adding Widgets
Now let’s 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.
How to find database IDs Certain features in WordPress need access to the database record IDs of certain
pages, posts, or categories. The easiest way to find them is to visit the Page or Post or Category manager,
click the record you’re interested, and take a look at the URL. For example, if I wanted to exclude my About
page in the step above, I would navigate to Pages in the Dashboard, click the link to the About page, then
study the Dashboard URL:

See the parameter “post=2” in the URL? That means I’m looking at record #2.
Let’s step it up a notch. Grab the “Text” widget from the Available Widgets section and 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 (confusingly, other sites will often refer to their embeddable goodies as “widgets,” so it’s like you’re
putting a widget in a widget).
For example, try going to Twitter’s Widgets page. Then click “For my website,” then “Search widget.” Type
in “wordpress” as the search query, then click the Finish and Grab Code button. Copy the code they provide
to the clipboard, then return to your Dashboard and paste into a Text widget. Click Save, and check your site
– you’ve just embedded a real-time Twitter search query into a widget in your sidebar. How easy was that?!

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 (not all plugins provide widgets, but some
do). For example, notice the “NextGEN Slideshow” widgets in the screenshot above – those are present
because the NextGEN plugin is installed on the site. Try searching the WordPress plugins directory for the
word “widget” to find more.
Working with 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:
 Have comments emailed to thread participants
 Install contact forms
 Override the default WordPress permission roles
 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
 Set up your site for publishing podcasts
 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.
Installing Plugins
There are two possible ways to install plugins. If you’re lucky and your web host supports it, you’ll be able
to simply go to the Plugins section in the Dashboard and click the big Add New button:

From there, you can enter a search term to review a list of matching plugins.

When you find one that sounds promising, click the Install Now link, wait a few moments, 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!
Installing Plugins via FTP
If you’re asked for FTP credentials after selecting a plugin to install, then your host isn’t set up for automatic
plugin installation. You can try entering the FTP username and password provided by your web host, but be
aware that this will not always work, since the document root assigned to that FTP account by your host
might not match your WordPress installation’s document root. If this happens to you, try creating an FTP
account in your hosting control panel with a document root matching your WordPress installation.
However, you might find it easier to install an FTP client on your computer and add plugins to your site
manually. If you go this route, you’ll need to navigate your FTP client to wp-content/plugins after logging
into your site’s filesystem. Download the plugin file from wordpress.org, unzip it to a folder on your
Desktop, and upload the entire resulting folder into wp-content/plugins. Then return to your Dashboard’s
Plugins section and activate the newly installed plugin.
See our FTP 101 tutorial for detailed FTP instructions.
Let’s Try It
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 for example’s sake, search the plugins database for
“contact form 7” and install that plugin. Be sure to activate the newly installed plugin.
Now take a look at your Dashboard sidebar – you should see a new “Contact” section:

Click it to see an interface something like this:

But what do you do with this interface? Look for the “Docs” and “FAQ” links at the top right, where you can
learn everything you need to know about this piece of software. Fortunately, Contact Form 7’s default
settings are very good, and require no configuration. 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.
Take a look at the plugin’s documentation to learn about all the other things this plugin can do!
Want your new Contact page to show up in your site’s menus? See the Menus section of this tutorial.
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.
The Links tool comes with a default set of links, which you can either delete or replace.

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. How it 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.

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 Relationships, Advanced).
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:
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:

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:

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 your other category.

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.
Building Menus
Your site’s navigation menu is generally a combination of Categories and Pages, as shown in this example:
Categories are shown here in red, while the other three links are to Pages in the system.
Prior to WordPress 3.0, menu building was a semi-manual process. There are WordPress function calls that
can be inserted into a theme’s header.php template file, which will automatically pull in a hierarchy of nested
pages, or of categories and their subcategories. However, that system required users to touch the HTML/PHP
of the site (many users aren’t comfortable with this), and made it tricky to precisely control the order of items
in the menu, or to exclude certain items.
WordPress 3 introduced a new “Menus” system which has made menu construction much, much easier. If
your currently active theme is designed to support Menus, you’ll see a “Menus” link in the Appearance
section of the Dashboard sidebar:
If that entry doesn’t appear in your Appearance manager, you’ll need to edit your theme’s header.php
template file, remove the code that currently builds menus, and replace it with a bit of new code. That
process is well-described here. For now, we’ll assume that your theme already has Menu support.
WordPress can actually support the use of multiple menus on a site. To get started, you’ll need to name at
least one menu in the system – may as well call it “Main”:

Once you’ve saved a blank menu, you’ll need to attach it to a location. In the default “2010” theme that
comes with WordPress, the main named location is called “Primary Navigation.” Associate your “Main”
menu with the “Primary Navigation” location:

With that done, you can now begin dragging menu sections from the left side of the page to the “Main” menu
drawing area at the right, in much the same way as you built your collection of Widgets.
Start by checking the boxes for some or all of your Categories at the lower left, then click Add to Menu:

The selected categories now appear in the menu builder:

To change the order of the menu, try dragging the category entries up or down. Click Save Menu, then take
a look at your live site. Want to see something even cooler? Try dragging one of your menu items a bit to the
right, so that one category is nested under another:
Now take another look at your live site – the hierarchy of categories will be translated into nested “fly-out”
menus on your site.
Now try adding some of your Pages to the menu, in the same way. You might want to arrange it so your
menu shows one page, then three categories, then another page, or whatever you like.
Finally, take a look at the Custom Links section on the left of the Menu builder. Create a Custom Link to
your homepage by entering a URL of “/” (or whatever is relevant for your site) and a label of “Home”:

Of course, custom links can go to any page or post on your site, or even to other pages on the web! Drag the
new custom link to the top of the menu and save.

Using this system, categories and pages no longer show up automatically in your menus, but you’ll find that
you have much more control, and end users will have far less need to call in developers to build their menus.
If you do decide you want newly added top-level pages to be added to your menu automatically, check the
box labeled “Automatically add new top-level pages” near the top of the menu builder.
Comments and Spam
Allowing comments on stories is a great way to continue the discussion, dig up more information from “the
public mind,” and increase engagement on your site. Most sites will want to enable comments on all regular
Posts (stories), but probably disable comments on Pages.
However, every form on the internet is a potential and likely target for spammers, who want to get links to
their sites on as many pages as possible, in the false belief that doing so will increase their Google
“PageRank.” Sites that accept comments but that don’t have spam protections in place will soon find
themselves inundated with unwanted garbage comments.
Note: Do not let spam comments get onto your site! Spammers watch carefully. If they find that your guard
is down, you’ll quickly become an even bigger spam target!
There are many ways to fight comment spam, and we recommend a multi-pronged approach. First, take a
look at the default Discussion settings in the WordPress Dashboard – this setting in particular:

“Comment author must have a previously approved comment” means that all comments from new readers
must be first approved by you, the site administrator. But after you’ve approved a comment from a reader
once, their subsequent comments will go live on the site immediately, without moderation.
This is an excellent starter system for most sites, with one big problem: You could end up having to visually
scan hundreds of spam submissions per day to find the legitimate ones. That’s not necessary because, as with
email spam, most spam has “fingerprints” that can be used to identify it in advance. With a good spam
identification system in place, WordPress can prevent you from having to ever look at 90% of incoming
spam.
The folks at Automattic, who run wordpress.com, have developed a system called Akismet, which uses
public collaboration to identify most spam.
Imagine that Kwan and Shelly run separate blogs on different servers. Kwan receives a comment spam in his
moderation queue and marks it as spam. The fingerprint of that comment is sent to the servers at Akismet.
Now the same spammer tries to leave the same spam comment on Shelly’s blog. Since Shelly has Akismet
installed too, her system asks the central server at Akismet if it recognizes the comment. If Akismet responds
“Yes, it’s spam,” the comment will go into Shelly’s spam queue, not her moderation queue. As a result, the
comment won’t be emailed to Shelly for moderation (though she does have 30 days to scan her spam queue
for possible false positives before it’s permanently deleted).
Because hundreds of thousands of bloggers use Akismet, the system is extremely effective – very little spam
is able to slip past the eyeballs of thousands of spam-hating administrators! Take a moment to look at the
numbers on Akismet’s homepage – as of this writing, Akismet has stopped more than 25 billion spam
comments from ever appearing on public web sites.
Because Akismet is so necessary, it’s the only plugin that’s actually bundled with WordPress. To enable it,
sign up for an account and they’ll send you a usage key. Go to the Plugins section in your Dashboard, click
Activate underneath Akismet, and enter the key when prompted. That’s it! You’re good to go.
Additional Protection
Once your site grows to a certain size, you may find that Akismet alone still isn’t enough. That’s OK –
you’ve got more options. One is to install another spam fighting plugin such as WP-SpamFree, which
approaches the spam problem through completely different techniques than what Akismet uses.
For point of reference, on one of my sites, Akismet has protected me from more than a million spam
comments in the past seven or eight years, and WP-SpamFree has protected me from another quarter million.
Other options include:
 Accepting comments only from registered users (spam will go way down, but so will legitimate
comments)
 Requiring moderation approval for all comments, even if the user has been approved before
 Turning off comments on articles older than 14 days (highly effective but not recommended)
Managing Comments
There are lots of ways to manage and moderate comments on a WordPress site.
First, the site administrator will receive an email for each comment that comes into the moderation queue.
The site administrator’s email address is the one listed on the General Settings page, not the email of the
author of the post the comment is on. Each email will include links to quickly Approve the comment or
“Mark as Spam.”
The Dashboard homepage will also provide a set of quick links to manage recent comments:

Roll your mouse over a comment and you’ll see links to Approve, Reply, Edit, Spam, or Trash the current
comment.
There’s a full Comments manager in the Dashboard (click Comments in the sidebar) that will let you perform
all of the same actions, but will also let you search for comments or perform bulk actions on them. This is a
great way to delete dozens of comments at a time, should you need to.

There are two items in this interface to take note of. The first, marked “Spam” (#1 at the top) will let you
quickly see all of the comments your spam filtering system has marked as spam. You might want to review
this periodically to make sure there are no “false positives” getting through. If there are, simply “Approve”
them and Akismet will be informed that it made a mistake. In addition, there’s a big “Check for Spam”
button (#2 above). Clicking this will cause your comments database to be re-run through your current spam
filters. This can be useful if you’re sitting on a large backlog of current spam and have just installed new
filters, and you want to apply those filters to the backlog.
Finally, each Post and Page in the Dashboard will let you see a list of all comments associated with that
particular item.
Managing Accounts
WordPress will let you run multi-author blogs or sites. If you manage your own WordPress installation, you
can create and manage accounts in the system by clicking Users | Add New in the left rail of the Dashboard.
Roles and Permissions
Each new user can be given the role of Contributor, Author, Editor, or Administrator. In a nutshell, the roles
are defined as:
 Administrator: Can do anything (this is the “God” role)
 Editor: Can create or edit anyone’s posts, but can’t activate plugins or edit themes
 Author: Can write or edit their own posts but no one else’s
 Contributor: Can submit content to the site but cannot publish it
 Subscriber: User can comment on stories if comment settings are “registered users only”
The exact capabilities of these roles are described here. As with any system, don’t give new users any more
privileges than they absolutely need!
When you have multiple authors in your system and you are posting on behalf of other authors, you can set
the byline by using the Author picklist on the Post or Page editing screen.
Batch Post Management
You can control any aspect of a post or page from the Post or Page editor, but what if you want to control the
status of lots of posts at the same time? Let’s say, for sake of argument, that we already have a News
category on our site, and we want to give all stories in the News category a “Breaking” tag, and
simultaneously cause them all to be authored by a particular writer.
Note: Categories and Tags are covered in our WordPress for Writers tutorial.
First, click on Posts in the left sidebar, and look for the set of controls above the lists of Posts. Start by
filtering on the News category — pull down the View All Categories picklist and select “News,” then click
Filter. You’ll get a subset of all content in your site in that category. To select all of the resulting stories for
batch action, click the lone checkbox above the column of post checkboxes (#2, pictured). This will cause all
checkboxes in the column to be checked.

If there are any stories you want to exclude from the batch operation, uncheck them now. Next, from the
Bulk Actions picklist, select Edit, then Apply. You’ll get an interface something like this:
Now just apply all of the changes you want to make to the selected articles. In this case, we’re adding a
“Breaking” tag to them, and setting the author to “shacker” but notice that we can also add them to additional
categories, turn comments on or off, change their publication status, etc.
This is an extremely powerful tool, which gives you “just enough rope to hang yourself with” — use
with caution!
Working with Themes
One of the things that makes WordPress so flexible is its concept of “themes.” A theme is a collection of
WordPress templates, stylesheets, and images that completely control the look and feel (and in some cases
the behavior) of a WordPress site. In WordPress, themes are completely decoupled from the content, which
means you can change themes at any time without affecting the content you’ve loaded into the site in any
way.
Because WordPress is so popular, there’s an entire cottage industry of free and low-cost themes available,
many of them designed by real live design professionals.

While it’s possible to design a WordPress theme from scratch, we don’t generally recommend it. Design is
hard work (harder than you think). It’s not just the challenge of coming up with a good design that’s hard,
but giving it that final polish that marks the difference between an amateur site and a professional site. Not to
mention the difficulty of making sure a site works in all of the web browsers and operating systems out there.
Because there are more than 7,000 WordPress themes out there “in the wild,” there’s almost certainly
something out there you’ll find suitable, or similar to the design concept you had in mind. Our strong advice
is to download or purchase a theme that’s close to what you want to achieve, and modify it to match your
vision. Tracking down that “just-right” theme will take time, but not nearly as much time as you’d spend
designing from scratch.
To begin your theme search, start with the Themes directory at wordpress.org/extend/themes. The themes
found there are only a small subset of all themes available in the wild, but they have two advantages:
1. They’ve been vetted for security by trustworthy humans, so there’s virtually no chance they’ll
include hidden spam links or other nasties.
2. They’re mostly free, and guaranteed open source (compliant with the GPL)
But the official theme directory just scratches the surface of what’s available out there. There are dozens of
reputable companies and individuals giving away or selling WordPress themes. Try searching for “wordpress
premium themes” or “wordpress portfolio themes” and related queries to find more.
Important: When selecting themes from 3rd-party vendors, stick to the top search results, and download
themes only from well-established theme shops. There are themes out there made by fly-by-nights that
include hidden spam links and other unfortunate bits.
Installing themes
Once you’ve found a theme you like, you can install it in one of two ways:
1. Via the WordPress Themes Dashboard
2. Via FTP
The dashboard method is much easier, but only works for themes that are listed at wordpress.org. If that
applies to you, go to Appearance | Themes in the Dashboard, then click Install Themes at the top. Search for
the name of the theme you’ve already chosen. You’ll get a very detailed search interface which will let you
search for theme names, keywords, colors, number of columns, etc. Here’s what a search for the keyword
“wood” looks like:

Click the Install link next to theme you want to install. On most hosts, the theme will install itself without
further prompting. You can then go back to Themes in the Dashboard and activate your new theme (you can
have lots of themes installed, but only one can be activated at a time).

Activating a newly installed WordPress theme

Installing via FTP
If you’re prompted for a username and password, then your web host is not set up for automatic theme/plugin
installation, and you’ll need to enter your account credentials. This can be confusing for reasons we won’t
get into here. Your best bet is to launch your favorite FTP client and access your host’s file system directly.
Need basic instructions on using FTP? See our FTP Made Simple tutorial.
1. Download the theme from the site that hosts it.
2. Unzip the theme’s .zip file, so you have a theme folder
3. Log in to your host via S/FTP
4. Navigate to public_html/wp-content/themes
5. Drag the theme folder from your desktop and into the themes folder on the server.
6. Activate the theme as described above.
Want to modify a theme you’ve downloaded? Look for our Modifying WordPress Themes” tutorial.
You’ve now got a better handle on the mechanics of running a WordPress site than your average bear. You’ll
find even more WordPress goodness in our WordPress Settings tutorial. And remember, there’s no better
teacher than experience – go build a site!
*********

Tutorial: WordPress: Modifying Themes (32-41)

By Scot Hacker
For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/wp-themes/
Introduction

In WordPress: Beyond the Basics we talked up the power of WordPress themes, and how it makes sense to
put time into finding and modifying an existing theme rather than designing one from scratch. But how do
you modify a theme? In this tutorial we’ll take a deeper dive, learning how themes are constructed and how
to get your chosen theme to work exactly the way you want it to.
Theme modification is a great way to strengthen your HTML and CSS skills, and possibly PHP as well,
depending on what you want to do. This tutorial assumes you have basic comfort with HTML, CSS, and file
transfer via FTP. If you don’t, you’ll want to see these tutorials first:
1. HTML 101
2. CSS 101
3. FTP Made Simple
While not strictly necessary, you may benefit from some PHP basics as well.
Theme Editing Basics
A WordPress “theme” is a collection of documents, generally consisting of:
 One or more CSS style sheets
 Any necessary images that comprise the theme graphics
 A collection of PHP/HTML “template” files
 A thumbnail image representing the theme in the Dashboard
A typical WordPress theme contains a dozen or more files, but only a few are technically required.
These files work together as a package to define the entire look and feel – and sometimes behavior – of a
WordPress site. Themes are completely decoupled from site content, so in theory, a site owner can apply a
new theme with the click of a button and have all content on their site take on a whole new appearance (in
practice, site redesigns aren’t quite this simple).
This collection of files is contained in a folder that lives in the wp-content/themes directory on your web
server. When an administrator visits the Appearance | Themes section of the WordPress Dashboard, all valid
theme folders in that location will appear. Any valid theme can be applied to the site content by clicking the
Activate link below its name.

Editing Template Files

In a minute we’ll learn how to determine which files to edit, but before we can do that, you’ll need access to
them. To edit a theme’s files, you’ve got two choices:
1. Use the Dashboard’s built-in editor (Appearance | Editor)
2. Edit template files in a programmer’s text editor and upload them via FTP
Using the Built-In Editor
The first method is the easiest, but is much less powerful. Since you’ll be editing in a standard web form, you
won’t have the advantage of a proper editor, such as syntax highlighting, line numbering, tag completion, or
any of the dozens of other crucial features found in modern programmer’s editors.
Once in the theme editor, select one of the template files on the right, then look for an “Update” button below
the text area. If you don’t see an Update button and see this sentence instead:
You need to make this file writable before you can save your changes.
it means your template files are not editable by the process the web server runs as. To fix this, you’ll need to
log in via FTP or ssh and change the file permissions. The Codex has a full page of instructions on this.

In order to use the web-based theme editor, the theme folder will need to be writable by the web server. In
this scenario, the server is running as user and group “nobody” and we’re making the files writable by the
group. We then click “Apply to enclosed” or similar so the change propagates to all files in that folder.
Editing via S/FTP
A much better solution is to log into your web host via S/FTP. You can either drag files to the desktop for
editing in your favorite programmer’s editor (we like TextMate) and then re-upload them, or configure your
S/FTP client to edit files directly on the server. With this technique, the act of saving the document updates
the file directly on the remote server. This is by far the easiest and most powerful way to work on WordPress
themes, and we strongly recommend it.

Configuring preferences in the Transmit S/FTP client to launch double-clicked files in the TextMate editor.
The Cyberduck client has a similar preference pane, as do many other S/FTP clients.
From here on, we’ll assume you’re editing files directly on the server via S/FTP configured to work with a
good plain text editor (not a word processor).
Test Environments and Safety Nets
Since you’ll be editing files live, you want to minimize the risk of making mistakes on a production web site.
We recommend one or more of these techniques:
 Create a “dev” or “staging” subdomain at your web host to work on. This way you can fiddle to your
heart’s content without worrying about breaking things on the public/live site.
 Install a web server, MySQL database server, and PHP on your personal development machine.
For small nips and tucks where you have a high degree of confidence, it’s generally OK to make live edits on
a production site, but it’s still a good idea to create a backup copy of the file you’re about to edit before you
touch it. If something goes really wrong, you can always re-install the last known working version of that
file. In Transmit or Cyberduck, simply select the file you’re about to edit and hit Cmd-D to create a backup
copy in place.
Theme Architecture
To recap, a theme is a collection of files that live in a folder at wp-content/themes on the web server. Each
file in a theme serves a purpose, and must be named in a specific way in order to be called correctly by
WordPress. A “valid” theme must have at least these three ingredients:
 A stylesheet file named style.css
 At least one PHP file called index.php
 One thumbnail file called screenshot.png or screenshot.jpg
A CSS block at the top of the style sheet must include the theme name, version, author name, and possibly
other information. If this block is missing, WordPress won’t recognize the theme as valid for display in the
Dashboard.
/*
Theme Name: My Awesome Theme
Theme URI: http: //example.com/
Description: Child of the Twenty Eleven theme
Author: Your Name Here
Author URI: http: //example.com/about/
Template: twentyeleven
Version: 0.1.0
*/
See the Codex for more about the CSS header.
How Does a Theme Work?
If you want to modify a theme, you need to know which templates to edit. And to know that, you need to
know a bit about how WordPress determines which templates to invoke for a given page request.
Think of a web page as consisting of a set of blocks, some of which are the same from page to page, others of
which are different. For example, most sites will have the same masthead/banner and footer and probably
sidebar on every single page. But the guts of the page will of course be different – the homepage will show
summaries of the latest posts, article pages will show just one post, and category views will show summaries
of recent entries filed in that particular category.
The files in a theme correspond to these pieces of functionality. Intuitively, you’ll find files called
header.php, footer.php, and sidebar.php. When a page is requested, WordPress looks at the URL of the page
being viewed and determines what kind of page is being viewed. Is this the homepage? Is this an article
page?
From this, WordPress can decide which templates will be needed to construct the page. For example, if a
single article page is being requested, WordPress knows it will need to assemble the header, footer, sidebar,
and the template that handles display of single articles, which is intuitively named single.php.

When a page is requested, WordPress determines which template files it will need to assemble the page. This
lets common pieces of functionality be re-used throughout a site.
But how did WordPress know to use these four templates? The system starts by determining which template
is the core of the current page. The core is determined via the WordPress template hierarchy (described
next), but for now we’ll go with the example above, where single.php is the core. If you take a look at the
code inside of single.php, you’ll probably see PHP function calls that look like this:
In other words, the core template “pulls in” the other template files it needs to complete the whole page.
That’s a fairly simple example, and most themes contain many more templates than these four, but the basic
concept is always the same.
Basic Stylistic Changes
Many changes to the look and feel of a WordPress site can be handled through CSS alone, without ever
touching the templates. This is why it’s essential to have some basic CSS skills before attempting theme
modification. Let’s look at some CSS-only changes you can make to a theme before diving into template
modification.
As you’ll discover, CSS tweaking can be time-consuming, fiddly work for non-experts. There’s no end to
how many stylistic changes you can make to a theme, but be aware that you may hit a point of diminishing
returns and wish you’d started with a theme that was already closer to your end goal. Time put into initial
theme selection is generally better spent than time spent on endless tweaks and modifications.
As a general rule, it’s very easy to modify colors, images, and typography, but it’s much harder to modify
column widths, and harder still to completely rearrange page layouts unless you have advanced CSS skills.
There’s really nothing WordPress-specific about editing a WordPress style sheet – it’s all standard CSS code,
which you can learn elsewhere. The trickiest part is usually in determining which portion of the CSS needs to
be tweaked. And for that, you’ll need a good debugger, which will help you to examine the page contents
and learn which lines of CSS code are controlling their appearance. If you use the Chrome or Safari web
browsers, which are based on WebKit, you’ve already got an excellent debugger built in.
Enabling debug mode in Safari: Go to the Preferences, click the Advanced tab, and enable the option
“Show Develop menu in toolbar.” You can now debug any web page by pulling down Develop | Show Web
Inspector (or hit Cmd-Opt-I).
Enabling debug mode in Chrome: The debugger is always available – just pull down View | Develop |
Web Inspector (or hit Cmd-Opt-I) to bring it up.
Enabling debug mode in Firefox: Install the excellent Firebug extension. Once installed, click the small
“bug” icon at the lower right corner of the browser.
Let’s look at a couple of typical examples where CSS modification might be needed. Screenshots here show
Web Inspector, but Firebug instructions would be very similar:
1) I want to change the background image of the theme. Let’s say you like the Graphene theme but you
don’t like the background image that comes with it. Apply the theme, then bring up your debugger and click
Elements. Next, click the magnifying glass icon at the bottom left.

To inspect elements on a page in the WebKit Inspector, click Elements, then use the Magnifying Glass to
hone in on the element you’re interested in.
Now click on the page background and look at the CSS code in the right-hand pane:

This tells us exactly what we need to know: The path to the background image file can be found on line 75 of
the file style.css. If you open style.css in your text editor, you’ll see that the entire line is:
So to change the background, upload a new background image to wp-content/themes/[yourtheme]/images,
and edit line 75 to match the new filename. Voila! No template changes needed.
2) How can I change the banner image that came with my theme? Start by debugging the same way we
did with the background image example. You’ll see the header image referenced, but not in a stylesheet. It’s
a trick! The way the header image is displayed will vary from theme to theme. While some themes might
reference the header image in exactly the same way as above, others might hard-code it into the header.php
template file. Still others might provide a set of Dashboard controls for setting the banner image. Taking a
look in header.php for the Graphene theme, you’ll see this:
In other words, the HTML in the header template defines an inline style to the image path. But rather than
hard-coding the image path, it calls a custom function defined by the theme. That function knows how to
reach into the WordPress database and figure out which image you’ve told it to use from the Dashboard. In
other words, no code changes needed for this tweak – you can do it all with point and click. But now you
know how the header image is getting there to begin with.

3) How can I change the color of the sidebar headers? So what if you don’t
like the white-on-blue of the sidebar headers? There’s no Dashboard option for changing that in the
Graphene theme, and if you look closely, you can see that there’s actually a subtle gradient from a lighter
blue to a darker blue. Fire up that debugger again, click on a sidebar header, and you’ll see a whole bunch of
rules starting on line 1560 of style.css. Things get a little trickier here because using gradients on the web
isn’t yet a solidified web standard. Therefore, the theme author has set up four different ways of rendering
gradients, to accommodate all web browsers:
The first line references an image file, which will work with the oldest browsers out there. So the first thing
you should do is download that image, open it in Photoshop, change the gradient, save it, and upload it back
to the server. With Photoshop open, grab the new starting color and the new ending color, and replace the
references on the next three lines of the style sheet.
4) How do I change the fonts used on my site? By now you should have the hang of this. Launch the
debugger, grab the magnifying glass, and click on some text. The debugger will tell you on which line of the
style sheet the font is declared. Then all you have to do is tell it which new font to use. See the Fonts and
Text section of our CSS tutorial for pointers. You might even want to experiment with custom typography
from a service like Google Fonts or TypeKit.
The Template Hierarchy
The trick to modifying your theme is in knowing which files to edit. And to know that, you need to learn
a bit about the WordPress template hierarchy.
When a request for a page on your site is received, WordPress first examines the URL and determines what
type of page it is. For the sake of example, let’s say a user has requested a specific category page on your
site: http://example.com/categories/books. From the URL, WordPress knows that it needs to display a
category page. It also knows, internally, that a category is a type of an archive. It also knows that this isn’t
just any category page, it’s a specific category page (the one that has “books” as a slug).
To determine which template file to use to display this particular category view, WordPress will step through
a hierarchy of options, starting with the most specific template and falling back to the most general.
WordPress will follow this chain of logic:
1) Because you might want to use a special template just to show the Books category, that’s the most specific
case, so WordPress will first look for a template called category-books.php. When creating templates for
specific categories like this, you can also name template files category-5.php, where “5” is the ID of the
category you want to customize. In other words, you can use either the category slug or its database ID when
naming this template.
2) If that template file doesn’t exist, WordPress will try to find the general-purpose category template, which
is always named category.php (this would be used for all category views).
3) If the current theme doesn’t have a category.php template, WordPress will think “Well, a category is a
specialized form of archive,” so it will look for a template file called archive.php (in this case, the
archive.php template would be used for both category views and date-based views such as “All posts from
March”).
4) If there is no archive.php template, WordPress will fall back to using the most generic possible template,
which is index.php.
In other words, WordPress will traverse a logical hierarchy of options when deciding which template to use,
starting with the most specific option and falling back to more generic options until it reaches index.php.
This is why it’s possible (though not recommended) to have a theme that consists of nothing but a stylesheet
and an index.php.
Other template-choosing decisions in WordPress are made in a similar way. For more examples, see the
flow-chart below, which links to the Codex documentation on the Template Hierarchy:
So, if you want to modify the way search results are displayed on your site, you would look at the Template
Hierarchy and determine that that view is handled by a template called search.php. Then you would look in
your theme for a file of that name. If it exists, edit it! If it doesn’t, you’ll see that you need to edit index.php
instead. And so on.
Once you open a file for editing, you’ll be faced with a combination of standard HTML, basic PHP-language
programming structures such as loops and tests, and WordPress function calls written in PHP. See the
examples in this tutorial to see how it all fits together.
Common Theme Functions
Since template files are PHP documents, each template is capable of requesting information from the server.
For example, the header.php template will generally request the blog title and tagline from the database and
insert those values at the right place. Meanwhile, the sidebar template will look to see which Widgets need to
be displayed, and the single.php template will grab the article body, byline, timestamp, and any comments
from the database.
All of these calls for information from the database are handled by custom PHP “functions” specific to
WordPress. For example, take a look in the header.php template and you might find a line something like
this:
In other words, the destination of the link is being replaced by the results of a call to a PHP function called
home_url(). That function isn’t built into PHP itself – it’s a function provided by WordPress. Its value is
whatever is set as the homepage URL in the Dashboard’s General Setting section. The cool thing about
setting a link back to the homepage this way is that it makes the theme portable. If one WordPress
installation is in the root domain of example.com but another site has a blog at example.org/blog, both sites
can use the same theme, and the homepage links will resolve perfectly. By avoiding hard-coding as much as
possible, the theme stays adaptable to many situations and applications.
But how did the theme author learn of the home_url() function? By consulting the dictionary of WordPress
Template Tags and the WordPress Function Reference, where dozens of such tags are documented. Let’s
take a look at a few common ones:
get_bloginfo(): You’ll see this one referenced in header templates a lot. By giving it “arguments,” you can
obtain most of the settings from the Dashboard’s General Setttings page. For example, try putting this in one
of your templates:
The title of the site will be inserted in the template wherever you drop this tag. So what if you want to refer
to an image that lives in an “images” subdirectory of the theme directory? You can do it like this:
Now the image will still work even if you later decide to rename your theme folder!
In addition to the dozens of template tags that come with WordPress, many plugins will provide you with
additional ones as well. Themes can also define their own custom functions in functions.php. If you see a
function called from your theme that you can’t find listed in the Codex, then you’ll know it’s either provided
by a required plugin or from that theme’s own custom functions.
Function or Template Tag?
There’s one important thing to be aware of when working with these: Most functions have two versions –
one for displaying the value immediately into the web page, and another that stores values in memory for
further processing. You can distinguish between them by the presence of “get_” in the name. For example,
bloginfo('name') will display the site’s name directly, but get_bloginfo('name') will not. The correct usage of
the latter might be something like:
This would cause the value of the site’s name to be stored in the variable $sitename, then run through PHP’s
“lowercase” function. The result would be written to the page by the PHP echo() function. For most non-
programming purposes, stick to the Template Tags, not the Function Reference.
There are far too many template tags and functions to cover here, but you get the idea. If you come across an
unknown function while working on a theme, just look up its name in the Codex to learn what it does and
what kinds of options or arguments it takes. Template Tags are wonderfully powerful!
Remember: Avoid hard-coding values into your theme whenever possible.
Child Themes
Themes are, in essence, software. And software needs to be upgraded from time to time. You don’t want to
miss out on new features or bug fixes provided by the theme developer, right? But wait… you’ve modified
the heck out of your theme — if you upgrade it with a newer version, won’t you lose all your changes?
Not if you go about theme modifications the right way. Recognizing this dilemma, the creators of WordPress
introduced a concept called “Child Themes,” which lets you make your changes “off to the side” where they
won’t be touched by future upgrades. It may sound like overkill, but the first time you find yourself locked
out of a future upgrade by your own modifications, you’ll wish you’d built a child theme. The good news is,
it’s easy!
For this exercise, let’s work with the default 2010 theme that comes with WordPress. In practice, install
whatever theme you want to work with in the usual way.
1) Create a new, empty folder in the wp-content/themes directory on your server, using standard web
conventions (no spaces or special characters in the name). The folder could be named something like
“jsmith_2010_child“. Your child theme will live in this folder.
2) In that folder, create a blank style.css file.
3) Open that style.css and add the following lines:
You’ll want to change most of the lines above to suit your needs. It’s not critical what they say, as long as the
Theme Name doesn’t conflict with any theme you already have installed. The really important line is the
Template: line – this must match the exact name of the folder that contains the parent theme! Likewise, edit
the @import url line to match the path to the parent theme’s stylesheet.
Save this bare-bones stylesheet file to the server, then go to the Dashboard’s “Appearance” section and
activate your new theme. Take a look at the live site and… nothing’s changed! That’s a good thing – at this
point, all you’ve done is to activate a new theme that imports the entirety of the parent theme, with no
changes.
Now let’s try making a couple of changes, starting with the white background color of the content area. Note
that this is a CSS tweak, not a template tweak – we’re starting easy. According to our debugger, the white
background color is defined on line 171 of style.css in the parent theme. Taking a look, we see this CSS
block:
Copy that rule into the bottom of the style.css of your child theme, changing the background color to
something else:
Save, refresh the page, and bingo! Your content area has a yellow background, even though you haven’t
touched the parent theme. The rules of CSS inheritance say that we can redefine an existing style, and
wherever the rules conflict, the ones read in later will be used instead. Since the child theme’s rules are read
in after the parent theme’s rules, the child theme wins that particular contest.
We can actually go even further. Trying using this instead:
That way, you still inherit the top margin and padding from the parent theme, overriding only the color.
Overriding Templates
It’s only slightly more complicated for template overrides. Let’s say you don’t want to show the site
description (“tagline”) above the banner image. That tagline is referenced in the header template, not in the
CSS. To get started, copy the header.php template over from the parent theme into your child theme’s folder.
Now edit the new copy of header.php, find this line:
and remove it. The same is true for any templates you want to override – copy that template into your child
theme folder and edit it as needed. When WordPress detects a conflicting template file name in both the child
and parent theme folders, it’ll use the one found in the child theme. When the 2010 parent theme is next
updated, your child theme will inherit all (or most) of its improvements and bug fixes, and you won’t lose
any of your customizations.
Yes, it’s possible that there could be improvements to the templates you’ve decided to override, and you
would miss those improvements in your upgrade. But that won’t happen often, and you’ll still benefit from
changes to the rest of the theme. You can always copy changes over into your modified templates manually,
if necessary.
Page Hacks / Custom Templates
Sometimes you have a need to create a highly customized page in WordPress. Sure, you can always create a
new standard page and put whatever you like in the content area, but what if you want to do something that
utilizes template tags? Those don’t work in content fields – they only work in templates.
For example, let’s say you’ve used the WordPress Links Manager and have built up more than 100 links.
That’s not going to work in your sidebar – too long! You need a way to create a custom page template that
can utilize any of the Template Tags in the Codex.
First, let’s get comfortable with the wp_list_bookmarks() function, and use it to add links to our sidebar with
it, rather than with a widget (this will give us a lot more customizability than a widget would). By calling
wp_list_bookmarks() manually, you’ll have full control over the way links are displayed.
Let’s say you want to show only the links in categories #2 and #3, but you want them mixed (not
categorized), and you want the whole block wrapped in HTML <span> tags, and you want associated images
to be displayed, but you don’t want descriptions used, and you want them all sorted by URL. This code (in
the sidebar.php template) will do the trick:
Use a custom Page template instead
Since 100 links aren’t going to fit into the typical sidebar, let’s create a new Page called “Resources” with
the slug “resources” (adjust the instructions below if you call your page something else). Don’t add any text
to the page body. Publish the page.
Log into your site via FTP and navigate to wp-content/themes/[yourtheme]. Find the page.php and
duplicate/copy it. Give the new file the name page-resources.php.
Open page-resources.php in a text editor. What you see in this template depends on the exact theme you’re
using, but basically, you want to find the code that causes the page content to be displayed and remove it. In
the case of the default “2010” theme, it’s a one-liner:
Replace this with the code you want to use to display your list of links exactly the way you want them, e.g.:
What we’ve done is to remove the guts of the page template – the part that pulls in article content – and
replaced it with code that brings in our custom bookmarks list. Season to taste!
Note the trick we used above – to create a template that applies to just one page, create a template called
page-foo.php, where “foo” is the slug of the page you want to call the template. The same trick can be used if
you need a certain category to utilize a custom template (but you’d use category-foo.php instead).
You can use this technique to customize the view of any Page in your system with great flexibility!
Example: A Wider Content Area
Every site design has a “content area” with a given width, and this width determines the maximum size for
media that can be embedded in that page. Try to embed media wider than the content area and it will either
be clipped, or it will stomp all over the sidebar. But sometimes, you want the ability to let site authors say
“For this post only, suppress the sidebar and give me a content area that’s as wide as the site design itself.”
Setting this up will make your authors and editors really happy, and it’s also a rewarding experiment in
WordPress theme hacking.
We need the ability to:
1. Let an author specify that a given post needs special treatment
2. Detect that setting in the template
3. Suppress inclusion of the sidebar
4. Change the CSS width of the content area
Every WordPress Post view has an optional Custom Fields section. If you don’t see it, click the Screen
Options tab at the top of the Post writing view. Create a new test post, enable the Custom Fields section, and
create a new custom field with the exact Name “full_width”. Into the Value field enter the value “1”. Save
the post.
Now we need to know which template handles single post views, since this is where the action should take
place. In most themes, this template will be single.php. Open that template in a text editor and find the place
where it invokes the sidebar:
We need to wrap this in a “conditional” that tests whether the current page is set to use the full width option.
Replace that line with this:
This PHP says “Call the function get_post_width() with an argument that is the ID of the post currently being
viewed. If that function does NOT return true (i.e. if the author did not set this post to be full-width), pull in
the sidebar.” In other words, only pull in the sidebar if the author has not set the post to be full-width.
But wait, where did this get_post_width() function come from? It’s not a native WordPress function, and it’s
not provided by any plugin. We have to write it ourselves! Look to see whether your theme has a
functions.php file. If it doesn’t, create it. Go to the end of that file and paste this code:
Now your theme becomes aware of this function that’s been called from within the template. Save both files
and access that post on your WordPress site. Voila! No more sidebar (but the sidebar is still present on all
other Posts).
That gets us most of the way there … but simply dropping the sidebar doesn’t automagically make the
content area wider. The content area width is defined in the stylesheet, not in the template, and we can’t put
programming logic into the stylesheet! True enough – all we can do in the template is to change the name of
the containing div, and define an alternate div width in the stylesheet. So, back in single.php, find the div that
wraps around your post content, creating the content block (use your debugger to find it, if necessary!). It
may look something like this:
Now we’re going to wrap that in a conditional, just like we did with the sidebar inclusion. Replace the line
above with this:
See what we did there? If the option “full_width” is enabled for that post, the containing div gets an alternate
CSS ID. Otherwise it uses the usual one. To test that this is working, refresh the page and view source – you
should see the alternately named div.
Finally, open up your stylesheet and define the rule for your alternate div. In this example, we already had
this:
All we have to do is add another rule just below it, like this:
That should do it! Of course, every theme is different (uses different CSS techniques and naming
conventions) – you’ll need to tweak this to match the requirements of your own theme.
And that’s it – a crash course on WordPress theme modification. We haven’t covered all of the bases, but
you should now understand how themes work, and where to look in the codebase to change the things you
want changed. You’ll need to rely on your HTML/CSS skills to make substantial changes, but you’ll be
surprised by how much you can accomplish with a bit of practice. Happy hacking!
Tutorial: WordPress: Photo Galleries (43-66)
By Len De Groot
Introduction
WordPress does a fair job of providing a way to quickly create photo galleries. But it doesn’t provide a way
to manage the large number of galleries and photos that appear over time on news sites.
In this tutorial, we’ll explain how the WordPress Media Library and galleries work. We’ll explain how to set
up and use the Nextgen Gallery plugin to improve photo management. And we’ll explore how to integrate
some plugins that use Nextgen Gallery to create sophisticated slideshows and galleries that can be rated or
contributed to by users.
Download the project files to get started.
Add metadata to your photos
Metadata is important information, including title, description, copyright and more that can be read by
WordPress and other software and platforms. Entering this information will allow you to search for photos
with detailed information directly in WordPress.
This can be done in Photoshop but if you plan to work with a lot of photos, consider investing in some good
batch processing software like Photo Mechanic. This should be one of the final steps in your photo
workflow.
Metadata also makes it much easier to search photos from your desktop more efficiently. If you use a Mac,
Spotlight can search the metadata, making it easier to find photos by a specific photographer or date. Many
of the Adobe products come with a program named Bridge that is very good at searching metadata and
provides thumbnail previews.
How to add metadata to a photo
Open a cropped and color corrected photo in Photoshop and go to the File menu and select File Info… . You
should see a dialog that looks like the one below.

Click the image for a larger version

You can see that I entered the field names in the boxes for easier identification later on.
Once you are done, click OK. Then save and you are ready to start.
Using the WordPress Media Library
WordPress has a built-in media section where it stores everything you upload. It works well if you are using
photos with the occasional blog post. In this section we’ll learn how the Media Library works and how to add
and manage your media.
How to upload photos
To upload photos directly into your WordPress Media Library, go to your dashboard and select Add New as
shown below.

Next, select the photos you want to use.

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 the Alternate 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 Attach button 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. Let’s look at how that works.
Add galleries to a post
Adding a simple gallery is easy in WordPress. Hopefully you are working on a development site and already
know how to add a photo to a post. If not, check out the linked tutorials. It’s important that you have a
development site to make mistakes while you figure out which settings you want to use.
Upload photos to a post gallery
Create a new post. Give it a title immediately and save a draft. I’m going to call mine WP gallery.
Click the Insert photo button above the post editor.

A new window will open that will allow you to select all of your photos and upload them like we did on the
previous page. This time, when you click Save all changes, a new Gallery Settings section appears. Change
the settings on the top half of the window to match the image below. Leave the Gallery Settings alone for
now.
Now lets examine the Gallery Settings.
 Link thumbnails to: Image file opens the large image in a blank browser window. Attachment
page opens the image in a new page that look like part of your site.
 Order images by: Choose Menu order to use the order created by dragging.
 Order: Changing from Ascending to Descending will reverse the order of your gallery.
 Gallery columns: Indicates the number of thumbnails in each row.
Adjust your settings to match the image above and click Insert gallery to return to the post. Save the draft
immediately.
Take a quick detour
If you look the Media Library, you will see that the images are all attached to the post WP gallery.

How the gallery appears in the post editor.

Return to the post and make sure the editor is in Visual mode, you’ll see something that indicates a gallery
has been inserted. It looks like this:
Now switch to HTML mode. You’ll see text that says

This is called a short code and is specific to WordPress. When you insert this code into a page or post,
WordPress knows to make a gallery out of all the images attached to the post. Preview your post and it
should look similar to this:

If you click a thumbnail image, the full image opens in a new, themed page.
Click the image for a larger version
Notice how your site’s furniture appears around the image. This means that if you have advertising in your
header, you’ll get page views every time a photo is viewed. You can change the design by editing the
templates and CSS.
Next we’ll add a plugin to customize our photo galleries.
NextGen Gallery Plugin
The NextGen Gallery plugin adds new photo management tools and slideshow options to your
site. Additionally, there are several great plugins that work with it to give you more tools.
Download and install the plugin
Download and install the plugin directly from within WordPress dashboard as shown below. If your web
server won’t allow you to do this, you will have to download the plugin manually and install it on your site
via FTP. Make sure to activate it once it’s installed.
Note that there is a new button at the bottom of the menu on the left called Gallery. Click that to access
Nextgen Gallery. In the overview you can see that you have no images, galleries or albums. The photos you
just uploaded aren’t there because NextGen manages photos separately.
Add a new gallery and images
Click on Add Gallery / Images in the left sidebar. Find the Add a new gallery tab and create a new gallery
called kittens. If your server allows it, NextGen will create a new folder in the wp-content folder named
gallery. If not, you will get an error message and have to add the folder manually via FTP and try again. This
is where your galleries will be stored from now on.
Once the kittens gallery is made, you will be given the option to upload images. Click Browse and select the
same images we used previously. You also have the option of uploading a zip file or a folder of images.
When the upload is done it should look like this.

Edit the new gallery

Just below the Add Gallery/Images button on the far left is a button labeled Manage Gallery. Click that
and you’ll see a list of galleries. This is where Nextgen Gallery helps photo management. Not only are
photos organized into galleries and albulm, but all of their metadata is searchable from the Search images
field.

Click on the name of your gallery to edit it. This will open a window with a lot of options. Start by changing
the title and description to something that makes sense. Then change the preview image. When you have
done this, click Save changes.
Next, go down to the images and click the Sort gallery button to go to a new page.

Now click and drag the thumbnails to reorder the gallery. I’m going put the grey kitten first. Click Update
Sort Order when you’re done and then click the Back to gallery button.
Edit the new images
Notice that in addition to the title and description, the keywords field in the image file was imported into the
tags field, adding another level of information. Edit those fields to make them useful.

When you mouse over an image you get additional buttons, just like in the media library. Click on edit
thumb.

This opens a new window. Click and drag on the image on the left to redraw or edit the thumbnail image.
Notice that the proportion is locked. You’ll learn how to change that when we edit the settings later on. Click
Update when you are done.
Next to Edit thumb there’s a button called Meta. Click that to open a window that shows all the information
that was imported from the image file. Additional fields include copyright, author, author title. All of this
information is searchable from the main gallery page.

Make a gallery page

NextGen allows you to make a page directly from the gallery editor. No need to make a separate post. Make
sure Main page is selected and click Add page.

Important! This publishes a page and makes it public, so do this last. You will end up with a page that looks
like this.
When you click a thumbnail, the page will darken and the users can click through a slide show.

There is a setting that we’ll explore in the next section which sends the user to a page with a a click-through
slideshow that automatically resizes to fit the content area and it reloads the page with each new click.
If you click on Show as slideshow you go to a new page where a slideshow plays automatically. It’s small at
the moment but we can change that in the settings later on.

Now click edit. This should take you back to the Kittens are cute page you just made. You should see a short
code that says [nggallery id=1]. The number is the unique ID that NextGen assigns every gallery. So if you
want to switch a gallery in a post, change the id number. You can find the id number in the main Manage
Gallery area.
TIP: If you want the slideshow to appear in a post instead of a page, simply add the short code to a post.
Edit the short code to use a template
Did you notice that the default slideshow doesn’t create new page views? Well, NextGen has a built in
template we can use simply by adding a setting to the short code. Change [nggallery id=1] to [nggallery
id=1 template=carousel].
This creates a click-through slideshow that automatically resizes to fit the content area. It also shows the side
bar and reloads the page with each new click.
Next we’ll look at the NextGen options/settings.
NextGen settings
NextGen settings allow you to change many things about how slideshows work. Under the Gallery tab, look
for the Options button. Notice that there are several tabs at the top of the window. Many of the settings are
self-explanatory. We’re going to skip those and concentrate on the ones you really need.
General Options
Gallery Path: We set this up earlier. If you ever want to change where photos are stored, this is where you
do it.
Delete image files: Should be on by default. If you want photos to be deleted manually, make sure it is
unchecked.
Activate Permalinks: This creates permalinks for individual photos in a gallery. Off by default but worth
turning on.
Activate Media RSS: Always good to give access to your content.
Activate PicLens/Cooliris: This lets you use some third part slide show tools but they can direct traffic
away from your site. I recommend leaving it unchecked.
Thumbnails

The thumbnail settings give you control over the size and quality of every thumbnail that gets generated
when new photos are loaded into a gallery. The Set fix dimension makes sure that all your thumbnails are
identically sized.
Images
Resize images: Nextgen will automatically shrink photos proportionally to fit into your content area. For
example, a vertical photo will shrink to a height of 450 pixels with the above settings.
Image quality: A high setting will ensure photos are not over compressed but means file size will be larger.
Experiment to see which setting works best for you.
Back up original images: If you plan on keeping an archive of your photos offline (and you should), you
can leave this setting unchecked.
Automatically resize: Unchecked by default. Must be checked for resizing to work.
Cache single pictures: This creates a cache for WordPress so that it can build pages faster. Not essential for
small sites but can really help as you grow. Check this box.
Gallery

The gallery settings are very powerful but it’s important to know that many of the settings only apply to new
galleries made after changes have been saved. This prevents unwanted changes in pre-existing galleries.
Deactivate Gallery Page link: Applies only to albums
Integrate slideshow: This is checked by default and provides a link at the top of the gallery to view the auto-
scrolling slide show we saw earlier. You can edit the link text in the provided fields.
Unchecking the box provides a click through slideshow called the ImageBrowser (shown below) when a
user clicks a thumbnail. It automatically resizes to fit the content area and shows the side bar for additional
ad placement and it reloads the page for each new click.

Show first: If you choose to turn on the Integrated slideshow, you can choose whether you want to show a
slideshow or thumbnail gallery first.
Show ImageBrowser: Checking this will overwrite any effects you have selected on the next tab and replace
the effect with the ImageBrowser.
Sort options: This sets the default sorting options for galleries. You can change the order of individual
galleries without affecting the defaults.
Effects

The two default effects can change the look of your slideshows. When a user click on a thumbnail image the
see these effects instead of the ImageBrowser. Users can click through but page views are not refreshed.
Both filters will display the description text. For these to work, the Show ImageBrowser gallery setting
must be unchecked. Pick one from the dropdown list.
Shutter
Thickbox

Watermark

You can set a default image or text watermark for your photos to protect your copyright. The watermarks are
turned on/off on individual galleries and cannot be undone because they permanently alter the image.
Slideshow
The slideshow options are pretty self-explanitory. Just be careful not to get carried away with the transitions.
There are addition setting on this pane but the defaults should work just fine.
Whew. That was a lot. Now lets look at some plugins that work with NextGen to provide additional
functionality.
Nextgen Smooth Gallery
One way of improving the look of your galleries with a minimum of fuss is to add the NextGen Smooth
Gallery plugin. It uses short codes similar to Nextgen. Once it’s installed create a new post, give it a title and
save. Then enter the [smooth=id:1;] short code in the HTML view. It will create a gallery that looks like
this:

Adjusting the settings is much easier than in Nextgen. Installing a plugin creates a new settings tab called
Gallery (Smooth) in the left sidebar. Let’s take a look.
General Options
Width and Height: Sets the slideshow size.
Timed: Check to make the slides auto play. Delay is in milliseconds so the default of 5000 is actually five
seconds.
Show Arrows: Places arrows on the left and right sides of the image so the user can click through.
Show Info Pane: Displays the Title and Description fields at the bottom of the image.
Show Carousel: Turn on/off the scrolling thumbnail images.
Carousel Options – Text: Changes the text in the tab below the thumbnails. Feel free to change it to
something like SCROLL IMAGES.
Carousel Options – Text: Unchecking hides the thumbnails when the slideshow first loads but leaves a tab
showing as seen here:

Embed Links: Allows link in a Title or Description field to open in the same page. If you have iFrame
checked, the page will replace the slideshow in the iFrame.
iFrames: This helps Smooth Gallery play nice with other JavaScript libraries. Make sure this is checked if
you do not plan on using links in your captions.
Specific Options
Below General Options in the side bar there is another button labeled Specific options. This lets you have
individual galleries that are different from your defaults.

All the settings are the same but when you click the Generate Code button you get detailed short code that
you can copy and paste into a post.

More features are planned in upcoming versions so be sure to read the latest documentation on the
WordPreass plugin page.
Next, let’s add some user interaction with our photos.
Nextgen Gallery Voting
The Nextgen Gallery Voting plugin lets users rate galleries and photos. Like Nextgen Smooth Gallery, it
integrates with NextGen photo management. You can either download an edited plugin with graphics that I
have improved upon or you can download the original plugin from the WordPress site.
Set the Default Options
Once installed and activated, you’ll see a new NGG Voting button in the side bar. Click it to set the default
options.
You have the ability to allow voting on both galleries and individual photos. It’s important to define your
settings immediately because they will be applied only to new galleries. The settings are self-explanitory but
in this case, we are only going to allow voting on individual photos because it requires extra work.
Create a new gallery
Create a new Nextgen gallery and call it voting. You’ll notice that the same Voting Options have been added
to this page and can be edited here. Leave them unchecked to use our defaults.

When that’s done, upload some images and put them in the voting gallery.
Next, go to the Manage Gallery area and click on voting to edit it. Notice the voting options are also in the
gallery settings and can be changed any time. Now take a look at the images. The image voting options are
also available for editing.

Edit the Nextgen Gallery plugin

So here’s where it gets a bit tricky. In order for voting on individual photos to work, we have to edit the
NextGen plugin. Don’t worry, this is pretty easy if you follow the steps.
Open the plugins menu on the sidebar and click the Editor button. You must be an admin and your server
permissions must allow this. If you get a blank screen, you will have to edit the file via ftp.
On the top right there is a pulldown menu labeled “Select plugin to edit.” Select Nextgen Gallery. A long
list of files will show up on the right side of your screen.
Find the file named “nextgen-gallery/view/gallery.php” and click on it to edit. The resulting window should
look like this:

Next, copy this line of php code. <?php echo $image->size ?>
Click inside the plugin code and select Edit menu -> Find in your browser, paste the code and search. Once
you find it, look for the closing </a> tag that directly follows the php code. Put your cursor right after it and
hit return.
Next, copy this bit of php code <?php echo nggv_imageVoteForm($image->pid); ?>
Paste it on the new line that you just created after the </a>. Click Update file and you’re done.
Create a new post, call it voting test and save a draft. Add the Nextgen short code [nggallery id=4] then
save and preview the post. You should be able to vote on each photo in the gallery.
User generated galleries
The public can also be an important source of content. The NextGEN Public Uploader plugin allows users to
contribute to existing galleries. I made edits to this plugin as well that you can download and install. Or you
can use the original.
Understanding the settings
Once you install the plugin, you’ll notice that a Public Uploader button has been added to the sidebar. Click
it so we can examine the settings.
The first four settings define how the uploader works.
 Default Gallery ID: Select an existing Nextgen Gallery that photos will be uploaded to. You’ll learn
how to use additional galleries later but but it’s good to have a dedicated place where errant photos
land.
 Widget Uploader: When enabled, the upload widget automatically appears in any post where the
short code is used.
 Description Field: When enabled, the user can include a description of their photo. The default is a
single line. If you’re using the version that I altered the window is bigger.
 Minimum User Role: The ability to set roles means that you can create galleries for different uses.
When set to Visitor, anyone who visits your site can upload a photo. But if you can also restrict the
ability to Contributor and Author as well. Whichever you choose, you can always change if for an
individual gallery by editing the short code.
 Notification Email: Be notified when photos are uploaded so you can approve them.
The following settings are instructions to the user.
 Upload Button: This is the message in the actual button. Common messages include Upload,
Submit and Browse.
 Description Text: This appears directly above the description field. e.g. “Please describe your
photo…”
 Not Authorized: If a user tries to upload a photo into a gallery that requires a subscriber, this
message is displayed. An invitation to subscribe to the site is a nice solution.
 Upload Success: Let’s the user know the transaction is complete. This is a good place to let them
know when their photo will appear. e.g. “Success! Thanks for sharing. Your image will appear once
it has been approved.”
 No File: This message appears above the Choose File button if the user clicks upload. e.g. Please
select an image
  Upload Failed: If an upload fails try to suggest something that will make the process work.
e.g. We’re sorry. Your upload failed. Please save your image as a jpg and try again.
 Exclude Uploaded Images: When enabled, you must approve a photo before it appears in the
gallery. We’ll cover this in a bit.
Create a target gallery
Click the Nextgen gallery settings and create a new gallery called UGC. Leave the Gallery Voting Options
unchecked. Now click on manage galleries and write down the gallery id number. My UCG gallery number
is 6.
Create, title and save a new post and add the following short code: [smooth=id:6;] This will add a slideshow
to the top of the post.
I’m also going to add some explainer text to entice people to submit their photos and let them know what’s
required.
Finally, add the following short code at the end of the post. [ngg_uploader id = 6]. Save the post and
preview it. The slide show should be empty.
Upload / approve photos
Start uploading images with the upload widget at the bottom of the post.

Notice the success message after uploading the first file. Upload a couple more then go to the Gallery
settings and select Manage Gallery. Click on your UGC gallery to edit it.
First, create a new page in the Gallery settings.
Now look at the first image. If you entered a description you should see it here. Also, notice that keywords
and metadata are imported as well. When you are done editing the photo, caption, etc and you want to
publish the photos, uncheck the exclude button on each image.
Now go back to the post and refresh. The photos should be in your gallery. My explainer text includes a link
to the gallery page we just made, inviting users to vote on kitten cuteness.