WordPress 101: a guide to getting started

Transcription

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

2 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

3 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 If you re non-technical, don t have a technical support partner or

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

5 [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 address,

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

7 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

8 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

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

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

11 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

12 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

13 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 (whereby you can create a secret address and then 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

14 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

15 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

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

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

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

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

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

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

22 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

23 Detailed object view

24 Gallery view with object metadata popup

25 Multi-surfacing of content

26 Exporting and importing As we have mentioned previously, there are occasions when you want to move your content

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

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