WEBSITE TOOLKIT

This guide is to help you set up your alumni group’s new website and assist you in the process of adding and managing your content

It is intended to be easy to follow and written with step-by-step instructions and screenshots from a test site we have set up for an imaginary alumni group in Honduras!

The website is built on the WordPress content management system and is currently hosted for free with a wordpress.com domain name. Alternatively, it can be mapped to your own domain name for a monthly fee (see section 9 – Domains).

WordPress was chosen as it is intuitive and enables the user to hit the ground running, with little to no knowledge of html code.

Several groups are already successfully using the platform (see ‘Other groups using WordPress’ under section 10 – Support and additional resources). We suggest you contact these groups to ask for their experiences and any advice they can offer if you are considering taking up a WordPress website yourself.

If you need further assistance, please click on the question mark icon at the bottom right hand corner of any page of your website for help topics. Alternatively, visit the WordPress support pages.

Please also see section 10 – Support and additional resources.

You can also post questions on WordPress’s public forums where they may be answered by community members.

Your group’s website has been set up on a WordPress free plan but the Business Plan, for instance, offers personalised help - where you can receive email and live chat support. Find out more about the various WordPress pricing plans.

Alternatively, do please email us at: networks@alumni.ox.ac.uk

Download the guide in pdf form

Contents

Section 1

Getting started

To log in to your WordPress website:

  • Visit the Wordpress site
  • Click on ‘Log In’ in the right hand corner of the screen
  • Enter the username and password which should have been issued to you by the Alumni Office. If you have not yet received this, please email the Networks team at: networks@alumni.ox.ac.uk to request this. You are free to change the password at any time, but please notify us of the new password by emailing the same address.

Click ‘My Site’ in the left-hand toolbar (circled in red below):

A screenshot of a WordPress webpage, with the 'My site' button indicated in the lefthand toolbar

This will take you to your site’s ‘My Home’ page (see below):

A secreenshot of the 'My Home' webpage on a WordPress site

This is where you can do various tasks, including:

All of these options are in the centre of the screen on the previous screenshot.
Below ‘My Home’ in the left-hand toolbar, select ‘Statistics’ to take you to the Stats and Insights page, shown below:

A screenshot of the Stats and Insights page on a WordPress site, with the 'Traffic' tab and 'Insights' tab highlighted

This is where you can see the latest information on who is viewing your site:

  • The ‘Traffic’ tab (circled in red above) tells you the amount of traffic you are getting to your website and how many people have liked or commented on your posts
  • The ‘Insights’ tab (circled in green above) gives you insights on areas such as how many posts you have created on your website over various time periods

 

Section 2

Customising your website

You can customise the design of your website, including changing the header image and menu structure. To do so:

  • Click on ‘Design’ in the left hand toolbar and then ‘Customise’ from the drop-down menu.

Some of these options are already pre-determined, including the fonts, logo and colours, and should not be altered (see section 11 – Technical specifications).

A basic menu has also been set up for you with ‘Home’, ‘About, ‘Events’, ‘Contact’ and ‘Join’ menu headers and pages linked to them. The associated pages have been populated with placeholder text and images, which you can edit. To do this:

  • Click on ‘Site’ in the left hand toolbar, followed by ‘Pages’ in the drop-down menu – this will show a list of all your website pages
  • Hover over the page title you want to edit and click on it. The example below shows where you would click to edit the ‘About’ page, circled in red:
A screenshot showing the page listing for a WordPress site, with the link to the 'About' page on the site highlighted
  • To change the page title: Click on the title (circled in red on the screenshot below) and make your edits to the text.
  • To add body text: Click on the area where the placeholder text is located (circled in green on the screenshot below), delete the existing text and start typing your content.
  • To change the featured image at the top of the page:
    • Click on ‘Featured Image’ in the right hand toolbar (circled in blue on the screenshot below)
    • Then click on the image that appears below (if you have an existing featured image) or ‘Set featured image’ (if you have yet to select a featured image).
    • You can then either select an existing image from the library in the subsequent screen or click ‘Add new’ in the left hand corner to add a new image.
  • To add an image in the body text:
    • Click on the ‘+’ sign (circled in yellow in the screenshot below) or where it says ‘Start writing or type / to choose a block’ if the ‘+’ sign is not yet appearing and then the ‘+’ sign and select ‘Image’.
    • Then either choose an existing image from the library or add a new one by selecting ‘Add New’ in the left hand corner.

Note: Remember to click ‘update’ in the top right hand corner of the screen after you make any changes to your pages or the changes will not be saved!

