UF WordPress Template      Web Services
WordPress Overview•   Easy installation and updates•   Dashboard for control of settings and content•   Simple Post and Pa...
WordPress Training at Lynda• http://www.it.ufl.edu/training and click the  Lynda logo to access the free UF log-in.
WordPress Training at Lynda• WordPress 3 Essential Training
Installing WordPress• Download and install WordPress  – http://wordpress.org/• Installation Instructions  – http://codex.w...
WordPress Dashboard
Posts
Pages
Page Hierarchy
Editing Posts and Pages
Installing UF Template• Download UF template  – http://www.it.ufl.edu/webservices• Upload the UF Template to your WordPres...
Install in WordPress Dashboard
Activate Template
Theme Options
Theme Options• Navigate to Appearance > Theme Options• There are seven option areas:  – General  – Site Title  – Header Ca...
General Options
Webmaster Email
Google Analytics Account Number• This is for Google Analytics tracking• Enter the domain’s account number here and the  tr...
Make a Gift URL
Enable Mega Drop Down Menu
Collapse Sidebar Navigation
Header Call to Action Options
Header Call to Action
Homepage Layout Options
Homepage Layout for Widgets• Three column: 50%, 25%, 25%
Homepage Layout for Widgets• Three column: 33%, 33%, 33%
Homepage Layout for Widgets• Two column: 66%, 33%
Homepage Layout for Widgets• Two column: 50%, 50%
Homepage Layout for Widgets• One column: 100%
Color Scheme
Featured Content Options
Select a Category
Half Width Image
Full Width Image
Disable Timeline Scrubber
Story Stacker
Story Stacker – Disable Dates
Super Admin Options
Social Media Links
Widgets
Widgets
Widget Areas
Homepage Widget Areas
Page Left Sidebar Widget Area
Page Right Sidebar Widget Area
Post Sidebar Widget Area
Footer Widget Area
Menus
Menus• The UF Template has two customizable menus• Each menu is tailored for a specific use• Header Links Menu  – Places l...
Menus
Header Links Menu
Role Based Navigation Menu
Role Based Navigation Menu
Page Layout and Display
Default Page
Full Width Page
Full Width Page
Two Column Page
Two Column Page
Two Column Full Width Page
Example Sites•   webservices.ahc.ufl.edu•   shcc.ufl.edu•   plastic.surgery.ufl.edu•   radonc.med.ufl.edu•   egh.phhp.ufl....
WordPress Resources•   http://codex.wordpress.org•   http://wordpress.stackexchange.com•   http://wp.tutsplus.com/•   http...
Lynda• Lynda is an online training resource partner of  UF and is free to all faculty, staff, and students.• Lynda’s onlin...
Tutorials• www.it.ufl.edu/training/tutorials/• Tutorials cover configuring Theme Options,  Widgets, Menus, and Featured Co...
Thank You Download this Presentation,the Template, and get Training www.it.ufl.edu/webservices
Upcoming SlideShare
Loading in …5
×

UF WordPress Template Presentation 2-3-12

3,809
-1

Published on

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,809
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Why WordPress?
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.)
  • 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.
  • 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.
  • 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.
  • 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/
  • 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.
  • 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.
  • 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.
  • 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
  • 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 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
  • 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: 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 Youtube Page URL into the optionsIf no URL is provided the Facebook, Twitter, and Youtube logos will default to respective UF pages
  • 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.
  • Once again, you can download this presentation, download the template, and find links to our tutorials on the Web Services site. Thank you.
  • UF WordPress Template Presentation 2-3-12

    1. 1. UF WordPress Template Web Services
    2. 2. WordPress Overview• Easy installation and updates• Dashboard for control of settings and content• Simple Post and Page editor• Integrated tools and options
    3. 3. WordPress Training at Lynda• http://www.it.ufl.edu/training and click the Lynda logo to access the free UF log-in.
    4. 4. WordPress Training at Lynda• WordPress 3 Essential Training
    5. 5. Installing WordPress• Download and install WordPress – http://wordpress.org/• Installation Instructions – http://codex.wordpress.org/Installing_WordPress• Once installed, Log In to WordPress – http://yourdomain.edu/wp-login.php
    6. 6. WordPress Dashboard
    7. 7. Posts
    8. 8. Pages
    9. 9. Page Hierarchy
    10. 10. Editing Posts and Pages
    11. 11. Installing UF Template• Download UF template – http://www.it.ufl.edu/webservices• Upload the UF Template to your WordPress Themes folder – Via FTP to yourdomain.edu/wp-content/themes/ – Via WordPress Theme Installer
    12. 12. Install in WordPress Dashboard
    13. 13. Activate Template
    14. 14. Theme Options
    15. 15. 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
    16. 16. General Options
    17. 17. Webmaster Email
    18. 18. 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
    19. 19. Make a Gift URL
    20. 20. Enable Mega Drop Down Menu
    21. 21. Collapse Sidebar Navigation
    22. 22. Header Call to Action Options
    23. 23. Header Call to Action
    24. 24. Homepage Layout Options
    25. 25. Homepage Layout for Widgets• Three column: 50%, 25%, 25%
    26. 26. Homepage Layout for Widgets• Three column: 33%, 33%, 33%
    27. 27. Homepage Layout for Widgets• Two column: 66%, 33%
    28. 28. Homepage Layout for Widgets• Two column: 50%, 50%
    29. 29. Homepage Layout for Widgets• One column: 100%
    30. 30. Color Scheme
    31. 31. Featured Content Options
    32. 32. Select a Category
    33. 33. Half Width Image
    34. 34. Full Width Image
    35. 35. Disable Timeline Scrubber
    36. 36. Story Stacker
    37. 37. Story Stacker – Disable Dates
    38. 38. Super Admin Options
    39. 39. Social Media Links
    40. 40. Widgets
    41. 41. Widgets
    42. 42. Widget Areas
    43. 43. Homepage Widget Areas
    44. 44. Page Left Sidebar Widget Area
    45. 45. Page Right Sidebar Widget Area
    46. 46. Post Sidebar Widget Area
    47. 47. Footer Widget Area
    48. 48. Menus
    49. 49. 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
    50. 50. Menus
    51. 51. Header Links Menu
    52. 52. Role Based Navigation Menu
    53. 53. Role Based Navigation Menu
    54. 54. Page Layout and Display
    55. 55. Default Page
    56. 56. Full Width Page
    57. 57. Full Width Page
    58. 58. Two Column Page
    59. 59. Two Column Page
    60. 60. Two Column Full Width Page
    61. 61. 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
    62. 62. WordPress Resources• http://codex.wordpress.org• http://wordpress.stackexchange.com• http://wp.tutsplus.com/• http://digwp.com/
    63. 63. 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.
    64. 64. Tutorials• www.it.ufl.edu/training/tutorials/• Tutorials cover configuring Theme Options, Widgets, Menus, and Featured Content
    65. 65. Thank You Download this Presentation,the Template, and get Training www.it.ufl.edu/webservices
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×