WordPress Manual

Technology and Design Training guideJMU Technology and DesignWebsite training guide | Madison Union 205

Table of ContentsWebsite Project Process......................................................................5What is WordPress?...........................................................................6Accessing Your Account.....................................................................6Account Set Up.........................................................................................................................................6Account Login............................................................................................................................................6Forgot My Password................................................................................................................................6

Text Formatting................................................................................7What You See Is What You Get (WYSIWYG) Formatter....................................................................7

Styling Dropdown.................................................................................................................................7Bold........................................................................................................................................................7Italics......................................................................................................................................................7Unordered Bullets................................................................................................................................7Ordered Bullets....................................................................................................................................7Blockquote............................................................................................................................................7Alignment..............................................................................................................................................7Add Link.................................................................................................................................................7Remove Link.........................................................................................................................................7Read More Tag....................................................................................................................................7Toolbar Toggle.....................................................................................................................................7Insert from TablePress........................................................................................................................7Distraction Free Writing Mode............................................................................................................7

What are Categories and Tags...............................................................7Categories.................................................................................................................................................7Tags............................................................................................................................................................7

Images, Files, and Media.....................................................................7Media.....................................................................................................................................................7Allowed File Extensions......................................................................................................................8File Naming Standards........................................................................................................................8Uploading Images, Files, and Media.................................................................................................8Adding images to a Post or Page..........................................................................................................12How to view Uploaded Media...............................................................................................................14

508 Requirements for uploaded material............................................................................................14Alt Text................................................................................................................................................14Title Text..............................................................................................................................................14

Image Specifications..............................................................................................................................14What are Featured Images?..................................................................................................................14

Widgets........................................................................................17What is a Widget?...................................................................................................................................17How to Use Widgets?.............................................................................................................................17

Edit Widgets........................................................................................................................................17Rearrange Widgets............................................................................................................................17

2

Replace Widgets................................................................................................................................17

Broadcasting..................................................................................17What is Broadcasting?...........................................................................................................................17How do I use Broadcasting?.................................................................................................................17

Features........................................................................................17Navigation................................................................................................................................................17Sliders......................................................................................................................................................17

Soliloquy Slider...................................................................................................................................17Homepage Slider...............................................................................................................................17

Pages.......................................................................................................................................................17Create a Page....................................................................................................................................17Edit a Page..........................................................................................................................................17Make a Page Private.........................................................................................................................17Add Categories to a Page.................................................................................................................17Add Tags to a page............................................................................................................................17

Post...........................................................................................................................................................17Create a Post Edit a Post..................................................................................................................18Make a Post Private...........................................................................................................................18Add Categories to a Post..................................................................................................................18Add Tags to a Post............................................................................................................................18

Forms.......................................................................................................................................................18Creating a new form..........................................................................................................................18Edit a Form..........................................................................................................................................18Placing a form.....................................................................................................................................18Accessing entries...............................................................................................................................18Form Fields.........................................................................................................................................18

Tablepress...............................................................................................................................................18Creating a New Table........................................................................................................................18Edit a table .........................................................................................................................................23Add a table to a page/post................................................................................................................23

News/Events............................................................................................................................................25Staff Manager..........................................................................................................................................25

Adding and editing staff members...................................................................................................27Editing staff member groups.............................................................................................................27

Site Specific Features.......................................................................27University Unions/ Madison Union........................................................................................................27

Logo Manager....................................................................................................................................27Fraternity and Sorority Life....................................................................................................................27

Sorority and Fraternity Manager......................................................................................................27Student Activities and Involvement......................................................................................................27

Timed Content Rules Manager........................................................................................................27Dux Leadership.......................................................................................................................................27

Programs Manager............................................................................................................................27Leadership Resources Manager......................................................................................................27

Technology and Design.........................................................................................................................27Client Manager...................................................................................................................................27

3

Portfolio Manager...............................................................................................................................27Team Manager...................................................................................................................................27Blog Manager.....................................................................................................................................27

Lost and Found.......................................................................................................................................27Found Items Manager.......................................................................................................................27Lost Inquiries Manager......................................................................................................................27Identity Manager.................................................................................................................................27

University Program Board......................................................................................................................27FAQ Manager.....................................................................................................................................27UPB Movies Manager........................................................................................................................27

Publishing.....................................................................................27Publish Content.......................................................................................................................................27Unpublish Content..................................................................................................................................27

Live Site Vs. Dev Site........................................................................27What is 508 Compliance and why should I follow it....................................27Best Web Practices..........................................................................27Comments.....................................................................................28Approve Comments................................................................................................................................28Delete Comments...................................................................................................................................28Disable Comments.................................................................................................................................28

Further Website Help........................................................................28

4

Technology and Design Website Project Process

1) Brainstorming Session with TAD

2) Create/Modify Wireframes

3) Signoff on Wireframes and

Frequency of Meetings

