2013 Spring Web Editor Meeting

On January 14th, 2013 we had a casual meeting with many of our department website editors, the university Website Manager, and staff from the Office of University Relations. The two main topics discussed were about the recent Nicholls Website redesign and changes introduced during the recent WordPress 3.5 upgrade. To give more information for meeting attendees and editors that were unable to attend two articles have been written about our meeting topics.

Be sure to check out the Website Editor Checklist & Notes for useful information about maintaining content on the Nicholls websites. If you have additional questions you should contact the Website Manager, or leave a public comment below.

2012 Nicholls Website Redesign New Theme Information

The Nicholls website has been redesigned with a new look based on several months of work and discussion. Although these changes are numerous and affect the website in dramatic ways, the fundamental content of most Nicholls websites should display as before with a new altered look. There are only a few areas that department website editors should be aware of.

  1. New header images – Department websites now have the option of selecting from several photos that can be used for the large header image displayed at the top of all pages on a departmental website. Additionally, a custom header can be created that can be used. Custom header images should be approved by the Website Manager or University Relations staff. If you have ideas for a custom header, be sure to contact the Website Manager or the Office of University Relations.
  2. Responsive Design or Mobile & Tablet Display issues – The new Nicholls website is designed to be easier to read on smartphones and tablet computers. You may observe issues viewing some pages on certain platforms or devices. Be sure to report these issues to the Website Manager. Some websites with two columns may need to be modified to make the sites work more appropriately with other devices.
  3. Menus & Landing Pages – With the reintroduction of menus for navigation on each page, it should be noted that the menus and landing pages are edited to create as much usability as possible. Requests for additional links on menus and landing pages should be well thought out; Does a new link under “menu area” serve that audience well. Should my link be on the landing page for “area” or is my link a high priority link that should be visible under a “menu area”. If you find high priority areas that should listed under a menu, or if you are unsure, please contact the Website Manager.
  4. When will all sites be updated to the new look? – Updating the look of all Nicholls web pages is time consuming. Some areas of the Nicholls website are easy to update. Most of the Nicholls website should be updated by late January 2013, but there are areas of the Nicholls website that may not be updated. If you have questions about the update for any area, please contact the Website Manager.

The important thing to remember is that you should continue to edit and update the content available on Nicholls websites as accurately as possible. The appearance of the Nicholls website has changed, but the tools and procedures for editing content has remained the same.

There were some questions about the design process and schedule. In summary the project to redesign the Nicholls website has been slowly started for a couple years. The project was officially started in January 2012. The process was reviewed by University Relations staff with feedback from several on-campus areas including students, faculty, and staff. Additional feedback was provided from some off-campus resources. Presentations of the project were shown to Nicholls Executive Council and President’s Cabinet. If you are interested in information related to the redesign project, you may contact the Office of University Relations or the Website Manager. The Website Manager has documentation and resources saved about some of the design and technical decisions made in the design process.

If you find issues or have any questions about the changes made to the Nicholls website, you are more than welcome to contact the Website Manager.

WordPress Media Management

This is documentation is meant to cover the basic techniques of uploading and managing media using WordPress. In WordPress – Media is defined as anything that is not written text or HTML content. This means that media content will be the images, PDF, Microsoft Word, Excel, video, or other files that would be attached or embedded in a post or page. The only exception here are YouTube, Fickr, Forms and other items that are embedded by using an external service or WordPress feature like a plugin.

Add Media Button Although you can access and upload media using the Media area in the WordPress Dashboard, it is more beneficial to manage media while working on the Post or Page where the media will be found. While editing the Post or Page you will find the button to access the media management dialog box locatedĀ  above the editing toolbar and labeled as Add Media At one time there were separate buttons for different media types and a simple image to click on. Now the Add Media button is a single button.

Media Interface Overview

When you press Add Media the media dialog appears. In this area you will find links along the left to perform specific actions, the center of the dialog where you will see thumbnails or icons representing media items, and the left side area that will show specific properties for the selected media items.

Media Overview

Media Dropdown View FilterIn the center area you will initially see all media items available on the site you are working on. You can select multiple items by holding the shift key and clicking on items. You can deselect items clicking the minus sign. There is also a field for searching for specific media items at the top. A dropdown menu is also provided to help filter the items you see to make things more manageable. Using this dropdown you can view just images, audio, video, or only the media items that were uploaded to the WordPress document you are editing.

