WordPress: Beyond the Basics

Tutorial: WordPress: Beyond the Basics

Introduction

Wordpress
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:

Widgets1

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.

Widgets3

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:

Widgets6

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?!

Widgets4
Widgets5

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

Plugins1

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:

Plugins2

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

Plugins3

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:

Contact link

Click it to see an interface something like this:

Plugins5

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.

Links1

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

Links2

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

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

The Description field is optional. If used, the description will be inserted into the link HTML. 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.

Links3

The Link Relationship and Advanced fields are obscure holdovers from the old days of WordPress and are seldom used. Ignore them. If curious, see the official documentation (Link 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:

Links4

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

Links5

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

Links6

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

Links7

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

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

Building Menus

Your site’s navigation menu is generally a combination of Categories and Pages, as shown in this example:

Menu1

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:

Menus2

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”:

Menus3

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:

Menus4

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:

Menus5

The selected categories now appear in the menu builder:

Menus6

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:

Menus7

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”:

Menus9

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.

Menus10

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:

Comments1

“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.

Akismet

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:

Comments3

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.

Comments4

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.

Themes Example

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:

Themes Wood

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).

Themes Activate
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!

About this Tutorial

This tutorial was written for fellows in KDMC’s digital media skills training workshops, but is suitable for anyone working with WordPress.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.