4) Start Development

5) Meeting(s) to Review Development

Progress

6) Training

7) New Site Design Launch

Step 1: Members of Technology and Design will meet with you and talk about your current site. In this meeting, you will have the opportunity to address your concerns about the migration and brainstorm with us. This will include: What you like, what you would like to change, and any dreams you have for your site in the future.

Step 2: Technology and Design will share wireframes to show you how your site will appear. We will hear your concerns and will make modifications to the wireframes until they meet your specifications and fit the requirements we must abide by for marketing purposes.

Step 3: Once your department feels comfortable with the wireframe visuals of your new site, you will be asked to approve the wireframes so that development can be started.

Step 4: We will create a development instance of our site to implement the wireframes that your department approved in step 3.

Step 5: At our first development review meeting we will provide a development link to your new site that will allow you to follow Technology and Design’s progress on your site changes. This link will also allow you to come to our following review meetings with concerns that need to be addressed. Once all development has been completed we will have a final review meeting to go through the site together and verify that all issues have been resolved.

Step 6: Technology and Design will schedule a meeting with all content managers for your department and do a thorough training. In this meeting, we will address each feature and how to manage them with the new design as well as best web practices that your department should follow.

Step 7: Technology and Design will work with you to schedule a time to launch your new site design.

5

WordPress Training ManualWhat is WordPress?

WordPress is the open source content management system that TAD currently uses to host all University Unions Websites. WordPress is built to be a blogging system but has been modified over the years to allow people to build full websites on it.

Open Source Software (OSS): Software the is made available to users by creating and modifying the code in a community setting. Most Open Source software is free which allows many people to use it without a financial burden.

Accessing Your Account

Account Set Up

In order to receive a WordPress account, you will need to contact Technology and Design. All accounts will be granted upon the completion of a training session with Technology and Design staff. All accounts will be setup using your JMU employee E-ID and a password that you create at training. This password is separate from your E-id password that you use for JMU systems (MyMadison, email, etc.)

Account Login

To login to your website you will go to:

info.jmu.edu/YOUR-SITE-URL/wp-admin

You can only login to your website when you are on JMU Campus or connected to JMU Internet.

Forgot My Password

If you forget your password you can reset it at info.jmu.edu/YOUR-SITE-URL/wp-admin by clicking on “Lost your password?” below the login buttons. This will send an email to your JMU email account where you will be walked through how to change your password.

Note: Technology and Design staff do not have the ability to reset your password for you.

6

Text FormattingWhat You See Is What You Get (WYSIWYG) Formatter Styling DropdownBoldItalicsUnordered BulletsOrdered BulletsBlockquoteAlignmentAdd LinkRemove LinkRead More TagToolbar ToggleInsert from TablePressDistraction Free Writing Mode

What are Categories and TagsCategories

Categories are how our posts are distributed and seen on University Unions sites. They are located in the lower right hand side of the post and page creation. These are checkboxes that allow for content to be sent to fellow University Unions sites.

For example, if you are looking to send a post to the Madison Union website, you only check the Madison Union box and low and it will show up on their site.

Note: Even though you have the ability to add categories to have content appear on other people’s sites it is important that you first ask permission before tagging another group.

Tags

Images, Files, and MediaMediaThe Media Library is a good place to store images, files and so much more. Any files that needs to be added to the site should be uploaded into the Media Library of the site.

Allowed File ExtensionsFile Naming Standards

Lowercase letters Hyphens instead of spaces or underscores

7

Readable and appropriate namesUploading Images, Files, and MediaTo upload images to the Library simply follow the below steps.

First on the dashboard located in the “Media” tab on the upper left hand side.

Click on “Media”, a drop-down menu will appear with the two options of “Library” and “Add New”.

Click “Add New” and a screen will open up with the options to drop images or files in by dragging them off your desktop, or to click select files and grab images/files from your folders/hard drive/usb.

8

For this example, we used the select file option. So a drop-down appears with your files to chose your media to upload.

Once uploaded your image will appear in a thin bar on the bottom of the page. Click the edit link on the right-hand side to open up options for your file.

9

This will open up a new tab with many different editing options. At the bottom left hand corner of your file there is another “Edit Image” button. Click it the button, do it push the button.

A dimension editor will be in the upper right-hand corner, be sure to check where you are planning on displaying the image (sliders, featured image, inside a post, thumbnails, ect.) to figure out what size it needs to be. Note: if at all possible resize the image before uploading to save on server space and to help make the image load faster.

At the bottom of the page fillable boxes called, Caption, Alt-text, and Description. Fill out all of these fields.

10

The caption will provide context for your viewers and the Alternative text (Alt-text) boxes will provide necessary information for users with accessibility. The Alt-text also gives the site text incase there is a problem displaying your image/file. Note: By law every image/file needs to have an Alternative Text assigned to prevent the University being sued.

