TEST PAGE FOR STAFF

Hello. This is a space where you can test out WordPress functions without worrying about making changes to the actual website. That’s because this page is hidden. To begin editing this page, you will first need to log in to WordPress. You can log in here.

Once you’re logged in, you should see a black bar at the top of this page. In that bar, you should see the words “Edit Page.” Click on “Edit Page” to begin editing the website. If you are in the “Edit Page” workspace, your screen should look like this:

Now that you’ve clicked on the “Edit Page” button and are in the editing environment, I have some tasks for you. I’ve put together a list of actions you can take right here on this site to familiarize yourself with WordPress. As you work your way through each step, I would recommend hitting the “Preview Changes” button (pictured below) or clicking on the “View Page” link on the black bar to see your edits.

After you’ve previewed your edits, return to the editing environment to continue working.

Please do not click on the “Update” button. Doing so will make permanent changes to this workspace.

 

[You must be in there editing workspace to complete the following tasks.]

 

1. Add an image to this page using the “Add Media” button above.

  • Click in the white space below this bullet list. (The image will be inserted wherever your cursor is currently located.)
  • Click on the “Add Media” button above. This will bring up a pop-up menu that reads “Insert Media” at the top. Beneath those words, there will be a tabbed menu that reads “Upload Files” and “Media Library.”
  • Click on “Media Library” and choose an image from the database.
  • Once you have chosen an image, click on the image and then click on the “Insert into page” button in the lower right corner of the window. The image should appear below this sentence.

 

 

 

 

2. Round the corners of the image above.

  • Once you have placed the image in this workspace,  you can round the corners of the photo by clicking on the image once. A small options bar should pop up above or below the photo that displays a row of icons.
  • Click on the pencil icon to edit the image. Once you click on the pencil, a new window pops up.
  • In that window, you should see the image on the right and a bunch of image options on the left (pictured below). Among those options, you will see an empty field that reads “Image CSS Class.”
  • In that empty field, type the word “rounded.” This will round the corner of images and keep the site brand compliant.
  • Note: All photos in the editing environment will have sharp corners. The rounded corners only display in the actual website. You will have to click on the “Preview Changes” button to see if you rounded the corners.

3. Upload a PDF to the Media Library.

  • Click on the “Add Media” button again.
  • A new menu will pop up that reads “Insert Media” at the top.
  • Beneath those words, there will be a tabbed menu that reads “Upload Files” and “Media Library.”
  • Select “Upload Files” and drag a PDF from your computer into the box. The PDF will now be stored in the Media Library. This is how you upload things like schedules and newsletters. It is also how you upload photos.

 

4. Add that PDF to the website.

  • Beneath this paragraph, you should see the words “CLICK HERE FOR PDF” in big letters.
  • Highlight those words and then press COMMAND+K or CONTROL+K on your keyboard. This will bring up a small bar that should include a “Paste URL here” field, a blue arrow, and a gear icon.
  • Click on the gear icon to bring up “Link Options.”
  • In this new menu that pops up, there will be a field that reads “Search in.” Click on the drop down menu to make it read “Search in Attachments,” which will bring up a list of all the PDFs that have been uploaded. Upload the PDF from the previous step.

CLICK HERE FOR PDF

 

5. Check out the Style Sheet.

The most important file in this entire website is a page titled “Template: Style Sheet.” This is effectively your cheat sheet to the website. It lists all the short code available to us, and you can us this short code to build your own pages. But where do you find the Style Sheet?

  • On the right side of this workspace, you should see a black, vertical column. Look for the word “Pages” and click on it.
  • In the upper right hand corner, you can search every page on this website. Type “style sheet” into this field.
  • You should see a page that’s called “Template: Style Sheet” with a bunch of links beneath it. Click on the word “edit.”
  • While you are previewing this page, click on the “Preview Changes” or “View Page” button to see how this page looks in the back end and how it would look to the public.
  • Never click on the “Update” button when accessing the Style Sheet!
  • You can copy and paste short code from the Style Sheet into Microsoft Word or into another WordPress workspace to create your own pages. I’ve copy and pasted some of that short code into the space below so you can see how short code works.

Button Text Goes Here

A “Button Link” is a visual way to send the user around our site or to another page. Buttons are created using a series of short code. The first part of the code is the link, the second part of the code – the label – features the words that will be placed in the center of the button, the target=”_blank” is a piece of code that opens the link in a new tab, and the color prompt changes the color of the button (there are five colors to choose from).

 

Tabbed menus are a great way to break up big blocks of information. However, the short code is a bit tricky. That’s because you need to make sure the “tabs titles” and the “tab id” labels are exactly the same.

In the back end of the site (the WordPress workspace), note how this tab is titled “This is a tabbed list” and the first tabs title is also called “This is a tabbed list.” If these two are not the same, the whole thing will not function properly.

Here is Tab 2.

Here is Tag 3. Note how, in the back end of the site, you must include a [ /tabs ] prompt to close off the short code.

 

Click on this accordion

Accordions are another great way to break up large blocks of information. Check out the code in the back end to see how it works.