Admin Manual
Remember :
School Notes, Newsletters, Homework pages, ---> POSTS
Class pages, message from principal, history page ...---> PAGES
After login in you will find teacher help button in the footer of the
website. Here you will find a full copy of the manual and tutorial
videos to help you out
If you need more help contact [email protected]
1. Introduction
3
2. User Roles
3
3. Adding new content to a page e.g. class page, message from the principal. 5
1. Adding text to pages
5
2. Adding backgrounds to pages
6
3. Adding links to pages (teachers too)
7
4. Adding a new post e.g. School Notes, In the media, Newsletter
8
5. Adding Images to a post or page
1. using media library
2. using photogallery
3. adding a carousel to pages
9
10
12
16
6. Adding video to a post or page
18
7. Managing the Calendar
23
8. Managing the ticker or horizontal scroller
25
9. Managing the paypal payments
26
10.Managing email listings through mailPoet
28
1
11.Working with enquiries and forms
30
12.Adding a new contact form
31
13.Managing the WOW slider
35
14.Automatic Back ups
42
15.Working with widgets
43
16.Updating plugins
47
17.More advanced
47
1. Adding new pages and posts and adding them to the menu
47
2. Changing the colour of the messages in the clicker
51
3. Adding images to the Ticker
51
4. Working with shortcodes
51
1. tippy
51
2. using shortcodes to align and order text and images in your posts or
pages
52
3. using shortcodes to customise a vimeo video player
52
5. Setting up a new newsletter and emailing it to subscribers
2
54
1. Introduction
Your website is a website build using Wordpress with a Twitter Bootstrap Openstrap theme.
Wordpress provides you with a framework on which you can build a website.
It allows for a modular combination of pre-coded plugins and custom code to build a
website that is fully flexible, responsive ( can be used on phones and tablets) and gives both
developer and user great freedom in choosing both functions and features and styling of the
website. Every website has its own unique combination of plugins and adaptive code to give
the customer exactly what they are looking for. The biggest advantage of a modular website
as this one is that features can easily be added and taken away at any stage. Your website
will never get stuck in time or will never need a major revamp. With simple solutions the
site can be maintained and kept up to date. The disadvantage is that different plugins can be
written by different people and therefor you might need to learn different approached for the
different functions
2. User Roles
There are 4 different User roles set up in your website. The 4 roles have different
capabilities within the admin of the site, i.e. They are able to do different things.
Each user has his/her own login. The different users have different dashboards to work from.
User : administrator
User : admin
3
user : teacher
User: Lisa
Only the administrator has access to the code underlying the website.
Admin users have access to all functions on the site
Teacher users have acces to all functions that will allow for adding content to pages, posts,
calendar and ticker.
Lisa User has the same access as teachers with added to that access to subscibers to the
different mailing lists and access to the paypal widget.
At time of printing roles are as follows:
Administrator: Katrien Moore ( [email protected])
Admin: Deaglán, Eilish, Rebecca, Sinead
Teacher: All teachers and support staff in Gaelscoil An Ghoirt Alainn
Lisa: Lisa
Only administrator and admin can promote or demote users
4
3. Adding new content to a page e.g. class page, message from the
principal.
What is the difference between pages and posts?
Pages are like a word document. They are a full page of text with pictures and video. Pages
are often static (i.e. the don't change very often) New content is added above existing
content. Pages can not be archived or emailed. Example of pages on your site: na rangana,
History of the school, message from the principal, Where to find us..
Posts are a more dynamic type of document. Every post is an alone standing document. It
will display information like autor and date the post was written. Posts are divided in post
categories. The categories are displayed in groups. You can archive posts. Posts can be
emailed to subscribers.
Examples of posts on your site: School notes, newsletter, home work sheets
In this chapter we are working with pages:
1. In the dashboard, Click pages --> all pages
2. Scroll down to find the page you want to edit. You can also use the search function in the
right hand corner if you know the name of the page you are looking for. Open the page.
3. Put your cursor on the top of the page. You can now type any text on the page as in a
normal word processor. Choose fonts, font sizes and colours.
4. You can add pictures and video to the page ( see section add media to pages and posts)
5. You can add/delete or change the background of your page. Several backgrounds are
provided with the site. (You can download more free backgrounds online.)
You can find the background selector in the right hand corner of your screen.
5
6. When you are finished Click update ( if you don't click update, your work will not be
saved)
7. Click view page to see your work.
8. If you want to go back and change anything, click edit page.
9.
If you are not happy with your changes and you want to go back to the page as it was
before, you can go back and restore previous versions of your page using the revisions
function. You will find this in the top right hand corner.
When you click browse, you will see a bar that chronologically lists the last revisions of
your page.Choose your revision and click 'restore this revision
6
10. Don't forget to click update every time you change a page
11. adding a link to a page:
1. It is very easy to turn any text or image into a link. You can link to pages on your
own site, or you can link to pages in other sites
2. On the dashboard go to pages and choose the page you want to add a link too.
3. Highlight the word or the image you want to turn into a link.
4. Click the link icon in the tool bar
5. If you want to link to a page on another site, add the URL to box
6.
7.
8.
9.
If you want to link to a page in your own site, find and select the page
Click Add link
You have now successfully added a link.
Click visit page to see your work
7
4. Adding a new post e.g. School Notes, In the media, Newsletter
What is the difference between pages and posts?
Pages are like a word document. The are a full page of text with pictures and video. Pages
are often static (i.e. the don't change very often) New content is added above existing
content. Pages can not be archived or emailed. Example of pages on your site: na rangana,
History of the school, message from the principal, where to find us
Posts are a more dynamic type of document. Every post is an alone standing document. It
will display information like autor and date the post was written. Posts are divided in post
categories. The categories are displayed in groups. You can archive posts. Posts can be
emailed to subscribers.
Examples of posts on your site: School notes, newsletter, home work sheets
In this chapter we are working with posts:
For the most part there is now difference between editing posts or pages. The main
difference is that it is really important to categorise posts.
Initially there are 4 categories set up : school notes, In the media, newsletter and Homework
sheets.
You can easily set up new categories. You will find that at the end of this chapter.
If you do not categorise posts correctly, they will not be emailed correctly and they will
appear on the wrong page. e.g if a homework sheet is categorised as a school note, it will
appear on the school notes page and will be emaild to all subscribers that are subscribed to
receive school notes.
1. On the dashboard, click posts--> add new post.
2. Put your cursor on the top of the page. You can now type any text on the page as in a
normal word processor. Choose fonts, font sizes and colours.
3. You can add pictures and video to the posts( see section add media to pages and posts)
4. Pick the right category for your post ! This is very important
Double check your post and the category it is in
8
5. .Click Publish. If you do not click publish your work will not be saved.
As soon as you click publish, your post will be emailed to the subsribers that are subscribed
tot the mailinglist the post is attached to.
Adding new post categories:
On the dashboard, click posts--> categories
Name: name your category
slug : same name as your category but replace any spaces with '-' .
The slug is what the search engine looks for.
Click add new category. You have now successfully added a new category
5. Adding Images to a post or page
You can add pictures to any page or post. There are two ways to do this.
Adding up to 4 pictures to a page or post → use media library
Adding more than 4 pictures to a page or post → us photo gallery
There are two reasons for this. First: If you upload to many picture to the media library it
becomes very large and it becomes very hard to navigate. Second: galleries give you the
option to display your pictures in a far nicer way. You can aslo collect them in albums.
9
Adding up to 4 pictures to a page or post using media gallery
1. Choose the picture you want to add to your page or post.These can be pictures stored in
dropbox or taken from any other place you have access to from your desktop.
2. In the website dashboard, open the media gallery.
3. Select : Add new
4. Click Select files
5. Select the pictures you want to add to your post or page. Click Open
6. Your pictures are now uploaded to your media library. After uploading your pictures
open ( edit ) each one and assign it a category. This is important to be able to find
pictures faster later on. By default several categories are set up for you. ( you can add
new categories for pictures, see in advanced section: adding categories to your media
library) Don't forget to update after editing the categories.
10
7. Go to the page you want to add the pictures too.
8. Put your cursor in the place where you want to add your pictures
9. Click add media.
10. Choose the pictures you want to add. ( you can use the categories tab to help you find
your pictures faster) Use shift+ctrl to add more than one at a time. Click insert into page
11
11. After adding the picture to your page or post, you can resize it by clicking it. You can
drag the corners to make it smaller or bigger.
12. Dont forget to update your page!
Adding more than 4 pictures to a page or post using photo gallery
1. On the website dashboard choose Photo Gallery, add new galleries/Images
2.
If you want to add a new gallery , choose add new. If you want to add to an existing
gallery find the gallery you want to edit and click edit. ( on this page you will also find a
link to a very good user manual by the author of the plug-in if you want to find out any
more)
12
3. A gallery is a collection of Images. It is displayed in a row or grid of pictures. You can
also add an album. An album is a way of representing a gallery. You will only see one
picture ( the front cover picture of your album) When you click the album the gallery
will be displayed. You can put several galleries into one album. In a page or post you
can choose to display either a gallery or an album. It is important to name your galleries
and albums as accurate as possible to be able to find them easy after. (e.g. name your
gallery: rang Eilish walk through the field. If you want to display this in an album, it is a
good idea to give the album the same name)
4. Creating a new gallery :
Name: name your gallery
Slug: use the same name but replace any spaces with - .
This is how the gallery will be identified by search
engines.
Description: Add a short description of your gallery
Add preview image: do that after adding the other images.
This is the picture that will be used as the cover picture of
your album would you wish to display your pictures as an
album
Click add images : you will see the select images screen.
Click upload files. Select all the pictures you want to put
into your gallery. They will now upload and appear in the
add images window. Use shift+ctrl to choose several
pictures at once. Click add selected images to the gallery.
13
5. You can now name the individual pictures. ( you don't have to , but you can display these
names in the gallery if you like)
6. You can now also select one picture to be your preview picture.
7. Click save
8. You have now successfully created a new gallery.
9. If you want to put your gallery into an album : Go back to the dashboard and click Photo
gallery-albums. Click add new.
14
10. Name: name your album
Slug : use the same name as your album but replace all spaces with - .
description: add a short description of your album
add your preview image: choose the image that will be on the cover of your album
add album/galleries: add all galleries and albums you want in your new album.
Click save.
You have now successfully added a new album.
11. Adding the gallery/album to your post or page:
In the dashboard choose pages or posts.
Scroll down to find the page you want to add the gallery to.
Open the page.
12. Put your cursor in the place where you want to add the gallery or album.
13. Above the text editor find and click the camera icon.
14. You are now on the insert gallery page.
15
15. Select the gallery or album you want to display.
You can select the number of images displayed per column and per row.
Image title: to display the names you have given the images, select always show.
You can select the size of the thumbnails that will be displayed.
After selecting all your options: click Insert
16. Don't forget to update your page or post
17. Click view page to see your work!
Adding a carousel
1.
2.
3.
4.
On the dashboard go to wonderplugin carousel
You can create a new carousel or edit an existing one
Click create a new carousel
Name your carousel
5. You can add both images and video to your carousel
6. You can now choose the skin you like for your carousel
16
7. have a look at the options
8. Click preview.
9. When you are happy with your carousel, click save and publish
10. You will now be given a shortcode. A shortcode is a short cut to a program or part of a
program. The shortcode everything between the square brackets, and included that square
brackets . [ ]
The shortcode will look like this: [wonderplugin_carousel id="1"]
11. Copy this shortcode.
12. Paste this shortcode into the page or post you want to add your carousel.
17
13. Click update
14. Click view page to see your work
6. Adding video to a post or page
You can add Videoto any page or post. There are two ways to do this.
Adding up to 3 videos to a page or post → use copy and post method
Adding more than 3 videos to a page or post → use the wonderplugin gallery.
.
We make this distinction because the wonderplugin player can display the videos in a gallery
This gives a more ordered look to the videos and stops the site of getting to crowded.
Adding up to 3 videos to posts or pages using the copy and past method
1. To embedVimeo video it is the easiest to Vimeo in a second window in your
computer.
2. On your Vimeo page, find the video you want to embed in your page or post.
18
You will now see the vimeo share screen. Copy the share link. ( you need to highlight it
with your mouse and rightclick to copy. It will not work if you just write the link into your
page or post!)
2. Go back to the website. In the dashboard find pages → all pages. Find the page you want to
embed the video into.
3. If you want the video to appear in a particular size click the show options link. Change the
display size. ( the other options in this box do not appear to be working. Vimeo is looking
into this)
4. Place your cursor in the exact spot you want to see the video appear.
5. Paste the link you have copied from vimeo
6. click update
7. You have now embeded a video!! click view page to see your work!
8. Check the advanced section to size and align your video using shortcode or vimeo embed
codes
Adding more than 1 video to posts or pages using wonderplugin gallery
1. On the dashboard click wonderplugin gallery, click create a new gallery. ( you can also edit
existing galleries)
19
2. Name your gallery.
(you can change the size of the width of the gallery, this will only work if it is only a small
gallery. If the gallery is larger, it will not look right on phones and tablets. So be careful
using the sizing option)
3. Open a new window and open www.Vimeo.com. Find the video you want to add to your
gallery. Click the share tab. Highlight and copy the link.
20
4. Go back to the gallery and click : add Vimeo
5. Paste the link you copied from Vimeo in the box. Click ok.
6. Add a title and a description ,Click OK.
7. Repeat step 3-6 until you have uploaded all the videos you want in your gallery.
8. Click preview to see what your gallery looks like.
21
9. You can now change the look of your gallery if you like
10. Click skins. Select the skin you like.
11. Click options--> gallery options Make sure the option : Support responsive web design is
selected . ( if this option is not selected, the gallery will not resize on phones or tablets
12. click options--> skin options: if you want to you can customise the look of the gallery
further. Add shadow around the thumbnails of the player, or change the background colour. (
the other options are not really relevant) Every time you change something , click preview to
see the change in action)
13. When you are happy with your design, click save and publish
14. You will now see the following sentence: To embed the gallery into your page or post, use
shortcode [wonderplugin_gallery id="5"] With the id number unique to your gallery. Copy the
shortcode. The shortcode is everyting between the square brackets, including the brackets.
The short code in this case is [wonderplugin_gallery id="5"] . Highlight and copy the
shortcode
22
15. Go to the page where you want to add the gallery
16. Put your cursor in the exact spot where you want your gallery to appear. Paste the shortcode
17. Click update.
18. You have now succesfully created and published a video gallery. Click view page to see
your work
7. Managing the Calendar
1. The calendar has 3 parts.
– a small calendar widget with events list on the home page
– a larger calendar on the calendar page
– an events list on the calendar page
All three parts are managed from the same place
2. To add a new event in the dashboard click events--> add new
3. Add the name of your event to the title e.g. no school today, school tour N Bheaga..
4. You can add more info about your event in the editor box
23
5. Scroll down to the bottom of the page. There you will be able to input the date of your event
6. Choose a category for your event. This will make sure your event is displayed in the colour
of the category you have choosen.
7. Click Publish to add your event to the calendar
24
8. If you want to add a category or change the apperance of existing categories, in the
dashboard click events-->categories
9. To edit a category, move your mouse over the category you want to edit and click edit
10. You can change the colour of the category background and the category text by clicking the
boxes. Pick your colour and click Update
11. You can also add new categories
8. Managing the ticker or horizontal scroller
1. The ticker or horizontal scroller is displayed on the front page. It is used to display all kind
of messages you want people to notice straight away. You can add links and pictures to the
scroller. By default all messages are orange. Check the advanced section to see how you can
25
change the colour of your message and how to add pictures to your messages.
2. In the dashboard click settings--> horizontal scrolling
3. A few messages have been set up for you as examples
4. Adding a message with only text : e.g. school will close at 12 today or text with a link : e.g.
click here to see what is new with a link to the page with new content (Tip: a what is new
link has been set up for you, you just need to change the url of the page where the new
content is )
Click New
- Enter the annoucement: Enter the text you want to display in the ticker
- Enter your annoucement text ( circled green) : Enter the url of the page you want to link to.
It is easiest to open a second instance of the site and navigate to the page you want to link
to, copy the url there and paste in this box
- what order should this annoucement be displayed in: will let you pick if your message will
appear first, second, third...
- announcement group: choose group0
- expiration date : you can set a date for the message to automatically stop displaying
5. click submit.
9. Managing the paypal payments
1. Go to the dashboard --> settings --> WP paypal payments
2. Settings
1. Paypal Email address: your paypal address where all payments will be sent to. Be
careful: you will also get emails for every payment on this email address. It is best to
have a designated email address for this.
26
2. Currency: choose your currency
3. Payment subject: Enter the Product or service name or the reason for the payment
here. The visitors will see this text .
4. Payment option: give a short description of the item and also put the price in this box
If you do not add the price to this box, the customer will not know how much they
have to pay as the price column is not displayed in the widget. ( this will be fixed at a
later date)
3. Further settings:
1. other amount: If you tick this box, your customer will have the option to add their
own amount. This can be used if parents have already paid part of the total money
owed and they can put it the remainder of the money
2. Show reference Box: if you tick this box, you will be able to ask parents for extra
information.
3. Reference box title: Type what extra information you are looking for e.g name and
surname of child
4. Click Update options
5. Check the home page to see your work
27
10. Managing email listings through Mailpoet.
Your website has the possibility to email newsletters and notes to subscribers.
This is done with a plugin called MailPoet.
At this moment mail poet is set up to automatically email school notes and newsletters to all
subscribers. It is also set up to email homework sheets for junior infants.
These settings do not need changing.
Emailing School Notes:
School notes will be automatically emailed as soon as they are published. It is important to mark
them as the school notes category or they will not be emailed.
1. On the dashboard click mailpoet → newsletters.
2. You will now see a list of newsletters that are set up to be sent out. The newsletters on a blue
background are the templates. They should be marked: send immediately. If they are not
marked send immediately , they will not be emailed. In this case , click activate. They will
be reactivated
3. The newsletters on the white background are the actual notes that have been send out. You
will see how many have been send out.
4. If a note has just been published, it will appear here on the white background with a
comment saying how many minutes before it will actually be emailed. It will also say how
28
many emails will be send. You can choose to not wait and send the newsletter immediately.
5. If you hover over a newsletter that has been sent, it will give you the option to see the stats.
If you click this, you can see how many have been sent, who received them and who opened
the emails. It can give you a lot of information about your subscribers
Managing the subscriber list:
1. On the dashboard click mailpoet--> subscribers
2. You will now see a list of all your subscribers
3. You can click the subscribers to see their stats. ( what lists they are subscribed to and how
many emails they have received and opened.)
4. You will see that some subscribers are marked as unconfirmed. This means they did not
reply to the confirmation email. The confirmation email is set up to avoid spam coming into
your site. Keep an eye on the unconfirmed subscribers. Unconfirmed subscribers will not
receive any emails! If they are still unconfirmed after a few days, they might have forgotten
to open the confirmation link. You can manually confirm them. Before you do, have a look
at the name and email address to verify they are genuine subscribers and not spam bots. You
will see the difference. To confirm a subscriber : mark the square next to the subscriber. In
the “bulk action” select box, scroll down and click confirm unconfirmed subscribers.
Click apply.
29
Adding a new mailing list
Adding a new mailing list is a more complicated task.
Please read the section : more advanced adding a new newsletter and emailing it to subscribers.
Please feel free to ask katrien at [email protected] to do it for you.
11. Working with enquiries and forms
In your website you will find 2 contact forms; contact us and register your child.
When parents fill out a contact form you will receive an email with the completed form.
You will also find a list of all completed forms within your site. Here you can review the
enquiries and reply to them.
1. In the dashboard go to visual for builder → entries
30
2. Here you will see a full list of all forms submitted. You can delete any forms you do not
longer wish to keep. Click view to see details
3. You will get complete copy of the form and an email link to reply too
12. Adding a new contact form
Please contact Katrien on [email protected] if you want help setting up a new contact form. I
can do it for you, or help you through it.
Have a look at the video tutorial on the website help page on setting up a new contact form.
1. We have set up a basic contact form for you to copy. It is called “ new form” . We would
strongly suggest you use this form as all the settings have been set up to best suit your
website and your school. (You can make a new form from scratch. In that case be careful
with the general settings, refer to existing forms)
2. In the dashboard go to visual form builder--> all forms (picture of dashboard)
3. You will see a list of all contact forms on your website. You will see one called :”New form,
duplicate me, the change my name”. When you hover over this form, you will be given the
option to duplicate. Duplicate the form
31
4. You are now in the form builder window.
5. You will see a button settings. When you click that you will see the general settings for your
form. We would strongly suggest you do not change these. They have been set to work
optimally for your website and your school
6. A few items have been pre set for you.
1. Field set: this is the name of your form. Click the little arrow next to the word field set.
You will now be able to change the name. Type the name of your form here.
2. Name: People will be able to fill out their name
3. Phone number: people will be able to fill out their phone number
4. email address: people will be able to fill out their email address
5. enquiry: people can fill out the information you are looking for.
For all these fields, you can change the name of them. E.g. you might want to use Irish in
the labels, your enquiry could be : where do you want your child to go on school tour?
To change this, click the little arrow next to the name of the field. You will now be able to
change it.
32
7. After every change you make, click save form. That way you can see what you have
changed.
In this window you you will find more fields you can change.
The ones you might want to use are:
Name: change the name of your field
Description: you might want to add a description for further information.
Required: if you tick yes, on your form the field will be marked with *. This field can not be
left blank.
Size: you can change the size of the box people will see on the form to fill in their info. E.g.
“address” might need a larger box than “name”
field layout: you can choose where you want the field to appear on your form.
8. At the bottom of your form you will also find a validation field. This is compulsory. It stops
spam bots and spiders high jacking your email forms ( these are malicious programs that
crawl the internet looking for email address and personal information. ; look at
http://en.wikipedia.org/wiki/Internet_bot if you would like more info ) This field again is set
up for you and we strongly recommend you do not change it.
9. You will also find a submission button set up for you.
10. You can now add any field to your form you like. On the left hand side is a list of items you
can add to your form.
11. Here is an example of a very simple form that shows the difference between text fields,
radio buttons, check boxes and select boxes.
33
12. To add a field just click it and it will appear at the bottom of your form. To change the order
of your fields, just drag and drop them.
13. When you are finished with your form, click save form.
14. You can add the form to your website either in a main page ( example on your website:
register your child form) or you can add it to widget in a side bar. ( example on your website
: contact us)
15. To add a form to a page:
1. on the dashboard go to pages
2. find the page you want to add the form to.
3. In the tool bar find the add form icon
4. choose your form
34
5. Click Insert form
6. Click update page.
7. Click view page to see your work.
16. To add a form to a widget:
Please read the working with widgets section.
Choose the visual form builder widget.
13. Managing the WOW slider
If you want help with adding a new wow slider, contact katrien at [email protected].
To be able to edit the wow slider, you need to download the wow software on the computer you are
using to edit the slider.
You will find the free software download on http://wowslider.com/. When you download the
software it will appear on your computer as a zip file. Open the file.
You will also need to create a folder on your computer to store the sliders you have made.
In this example we have created a folder called wow slider under documents on our computer.
1. Open the wow slider software.
2. You are now in the wow slider editing window.
35
3. Add the pictures you want to have in your slider. You can drag and drop the pictures
onto this page, or you can click the + sign to add the files
We suggest you do not add more than 10 pictures for the main slider
4. You will now have to edit the pictures. For the slider to work best, the pictures should be
1150×400 in size. Try to use colourful pictures. Pictures taken in landscape format
work best. If you do not crop the pictures correctly, the slider will cut the top of the
pictures to make them fit. So be careful with cropping so that you get to see exactly the
part of the picture you wanted to be shown.
5. Double click the picture you want to edit. It will now open up larger in a light box. Click
fix on the top of the page. You will now be given the option to crop the picture.
6. Crop the picture and save. Crop all the pictures
7. When you have cropped all the pictures and you are happy with them , click the wrench
symbol on the top of the page.
36
8. You are now in the property window.
9. First you see the general settings. Set them as seen in the picture below. This works best
for your website. (You can try out different settings if you want to. You can add bullets
and arrows on your slider. You can even add thumbnails if you want to. As said, the
settings you see in the picture are the best ones for your website)
10. Click the images tab
11. Here you can set different options for the slider
1. Template : choose different templates. This is only useful if you are displaying text,
bullets and arrows in your slides. If you are not, the different templates do not make
much difference
2. Image size: the best size for your website is 1150 x 400. Tick the boxes as you see on
the picture. These settings work best for your website
3. Transition effect: There are some really cool effects here. Try out a few to see the
difference. The slider on your site at the moment is set to cube.
4. You can choose the time delays between the pictures.
37
12. Click the publish tab.
38
13. Choose the wordpress slider option.
14. Click browse and find the folder you set up before to store the wow slider. Make sure to
name your slider. In this example it is named slider 1.
Add the name of the slider to the file path
15. Click Publish.
16. The slider will now be saved.
17. Go to the dashboard or your website. Click wow slider
18. Click add new .
19. Click choose file.
39
20. ( Ignore the video on this page, it is made by wow slider and it shows a different way to
add sliders. )
21. Browse to find the file you have saved the wow slider in. Click open
22. Click add now.
23. You will now see the list of all available sliders. Your new slider will be at the top of the
list.
24. Click view to see your slider. If you are happy with it: Copy the short code. The short
code is everything between the square brackets, including the brackets. The short code
will look like this [wowslider id="19"]
25. If you are not happy with the slider, go back to the wow slider software on your
computer, click open recent and correct the pictures
26. To add the slider to your home page, on the dashboard go to appearance--> widgets
You will find more information about working with widgets in the “working with
widgets section” of this manual.
27. On the right hand side of the page, find the widget area called “Front-page slider widget
area”
40
28. Open the widget area by clicking the little arrow next to the title.
You will see two widgets. The first one is the ticker or horizontal scrolling. The second
one is a text widget.
29. Open the text widget. You will see a wow slider short code here. This is the slider that is
now on your homepage. Delete this short code and replace it with the new one you
copied earlier on. Do not change any of the other settings!!! Only replace the short code.
30. Scroll down a little and click save.
31. You have now updated the wow slider.
41
14. Automatic Back ups
Your website includes a back up plugin called UpdraftPlus Backups.
Your website is set up to make regular automatic backups. These backups include all the
themes, files, plugins, programming code and all the databases.
You can set the frequency of these backups. At the moment the frequency is set at once a
day.
Four backups are stored in the site at any time. All backups are also stored in the school
dropbox. You will need to periodically delete some of the backups in the dropbox.
If something goes wrong with the site, i.e. a plugin has corrupted, a user has accidentally
deleted widgets,... you can easily restore previous backups.
( feel free to contact Katrien at [email protected] in case this happens. I can possibly
fix the problem without having to restore a backup)
You will find UpdraftPlus in your dashboard
dashboard → settings → UpdraftPlus
I
Backup now: manual back up. Back up manually before making any big changes or before
updating themes or plugins
Restore: restore a previous back up if you need to go back to a previous instance of the site
if you need to restore a backup, just click restore and follow the instructions on screen.
You will also find information on times of backing up
Settings for the frequency of the back ups and the files you want included. The settings
42
shown above are ideal for your website.
15. Working with widgets
All over your website you will find widgets. Widgets are nearly always placed into sidebars.
Most of these widgets you will never need to change. ( e;g calendar widget on home page, contact
form widget on contact us page..)
Sometimes however you might want to add new widgets are replace existing ones with new ones.
There are lots of different possible widgets in your site. Here you will find some information on the
most common ones.
Advanced-featured-page-widget:
You can use this widget to display the content of a page in a smaller window on another page.
Examples on your site are the Cad Atá Nua box and the message of the principal
Archives:
This widget archives posts by month
Example on your site is the archives on the school notes page and the newsletter page
Bemoore Calendar widget small:
small calendar widget you have at the moment on your home page
Custom recent posts:
This widget lists recent posts. Examples on your site are previous school notes and previous home
work sheets
Google maps widget:
This widget displays a Google map with any address you choose.
Example on your site : come and see us on the contact us page
Horizontal scrolling
This widget adds a ticker to a page.
Be careful, you can only design one ticker so if you use this widget more than once, the same ticker
will be displayed
Image:
This widget allows you to display a picture in a sidebar
Example in your site : the picture of your school on the where to find us page
Mail poet subscription form:
This widget adds a mail poet subscription form to the sidebar
Example in your site: subscribe to our school notes on the school notes page
Polls:
This widget displays a poll or survey in the sidebar
Text:
This widget displays text . You can also add html and css code to this widget to style the text. You
43
also use the text widget to use shortcode in side bars.
Examples on your page: all the text in the header and the footer
Example of shortcode in a text widget: the wow slider on your home page
Visual form builder:
This widget allows you to add a contact form to a sidebar
Example in your site: contact us form on the contact us page
WP paypal payments:
This widget allows you to display a paypal payment box
There are several widgetised areas in your site.
– 4 widget areas in the header
– the wow slider and the ticker widget area
– the menu widget area
– 3 front page widget areas
– a left sidebar
– a right sidebar
– 4 widget areas in the footer
Only ever change the widgets in the front page area and the sidebars
DO NOT touch the widgets in the header and footer areas
To place a widget in a widget area
1. In the dashboard go to appearance → widgets
2. Locate the widget you want to add
3. marked in blue are widgets, marked in red are widget areas.
4. Click the widget. You will now see a list of possible widget areas
44
5. Choose the area where you want to place the widget. Click Add widget. The widget will
now appear in the chosen widget area.
6. Go to the widget and fill out name , title and other info the widget asks for ( different for
every widget)
7. you can choose which pages to display the widget on.
Tick “show on checked pages” and select the pages you want to see the widget displayed on
remember, if you want to add widgets to posts, you need to add the widget to the category
If your widget does not show up on your page, check this setting again. You might have
ticked “hide on checked pages”
8. You can also choose to make widgets visible for only logged in users. Example on your
website is the teacher help button. You can only see that after logging in.
9. Click save
10. Go to your page to see your work
45
11. You have the option to hide widgets on different sizes of screens. This can be useful when a
widget does not look right on smaller screens like on small phones. I you look at the header
on your site, you will see all the address details. Some of those are not visible on the smaller
screen of a phone. To hide widgets on smaller screens, click the bootstrap grid class bar in
your widget.
You will see tick boxes that will allow you to choose to hide the widget for screen sizes
.col-lg : large screen : desktop computers size ≥1200px
.col-md: medium screen : Desktops ≥992px
.col-sm: small screen: tablets and some larger phones ≥768px
.col-xs: extra small screens: most phones <768px
46
16. Updating plugins
Your site contains 26 different plugins. They are stand alone programs that have been
written and adapted to preform certain functions within your site. The plugins need
periodically updating. When you login to your dash board you will see at the top of the
dashboard a number in a red circle. This is the number of plugins that need updating that
day. It is important to keep updating the plugins. It assures the best performance for your
site. It also keeps your site safe from hacking. Click updated. Locate the plugins that need
updating. Update one plugin at a time.
After updating each plugin, have a look at the home page. Sometimes new plugins can throw
existing ones out. It is most obvious on the home page. If this happens, email katrien at
[email protected] straight away. I will fix it.
17. More advanced
1. Adding new pages and posts and adding them to the menu
We would suggest to only add pages and post categories to the sub menus and not to the
main menu.
The main menu buttons require styling through css coding. The sub menu is set up to
automatically take the style of the already existing sub menu buttons. If you do require a
new item in the main menu, please contact [email protected]
Adding a new page and adding it to the menu
1. First create a new page. On the dashboard go to pages--> add new
2. Name your page .
3. In the page attributes:
47
page parent : select the main menu item ( or sub menu item) you want your page to
appear under
page template: For most pages choose ' full width' This is a page without any
sidebars. If you need your page to have one or more sidebars ( e.g. for an archive list
or a subscription form), choose the appropriate template. If you choose a template
with a sidebar, read chapter 15 : more advanced, section 8 : working with widgets to
fill your sidebar
4. You can choose a background image for your page.
5. Click publish
User role teacher can add new pages, but can not add them to the menu. Please consult admin or
administrator users for the next steps.
6. On the dashboard click appearance → menus
7. Select the page you want to add and click Add to menu
8. The page you selected will appear at the bottom of the menu. Drag and drop your
page underneath the (sub) menu item you want it to appear.
9. Click the little arrow next to page. You can now give your menu item the right name
48
navigation label: This is the name displayed on the menu button. Type the name of
your page as Gaeilge. On your site this is displayed in black. To stay in keeping with
the style of the rest of the menu, you can add an English translation in blue. To do
this you need to add one line of html code. Please make sure to get the syntax right.
This example will display
Stair history In the navigation label type : Stair history
It is not necessary at this stage to understand this code, just copy it exactly replacing
stair and history with your page in Irish and English.
Title attribute: This will displayed when your mouse hovers over the menu button.
Type the
name of your page in English.
10. Click update Click save menu.
11. Go to visit site to see your work
Adding a new post category and adding it to the menu
1. First create a new post category
2. On the dashboard go to Posts → categories--> new category
3. Name: name your category
slug:same name as your category name, but replace all spaces with -
4. click save category.
User role teacher can add new pages, but can not add them to the menu. Please consult admin or
administrator users for the next step
49
5. In the dashboard go to appearance--> menus
6. Click categories. ( click the first box named categories, the second one are calendar
categories) If you do not see the category you are looking for, click view all.
7. Select your category, click add to menu.
8. The category you selected will appear at the bottom of the menu. Drag and drop your
category underneath the (sub) menu item you want it to appear.
9. Click the little arrow next to page. You can now give your menu item the right name
(screen shot of labels)
navigation label: This is the name displayed on the menu button. Type the name of your
category as Gaeilge. On your site this is displayed in black. To stay in keeping with the style
of the rest of the menu, you can add an English translation in blue. To do this you need to
add one line of html code. Please make sure to get the syntax right. This example will
display
Stair history In the navigation label type : Stair history
It is not necessary at this stage to understand this code, just copy it exactly replacing stair
and history with your page in Irish and English.
Title attribute: This will displayed when your mouse hovers over the menu button. Type the
name of your category in English.
10. Click update Click save menu.
11. Go to visit site to see your work
50
2. Changing the colour of the messages in the clicker
1. To change the colour of the messages in the ticker or to add images you will need to
use a few lines of HTML code. At this stage it is not imporant to understand how it
works, but it is very important to have the syntax exactely right.
If a bracket or a quotation mark is missing your message will not display coorectly
or it will not display at all.
2. In your message anoucement write your text e.g : No school today!. Then add the
following code:
No school today! 
Make sure to have all the brackets, and all the puctuation!!No spaces in the
html code!Write color, not colour!
3. Your message will now display in yellow
4. Html recognizes 140 different colour names. For a full list of the colours look at
http://www.w3schools.com/html/html_colornames.asp
3. Adding images to the clicker
1. To add an image to your message you will again need HTML code. First find the
image in your media library that you want to add. Open the image and copy the url.
2. In your anoucement type the following html:
<img src="your url"/>
where it says your url paste the url of the image you just copied.
Make sure to get the punctuation and the brackets exactely correct.
3. Click submit. You have now added a picture to your scroller
4. Working with shortcodes
Shortcodes are lines of code that call up fuctions within the programming of your site. The
are a shortcut to go straight to the code without having to write it all out again or without
needing any knowledge or understanding of the underlying code
Shortcodes are always between square brackets [ ] and will have a command between the
brackets. In this site we are using varies different sortcodes. Some you will find very usefull
1. tippy / Read in English
Tippy is a tooltip plugin. This means tippy will display a text or image when you
51
either hover over or click text ( or an image ) in your page.
In your site we use it to display the Read in English text.
In your site the tippy link has to be clicked to display ( the hover function does not
work on phones and tablets and has therefor been disabled)
If you want to add a Read in English button to your page or post, you need to use the
tippy shortcode.
First write your text in Irish and English.
Make sure you have at least 2 blank lines separating the two.
Leave the Irish text as is.
On the line before your English text type:
[tippy title=”Read in English” showtitle=”false”] make sure to include all
punctuation.
At the end of your english text type : [/tippy] again make sure to include all
punctuation.
Example:
An bhfuil ár ngrianghraifeanna is deanaí feicthe agat?
[tippy title=”Read in English” showtitle=”false”]
Did you see our latest pictures?
[/tippy]
will look like this on the page:
2. using shortcodes to customise a vimeo video player
To resize a vimeo player on any page, you use an embed shortcode.
Don't forget this is only for when you insert a video with a vimeo link, not when you
use the wonderplugin gallery.
Go to the page where you want to size your vimeo. You have already copied and
pasted the vimeo link as described in chapter7.
You resize the player by choosing the height and width in pixels (px)
Write the following shortcode on eihter side of your link. Make sure to have the
syntax exactley right or it will not work
[embed height="350px" width="350px"]
52
http://vimeo.com/89612850 [/embed]
This will give you a video player on your page with the dimensions of 350px by
350px
3. using shortcodes to align and order text and images in your posts or
pages
The text editor in the website pages and posts is a html editor. ( all webpages are
written in html)
It often does not behave the same as a wordprocessor when you are trying to achieve
a set layout. Spaces and blank lines in the text editor are often ignored by the
browser. To be able to put items in colums or line them up nicely you will need to
use shortcode
The shortcode devided the page up in columns.
The shortcode has two parts and the image or text you want to display will go
inbetween those two parts.
e.g. To line up image A and image B in one row and image C and image D
underneath them, you would use the following shortcode
[one_half] Image A [/one_half] [one_half_last]Image B[/one_half_last]
[one_half] Image C [/one_half] [one_half_last]Image D[/one_half_last]
Two have 2 lines of 3 columns you use the following
[one_third]Image A[/one_third][one_third]Image B[/one_third]
[one_third_last]Image C[one_third_last]
[one_third]Image D[/one_third][one_third]Image E[/one_third]
[one_third_last]Image F[one_third_last]
You can devide the page in as many columns as you want. Just add last to the last
item.
You can put text or images in the shortcode
A good example is the our staff page
Example:
Type this shortcode on your page:
53
This is what you will see on the website
5. Setting up new newsletters and emailing them to subscribers
To set up a new mailing list and email it to subscribers, you will have to
follow several steps. Follow these steps in the right order
To set up a new mailing list and email it to subscribers, you will have to follow several steps.
Follow the steps in the right order.
Please watch the tutorial videos on the help page. In this videos you will be guided through
an example of setting up new homework pages to be emailed.
Please use this manual and the videos together.
If you need help or if you want Katrien to set it up for you, please contact Katrien at
[email protected].
54
Steps to follow:
1. decide on what you want to email. Is this a post category that already exists? If not
set up a new post category. To do this, read the section on setting up a new post
category under Adding a new post e.g. School Notes, In the media, Newsletter on
page 7 of this manual.
2. Do you want the post to also be visible on the website? E.g. Do you want people to
see the homework sheets on the website. If so you need to add the category to the
menu. Please read the section on adding a new post category to the menu under
chapter 17: More advanced.
3. Decide on who you want to receive your emails. Is this an existing list? E.g. is it rang
2?If it is not an existing list, you need to make a new subscribers list. Please watch
the tutorial video on the help page titled: adding a new subscribers list to the mail
poet
4. You will now need to make a new subscription form. You will need to add the form
to a page or a widget. Please watch the tutorial video : making a new subscription
form for mailpoet
5. You will now need to design a new newsletter . The best way to do this is to copy an
existing newsletter and adapt it. This way you will be sure all the settings work for
your website. Please watch the tutorial video: making a new newsletter for
mailpoet
6. You are now set to go
7. Try the newsletter yourself first before you tell people about it.
8. In the mailpoet you will also find a tab settings please do not touch anything in this
tab. A lot of work went into setting the mailpoet up to work optimally for your
website. So please leave the settings as they are.
55