Once finished with everything scroll up to the upper right-hand corner and click “Update”.

11

The image or file will now be located in the Media Library, accessible through the “Media” tab on the left-hand side of your WordPress screen.

Adding images to a Post or Page Open a new post or edit an existing post and click the “Add Media” button.

12

The library will open up in a tabbed format. Select your photo and your Caption and Alt-text will appear in the side bar, incase you need to make changes to your text.

Note: If you have not uploaded your image you can click on “Upload Files” and upload you file/image here. However TAD encourages everyone to upload their media files Prior to trying to add them to a post or page.

Once placed into your post, the caption should show up automatically under your text.

13

How to view Uploaded Media508 Requirements for uploaded materialAlt TextTitle Text

Image SpecificationsWhat are Featured Images?

Featured Images are essential to keeping the aesthetic our websites consistent and visually appealing. The “Feature Image” will be displayed on the website above the article title.

Create a new post or edit an existing post

14

Scroll down to the last white box entitled, “Featured Image”. Click the “Set featured image” link.

Upload an image or select and existing image on your site Once selected click the blue “Set feature image” button in bottom right hand

corner.

15

Scroll back to the top of the page and click “Publish” or “Update”. Now once you publish your post your featured image will appear!

16

WidgetsWhat is a Widget?How to Use Widgets?Edit WidgetsRearrange WidgetsReplace Widgets

BroadcastingWhat is Broadcasting?How do I use Broadcasting?

FeaturesNavigationSlidersSoliloquy SliderCreate SliderChange SliderHomepage Slider

Pages A page creates a new section on the site. Pages are things that need to be linked, and access points through drop down menus, higher navigation and links. These are platforms for hosting content.

Create a Page Edit a PageMake a Page Private Add Categories to a Page Add Tags to a page

Post A post is content created and displayed onto the page hosts. These are things like blog updates, photographs, and links to helpful information!

17

Create a Post Edit a Post Make a Post Private Add Categories to a Post Add Tags to a Post

FormsCreating a new form Edit a FormPlacing a formAccessing entries Form Fields

Tablepress

Tablepress is used to create tables for content. Tables are good for prices, contact information, etc.

Creating a New Table Scroll all the way down the dashboard until you reach the “TablePress” tab on

the left-hand side bar.

Hover over the tab and a menu will appear with many different action options. Select “Add New Table”.

18

This will open a new page where you will need to name, describe, and set the opening dimensions for your new table.

Table Name:Description: Rows: Columns:

19

Click “Add Table” located at the bottom left of the page.

20

This will open up the page where you will be able to Style the new table.

21

Using things like #rowspan#, #colspan#, image links and HTML coding you can maximize your table’s visual appeal, usability, and structure.

Rowspan:Colspan: Image Links:

Once the table is filled out with content, scroll down to the bottom of the page to further customize the visual aspects of your table.

Click the “Save Changes” button on the bottom left-hand side of your page and now you’re almost finished!

22

Edit a table Hover over the “TablePress” tab on the left sidebar and click “All Tables” Find your table in the list and click on the name to edit the table.

Add a table to a page/post Hover over the “TablePress” tab on the left sidebar and click “All Tables” Find your table in the list and click on the name to edit the table.

23

Scroll to the top of your page. On the right there will be a line that says, “Shortcode” and then a rectangle with a table id number.

Copy that shortcode.

Edit a page/post that you want the table to live on Paste in the shortcode where ever it needs to be displayed within the page

content.

24

Once set where the table needs to be, click “Update” on the upper-right corner to update your page with the new code.

News/EventsStaff Manager

o The TAD staff page is located here: http://info.jmu.edu/tad/team/. We call it the “Team” page. You will be responsible for keeping this page up-to-date and

25

consistent. A typical staff member displays like this:

o With the photo of the staff member, Stuart in this case, being the link to his bio and description.

o Here is where each staff member is given a short description under their image to be able to use when crediting them with work on our different client’s sites as well as our own, and a bio written by the writing team during training week. These will get updated yearly or even semester-ly depending on new hires, graduating seniors or changing majors/minors of the staff.

26

Adding and editing staff members Editing staff member groups

Site Specific FeaturesUniversity Unions/ Madison UnionLogo Manager

Fraternity and Sorority LifeSorority and Fraternity Manager

Student Activities and InvolvementTimed Content Rules Manager

Dux Leadership Programs ManagerLeadership Resources Manager

Technology and DesignClient ManagerPortfolio ManagerTeam ManagerBlog Manager

Lost and Found Found Items ManagerLost Inquiries ManagerIdentity Manager

University Program BoardFAQ Manager UPB Movies Manager

Publishing Publish ContentUnpublish Content

Live Site Vs. Dev Site

What is 508 Compliance and why should I follow it

Best Web Practices

Comments

27

Approve CommentsDelete CommentsDisable Comments

Further Website Help

28