Media PropertiesSelecting a media item will cause the properties for that item to appear on the right side. The properties and options are the similar to previous WordPress versions and you can change the title, alt text, description, and caption as before. In this area you will also find links to edit and delete any media item. Your changes to the item properties like Title and Caption will be saved automatically. If you want to make sure your changes are saved you can simply click your cursor to another property field and you might see the saved notification appear under the Attachment Details heading.

You will also see options for alignment, size, and linking. Many of these options can be changed after the content is inserted into the Page or Post. It may not be necessary to link your images if you just want to show the image and you should probably never use the Link to: Attachment Page option. If you are working with a PDF, MSĀ  Word, or other similar media type, chances are you should always use the Link to: Media File option.

The Insert Into Post button is at the lower right corner. Pressing the Insert Into Post button will insert the HTML to display your media items into the editor area in the location where you placed your cursor before pressing the Add Media button.

Uploading Media

Uploading images to the WordPress media library is similar to previous versions. Under the Insert Media heading you find the Upload Files link which will reveal the media upload dialog interface. You can drag files to the upload area, or you can press the Upload Files button. Be ware that you can upload multiple files, so make sure to select or drag to upload only the files that need to be uploaded to your website.

media-uploadThere are additional options like setting the Featured Image and Galleries. The Feature Image option is used to set an image as the Featured Image for the WordPress content you are editing and you featured image may be used by other functions of your website. Custom Gallery options should be functional, but may not be completely functional on many Nicholls websites.

This is a general overview of the updated media management area in WordPress, if you have questions or issues, please contact the Nicholls Website Manager.

Tips, Tricks & Gotchas

  • PDF, MS Word, PPT, XLS and other files are different than images. The title used in the media dialog area will become the link for the file. You should always add the type of file to the title so visitors are aware of the type of file that can be downloaded. The title may look like – Document (pdf) if done prolerly.
  • Remember that once you upload something to one editing area you do not need to upload it again and you can access it from other editable Posts and Pages on the current WordPress site.
  • Media on page optionsYou can modify options or delete images inserted into your content by using the options or delete buttons that will appear if you click on the image in the editing area as shown in the image to the left.
  • You can sometimes replace items by first deleting the original item in the media area and then uploading a newer item that uses the exact same file-name.
  • To delete an item: Re

Web Editor Meeting Spring 2012

On Monday January 9, 2012 at 2:00pm we will be meeting in the Bollinger Student Union, Plantation Ballroom for our second annual meeting for website editors who help maintain the Nicholls website.

This will be an overview of recent changes and goals for the Nicholls website as well as discussions about issues and requests from our editors. We will be also discuss the upcoming redesign project for the Nicholls website and would love to hear your comments. I am expecting this to be a short meeting no longer than one and a half hours.

Be sure to check out the Website Editor Checklist & Notes for useful information about maintaining content on the Nicholls websites. I am opening this post to comments for those web editors who have questions and others who may not attend the meeting on Monday.

2011 Summer Nicholls Website Updates

I have planned to migrate the core website to WordPress for over a year. This complicated process was completed on May 26, 2011.

The website management is the same WordPress software used by many of the Nicholls departments with some additional features to manage multiple websites and caching to increase performance. Eventually I will migrate all Nicholls department websites that use WordPress to this combined WordPress system. This will allow our website editors that maintain multiple websites to have a single place to access the administrative tools rather than deal with multiple user accounts. The benefits are too much to explain in this short update message.

There are a few important things to know about this update:

  • TheNicholls Calendar has been changed to be integrated with the Google Calendar system. This uses calendars associated with the Website Manager (nichweb) account. This includes the academic and non-academic calendars.
  • Nicholls web address changes. This migration forced some changes to address locations(URLs) for many Nicholls web pages. Most old web page addresses should redirect to the new locations, but you should notify me if any old important addresses are missing. I’m placing a list of the address changes below in case anyone needs that information.
  • Website performance changes include a caching system. Any issues related to slow performing areas of the website should be reported. Be sure to report any unusual content or problems viewing areas of the Nicholls website.

As always, I appreciate reports for any issues these changes might cause.

Department websites will take some time to migrate into the new system. I will contact department website editors as these changes occur. I anticipate a long period of work this Summer to complete the process.

Nicholls Website Address(URL) Changes

