UF WordPress Template Presentation 2-3-12

Editor's Notes

• #2: Why WordPress?
• #3: WordPress is simple to install and maintain. There is a dashboard for easy control of all settings and robust editing tools for content and basic image editing functions such as crop and rotate.
• #4: If you are not familiar with WordPress or any of the elements that make up these templates we have a free service available to help get you started. Lynda.com is free for faculty, staff and students. Access Lynda at the IT training webpage.
• #5: If you don’t know WordPress there is a great WordPress 3 Essential raining course that will quickly bring you up to speed on the basics of WordPress.
• #6: WordPress is simple to install and generally only takes a few minutes. The WordPress.org site has a great tutorial on installation. Once your WordPress installation is complete, log in to the WordPress dashboard.
• #7: The first page you will see once you log in to WordPress is the Dashboard. This area provides an overview of the activity of your site along with some WordPress news. This is where all aspects of the website are configured and content is added.
• #8: Content is added in two different sections. The first are posts. Posts are content that is dynamic and changes. These are like news posts or other timely information. These items are displayed in reverse chronological order so the latest items are always the most visible. Posts are also used to populate the featured content area of the website homepage (which I will cover later.)
• #9: The second way content is added is through Pages. Pages are what will make up the majority of your website and are used for more static information. Pages have a hierarchy structure to them which is important as this structure builds the main navigation menu of the website.
• #10: As you can see here, this example site has a few main pages such as About and Courses, with many pages that are child pages to them. Each level that a page is down in the hierarchy directly relates to the location in the main navigation menu and sidebar menu on the website. This hierarchy is explained in the Lynda.com tutorial mentioned earlier.
• #11: Posts and Pages are both edited using a similar editing screen. By clicking on the title of any Post or Page in the Dashboard you can edit the post or page content. In this view you can see that the Page Title and Page content can easily be edited using a Microsoft Word-like interface. You can select text to bold or italicize it, or to add a link. You can also easily make lists and quotes.This is just a quick overview of the WordPress basics. Again, I recommend viewing the Lynda course: WordPress 3 Essential Training to learn more about Posts, Pages, and WordPress in general.
• #12: Once WordPress is installed, switching to the UF Template is as simple as downloading the template and either uploading it to the WordPress themes folder by FTP or using the WordPress Dashboard to upload the zip file for you.Download and install WordPresshttp://wordpress.org/download/Download UF templatehttp://www.it.ufl.edu/webservices Upload the UF Template to your WordPress Themes folder /wp-content/themes/
• #13: Clicking on the Appearance section of the WordPress dashboard will allow you to click on the Install Themes tab. In this tab, clicking on Upload will allow you to select the zip file you downloaded from the Web Services site and then clicking on Install Now will install the theme.
• #14: Once uploaded by FTP or the theme Installer, click on Appearance and then click Activate under the UF Template.In the WordPress dashboard navigate to Appearance > ThemesFind the UF Template 1.1 by UF Web ServicesClick ‘Activate’ under the template.
• #15: Once activated there are some Theme Options that must be configured to get your site up and running. Most of these options will only need to be set once.
• #16: The theme options are configured in the Theme Options area under AppearanceThere are six option areas with several options each, I will cover some of the more important options in each section.GeneralSite TitleHeader Call to ActionHomepage LayoutFeatured ContentSuper Admin
• #17: These options include: Parent College/Institute, Webmaster Email, Google Analytics Account Number, Intranet URL,Make a Gift URL, Enable Mega Menu Drop Down Menu, Collapse Sidebar NavigationParent College/Institute:This option determines the monogram used in the site header. This defaults to ‘University of Florida’Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerGoogle Analytics Account Number:Enter the domain’s account number here and the tracking code will be inserted into the websiteUses one of the following formats: 'UA-xxxxxxx-x’ or 'UA-xxxxxxx-xx' Intranet URL:Enter your intranet URL hereThis will place an ‘Intranet’ link in the footer of your websiteMake a Gift URL:Enter the UF Foundation giving page URL for your college/departmentIf no link is entered the Make a Gift badge will link to the default UF Foundation giving pageEnable Mega Drop Down Menu:Check this box if you have a large number of pages and require the Mega MenuDefault is unchecked and standard drop down menuCollapse Sidebar Navigation:Check this box if your site has a large amount of sub pagesIf checked the sidebar navigation will only show direct child pages of the top level page and children of the current page
• #18: Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerA contact webmaster link is required by the Acceptable Use Policy. Enter your contact email here.
• #19: This is for Google Analytics trackingEnter the domain’s account number here and the tracking code will be inserted into the websiteUses one of the following formats: 'UA-xxxxxxx-x‘'UA-xxxxxxx-xx' 
• #20: Enter the UF Foundation giving page URL for your college/departmentIf no link is entered the Make a Gift badge will link to the default UF Foundation giving page
• #21: These menus are auto generated based on the hierarchy of the Pages in WordPress.Check this box if you have a large number of pages and require the Mega MenuDefault is unchecked and standard drop down menuThe default menu is geared towards smaller sites with a handful of pagesThe Mega Menu option is geared towards sites that have many pagesThe default menu features standard, single level drop down menusThis menu is also automatically populated based on the hierarchy of the site PagesThis menu is best used with 5-7 top level pages based on the length of the page titles and 3-6 child pagesThe Mega Menu features larger drop downs that include child pages and grandchild pages of the main PageThis menu is also automatically populated based on the hierarchy of the site PagesThis menu is best used with 5-7 top level pages, 4-8 child pages and 2-5 grandchild pages per child page
• #22: These are examples of how the sidebar navigation reacts to the Collapse Sidebar Navigation option. The top row shows the sidebar navigation of three pages, the top level Research and its two child pages; Funding and Support. These views indicate how the page would look with the Collapse Sidebar Navigation option unchecked. Below each of those images are the same pages with the Collapse Sidebar Navigation option checked. As you can see only the child pages (Funding and Support) of the top level page (Research) is shown unless we are on a child page. When on a child page, all of that page’s child pages will be shown in the sidebar navigation.
• #23: These options include: Call to Action Text and Call to Action URL.The Call to Action Text option: Enter text to be displayed in an orange box directly underneath the header search boxRemove the text to remove the boxThe Call to Action URL option: Enter the URL that the Call to Action Text will link to when clicked
• #24: The top example is without any text or URL in the two Header Call to Action options and the bottom example is with text in the two option fields.
• #25: These options include: Homepage Layout for Widgets and Color SchemeHomepage Layout for Widgets:This option sets the layout of the homepage widget area. Options include:Three column (50%, 25%, 25%)Three column (33%, 33%, 33%)Two column (66%, 33%)Two column (50%, 50%)One columnDefault is Three Column (50%, 25%, 25%)Color Scheme: Check this box to use the alternate color scheme for the homepage widget areaThis will replace the blue background for a white backgroundThis option only affects the homepage widget areaDefault is unchecked
• #26: Three column: 50%, 25%, 25% This is the default
• #27: Three column: 33%, 33%, 33%
• #28: Two column: 66%, 33%
• #29: Two column: 50%, 50%
• #30: One column: 100%
• #31: Any of the widget layout options can also be switched to the alternate color scheme.This will replace the blue background with a white backgroundCheck this box to use the alternate color scheme for the homepage widget areaThis option only affects the homepage widget areaDefault is unchecked
• #32: These options include: Select a Category (for featured content), Number of posts to display in slider, Slider Speed, Disable Timeline Scrubber, Story Stacker, Story Stacker – Disable Dates
• #33: The Select a Category option is what enables to the slider or stacker. By selecting a category in the drop down, posts in that category will display in the slider or stackerThis option selects which category will be used for the Featured Content sliderChoose a category from the drop downIf no category is chosen the slider will not be shown
• #34: Once a category is chosen the posts from the category will be show in a slider on the homepageThe slider can show posts in two ways. The default is the half width image layout.The half width image slider will use half of the slider area for an image and the other half of the area for title and excerpt text
• #35: The full width image option shows a full width image with the post title overlaid on the image.Under the Post editor is the Featured Content Slider Options panelCheck the box labeled “Full Width Image” in order to use the Full Width optionBy default the title of the Post and the excerpt will be overlaid on the image with a dark black background To disable this option check the box labeled “Disable Image Captions” in the Featured Content Slider Options box
• #36: The timeline scrubber underneath the slider can be disabled by checking the disable timeline scrubber optionCheck this box to disable the timeline scrubber underneath the sliderDefault is unchecked
• #37: Check this box to replace the default slider with the Story StackerThis will completely replace the slider and the previous two options do not applyUpload images using the “Set featured image” option the same way as with the half width and full width options
• #38: The last option in this section is the story stacker disable dates optionThis is useful if your content does not change very often
• #39: These options include: Facebook, Twitter, and YouTube links, Facebook Insights ID, Custom Logo, Custom Logo Height, Custom Logo Width, Custom CSS
• #40: This option controls the link of the Facebook, Twitter, and Youtube logos next to the search fieldInsert your college or department specific Facebook, Twitter, and Youtube Page URL into the optionsIf no URL is provided the Facebook, Twitter, and Youtube logos will default to respective UF pages
• #41: The UF WordPress Template can be customized with the use of widgets. There are many widgets and several widget areas throughout the site.
• #42: Along with many of the standard WordPress widgets the UF Template offers a few custom widgets, including:Embed Page Content, Insert Image, Google Calendar,Random Quotes, Recent Posts, RSS v2.0
• #43: The UF template includes a variety of widget locationsThese widget locations are conditionally shown based on what type of page or post is being viewedBased on the homepage layout chosen in the Theme Options you will see one of the following set of widget areasHome Left, Home Middle, Home RightHome Left, Home RightHome LeftThere will also be the standard sidebars below:Page Left Sidebar, Page Right Sidebar, Post Sidebar, and Footer
• #44: Based on your Homepage Layout there will be up to three separate homepage widget areasHome Left, Home Middle, and Home Right
• #45: There are two different Page Sidebar widget areas, one for the left and one for the rightThese widget areas will only show on Pages that are not using the “Full Width Page” page template
• #46: There are two different Page Sidebar widget areas, one for the left and one for the rightThese widget areas will only show on Pages that are not using the “Full Width Page” page template
• #47: The Post Sidebar widget area will only display on the right hand side of Single Posts
• #48: The footer widget area is displayed on the bottom of every pageThis widget area can take between one and six widgets and automatically sizes the widgets for the area
• #49: The UF Template has two customizable menu areas that are configured in the WordPress dashboard
• #50: The UF Template has two customizable menusEach menu is tailored for a specific useHeader Links Menu Places links in the header above the search barRole Based Navigation MenuPlaces links under the page content above the footer
• #51: Menus are created in the WordPress Menus page in the DashboardThe Menu area allows for drag and drop creation of menus to make this process very simple.Once menus are created they are assigned to the Theme Location: Header Links or Role Based Navigation
• #52: The header links menu appears above the search bar in the right of the header. This menu can hold 3 to 5 links
• #53: The role based navigation appears on every page. This area is styled differently on the homepage than on all other pages. On the left is a view of the homepage and on the right is how the role based navigation looks on all subpages.
• #54: These two screenshots are of the homepage styling on the top and all other pages on the bottom.
• #55: By default each Page will include a left sidebar navigation if there are parent/child page relationships for the current Page
• #56: If there are widgets added to the Page Left Sidebar or Page Right Sidebar widget areas those sidebars will also displayTo use the Full Width Page template and not display any sidebars on a specific Page select the “Full Width Page” option from the drop down box labeled “Template”This will remove both sidebars from the Page display leaving the full width of the page to display the Page content
• #57: To use the Full Width Page template and not display any sidebars on a specific Page select the “Full Width Page” option from the drop down box labeled “Template”This will remove both sidebars from the Page display leaving the full width of the page to display the Page content
• #58: To use the Full Width Page template and not display any sidebars on a specific Page select the “Full Width Page” option from the drop down box labeled “Template”This will remove both sidebars from the Page display leaving the full width of the page to display the Page content
• #59: Two column layouts can easily be created when editing the page content by highlighting text for the left column and clicking on the left column button in the toolbar. The same is repeated for the right column.
• #60: Once saved, the page will now display with two columns. Any text after the two columns will display normally.
• #61: The two columns can also be combined with the full width page template to make a two column full width page.
• #62: For examples of how people are using the template you can visit any of these sites.
• #63: If you have any questions about WordPress or want to learn more there are numerous tutorials and resources available online and on lynda.com
• #64: Lynda.com is free for faculty, staff and students. Lynda has a great WordPress Essentials training course that will quickly bring you up to speed on the basics of WordPress.
• #65: We have a variety of tutorials available on the IT training site. There are tutorials for both the HTML and WordPress templates.
• #66: Once again, you can download this presentation, download the template, and find links to our tutorials on the Web Services site. Thank you.