• 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 on the Nicholls websites. If you have additional questions you should contact the Website Manager, or leave a public comment below.

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.

To start with, the button to access the media management dialog has been modified into a single button 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 that now looks very button-like located above the standard WordPress editor buttons.

The most visible changes you will notice are when you press Add Media and the media dialog appears. In this updated 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 selected media items.

In the center area you will initially see all media items. 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 document you are editing.

Selecting 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 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. One obvious change is the removal of the Save All Changes button. Now your changes to the item properties 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.

The Insert Into Post button has moved to the lower right corner, but functions normally. 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 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. The interfaces has been modified to compliment the new media manager, but the upload procedures remain the same. 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.

There are additional options that work with the new interface like setting the Featured Image and Galleries. The Feature Image option is used to set an image as the Featured Image for your content 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.

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.

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 — http://www.nicholls.edu/alumni_friends.html

http://www.nicholls.edu/alumni-friends/

OLD — http://www.nicholls.edu/current_students.html

http://www.nicholls.edu/current-students/

OLD — http://www.nicholls.edu/faculty_staff.html

http://www.nicholls.edu/faculty-staff/

OLD — http://www.nicholls.edu/future_students.html

http://www.nicholls.edu/future-students/

OLD — http://www.nicholls.edu/campus_life

http://www.nicholls.edu/campus-life/

OLD — http://www.nicholls.edu/academic_calendar

http://www.nicholls.edu/calendar/academic-calendar/

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

http://www.nicholls.edu/disclaimer/

OLD — http://www.nicholls.edu/exce
OLD — http://www.nicholls.edu/unique

http://www.nicholls.edu/about/unique/

OLD — http://www.nicholls.edu/region

http://www.nicholls.edu/about/visiting-thibodaux/

OLD — http://www.nicholls.edu/academic_affairs

http://www.nicholls.edu/academic-affairs/

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.

[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.

[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.

[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.

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.

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]

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.

Before You Switch Themes

It is important to make some preliminary notes about your WordPress website before you switch to the new Nicholls 2010 Core Theme. Switching to the new theme can make some dramatic changes to your WordPress site that take some effort to reverse. Do not switch to the new theme unless you are fully prepared to accept the changes.

1. Make notes of any pages that use the special gray column on the right including the home page. Note the titles used since that is the name of the page used. In most of these cases you will see multiple edit links on the page when you view the website. Click on those edit links and make note of the title of the pages that are combined to create the pages with columns.
2. Be aware if your site has a news or blog listing on the front page.
3. Make a note of the content displayed in the red area on the left side. Most websites will display a Contents area with the list of pages. You should also note if you have links to other sites displayed, archive links, or category links.

Procedures to Switch to the New Theme

The new theme gives web content administrators more control over their WordPress driven websites, yet this can make the configuration for each website complex and unique. Remember that activation of the 2010 Nicholls Core Theme will cause changes to your Nicholls website that may take some effort to reverse.

1. Activate 2010 Nicolls Core theme.
2. In most cases we use a static page for the front page. Most sites use the page with slug ‘home’ as front page. Use the Settings > Reading to change the Front Page display to a static page and select the page to use as the front page using the title. This page will now be displayed by default on the website’s front page. Make sure the radio button for A static page is selected and that the save changes button is pressed.
3. If your website is using the home1, home2, etc or setone1, setone2, etc page slugs to create columns you will need to migrate that content into the referring pages using the [column] shortcode. You will find helpful articles below with details about these new features.
4. By default the new theme red sidebar on the left will only show the page list when viewed publicly The new theme actually has widget support allowing the red sidebar to be more customizable. You will want to look under Appearnce > Widgets where you can add widgets for links, archives, menus, and more.
5. When you start using widgets, there are two important widgets that every Nicholls website should have:
   1. Nicholls Department Information Widget – This should be at the bottom of the red sidebar area, so all visitors can easily find contact information for your area. With the new theme you will find a new menu item that uses the Nicholls “N” called Nicholls Theme Options. Your old office information should be editable in this area.
   2. Either the Pages widget or a Custom Menu widget that has links to your website information. The Pages widget just lists your pages, but the Custom Menu widget can be used to display custom menus that can be more customized. Custom Menus can be created an configured under the Appearance > Menus area.
6. If your website had a news list on the front page, I suggest that you use the [list-posts] to  make a custom news area, or convert your Nicholls website to only show posts using the Settings > Reading options.

You assistance in making a switch to this new theme would be appreciated. The Website Manager will be switching websites to the new theme as time permits, but if you attempt to make this switch on your own and have problems, you should contact the Website Manager for questions and support.

Nicholls 2010 Theme Articles