A screenshot of a WordPress webpage in the editing phase, with the title, placeholder text, featured image, and button to add an image in the text, all highlighted

The ‘Contact’ page includes a contact form for you to receive enquiries. Details submitted via this form will be sent to the email address that you originally requested to have linked to the WordPress account.

You may wish to add other menu headers and pages, for example, details of committee members (see section 6 - Changing the menu navigation).

If you have social media accounts, you can add links to these on your site. To do this:

  • Click on ‘Design’ in the left-hand toolbar and then ‘Customise’ from the drop-down menu
  • Click on ‘Widgets’ in the left-hand toolbar on the next screen and a new toolbar will appear
  • Select from the new left-hand toolbar where you want the link to appear (see screenshot below – the choices are circled in red)
  • Click on the ‘Add a Widget’ button and scroll down on the menu that appears to the right of the left-hand toolbar until you find ‘Social Icons’ (see screenshot below, circled in red).
A screenshot of a WordPress webpage in the editing phase, with the button to add a new widget to the page highlighted
A screenshot of a WordPress webpage in the editing phase, with the button to add a social media widget highlighted within the dropdown menu

The title is automatically preset to ‘Follow us’. To change this, click into the box below ‘Title’ (circled in red below) and amend the text.

  • Select under the ‘Size’ option what size you want your link to appear as (circled in red below - small, medium, large – you can preview these and change if necessary)
  • Click on the ‘Add an icon’ button (circled in red below) and copy and paste here the web link for your social media page
  • Select ‘Done’ (circled in red below). Repeat this process until you have added all of the social media links you wish to add.
A screenshot of a WordPress webpage in the editing phase, with options to change how the social media icons display highlighted

Note: Remember to click ‘Save Draft’ in the top left hand corner of the screen after you make any changes in this section or the changes will not be saved!

WordPress support for customising your site

 

 

Section 3

Adding an event as a blog post

The ‘Posts’ section of your website is where you can add new posts and manage existing ones. To view, click on ‘Site’ in the left-hand menu and then ‘Posts’ in the drop-down menu.

We have set up your website so that your ‘Events’ section is made up of blog posts – this means that each event will be its own page with a unique web address to help you promote the event on social media.

It also means that group users can subscribe to the RSS feed, so that they get updates each time you post a new event.

The Events page will already be pre-populated with a sample WordPress blog post – to delete this:

  • Click on ‘Site’ in the left-hand toolbar and then ‘Posts’ in the drop-down menu (circled in red on the left in the screenshot below) and then on the three dots next to the blog post you want to delete (circled in green on the right in the screenshot below)
  • Select ‘Bin’ from the drop-down menu
A screenshot of a WordPress blog page in the editing phase, with the buttons to delete a blog post highlighted, plus the button to add a new post

To add a new event as a blog post:

  • Click the pink ‘Add a New Post’ button in the right of the screen (circled in blue in the screenshot above)

The following screen should appear:

A screenshot of the WordPress site when adding a new blog page, with the area for adding the blog title highlighted

