System Background

The WordPress Content Management System (CMS) follows this hierarchy

• HTML — a language to format your text — client side processing
• CSS — A language that holds instructions — clientside processing
• JavaScript — “makes things move” — client side processing
• PHP — a language that queries the database then pulls content into your page — server side processing
• MYSQL Database — all text data (content within your site) is stored here

---

The Avada Theme

This site uses the Avada theme. It was chosen for its features, wide scale use (633,214 and counting), helpful community and excellent support.

Avada documentation here.

Two components to the theme

• Avada – the template pages.
• Avada builder (sometimes referred to theme fusion builder) – the prebuilt formatting gadgets.

---

Logging Into your CMS

http://northcountryschool.com/wp-admin
username
password

---

Dashboard Overview

Avada – The Theme customization settings.
Posts – All blog posts are managed here.
Media – All images and pdf’s are stored here
Pages – All static pages are managed (not blog or people pages)
People – All employees, staff and administrators
Appearance – Widget and menu management
Plugins – Software (modules) that add functionality to your site
Users – Manage the people that have access to your site
Settings – access to site backup and recovery (UpDraftPlus Backups)
Slider Revolution – Manage slideshows on the home page

---

Page Builder Overview

---

Creating a Page

the easiest way to make a new page is to duplicate an existing one.

1) find a page in the site that is similar to the one you want to create. Preferably in the section you want to add it in.
2) duplicate that page.
— dashboard – pages – find the page you want to duplicate
3) click Duplicate this

---

Edit the Duplicated Page

1) change the page title
2) change the permalink (Important!!!)
3) edit the content
4) save your work (publish button)
5) review your work

---

Adding the Page to the Menus

If you want the public to see the page you created you’ll need to add it to the navigation elements (menus).

dashboard — appearance — menus.

There are a lot of menus for the site.

Main Menu — the main menu when in full screen mode
Mobile — the main menu when it’s in mobile mode.
side-giving — side navigation for the giving section
side-sig-progs — side navigation for the signature programs section
side-about — side navigation for the about section
side-academics — side navigation for the academics section
side-admissions — side navigation for the admissions section
side-alumni — side navigation for the admissions section
side-blog — side navigation for the blog section
side-families — side navigation for the families section
side-why-ncs — side navigation for the Why ncs section
top menu — the top menu with the parents alumni…

---

Creating a New Blog entry

1) log in and navigate to the dashboard.
2) click posts
3) Duplicate the newest page with the same category (in the news or this week at NCS)
4) click edit the open page you just created (it should have the page name then –Draft)
5) change the title
6) IMPORTANT! change the permalink – click edit then alter it. make sure you don’t use capital letters or spaces (for spaces use a hyphen instead)
7) edit the copy and add your images.
8) under the publish section (top right) — click edit after Publish immediately. — this tells the system where you place your article in the blog
9) change the date to the current date
10) add the featured image. this is the thumb nail for the index page
11) click publish
12) review your work

---

Adding a New Employee

1) log in and navigate to the dashboard.
2) click People
3) Duplicate a page (faculty, admin, staff)
4) click edit the open page you just created (it should have the page name then –Draft)
5) change the title to the new persons name
6) IMPORTANT! change the permalink – click edit then alter it. Add the persons last name hyphen first name allen-chris — all lowercase no spaces. This determines the placement in the index page.
7) edit the copy and add your images.
8) make sure you check the correct category (staff, administrator or faculty
9) add the featured image.
10) update the information under excerpt — this is what pops up under their name in the index page.
8) click update.
9) review your work.

---

Users

This area lets you delete users, add users, and change access privileges.

Change access privileges

Users — click the member you want to alter

Role – (very Important)

Administrator: Full access to the content management system (limit these for security)
themes, plugins, widgets, core files, all content.

Editor: full access to the content but not the themes, plugins, or widgets

Author: Publish edit or delete their own posts, but not others content.

Contributor: can edit their content but it needs to be approved.

Subscriber: Used if you have sections that people need to log on to view, or post comments.

Create new user

Dashboard — Users

click “add new”

fill out required fields

Save your work.

---

Working With Images

For best results it’s recommended that you process all images before you bring them into the site. Photoshop is not necessary but highly recommended. Your pages will load faster and you’ll get better search engine rankings.

• Crop
• Resize
• Color correction
• Optimize – make it web friendly

Image size recommendations. Try and keep this consistent so the site continues to look professional and polished. 

For more information about the optimization process see the “photoshop howto.doc”

Full browser
1920 by 1280 pixels
used in the home page slideshows

Full content area (without sidebar)

1200 pixels wide
controlled through slideshow

Full content area (with sidebar)
870 pixels wide

Featured image for blog
870 by 580 pixels

People — main image on their page
900 by 600 pixels

People — featured image (thumb)
700 x 700 px

---

Slideshows

Slider revolution was used for the 2 home page slideshows. It’s not the easiest environment to work in, but it was the only option for getting the overlay colors consistent with the original design.

The plugin is well documented here.

If you need to edit these I would advise to duplicate the slideshow before you edit. That will give you a backup.

Dashboard — Slider Revolution

---

Backing up the site

THIS SECTION IS THE MOST IMPORTANT ADVISE I CAN GIVE YOU

Recommended for every major content update.
Required for every plugin and system update.

Dashboard — Settings – updraftPlus Backup

Click “Backup Now”

Wait until it tells you it’s done.

---

HTML

A great resource to learn and and practice HTML: https://www.w3schools.com/

The Basic HTML you should know

---

---

Using CSS (Cascading Style Sheets)

Classes are used to call customized styles (font face, size color…). You won’t need to write CSS, but you may need to call the classes.

Classes can be called up within the Avada builder or directly in the code.

CMS example:

Code example:

---

Fonts

Header 1 Museo500 30px

Header 2 MercuryBook 24px

Header 3 MercuryMed 22 px

Header 4 Museo900 18px

Header 5

Body Copy

Museo500

---

Color Palette

#00355a

#6399a5

#12463c

#bac7ab

#c15a0f

#6e9651

#e0e1e1 used for background

#383838 content font color

#adbeca border color