INFORMATION FOR
Getting Access | Logging In | Anatomy of a Folder | Editing a Page | Adding Content to a Page | Adding a New Folder | Uploading an Image/File | Uploading Multiple Files | Creating a Menu Link Item | Adding a Widget to a Page
If you are your department's web editor, we're sure you can't wait to get your website in tip-top shape! But operating the content management system (CMS) can be daunting. Never fear, we've put together a guide to assist you with completing tasks across your website. We hope you find this comprehensive, easy-to-follow process helpful—and have fun!
Watch Video
(Note: Approval from the department director or VP is needed to be given access to dotCMS. All content reflects official information of the University and should be consistent with university policies.)
To gain access to the CMS, visit wpunj.edu/help. When you get to the Help Request window, enter the following…
Request Type: WPUNJ Website (selecting this will generate a second drop down and the additional fields below.)[Second drop-down]: Content Management System (CMS) PermissionsRequest Detail: i.e. “I am the web editor for my department and need access to our website”[Additional field] Website or Department Name: Enter Details (Please include the specific website URL or dotCMS folder that you require access to.)Carbon Copy (Cc:):If requesting editing access, please CC an authorized approver (Dean, Chair, Director or other site owner) so they can reply to the ticket to confirm approval. Location: N/A for Request Type
Hit Save.
Someone from the IT department will reach out to notify you that your access has been granted or to seek further details if needed.
To access the CMS, visit wpunj.edu/admin (note: log in using a different browser from the wpunj.edu website to keep the editor separate from the live site). Sign in with your university credentials.
To make changes to the website, go inside the Website tab and then click Browser. The list of folders you have permission to access will appear in the window on the right side.
If you notice additional folders or believe that some are missing from your account, please submit another ticket describing the issue. A tech will adjust the folder permissions to get you started with editing your website!
To edit a specific page, you can go to the webpage in the same browser that you are logged in the CMS with.
You can also use the URL to locate a file. For example, to get to this webpage in the CMS: https://www.wpunj.edu/parents-and-family/index.html, go to the folder titled parents-and-family. And then inside that folder, go to the file named index.html. (Note: Any homepage inside a folder must be named "index.html".)
Before going inside any asset, let's review the structure of the folder interface. There are 5 columns: Name, Menu, Status, Mod. User and Mod. Date.
Name: identifies the title of an asset (and is accompanied by an icon that shows what type of asset it is). To view properties, either double- or right-click the item for more options.
Menu: displays the sort order number assigned to an asset that is showing on the main menu (orange menu on the live website). Sort Order refers to the rank an item occupies and can be reassigned inside the page properties. The numbers do not have to be in consecutive order, but the rank is dictated by smallest to largest number, with smaller number being closer to the top of the menu (including zero). Each asset can only be assigned one number, but several assets can have the same number. To control positioning, it is best to assign unique numbers to each item.
Status: can show two icons — an orange circle and a green circle with a white check inside. The orange means that the asset has been saved, while the green indicates the asset is published; and therefore, live on the site. If an asset has both the orange and green icon showing, that means it is live, but also has saved changes that have not been published to the live site yet.
Mod. User: refers to the last user that modified the asset.
Mod. Date: refers to the date the asset was last modified.
To edit a page, double-click the page asset under the Name column. (Note: A page asset icon shows a sheet of paper with a corner fold and lines on it.)
Once inside, the Preview version of the webpage will display. This is the working version. You can make any adjustments to the page and view them in this state before publishing live to the site.
In the window above the webpage is a band, which gives the options to switch from Preview mode to Edit or Live mode. Choose Edit to make changes on the page.
Once in Edit, the page will automatically lock. This prevents others from altering the page while you are working. (Note: Be sure to unlock the page before leaving it if you are done editing.)
Next, go to where the update is needed and hover over the area. 3 icons will then appear. They each resemble an equal sign, a pencil and an X. To edit, select the pencil icon, which will bring you inside the properties.
When inside the properties, best practice is to first click Lock for Editing to the far right of the editor window. This will prevent others from altering the item while you are editing.
(Note: Included in the editing properties are text editors that can be viewed in three ways: WYSIWYG [What You See Is What You Get], Code or Plain Text. The easiest to work in is WYSIWYG. You can style text, add hyperlinks, insert images and more. However, the WYSIWYG editor does not support all code. For more experienced users, code mode can be used to create advanced styles for specific functions that are not included in the WYSIWYG presets.)
After the changes are made, the user can either Save or Save / Publish. When just saving, the content will not unlock automatically; so, there is a second step to hit the Release Lock button. After saving and publishing however, the content will unlock on its own.
The first icon which looks like an equal sign will allow you to move or rearrange a section. This is achieved by clicking and holding the icon and then dragging to the new location. (Note: There are restrictions for what type of content or widget can live in certain spaces.)
Finally, to remove an item from a page select the X icon. A prompt will appear to confirm this action that "can not be undone". Be aware that this action does not delete the item from the CMS. It just delinks it from the page.
The same item can be called back in to the page or a different page at another time using the title and the search function. (Note: Before removing an item from a page, be sure to know its title, in case it needs to be added back in later.)
Adding content to a page is similar to adding in a widget (covered later).
To add new content to the page, hit the purple + button in the desired area. On the drop-down, select Content.
On the next window, a list of content that already exists in the CMS will be displayed. Please be aware that these items are already in use on other pages. Do not select or alter these from the list since the changes that you make will reflect on those other pages.
So, to create a new piece of content hit the purple + a second time, located near the top right of that window.
The next drop-down will present many options for different types of content to create. Select the desired one and edit accordingly.
Very important after selecting any option, is the Internal Title that you will assign to it. This name should be reflective of the text that will be entered or describe what the content is.
For example: human resources contact page intro content. This naming convention will be useful if there is ever a need to search for a specific item that has been removed from a page. Some content may also have an area for a View Title that will display on the front-end of the website. This is optional for most cases and can be left blank.
When finished making changes, choose to either save, or save and publish.
To add an existing item to a page, hit the purple + button in the desired area. On the next window, there will be a left panel where you can search for the title and type of item. When the correct item is returned, select it from the Matching Results list to populate on your page.
To make all your changes live on the website, click the purple circle in the top right of the window. Select Save / Publish. You can also choose to only Save.
To add a new page, navigate to the folder where the page should live. In the top right of the window, there will be a purple button. Click there, and select Page on the drop-down menu.
When the prompt for Add HTML Page pops up, leave the default and hit the Select button.
Next you will be brought to the page properties window titled, Page Asset and it will open to the Content tab.
Inside the content tab, add the Title of the page first. This title should be thoughtful, clear and concise, being descriptive of what's on the page. It will display at the top of your webpage as the main header and inside the orange menu.
The next field displays the Host or Folder the current page was created in and should not be touched.
Adding the title will automatically generate a Url in the third field down. This section can be customized if the name is too long or to designate as the homepage, and thereby assign "index.html". The user should refrain from naming based on temporary events or adding dates in the URL. Attempts to alter the URL later will result in broken links, so timeproof names are recommended.
The Cache TTL default can be left as is.
Finally, in the Template section, you'll want to select a template that begins with "WP17". These are our most current designs.
The next tab over is Advance Properties. The first section is a checkbox for Show on Menu. This area should be checked if you want the item to be visible in the main orange menu.
The next area down, Sort Order, is where you would assign a number to control the position of the item on the main menu.
Friendly Name should mirror the title of the page, in addition to having " | William Paterson University " appended. This will be visible in the browser tab title and search engine results.
The SEO Description is a short 1 to 3 sentence paragraph that quickly introduces the page and its purpose. This is most needed for top-pages, and information dense pages. It is not always needed for lower level or pages just containing links. Most often, SEO Description can be drawn from the first paragraph of the page introduction, but please be careful to include only enough information to summarize page contents.
Hit Save to create the new page and begin editing in the next window.
To create a new folder, navigate to the top folder where it should live. Click the purple button in the top right. On the drop-down menu choose Folder.
Inside the folder properties, insert a Title (this will be visible on the menu if specified).
Next, the Name (URL) will auto-generate based on the title. This area can be customized. (Note: Any future change to the folder title will instantly update the URL name. This action will cause the links inside the folder to break. To avoid broken links, first copy the current URL name, then change the folder title [if needed] and last, paste back in the original URL name.)
Show on Menu will enable this item to be visible in the main orange menu, as well as create a submenu item effect.
(Note: A folder that is intended to show on the menu must have an index.html file to display properly.)
Lastly, hit the Save button.
Organization is very important when building a site. It is recommended to have an images folder and one for assets or documents. Depending on your website, there may be an alternate name or designation for these folders, but the important part is the organization.
(Note: Just as important is the optimization of the file. Large file sizes will slow down the website. As a recommendation, large format images should not exceed 100KB. Smaller sized images should be even less. Documents and other files should also be reduced as much as possible while retaining quality.)
When inside the images (or assets, etc.) folder, click the purple button at the top right and select Image or File.
Hit Select on the next window.
When the File Asset window pops up, hit the purple Choose File button. The uploader will connect to your computer and you can open the appropriate file.
Once uploaded, hit Save/Publish immediately. Exit out of the file asset window.
When inside the images or assets folder, click the purple button at the top right and select Multiple Files.
When the Upload file(s) window pops up, hit the Select File(s) to Upload button. The uploader will connect to your computer and enable you to choose several files.
Once uploaded, select Save/Publish on the drop-down below. Then hit the Execute button.
Exit out of the file asset window. If items do not upload immediately, try refreshing the screen. They may be indexing in the background.
Click the purple button in the top right and select Menu Link on the drop-down. The next window will ask for a Title, Type of link, Target, and Sort Order for Show on Menu. (Note: A menu link icon shows a sheet of paper with a corner fold without lines on it.)
The title you enter will display on the main orange menu.
For Type, select either Internal Link or External Link. For internal links (wpunj.edu links), you can search through folders within the CMS.
For external links (e.g. YouTube), you can copy and paste the URL in the field below on the right. (Note: If you do not have access to a specific folder, the External Link option can be used for wpunj.edu links as well). The field to the left is a drop-down where you'll need to select the type of server. Remove any redundant server information at the beginning of the external URL pasted in.
The sort order number should be assigned based on where you want the menu link to appear on the orange menu.
Show on Menu must be checked to make the menu link visible.
When finished, hit Save or Save and Publish.
To add a widget to a page, the same first steps for adding content to a page should be followed. Here is the short version:
A New Widget
An Existing Widget
Assigning a descriptive internal title is important here as well. The properties for each widget and content will vary and should be edited accordingly.
Now you have the knowledge to perform basic tasks on your website. Should further assistance be needed, you can submit a ticket via the IT Help Desk system. Happy editing!