Add the event title in the ‘Add title’ field (circled in red above).

  • Enter the event details in the body of the page (above, where it says ‘Start writing or type / to choose a block’.
  • Add a featured image (right-hand toolbar highlighted in green above. See Section 5 – Adding images.) The use of an image is a great way of promoting your events and making them more attractive to prospective attendees.

The featured image should be at least 1,200 pixels wide. You can check the size of an image:

  • Within WordPress, if you have uploaded it, by:
    • Clicking on ‘Media’ in the left-hand toolbar
    • Clicking on the image you want to check in the subsequent screen and then clicking on the pink ‘Edit’ button

The picture’s size is shown under ‘dimensions’ (circled in red in the screenshot below).

A screenshot of the pop-up for adding images to a blog on a WordPress site, with the image dimensions options highlighted

OR, outside of WordPress:

  • A screenshot of the 'details' tab, when viewing the properties of an image

    By right-clicking on the icon of the image you want to check, then selecting ‘Properties’ from the drop-down menu, and the ‘Details’ tab. The dimensions are shown at the bottom of the resulting screen (see right).

Use the ‘Preview’ button in the top right hand corner of the screen to see how your post looks and make sure the image is displaying correctly and that your links work, then click the ‘Publish’ button in the right-hand side of the screen once you’re happy with it. This will automatically appear on your ‘Events’ page.

Note: Remember to click ‘Save draft’ in the top right hand corner of the screen after you make any changes to your blog post or the changes will not be saved!

WordPress support for adding posts

 

Section 4

Adding a new page

Pages are added in exactly the same way as blog posts:

  • Click ‘Site’ in the left-hand toolbar and then ‘Pages’ from the drop-down menu, then click on the pink ‘Add new page’ button in the right-hand side of the screen.
  • Select a page template on the subsequent screen.
  • To add a page title: Click on the text ‘Add title’ (circled in red below) and insert the text you want to appear.
  • To add body text: Click on the white space where it says ‘Start writing or type / to choose a block’ (circled in green in the screenshot below) and start typing.
  • To add a featured image at the top of the page: Click on ‘Featured Image’ in the right hand toolbar (circled in blue on the screenshot below), then ‘Set featured image’ below ‘Featured Image’. You can then select an existing image from the library or click ‘Add New’ in the left hand corner of the screen to add a new image.
  • To add an image in the body text: Click on the ‘+’ symbol and select ‘Image’. Either click on ‘Media Library’ to choose an existing image from the library or add a new one by selecting ‘Add New’ in the left-hand corner of the screen.
A screenshot of the webpage seen when adding a new page to a WordPress site, with the title field, area for adding content, and button for adding a feature image, all highlighted

Note: Remember to click ‘save draft’ in the top right-hand corner of the screen after you make any changes to your page or the changes will not be saved!

WordPress support for adding/deleting a page

 

Section 5

Adding images

Your site’s pages have been pre-populated with a small selection of images to help you get started. Each of the images that have been uploaded are 840 x 380 pixels wide for consistency, but you can add different-sized images if you wish.

To view these images in your media library and add additional images, click on ‘Media’ in the left-hand toolbar.

You will then see the screen below, with options to add images, documents, videos and audio (circled in red) – click on ‘Images’ and then click ‘Add New’ (circled in green) to add a new image.

A screenshot of the media library on an alumni site within WordPress, with the buttons to change between media types, and the button to add a new image, highlighted

The images we have included in your website have been added in the body text of each page. To add an image in this way, click on the ‘+’ symbol (add block) on the required page (circled in red in the screenshot below). Then select ‘Image’ and click ‘Media library’ to select an existing image or ‘Upload’ to upload a new one.

Alternatively, click on ‘Featured Image’ in the right-hand toolbar and ‘Replace image’ (circled in green on the right in the screenshot below) and either select an existing image or upload a new one by clicking on ‘Add new’.

A screenshot of a WordPress webpage in the editing phase, with the buttons for changing or adding an image highlighted

 

WordPress support for images

 

Section 6

Changing the menu navigation

The following menu structure has been added to your website, although it is up to individual groups to decide if they want to keep this structure or add/remove specific pages:

  • Home (page) – Welcome section of your website
  • About (page) – About the group, committee structure/ members, how often it meets etc
  • Events (blog) – Events are posted in this section using the blog functionality of WordPress (see Section 3 – Adding an event as a blog post). This means your events will be posted as individual posts but can be aggregated into one section.
  • Join (page) – How to join the group, membership etc
  • Contact (page) – Simple contact form allowing members/new recruits to email the group without having to post an email address (therefore avoiding spam)

To add a page to the menu or to make a change:

  • Click on ‘Customise’ in the left-hand toolbar and ‘Menus’ in the next screen (see below)
A screenshot of a WordPress site, with the buttons to customise the site's menu highlighted

This will take you to the menu panel. You will want to edit the ‘Primary’ menu (although this should set as the default menu). To do this, click on ‘Primary’ in the top left-hand corner of the screen.

  • To change the order the menu items appear in, click ‘Reorder’ (see screenshot below, circled in red)
  • To add a new page to the menu, click ‘Add Items’ and the ‘+’ button to the left of the page that you want to add to the menu (see screenshot below, circled in green). You will need to have created the page first for it to appear here (see section 4 – Adding a new page).
A screenshot of a WordPress site, with the buttons to reorder the site's menu, or add new pages, highlighted

Note: Remember to click ‘save draft in the top left hand corner of the screen after you make any changes to your website or the changes will not be saved! 

WordPress support for changing the menu

 

Section 7

Migrating your content over

If you already have a website to promote your group, you may wish to migrate your content across to WordPress.

Unfortunately there is no quick way to do this – you will have to copy and paste your existing content into the new site template, adapting your content to the page navigation that has been set up for you.

You can also use the WordPress Export tool to back up all of your content or move it to a new WordPress site.

WordPress support for the Export tool

 

Section 8

Inviting people to join your site

Your website is ready to be launched! Remember that you need to click on the pink ‘Launch site’ button in the top right-hand corner of the screen when you are ready for your site to go live – only you can see it until it is launched.

Besides promoting the link through various communications channels, you can also invite people to follow the site by clicking ‘Manage’ in the left-hand toolbar and then ‘People’ in the drop-down menu (circled in red on the screen below) Then click on the ‘Invite’ icon (circled in green below).

A screenshot of a WordPress site, with the buttons to invite people to join the site highlighted

You can then add their WordPress user name (if they are also a WordPress user) or email address in the top field of the subsequent screen labelled ‘Usernames or emails’ and choose a role for them. See the support link below for more details about user roles:

  • Administrator
  • Editor
  • Author
  • Contributor
  • Viewer

The recipient will receive a message similar to the one below inviting them to join:

A screenshot of the message received by those who are invited to join a WordPress site

You should ensure that users are only added as viewers and that only approved members of the committee are assigned any of the other roles which allow for any element of editing. Ideally one committee member should be responsible for managing and editing the site, but log-in details should be shared with the committee.

WordPress support for user roles

 

Section 9

Domains

Groups have a choice either to remain with the free WordPress web address that comes with the site (i.e: oushonduras.wordpress.com), map an existing domain name or purchase a new one from a domain site such as 123reg or GoDaddy. If you’re buying a new domain name, the naming convention should be as follows.

Oxford groups

The naming convention is ouslocation.
I.e: https://ousswfrance.com/ or www.ousbangalore.org

Oxford and Cambridge groups

The naming convention is either oxcamlocation or oxbridgelocation
I.e: www.oxcamlondon.com or www.oxcambangalore.org; or www.oxbridgeslovenia.com or www.oxbridgeslovenia.org

Mapping your domain

Domain mapping is a feature you can use to point domains (website addresses) to your primary hosting account. This is beneficial if:

  • You have an existing site and want to transfer to WordPress.
  • You have multiple domains you want to point to your primary hosting account. You may, for instance, have purchased multiple domains (such as www.oxfordalumnihonduras.org and www.oxfordhonduras.org) to match various search queries or misspellings. This will ensure that your customer always ends up at your primary hosting account.
  • You may want to point your web address to a sub-level page of your site. I.e: If you want your blog to be the first thing visitors see, you can set to domain to your blog without having ‘blog’ in the web address, for example.

As with other services, domain mapping comes at a small cost for hosting and mapping. As the process is slightly more involved with mapping a domain, we recommend you use the WordPress guidelines.

WordPress support for mapping existing domains

 

Section 10

Support and additional resources

WordPress support

WordPress support gives access to a wide variety of support information to help you make the best of your new WordPress website.

The support section includes key advice on a number of topics, including:

Alumni group resources

Information and advice to help you with the running of your group, including:

  • University of Oxford Images
    • Alumni groups can use images from the University’s picture library, Oxford University Images, free of charge.
      To view the image gallery, please email the picture library at: ouimages@admin.ox.ac.uk, stating that you are a group representative, and you will be sent login details.
  • Alumni group officer’s mailing list
  • Social media advice for groups

Other groups using WordPress

See how your peers are making the most of WordPress – the following groups have their own WordPress sites:

Free images

Beyond the selection of images available to group representatives on the University’s picture library - Oxford University Images (see above) - there are various websites where you can gain access to free and copyright-free images for use on your websites. These include:

Google Digital Garage

Google Digital Garage gives online access to a number of free online courses that will guide you through everything from search engines, to social media and beyond.

 

Section 11

Technical specifications

Templates and design

WordPress template: The Twenty Sixteen Theme

Customisations of the template for groups

Website template – Oxford groups

  • Logo: provided by the Alumni Office – please do not change or replace it.
  • Background (border): Oxford Blue for web (#001c54)
  • Fonts: Headings – PT Sans Regular Small, Base font – PT Sans Large

Website template – Oxford & Cambridge groups

  • Logo: provided by the Alumni Office – please do not change or replace it.
  • Background (border): Variant of Cambridge Blue for web (#c3d6ee)
  • Fonts: Headings – PT Sans Regular Small, Base font – PT Sans Large

Side widgets:

  • Short group description – this is a free text box where you can have a brief summary of the group. This can be changed easily by:
    • Clicking on ‘Widgets’ in the left-hand toolbar
    • Clicking on ‘Sidebar’ in the left-hand toolbar on the subsequent screen and then ‘text’ in the following screen (circled in red on the screenshot below)
    • Clicking in the text field that appears below ‘Title’ and edit your text
A screenshot of a WordPress site, with the button to add a free text box highlighted in the side menu

Note: Remember to click ‘Update’ in the top right hand corner of the screen after you make any changes or they will not be saved!