OLD — https://www.nicholls.edu/alumni_friends.html
https://www.nicholls.edu/alumni-friends/

OLD — https://www.nicholls.edu/current_students.html
https://www.nicholls.edu/current-students/

OLD — https://www.nicholls.edu/faculty_staff.html
https://www.nicholls.edu/faculty-staff/

OLD — https://www.nicholls.edu/future_students.html
https://www.nicholls.edu/future-students/

OLD — https://www.nicholls.edu/campus_life
https://www.nicholls.edu/campus-life/

OLD — https://www.nicholls.edu/academic_calendar
https://www.nicholls.edu/calendar/academic-calendar/

OLD — https://www.nicholls.edu/disclaimer.html
https://www.nicholls.edu/disclaimer/

OLD — https://www.nicholls.edu/exce
OLD — https://www.nicholls.edu/unique
https://www.nicholls.edu/about/unique/

OLD — https://www.nicholls.edu/region
https://www.nicholls.edu/about/visiting-thibodaux/

OLD — https://www.nicholls.edu/academic_affairs
https://www.nicholls.edu/academic-affairs/

Web Editor Meeting Spring 2011

Many thanks to our Nicholls website editors that were able to attend our informal meeting on January 12th.

I have taken the information from that meeting and written a Website Editor Checklist & Notes page where you will find a cleaned up version of the items covered in our meeting. I have also created a Report Website Issues form that can be used to send e-mail to me about specific website problems.

If you have any questions or comments about the recent meeting, updated checklists, or issue reporting, please leave a comment.

Using the List Posts Shortcode

Another useful shortcode is used to list posts on any page or post. This can make a list of news stories or articles appear in any place on your WordPress website.

[list-posts posts_per_page=2]

This simplest usage above will display a list of the two most resent posts published for your website with the date.

  • June 9, 2016 at 8:53 am
    Download these files for training. Click on the following image to see the larger version and download this image for training. [caption id="attachment_396" align="alignnone" width="220"]Elkins Hall Elkins Hall[/caption]
  • January 17, 2013 at 2:48 pm
    On January 14th, 2013 we had a casual meeting with many of our department website editors, the university Website Manager, and staff from the Office of University Relations. The two main topics discussed were about the recent Nicholls Website redesign and changes introduced during the recent WordPress 3.5 upgrade. To give more information for meeting attendees and editors that were unable to attend two articles have been written about our meeting topics. Be sure to check out the Website Editor Checklist & Notes for useful information about maintaining content on the Nicholls websites. If you have additional questions you should contact the Website Manager, or leave a public comment below.
[list-posts posts_per_page=2 qs_content=100 qs_thumbnail='100x50' qs_container_class='list-posts-nicholls-news' qs_template='%title% { %content% %thumbnail% }']

This example has various advanced options to do thumbnails and format the output.

  • Download these files for training. WP Training File (pdf) Click on the following image to see the larger version and download this image for training....
  • On January 14th, 2013 we had a casual meeting with many of our department website editors, the university Website Manager, and staff from the Office of University Relations. The two main topics discussed were about the recent Nicholls Website redesign and changes introduced during the recent WordPress 3.5 upgrade. To give more information for meeting attendees and editors that were unable to attend two articles have been written about our meeting topics. WordPress 3.5 Media Management 2012 Nicholls Website Redesign New Theme Information Be sure to check out the Website Editor Checklist & Notes for useful information about maintaining content…...
[list-posts qs_title_tag='h4' posts_per_page=10 qs_content=240 qs_thumbnail='100' qs_container_class='list-posts-nicholls-news']

The list posts shortcode only has a couple of attributes to manipulate the display of the posts.

  • qs_title_tag – The tag used around the title of each post (default is DIV).
  • qs_more – Can be used so the more separator can be used to create a a lead in (experimental).
  • qs_content -Used to set the number of characters to display below the date.
  • qs_thumbnail -Used to set whether to use the featured image of the post as the thumbnail (default is 0). Thumbnail size can be indicated using number height and width like 120 or 100×150 or using a predefined thumbnail size name like medium.
  • qs_container_style – Can be used to override the styles using a style attribute on the container.
  • qs_container_class – Can be used to set an HTML CSS class on the container.
  • qs_template – Can be used to set the layout and ordering for the elements in each post item. { = <div>, } = </div> and use terms %title%, %date%, %thumbnail%, %content%. Default is “%title% %date% %thumbnail% %content%”
  • posts_per_page – Sets the number of posts to display (default is -1 all posts).
  • tag – Can be set to display posts having specified tags. Multiple tags can be separated by commas.
  • cat -Can be set to display posts in specified categories. Multiple categories can be separated by commas.
  • category_name – Can display posts specified by one category name.

