These instructions are for the WordPress website supplied by Swim.Rocks. They are written for a basic level user and do not address advanced functions available from WordPress.
Your website will have been delivered locked. The lock is simply to keep the website hidden from general view until you are ready for public launch. For you and others to view the website, unlock it using the username and password supplied. (Note that the lock username and password should not be confused by any username and password that you have been given to edit the site!)
Tips for getting started
We suggest that one person takes overall responsibility for the website – the webmaster. Others can contribute. Each of these people should have a separate login.
Your website is backed up daily, usually around lunchtime. Hence if you encounter major problems, the site can easily be wound back to the previous back up version.
When initially designing your website we recommend that you view it on a variety of different devices – computer, tablet and mobile phone. The ‘responsive’ layout automatically adjusts the formatting to fit the size of the display screen.
Note that edits may take a few minutes to appear for all website visitors.
Basic layout tips
We recommend that you keep your layout as simple as possible. Visitors have short attention spans and generally do not click around much. Hence your front page should be as content rich as possible.
Photos are more popular than text. The file size of images should generally be no more than about 100kBytes otherwise they will take too long to load, especially on mobile phones.
Editing the website
This is covered in detail later, but there are some basic points to cover now.
WordPress uses ‘posts’ and ‘pages’. They are similar but different so to make your future life as easy as possible it’s best to set these up right from the start.
Pages are web pages(!) Generally these are only used for pages where the content that doesn’t change very often e.g. about us, squad information, apparel, contact us, etc.
Posts are individual articles or notices. A chronologically ordered extract of them can appear on the front or other pages, and each can also appear separately on their own page. Hence these are best used for notices or news articles. New posts automatically displace old ones, without the need for tidying up.
Pages and posts can both be edited within WordPress using a word processor style interface.
Unlike every other website page, your front page cannot be edited like a word processor. It is made up of a collection of objects, including posts. Hence editing the front page only requires editing the objects and/or layout. This means that initial set up can be a little time consuming, but routine operation is very simple.
The calendar is a crucial part of your website and we recommend that you keep it up to date. Smart phone users can synchronise their calendar with yours which can become an easy way of keeping members aware of future activities.
When you first take delivery of your new website we suggest that you configure the following. This can be done in any order:
- Contact Form
- Menu bar
- Email accounts (if supplied)
How to login and navigate around the site.
Navigate to bottom of website front page: Login > enter username & password >
That will take you to a page that is similar to this:
The black bar along the top will remain for as long as you are logged into the website, including when you are viewing the public part.
Top right (under ‘Howdy’) is where you can log off.
Top left (under the website name) is where you can view the public part. Tip: open 2 tabs in your browser, one for this admin side, the other for the public side.
The menu bar items down the left hand side have the following meanings:
|WP Engine*||Access to some hosting settings.|
|Posts||Add / edit items which appear on the news and front pages.|
|Events||Add / edit events which appear in the calendar|
|Media||For photos and documents.|
|Forms||Your contact form.|
|Pages||Add / edit pages (except the front page).|
|Genesis*||Advanced site configuration settings.|
|Appearance*||Edit front page layout (widgets) or menus (menus).|
|Users*||Add / edit site users.|
|Envira Gallery||Photo gallery.|
*advanced users only recommended.
|Administrator: full access and control including content and configuration. Can change front page layout, manage user access, etc.||Recommended for webmaster and deputy.|
|Editor: publish and manage all content.||Recommended for most major website managers|
|Author: publish and manage their own notices (not pages, not events).|
|Contributor: write and manage their own notices (not pages, not events, not media) but not publish.|
|Event Contributor: can only add events|
|Subscriber: can only manage their own profile||Recommended for read-only users, including restricted content.|
It is recommended that each user has their own login (i.e. do not share logins). The benefits of this are:
- authorship clear to readers
- editing trail clear to other editors
- rotation easy to manage and without risk
You will make routine to changes to the front page indirectly by editing a post or calendar entry within the page.
It should not be necessary to directly edit the front page very often. If you do go to: Appearance > Widgets. You may have to get your hands dirty with widget settings and html code.
Widget areas are as shown below. Note more widget areas are available than are shown here.
Pages are best for static information e.g. club history, how to join, committee members, etc. It is unlikely that you will be routinely editing pages.
There are 2 different methods to access page editing:
- From administration screen > Pages
- From page itself > Edit Page
In the mass of options, the 3 most important are:
- ‘Update’ – to save changes
- ‘Visual’ – the ‘what you see is what you get’ editing mode. Recommended for most activity. Cut/paste from Word works well.
- ‘Text’ – a more geeky editing mode including code. Required when you need to fix formatting, links and media inserts.
Some pages contain shortcodes in [square brackets like this]. These codes call a special function such as a table or photo gallery. To edit, please refer to other sections of these instructions.
It can be easy to confuse ‘posts’ and ‘pages’. Posts are best for timely information i.e. notices, news. You will routinely editing posts.
Posts will be very useful for you. It is well worth understanding how they work.
Think of ‘posts’ as information packages. They automatically appear in summary form on the front page, and full length on the news page. They can also be viewed individually on their own page.
Editing posts is very similar to editing pages.
Posts appearing on the front page
Posts appear in time/date order. The most recent appears at the top in full under ‘Noticeboard – Latest’. The next appear in summary form under ‘Noticeboard – Continued’. Older posts appear on the ‘Noticeboard’ pages.
For the best appearance we recommend:
- Start with an image of 700 pixel width
- Follow with text. If this is longer than you would want on the front page then use the <!–more–< tag to break into a section. Tip: use the ‘more’ button at the top of the post edit window. People can press on the post headline to view the full content.
- Set a 100 x 100 ‘featured image’ within the post (far bottom right in the post edit screen – you might need to scroll down).
The featured image will only be displayed once the post moves down from the ‘Noticeboard – Latest’ section. See example on our demo site front page.
Tip: the slider works really well in the latest post, the gallery does not.
The calendar appears in summary form on the front page, and complete on the calendar page. It is recommended that all future event specific information should be captured in a calendar entry. Post-event results and reports should appear under ‘results’ or a ‘post’. Posts can link to calendar entries.
To add/edit the calendar navigate to: Events >
Club members may wish to synchronise your website calendar with that on their smart phone or computer. This will mean that club events will automatically appear within their personal calendar without manually inserting.
There are a variety of ways of doing this. Possibly the easiest is for the user to visit the website homepage from their smart phone and then press on the ‘Add’ button below the calendar. Follow further instructions.
Photos bring your website to life and are engaging ‘content magnets’ that will both attract visitors to your site and encourage them to remain there. We therefore highly recommend becoming proficient in their use.
Photos and images should be saved in .jpg or .png format. To maximise site speed the file size of each should ideally be no more than about 100kBytes.
Photos from iPhones should be scaled to 700 x 525 pixels. Photos from digital cameras to 700 x 469 pixels.
Tip: Once images have the correct physical dimensions, the file size can easily be minimised by using https://tinyjpg.com.
Since iPhones and digital cameras have slightly different aspect ratios it can be problematic mixing them on a slider, unless you are prepared to spend time with image editing software.
Documents should be saved in .pdf format. This is a universal format that can easily be read by phones and computers.
It is not recommended that video is saved directly onto the site. For best user experience we recommend hosting video in a service like Youtube. That content can then be embedded within your site using an iframe tag.
Where to save photos, documents, etc
Navigate to: Media
WordPress does contain a basic image editor within this Media Gallery. We prefer to do any editing prior to upload into WordPress, but it’s down to personal preference.
Adding photos or documents in a post or page
Go to the ‘edit’ post / page screen.
Place the cursor where the insertion is to be made. Press ‘add media’
- select an existing file from the media library; or
- upload files
It is likely that there will be a formatting issue that is best fixed using ‘text’ editing mode.
Nerdy tip: to improve site speed we recommend using relative urls instead of absolute urls.
WordPress automatically inserts absolute urls, for example:
Note that this contains the full url including http:// and your domain name.
For faster speed we recommend that this is shortened to:
Using the photo gallery (Envira Gallery)
A gallery displays multiple images at once in a space such as a post or page. By clicking on them it may be possible to zoom in. See example here.
Your website contains the premium Envira Gallery software. This probably has more capability that you will ever need. The dedicated user will be able to produce some awesome visual experiences using it.
To get started we recommend:
- Upload photos to the media gallery;
- navigate to: Envira Gallery and create a new gallery;
- add the shortcode (a code snippet in square brackets) in the post or page where you want the gallery to appear.
For full instructions refer to the Envira Gallery documentation.
Using the photo slider (Soliloquy)
A slider rotates images within a space such as a post or page. See example at top of the front page here.
Slider configuration is similar to the gallery above. Refer to Soliquy’s documentation here.
Just like with software updates on your phone or computer, your website operating system requires occasional updating. These updates fix bugs, introduce new capabilities, and manage issues caused by the evolution of technology.
Technical update management is part of your service from us. You do not need to deal with this.
If you see notices that new plugin or theme versions are available these can generally be ignored. We will periodically arrange that for you. Plugin updates can sometimes be buggy so we tread carefully here and don’t rush to keep things to the absolute latest version.
This section only applies if you have purchased email from us.
Your email is entirely separate from your website. It is hosted by a company called Rackspace.
Webmail access to your email
Go to webmail and enter the email address and email password (note these will not be your personal email address or website access password).
(tip: Google ‘Rackspace Webmail’ is a quick way to find this link in future)
Access via mobile phone or other email client
More technically minded people might want to configure email access via their mobile phone. We recommend that IMAP (not POP) protocol is used. Please ensure that settings are not configured to download messages from the server otherwise they may become lost.
Configuring and trouble shooting mobile phone client access to email is outside the scope of our service. If you wish to do it then here are Rackspace instructions.