# SGA Site Documentation
_Author: Harrison Lingren_
_Last revised: 2017-06-11_
Hello! Welcome to the SGA website documentation. This will be your central resource for all information regarding how the SGA website ([sga.butler.edu](https://sga.butler.edu)) is built. If you have any additional questions or notice something that isn't listed here, please see the [contacts](#web-team-contacts) section below.
## Table of Contents
- [SGA Website](#sga-website)
- [The Dashboard](#the-dashboard)
- [Logging In](#logging-in)
- [Site Components](#site-components1)
- [Style / CSS](#site-styling--css)
- [Butler App](#butler-app-clearscholar)
- [Logging In](#logging-in1)
- [Web Team Contacts](#web-team-contacts)
# SGA Website
## Wordpress Dashboard
### The Dashboard
The Dashboard is where all site administration takes place. On the left sidebar of the dashboard, you will see links to modify each of the [site components](#site-components) and the styling, user, and plugin settings. To view the site dashboard, you must be logged in to the site.
#### Logging In
Log into the SGA website at [sga.butler.edu/login](https://sga.butler.edu/login) using your Butler username and password. You will be redirected to the admin dashboard, where you can make modifications to the site as needed.
To return to the regular site, click the "Butler SGA" link in the top-left corner of the dashboard.
##### Adding users
You can add administrators to the site by selecting the "Users" option on the dashboard sidebar, and then selecting the "Add new" link. When adding a new user to the site, it is important to use the Butler email and username.
##### Deleting users
You can delete site admins by going through the "Users" section and clicking the "Delete" link underneath the username of the user you wish to remove.
_NOTE: Be sure to leave both `zskidmor` and `rkrueger` as users as their accounts are necessary for maintaining specific site configuration details. [Contact me](http://lingren.co/contact) if you have any questions about this._
## Site Components
Below are descriptions of the core Wordpress components and how we have been using them in the SGA site.
Pages are the core building blocks of the site. Editing pages can be done through the [dashboard](#the-dashboard) by selecting the "Pages" link in the sidebar.
When viewing all of the pages in the dashboard, you can sort by author, published date, or title.
All of the info contained on the site is split into pages which are separated into a heirarchal design based on category. In the list, children pages (pages with a parent) are displayed with hyphens in front of the title like this:
Senate # Root parent sga.butler.edu/senate
- 2016-17 Senator Candidates # 1st child ../senate/candidates
-- CCOM Senators # 2nd child ../candidates/ccom
-- COE Senators # 2nd child ../candidates/coe
-- COPHS Senators # 2nd child ../candidates/cophs
- SGA Senators 2016-17 # 1st child ../senate/senators
This design exists to organize pages into categories which are reflected into the page URLs, as shown above. Be sure to keep the page content in mind when publishing new pages so that the page URL makes the most sense.
#### Adding a new page
To add a new page, click into the "Pages" section of the dashboard and then click the "Add new" button at the top of the page.
Once you're in the page editor view, you can begin to insert your content into the space underneath the formatting tools.
#### Editing pages
Editing pages is very similar to adding a new page. There are a couple ways to edit a page:
1. If you are logged in, there should be an "Edit Page" button at the top bar of the page when you are viewing it.
2. You can find a page to edit by searching the "Pages" section of the dashboard and then clicking the "Edit" button on the page listing.
To embed media within a page, click the "Add media" button above the formatting bar. See the [media](#media) section for more info on uploading media to the site.
To edit the URL "slug" of a page, find the "Permalink" section under the title bar of the page and click the "Edit" button next to the URL. Whatever you type here will be appended to the end of the URL for the page's parent page, if it has one.
##### Page editing modes
The two tabs at the top-right of the editor, "Visual" and "Text", let you use different editing modes. The Visual tab allows you to type and edit your content similar to how one would type a Microsoft Word document.
If you're comfortable with HTML, you can use the Text editor to edit in markup-style where you can use all common HTML tags like `<i> <b> <a>`, etc. This is useful if you want to format things more precisely, but for most uses, I'd recommend sticking with the Visual editor.
#### External Links
In addition to regular site pages, one of the plugins we have installed on the site allows you to use the SGA website as a URL shortener. This is useful if there's a signup page or some external page that the social media team would like to send out.
For example, if I have a Google Forms link like `https://goo.gl/forms/abcdefg`, I could make a new SGA webpage: `sga.butler.edu/fun-signup` that redirects to my form.
To create an external link, go and create a new page as normal. At the bottom of the edit page view, there is an option listed as "Page Links To", where you can select "A custom URL" to input a URL for this page to redirect to.
Since the conversion to Wordpress 2 years ago, we have opted to used [Pages](#pages) instead of posts. Since this isn't really a blog site, it makes more sense as pages can have custom URLs that are much easier to share through communications.
Uploading images to the site is extremely common - often the social media team will want you to update the slider on the home page, or add a page for an event. During elections season, we typically host information about each of the candidates on the site, along with their pictures.
To upload media, click on the "Media" tab in the dashboard sidebar, and then click "Add new". You can upload images, PDFs, or any other media that you want to link to from the site.
Adding media to a page is done through the page editor workflow. To embed media within a page, click the "Add media" button above the formatting bar.
Plugins extend the functionality of Wordpress-based sites, and are used in the SGA site in order to provide better support for forms and other features (like the slider on the homepage).
#### Caldera Forms
The SGA site uses **Caldera forms** to take input from external visitors to the site, due to its flexibility and large set of features. Information on how to fully manage the settings of this plugin can be found on [its documentation site](https://calderaforms.com/getting-started/).
Below are a list of forms currently featured on the SGA site built using Caldera:
- [Design request](https://sga.butler.edu/marcomm/design-request/)
- This form submits to the SGA slack for the MarCom graphic design team via a webhook.
- [Photographer request](https://sga.butler.edu/?page_id=78)
- This form submits to the SGA slack for the MarCom photographers team via a webhook.
- [Social media request](https://sga.butler.edu/?page_id=76)
- This form submits to the SGA slack for the MarCom social media team via a webhook.
- [The Carillon request](https://sga.butler.edu/thecarillon/submit)
- This form submits to the SGA slack for the MarCom writing team via a webhook.
- [Contact Us](https://sga.butler.edu/contact-us/)
- This form sends responses to firstname.lastname@example.org and the [current MarCom lead](mailto:email@example.com).
- [Slack Auto-Signup](https://sga.butler.edu/slack/signup/)
- This form is _slightly_ different. This form is used to create new accounts for the SGA slack team, and is a little more complicated than the others. Whereas the others forward responses to channels on the Slack, this one uses a custom integration setup on Slack's backend to create users with an API token. If for some reason this breaks or needs to be fixed, contact [one of the team administrators](https://butlersga.slack.com/team) for assistance
_For information on how Slack webhooks work, [see this documentation](https://api.slack.com/incoming-webhooks)._
#### Homepage Slider (Meta Slider Pro)
The slider on the homepage is managed through a plug-in called [Meta Slider Pro](https://sga.butler.edu/wp-admin/admin.php?page=metaslider). On its settings page, you can add, remove, or edit the current slides, and you can also change settings like transitions, speed, etc.
##### Adding & Editing slides
Under the Front Page tab (along the top), click the "Add slide" button on the top-right side of the Slides pane. This will bring up a modal window that will allow you to either choose an existing [media file](#media), or upload a new one. Make sure any new images have a resolution of **1600x550** to display correctly.
Once you have chosen a media file, you can rearrange the order that the slides appear by dragging the slides up and down in the list.
##### Removing slides
To remove a slide from the slider, in the list of slides on the Meta Slider Pro settings page, hover over the slide you wish to remove and click the red trash can icon in the top-left corner.
Make sure that slides are removed in a timely fashion to keep the site up-to-date! If a slide is promoting an event that has already happened, it shouldn't be up on the SGA site for more than a day after the event.
## Site Styling / CSS
The SGA website uses a cutom site built by [Ryan Krueger](#web-team-contacts) in 2016 that uses [Sass](http://sass-lang.com/) to compile. The source code for the theme can be found on [Butler's GitHub](https://github.butler.edu/rkrueger/butler-sga) (log in with your Butler username & password).
In the event that modifications need to be made to the existing theme, _be sure_ to read up on how to compile SASS to CSS so that you can build the Wordpress theme into the correct format. Wordpress can be very picky up directory structure, so it is important to be careful and make backups before making any major changes.
We use Google Analytics to track the visitor data for the site. This is useful if SGA leadership has any questions on how popular certain pages were, or how social media posts are reaching students.
_For questions regarding accessing the analytics data, reach out to the [current web team lead](#web-team-contacts)._
# Butler App (ClearScholar)
Starting in 2016, ClearScholar launced the Butler App as a new way for Butler to communicate with students and send information about events. Be sure to download the app for your device below:
- [Butler App - iOS](https://itunes.apple.com/us/app/butler-university-app/id1138442539?mt=8)
- [Butler App - Android](https://play.google.com/store/apps/details?id=com.clearscholar.butler2)
Along with its social media presence, the SGA MarCom board also promotes SGA events & info on the Butler App. To do this, certain web team members are given access to the Butler App's admin portal, where we can publish event information and post announcements.
## Logging In
Once you have been given access, you can login to the admin portal for the Butler app at [butler.clearscholar.com](https://butler.clearscholar.com) using your Butler Google account.
There are 2 types of posts that SGA can use in the app to send out information: Events, and Announcements.
Events can be posted by clicking the "Events" tab at the top of the admin portal, and then clicking the Add (+) icon in the top-right.
The event editor page allows you to preview how your listing will appear before scheduling or publishing it. If the graphics team has an image for the event, you can upload it here and it will show up in the app. For best appearance, use an image with a scale of 2:1 (e.g. 1200x600, 800x400, etc).
On the add event page, you can choose a category for the event, and then input the event title below. Make sure you get any relevant details for the event from the SGA team that requested you to post it, and then you can type those details in where it says "Event body".
# Web Team Contacts
_SGA web team lead: [CJ Koch](mailto:firstname.lastname@example.org)
Documentation author: [Harrison Lingren](https://lingren.co)
Wordpress theme author: [Ryan Krueger](https://ryankrueger.xyz/)_