wordpress 101: a guide to getting started · wordpress 101: a guide to getting started ... share...
TRANSCRIPT
WordPress 101: a guide to getting started This resource was commissioned by the South West Museum Development Programme (SWMDP) to encourage the understanding and use of digital technologies by museums in the region. It is one of a suite of ‘How to’ guides developed for this purpose. The SWMDP receives funding from Arts Council England.
This guide is provided under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0
International license.
This means you are free to:
● Share — copy and redistribute the material in any medium or format ● Adapt — remix, transform, and build upon the material
..provided:
● Attribution — You must give appropriate credit, provide a link to the license, and indicate if
changes were made. You may do so in any reasonable manner, but not in any way that
suggests the licensor endorses you or your use.
● NonCommercial — You may not use the material for commercial purposes.
● ShareAlike — If you remix, transform, or build upon the material, you must distribute your
contributions under the same license as the original.
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
What is WordPress?
WordPress is a Content Management System (CMS). This is a piece of software that allows
non-technical people to manage the content on their website.
Originally, WordPress was built for blogging and sat alongside several other systems such as
Blogger, TypePad and MoveableType. However, changes in the last few years in the way that
WordPress is built has meant that it is nowa viable and highly attractive option for managing
whole websites, even very large and very complex sites. The core blogging part of WordPress
has remained, however, which means that it is still viable if you want to use it just for
blogging – or – as is more likely, if you want a website with a blog built in.
WordPress is now, by a long way, the most-used CMS system in the world. It surpasses
Drupal, Joomla and every other CMS:
It is used by hugely popular, high-traffic sites such as CNN, TechCrunch, Gigaom, Number10
and hundreds of thousands of others.
As a consequence of this popularity, and also because it is open source (which means it is not
only free, but has a democratic development path which is managed by a large, open
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
community of developers), WordPress is also gaining considerable traction for museums and
non-profits.
The main reasons WordPress has become so popular are:
● it is very easy for non-technical people to use – it has a “Word”-like interface
which means editors can change content, upload pictures, re-arrange pages and so on
without needing to do any coding
● it is free and open source, which means that at no time can the company owning it
go bust, increase licensing fees, get bought out or radically change their direction of
business
● it has a huge developer and designer community which means that you can
almost always find someone to answer specific problems you may have about deeper
aspects of building code for it, as well as having access to a large range of designers
who have experience working with the system.
● it has a simple but powerful codebase which means that it is great to build for
and includes a huge marketplace of things like plugins (ways to extend WordPress
functionality – for instance to add a forum, shopping basket, poll, etc), themes (ways
to change how it looks) and widgets (little snippets of code to drop into pages)
WordPress.com vs wordpress.org
There are two types of WordPress. Under the hood there are many, many similarities between
the two types but they differ in several important ways.
WordPress.com (“WordPress dot com”)
By far the simplest way of setting up WordPress is to use the system that you’ll find at
http://wordpress.com. If you’re non-technical, don’t have a technical support partner or
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
company and don’t want to get your hands dirty then this WordPress is better suited for you.
WordPress.com has the following key features:
● you simply create an account on wordpress.com, tell it the name of your site and can
then almost immediately log in and begin writing content
● you don’t have to worry about hosting – all wordpress.com sites are hosted and
backed-up
● you can choose from hundreds of free themes and can (within the constraints of these
themes) make your site look how you want
● you get stats, sharing, comments, polls all included out of the box
● the starter package is free but you can pay for premium options (more later) in order
to customise various aspects of your site
WordPress.org (“WordPress dot org”)
If you’ve got a web host, know a bit about PHP and can set up MySQL (or have access to
someone else who can), then you can download the WordPress software and install it
yourself.
WordPress.org offers the following above and beyond WordPress.com:
● you have total control over how your site looks – as well as access to the WordPress
theme repository (which powers wordpress.com) you can also choose to either install
any theme that you find on the web OR build your own from scratch. This means
your site will be guaranteed to be designed in a way that is 100% unique to you
● you can install any plugins you like to extend the functionality offered by the core
software
● you have to manage the backups and maintenance of the software yourself
Domain Names
One of the other key differences between the two options is that although you can choose to
upgrade your account and add a domain name for an annual fee, out of the box
wordpress.com offers you a domain name that looks like this:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
[somenameimadeup].wordpress.com
..whereas with a wordpress.org installation, you will need a domain name (or unique IP
address) to build your site on.
Further details on the difference between the two systems can be found on the wordpress.com
site.
Automattic
Although the software itself is open source, WordPress.com is a commercial enterprise which
is owned by a company called Automattic. They provide a range of tools, many of which are
based around the core WordPress software. Automattic make their money from premium
services such as the ones that can be bought via WordPress.com – but also from systems like
VaultPress which is a backup system for wordpress.org installations.
Getting started
We’re going to focus on setting up a simple site using WordPress.com.
[ Because WordPress.com is limited in certain key ways, it is worth keeping in mind that you
may well want to migrate your content from it to a custom-built WordPress.org installation
at some point in the future - you may, for instance, want to change how it looks from a
standard WordPress theme that thousands of other people use to something that is entirely
customised for you. Luckily, WordPress has a powerful import and export option which will
enable you to do this relatively easily. So you can develop your site on wordpress.com, see
how it goes, and then choose to expand it in the future when you have time, money and
expertise...! ]
The first step is to visit wordpress.com and setup a new account. Simply click the big orange
“Get Started” button and follow instructions. All you have to do is provide your email address,
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
username and password.
Next, choose a blog address. We’re going for the free version:
..but you’ll see that the dropdown offers you the option to choose and pay for a custom
domain if you like:
You’ll also be given the option as to whether you want your blog to be public or private. It’s
probably a good idea to choose “private” while you create your posts and pages. But: do
remember to come back later when you’re happy to go-live and change this back
again!
…and….that’s it! You’ve created a WordPress.com website :-)
The WordPress admin area
Once you’ve created your site, you’ll be taken immediately to your WordPress site admin.
The admin system is made up of the following key areas:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Dashboard
The dashboard provides you with some at-a-glance information about your site(s). Much like
with the Google Analytics dashboard, this is customisable to a certain extent and all the panels
can be picked up and re-ordered to suit you.
At the top of this screen (and in fact many others in the admin view) you’ll see a Screen
Optionstab. Clicking on this pulls down a menu where you can choose which items to show
or hide.
On the left are some other options:
● Comments I’ve made – you can use your WordPress.com account as your login
when you’re commenting on other people’s blog posts, and any activity for that will be
shown here.
● Site stats give an overview of some basic stats for your site – how many views by
day/week/month as well as some referrer and information on which pages / posts are
most popular
● Akismet stats – Akismet is a system for catching spam comments, so this section will
show you how many spam comments have been caught and some stats about these
● My Blogs – shows any other blogs you’ve created using your login
● Blogs I follow – shows any blogs you’ve chosen to follow using your WordPress.com
account
● Omnisearch provides a search box that gives you quick access into any posts, pages,
comments, media etc on your site
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Store
The whole Store section gives you access to the various upgrade options available to you such
as custom domains, design, premium themes and so on.
Posts
“Posts” refers to blog posts – if you are using your site either purely as a blog or have a blog
section on it then this is where you’ll write these posts. If you are using WordPress as a tool to
create a website without a blog, then you can safely ignore this whole section.
The other options underneath this section are:
● All Posts gives you a view of all the posts you’ve written. Note that this list is
paginated and can be filtered by date or category to help you locate a particular post.
Also the
● Add New …functionality to add a new post..
● Categories / Tags – WordPress enables you to add both Categories and Tags to a
post. A Category is a more structured means of marking up your post as belonging to a
particular area of interest. Categories can also be hierarchical. So you could for
instance mark a post as belonging to a category you’ve called Tech which has a parent
category of News. Tags on the other hand are much more freeform – so the post we’ve
just mentioned might have tags like iphone, mobile, thoughts, etc. Both Categories and
Tags are displayed on the front end of your site and enable people to click through to
related material. So in our example, anyone clicking on the Category link for “News”
would see a list of everything else categorised News, ditto for tags.
● Copy a Post does what it says on the tin – enables you to copy an existing post while
maintaining the categories, tags and title
Media
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
The Media Library is where any files you upload to your site are kept. This includes images,
PDFs, Word documents, etc. On WordPress.com you are limited to a maximum space of 3Gb,
but you can choose to upgrade this if you wish via the Store option.
The Media Library options are:
● Library which lists all your current media items – in a very similar view to both the
Posts and Pages list and with similar filters
● Add New which gives you the option to add a new media item to your library.
Links
The Links section is rarely used but gives you the option to create a list of links which can then
be included via Widgets (see below).
Pages
The Pages section is very similar to the Posts section, but this time enables you to add new
Pages to your site. Pages typically differ from posts in the following ways:
● Posts are dated and often carry an authors’ name
● Pages are more “permanent”, tend to change less often and are less “newsy”
● Pages can have a hierarchy, wheras Posts are “flat”. So for example a page about your
visiting times might be “underneath” an “About the museum”
page:anothermuseum.wordpress.com/about-us/visiting-times
Within the Pages section are three sub menu items:
● All Pages – much like the All Posts option, this displays all pages on your site, and can
be filtered in various ways – by date, or searched for using the search box on the top
right. Note that like Posts, the Pages view is paginated. The listing also shows any
comments or likes on a particular page.
● Add New takes you to the new page editor
● Copy a Page enables you to easily duplicate a page including many of its options.
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Comments
If you’ve enabled comments on your site then they will appear in this section. You can enable
comments across the site as a whole – and then enable / disable on a post-by-post /
page-by-page basis.
If you’re building a website (as opposed to a pure blog) then we’d recommend turning
comments OFF while you build the site and then (provided you want them) turn them ON
again once built. This means that any pages you create in the first instance won’t have
comments enabled (and generally you don’t want people to comment on pages, just posts) –
and then when you go live, turning them on for posts.
All these settings can be changed in the Settings > Discussion section of the admin.
Feedback
The Feedback section allows you to add Polls and Ratings and gather feedback about your
site.
Appearance
The Appearance area is where you can change how your site looks by adding widgets,
changing menus or altering your theme.
The sub-options are as follows:
● Themes are essentially “the way your WordPress site looks”, although they are a bit
deeper than this and can change core functionality as well. In the Themes section on
WordPress.com you’ll see a range of themes are shown: you can choose to search for
themes, filter by all/free/premium as well as trending/popular/newest and then
preview any you like the look of before choosing to apply one to your site:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
As mentioned before, the themes available to you via WordPress.com are fairly
extensive, but not unlimited – if you have installed WordPress yourself then you have
totally unlimited control over what theme to install, adapt or build.
● Customise gives you a visual entry point into the particular theme options. Often,
you’ll find this ends up at a “buy a thing!” option, but sometimes the theme will enable
you to change various things about it – colours, text sizes etc.
● Widgets are small, functional panels which can be added to your site. They can do
things like display a calendar of posts, show a search box, display site categories, list
the authors on the site and so on. In the widget area you’ll see a list of the available
widgets and on the right hand side the places that you can place these. These areas are
theme-dependent. To place a widget you simply pick it up from the left, and drag it
across to where you want it.
● Menus enable you to create custom menus for your site. By default, WordPress
creates your top-level pages as menu items across the top of your site and, depending
on the theme, dropdowns and possibly fly-outs for sub-menu and sub-sub-menu
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
items:
You can override this in the Menus section. To do this, simply create a new menu, and
then drag and drop pages into the structure:
● Header gives you the option to change various items in your header – this is theme
dependent but often enables you to include an image or logo or to change the font or
appearance of text in the header area
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
● Background gives you the option to add a background image or colour to your site,
again this is theme dependent.
● Mobile allows you to turn on or off various mobile-friendly options for your site
Users
The Users section allows you to invite additional people to author, edit or administer your site.
The options are self explanatory and so won’t be gone into in any more detail here.
Tools
The Tools menu give you access to several important options:
● Available Tools allows you to tweak some under-the-hood settings such as posting
by email (whereby you can create a secret address and then email it to immediately
create a new post) and some verification services which allow you to connect your
website with tools like Google Webmaster Tools, Pinterest Site Verification and so on.
● Import allows you to import from a wide range of other systems, including Blogger,
Tumblr, or another WordPress site
● Delete site….is self explanatory!
● Export enables you to drop an XML formatted dump of your entire site so you can
import it into another WordPress.com site OR into a self-hosted WordPress.org site
Settings
The final menu item allows you deeper into the WordPress interface and is mostly beyond the
scope of this tutorial.
Creating pages and posts
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Now that we’ve looked at the dashboard in some detail, let’s step through creating some posts
and pages. We’re going to assume for the sake of this tutorial that your site is going to be both
a site (with pages) but will also include a blog / news section.
A quick note on pages and posts
The distinction between pages and posts can be confusing, not least of all because they look
very similar in the editor view of WordPress. Here’s how they tend to differ:
Pages..
● ..tend to be more permanent (although obviously you can change the content at any
time)
● ..are hierarchical – so can have a “parent” within your site. So a personal profile page
might be at /about-us/who-we-are/the-team/steve-smith for example
● ..don’t usually have commenting enabled
Posts..
● ..are usually related to more transient content like blog posts or news articles
● ..can have categories and tags associated with them
● ..usually have the option for people to comment on them
● ..aren’t in a hierarchy
So with that in mind, let’s create some of each!
1. Create some pages
Before you even start working with WordPress, we suggest you sketch out a sitemap using
either a pen and paper or a MindMap tool. We’ll assume that you’ve already done this and
have a good idea as to how you’re going to structure your site.
So: create your site pages. We’ve gone for:
● home
● visiting
○ where we are
○ what’s on
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
○ how much it costs
● our collections
● contact us
● news
When you create a new page, you find yourself at a screen that looks like this:
The title of the page is the first field. Below that is the URL, or “slug”, and then below that is
the WYSIWYG field where you write your content.
Over on the right at the top is the Publish panel, which enables you to change whether a page
(or post) is published, in draft or pending review, it’s visibility (public, private, password
protected) and also when it was or is due to be published. The latter option is useful if you
wanted a page or post to become visible on a particular date and time.
Below this panel are the Page Attributes. You use this to change two important things about
your page: firstly, the page “parent” – this enables you to give (for example) our where we
arepage a parent of visiting. This gives your site some easy-to-understand structure, both for
human and Google-shaped visitors, and also translates into “nice” URLs:
anothermuseum.wordpress.com/visiting/where-we-are
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
The second part of this panel enables you to choose a “Template”. A Template is a “page
shape”. This is dependent on your particular theme. We’re using the WordPress TwentyTwelve
theme in our example and have left the Template option as default for all our pages apart
from our homepage where we’ve chosen a “Full width template, no sidebar”.
Here’s where we’ve got to:
2. Change our home and news pages
You’ll notice if you look at the front end of the site now that although all the pages are shown,
and the menu seems to be working ok, we’ve got the blog / news posts showing on the
homepage which isn’t really what we want.
So in this step we’ll tell WordPress which page is our homepage and which is our posts page.
Navigate to Settings > Reading and at the top is an option which says “Front page displays”:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
From the dropdown, choose the front page (home) and the posts page (in our case, news).
Note that if you were running this as a blog you probably would want the posts on your front
page and, conversely, if you were running this as a site without a blog / news then you can
leave the Posts page option blank.
Back on the front end, things are looking better:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
…but now lets use the menus option to re-order the top menu in a way that we can control
more fully..
3. Change our menu
Go to Appearance > Menus. In the option for “Menu Name”, type something useful like
“Main Nav” or “Top Nav”. The click the Create Menu button.
WordPress will automatically add all your pages into the list – if it doesn’t you can add them
from the left panel by searching and selecting. Once they’re in the right hand side, drag and
drop until you’re happy with the structure and it matches your sitemap:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
The final step is to tell WordPress to use this menu – click on the Manage Locations tab and
select “Top Nav” as “Primary Menu” (this will vary by theme) and then click to save.
4. Change the site title and description
Next, we’ll change the site title and description. Do this by going to Settings > General and
adjusting the Site Title and Tagline fields.
5. Write some content!
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Finally, the hard bit :-)
We’ve already created our site pages – hopefully it should be obvious how you go about
populating these with content – just click to edit the chosen page and then use the
WYSIWYG to add content.
Adding images
To add an image, or a link to a file, click the “Add Media” button, and your Media Library will
popup – there you can choose to select an existing media file or to upload new:
Make sure that you populate both the Title and Alt Text fields – the former is useful for
finding items in your media library – the latter is good for both accessibility and SEO.
Once you’ve selected an image, choose to Insert into page. If you then want to change
anything about the image – whether it floats left or right and so on – just click it and select
the “image” icon. A dialogue will pop up with various options.
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
To delete an image you’ve inserted, click the delete icon which appears when you hover over
the image.
Adding posts
Adding posts is much like adding pages – you do it in Posts > Add New. This time you’ll see
that the edit page doesn’t have template or hierarchy options but you do have spaces for tags
and categories as well as an Excerpt field. We’ve covered tags and categories elsewhere – the
Excerpt field is an optional field where you can write a short excerpt of the post content and
this is what is then featured in listings, search results and so on. If you don’t fill in the Excerpt
then WordPress will take the first 55 words of your post and use these instead.
Adding a form
You can add a simple form to any page on your site by clicking the Add Contact Form button.
You will see a dialogue box pop up with various options – choose what you want and set the
notifications and then click to Add form to post:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
On self-hosted installations of WordPress you can create much more complicated forms, but
for simple contact forms, this functionality works pretty well.
WordPress themes and templates
Themes and templates are where self-hosted WordPress really shines, even though these are
available to a certain extent in WordPress.com.
We’ve talked a bit about Themes elsewhere in this tutorial – from a basic point of view you’ve
seen that these can enable a site to be made to look in a certain way. The integration is deeper
than this in reality, though: a Theme is a self-contained package which can also contain
functionality which allows your site and admin area to act differently, too.
A theme can contain Template files. These are “page shapes” or layouts. On a simple site for
example you may have a homepage template, a news listing template, a post template and so
on. Your homepage template might be full width with no sidebar and have a carousel at the
top with featured items underneath; your news listing might just have a simple list with a
sidebar which links through to your archives.. and so on.
A good WordPress developer will be able to use templates and other WordPress functionality
in very powerful ways. These are beyond the reach of this tutorial, but here are a few
screengrabs which give you an idea of what’s possible when using self-hosted WordPress, a
bespoke theme and some programming. All of these examples use a combination of native
WordPress functionality such as Custom Post Types (this gives the “Objects” option in the left
nav) and Custom Fields (these enable the per-object fields) combined with templates to give
the front end view – and all within a custom Theme…
Custom museum object data
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Detailed object view
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Gallery view with object metadata popup
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Multi-surfacing of content
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
Exporting and importing
As we have mentioned previously, there are occasions when you want to move your content
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
away from WordPress, move content from one WordPress to another (for instance from .com
to .org) or to migrate in content from another system such as Blogger.
WordPress provides an out-of-the-box way of doing which you’ll find via the Tools menu.
If you’re looking to import content, WordPress offers a large range of options:
Clicking on an option in the list above shows you further instructions on how to get content
out of each of the systems – you are then asked to upload the file into WordPress. And that’s
it!
For exporting, you get the option to export all content or whether to choose specific parts:
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk
..and then once you’ve exported, simply go to your new WordPress blog and do the import,
selecting “WordPress” as your source format.
WordPress / blogging resources
Useful links:
● [Gratuitous self-promotion] WordPress for non-profits online course
● Museum blogging inspiration
● 101 blog post ideas
● Best museum blogs
Thirty8 Digital: we do nice web stuff | 0800 808 54 38 | [email protected] | www.thirty8.co.uk