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 </br> <small> history</small> 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 </br> <small> history</small> 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: <span style=”color:yellow;”>No school today! </span> 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
© Copyright 2024