Using the List Pages Shortcode

The list pages shortcode is designed to allow you to put a list of pages into a page or post. This can create a table of contents to show child pages or a list of child pages for a particular page. The page list created dynamically so the links and page titles should always be updated to the content saved in WordPress.

The simplest example is to just use the following shortcode on a page that has sub-pages or child pages. This will create a simple list with a Contents header.

[list-pages]

The page list can be manipulated with some attributes to do more complicated page lists.

[list-pages child_of=17 toc_title_text="Procedures"]

The list is more complicated, and you may need help to determine the proper ID number, but this can be useful to list pages without having to manually create links. Here is a list of the attributes and short descriptions.

  • show_date – Shows the date the page was published.
  • date_format – Sets the date for show_date.
  • depth -Hierarchy depth (default of 0 is infinite).
  • child_of -The page ID to use as the main parent (default is the current page).
  • exclude -List of page ID numbers separated by commas to exclude.
  • include – List of page ID numbers spearated by commas to include.
  • title_li – Puts a line of text and an additional list wrapped around the page list.
  • authors – To show pages by a certain author.
  • sort_column – Sets the order of the pages (default is page order then alphabetically by title).
  • link_before – Adds extra text or HTML before links.
  • link_after – Adds extra text or HTML after links.
  • exclude_tree – List of page ID numbers separated by commas that will exclude the parent and all child pages of that parent.
  • toc_container_tag – Sets the container HTML tag for the whole page list (default is a DIV).
  • toc_container_class – Sets the HTML CSS class for the container tag (default is list-pages-container).
  • toc_title_tag – Sets the HTML tag used for the title of the whole page list (default is H3).
  • toc_title_class – Sets the HTML CSS class for the title HTML tag (default is list-pages-title).
  • toc_title_text – Sets the text used as the title for the whole page list (default is Contents).
  • toc_wrapper_tag – Sets the tag wrapped around the list of pages (default is UL).

Many of these options are unnecessary for basic page lists, so make sure to contact the Website Manager about any advanced options.

Using the Column Shortcode

The [column] can be used to create build columns which can be more appropriate for displaying content than using HTML tables. These shortcodes have some special attributes that handle creating all the proper HTML needed to create a column that can be displayed properly.

Attributes

The [column] actually creates an HTML DIV container with all the proper attributes to create a simple column. Special attributes can be used to manipulate the way the column is created and displayed.

  • width – The width of the column. Height is defined by the content.
  • padding – By default this defines right gutter spacing to the next column. Should be something like 1px, 1em, or other CSS measurement.
  • style – The width and height above are normally combined to create an HTML style attribute, but a specific style attribute can be defined for knowledgeable users.
  • class – This creates the HTML class attribute. This is the preferred method at Nicholls to create columns that have been tested.

Examples

Here is the basic example of a column. This the default so is no different than using [column]My column text[/column].


[column width=0 padding=0 style=false class="column-"]
My column text
[/column]

Here is the example that creates a column that floats to the right with a red border on the left and a gray pattern background. This is one of the more complex columns.


[column class="column- float-right width-right-default border-red border-2-left pattern-light-grey"]
My Column Text
[/column]

My Column Text

This is how it looks when used. You’ll notice the complex text shown in the Class attribute. Those special classes are combined to create the column and set how it is displayed. These attributes are specific to the Nicholls WordPress websites and the classes may change depending on the theme.

2010 Nicholls Core Theme Column Classes

Here are the classes specifically for the 2010 Nicholls Core Theme.

  • column- You must include the dash at the end. It must be used by default do indicate the column.
  • float-left or float-right Indicates how the if the column is displayed on the right or left. You should be aware how the text before or after the column will wrap since the text wrapping depends on how the column is floating.
  • width-50, width-49, width-47, and width-46 are classes that define the width percentage.
  • width-default and width-right-default both define the width to line up the column with the logo. Typically used with a column that is float-right with a border that lines up with the logo’s vertical red line.
  • Some other special effects for columns can be found on the HTML & CSS Notes.