Learning Commons:Student Orientation/Working With Content/Creating a Page/Creating the Page

From UBC Wiki

Pages are static and aren’t listed by date, or categorized by tags. We use pages to house important content that we want to be permanently accessible. They are generally longer, and have more complex design elements.

Spend some time learning basic HTML and CSS. HTML is the most important for content and CSS will dictate how your page is styled. As you get more comfortable, you can start using things like shortcodes and Javascript.

Your Page Creation Checklist

Task/Consideration yes no problem/issue
Have a followed a consistent format to other pages in this section?
Have I added related links (to UBC and other resources)?
Have I identified the relevant page author for this content (person resp. for content)?
Have I set the parent page? (For example, if the page is part of Tutoring&Studying, you will tick Tutoring&Studying as a parent page)
Have I checked to see if all elements are there on the page as they should be?
Have you proofread or had someone spell check for you?
Have you identified and posted related question for social media channels (Twitter and Facebook)?
Have I properly attributed the necessary images/resources?

Resources

  • Check out the WordPress site for tutorials or help with any of the basics
  • If you want to learn HTML or CSS, Code Academy walks you through lessons in a fun way
  • For an explanation of column shortcodes, check out the UBC Wiki
  • For help and explanations for how to do stuff on the Learning Commons Website
  • For support and help working within UBC’s theme, check out the UBC Wiki documentation on it

Using Shortcodes

UBC has created shortcodes that can be used on all of its websites. It makes creating many of our design elements much easier. The two main shortcodes we use are columns and accordions.

Saving and Viewing Pages as Unpublished Drafts

When a page (or post) is in progress and you wish to continue at a later time, click on ‘Save Draft’ under “Publish” on the right-hand side. To view a draft page, click on the ‘Preview’ button.’

Saving it as a Draft ensures that all content and related information is preserved if you choose to log out. This also means that those only with access to the Learning Commons Dashboard will be able to see your work-in-progress.

This video demonstrates the process.

Javascript

While you don’t need to know how to write Javascript for this job, understanding how to use it is important. The only finicky thing to remember revolves around where to copy and paste Javascript into a page to ensure it works.

If you scroll down to the very bottom of a page, there will be a Custom Javascript box that has two tabs: “Custom CSS” and “Custom Javascript”. Open the “Custom Javascript” tab and paste your code into the box. It’s as simple as that.

The thing that often trips people up is that there is a Custom Fields box directly under the text-editing portion of the page, and there is a “Custom Javascript” box within the Custom Fields box. Any code entered there will be wiped once you update the page and your Javascript will not work. Be sure to scroll all the way down to the very bottom of the page. If you paste script into the lowest box on the page, it will automatically appear in the top box, and it won’t be wiped when you update the page.

If you’re looking for a guide on how to create buttons for the website using CSS and Javascript, look at this report on coding buttons