UF WordPress Template Presentation
•Download as PPTX, PDF•
2 likes•2,313 views
Introduction to the wordpress version of the website template available to University of Florida constituents.
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
UF WordPress Template Presentation
- 1. UF WordPress Template Web Services
- 2. WordPress Overview • Current Version: 3.3.1 (6.3m downloads) • Powers over 70 million websites • Easy installation and updates • Dashboard for control of settings and content • Simple Post and Page editor • Integrated tools and options
- 3. Installing UF Template • Download and install WordPress – http://wordpress.org/ • Download UF template – http://www.it.ufl.edu/webservices • Upload the UF Template to your WordPress Themes folder – /wp-content/themes/
- 6. Theme Options • Navigate to Appearance > Theme Options • There are seven option areas: – General – Site Title – Header Call to Action – Homepage Layout – Featured Content – Super Admin – Sharepoint Calendar
- 9. Google Analytics Account Number • This is for Google Analytics tracking • Enter the domain’s account number here and the tracking code will be inserted into the website • Uses one of the following formats: – 'UA-xxxxxxx-x‘ – 'UA-xxxxxxx-xx'
- 10. Make a Gift URL
- 11. Enable Mega Drop Down Menu
- 14. Title Font Size
- 15. Header Call to Action Options
- 16. Header Call to Action
- 18. Homepage Layout for Widgets • Three column: 50%, 25%, 25%
- 19. Homepage Layout for Widgets • Three column: 33%, 33%, 33%
- 20. Homepage Layout for Widgets • Two column: 66%, 33%
- 21. Homepage Layout for Widgets • Two column: 50%, 50%
- 22. Homepage Layout for Widgets • One column: 100%
- 23. Color Scheme
- 26. Half Width Image
- 27. Full Width Image
- 29. Story Stacker
- 30. Story Stacker – Disable Dates
- 33. Custom CSS • Enter any custom CSS into this box • Any text entered here will be wrapped in <style> tags and inserted into the <head> of every page • Use this to tweak certain styles of the website
- 35. Widgets
- 36. Widgets
- 37. Widget Areas
- 39. Page Left Sidebar Widget Area
- 40. Page Right Sidebar Widget Area
- 41. Post Sidebar Widget Area
- 43. Menus
- 44. Menus • The UF Template has two customizable menus • Each menu is tailored for a specific use • Header Links Menu – Places links in the header above the search bar • Role Based Navigation Menu – Places links under the page content and above the footer – Useful for links for target groups
- 45. Menus
- 47. Role Based Navigation Menu
- 48. Role Based Navigation Menu
- 49. Page Layout and Display
- 50. Default Page
- 51. Full Width Page
- 52. Full Width Page
- 53. Two Column Page
- 54. Two Column Page
- 55. Two Column Full Width Page
- 56. Example Sites • webservices.ahc.ufl.edu • shcc.ufl.edu • plastic.surgery.ufl.edu • radonc.med.ufl.edu • egh.phhp.ufl.edu • phhp.ufl.edu • cancer.ufl.edu • vetmed.ufl.edu
- 57. WordPress Resources • http://codex.wordpress.org • http://wordpress.stackexchange.com • http://wp.tutsplus.com/ • http://digwp.com/
- 58. Lynda • Lynda is an online training resource partner of UF and is free to all faculty, staff, and students. • Lynda’s online training library has over 1,100 courses, covering topics such as HTML, CSS, WordPress, JavaScript, jQuery, and Photoshop. • Go to http://www.it.ufl.edu/training and click the Lynda logo to access the free University of Florida log-in.
- 59. Tutorials • www.it.ufl.edu/training/tutorials/ • Tutorials cover configuring Theme Options, Widgets, Menus, and Featured Content
- 60. Thank You Download Template www.it.ufl.edu/webservices
- 61. Q&A Session
Editor's Notes
- Why WordPress?
- WordPress is currently on version 3.3.1 which has seen over 6 million downloads since its release. Overall, WordPress has a very large install base with over 70 million installations. Part of the reason for that is how simple it is to install and maintain WordPress. 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.
- WordPress is simple to install and generally only takes a few minutes. The WordPress.org site has a great tutorial on installation. Once WordPress is installed, switching to the UF Template is as simple as downloading the template and uploading it to the WordPress themes folder.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/
- Once uploaded, you simply log in to your WordPress dashboard, 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.
- Once activated there are some Theme Options that must be configured to get your site up and running.
- The theme options are configured in the Theme Options area under AppearanceThere are seven 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 AdminSharepoint Calendar
- 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
- 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.
- 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'
- 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
- These menus are auto generated based on the structure 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
- 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.
- These options include: Title Font Size, Title Padding, Tagline Font SizeThe Title Font Size option may need to be changed if the title wraps undesirably
- The top is an example of a very long title wrapping around to three lines. The bottom example is where the Title Font Size option has been set to 1.9 ems to reduce the size of the title and keep it on two lines.This option will adjust the font size (measured in ems) of the header titleThe default is 2.6
- 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
- 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.
- 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
- Three column: 50%, 25%, 25% This is the default
- Three column: 33%, 33%, 33%
- Two column: 66%, 33%
- Two column: 50%, 50%
- One column: 100%
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- The last option in this section is the story stacker disable dates optionThis is useful if your content does not change very often
- These options include: Facebook, Twitter, and YouTube links, Facebook Insights ID, Custom Logo, Custom Logo Height, Custom Logo Width, Custom CSS
- 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 YoutubePage URL into the optionsIf no URL is provided the Facebook, Twitter, and Youtube logos will default to respective UF pages
- Enter any custom CSS into this boxAny text entered here will be wrapped in <style> tags and inserted into the <head> of every pageUse this to tweak certain styles of the website
- Enter the URL of your Sharepoint calendar into the Sharepoint Calendar URL fieldEnter the List Name of your Sharepoint List into the List Name fieldThese options just set the default Sharepoint calendar URL if you are going to use the Sharepoint calendar widget
- The UF WordPress Template can be customized with the use of widgets. There are many widgets and several widget areas throughout the site.
- 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
- 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
- Based on your Homepage Layout there will be up to three separate homepage widget areasHome Left, Home Middle, and Home Right
- 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
- 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
- The Post Sidebar widget area will only display on the right hand side of Single Posts
- 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
- The UF Template has two customizable menu areas that are configured in the WordPress dashboard
- 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
- 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
- The header links menu appears above the search bar in the right of the header. This menu can hold 3 to 5 links
- 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.
- These two screenshots are of the homepage styling on the top and all other pages on the bottom.
- By default each Page will include a left sidebar navigation if there are parent/child page relationships for the current Page
- 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
- 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
- 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
- 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.
- Once saved, the page will now display with two columns. Any text after the two columns will display normally.
- The two columns can also be combined with the full width page template to make a two column full width page.
- For examples of how people are using the template you can visit any of these sites.
- If you have any questions about WordPress or want to learn more there are numerous tutorials and resources available online and on lynda.com
- 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.
- We have a variety of tutorials available on the IT training site. There are tutorials for both the HTML and WordPress templates.