|
UT WordPress Theme is a customized version of the Genesis Education Pro Theme by StudioPress for WordPress site developers on campus. It aims to provide a WordPress theme using standardized University brand elements, and improve accessibility compliance while allowing developers to retain control over customization. It is free to the UT community.
We acknowledge and are grateful to the developers at the UT Division of Diversity and Community Engagement for their contributions to the UT WordPress theme.
Features Included:
- Genesis Responsive Slider Plugin
- WordPress Responsive Menu Pro Plugin
- Font Awesome
- CharisSIL Font
This documentation reviews how to edit the elements that make up the UT WordPress Theme for existing sites on UBS. These include: Plugins, Post & Category, Genesis Responsive Slider, Menu, Widgets and WordPress Responsive Menu Pro.
DEMO SITE URL: https://sites.utexas.edu/ut-theme-demo/
OTHER HELPFUL RESOURCES
ACTIVATED PLUGINS
GETTING STARTED
Once you’ve received notification your UBS site has been created, there are a few first steps that should be completed to begin customizing the default settings.
1. Set the Site Logo Image
The site logo appears in the top left-hand corner underneath the UT Branding Bar.
- Upload your logo to the Media Library. The image must be at least 425w x 50h
- Copy the URL path for the image
Go to: Genesis > Theme Settings > UT Theme Settings
- Header Logo URL: Paste the URL to your site logo image from the Media Library
- Header Logo Alternate Text: Type the ALT text for your site logo image
2. Setting up the Navigation Menu
Edit the Menu
You can edit the default menu or create a new one.
Appearance > Menus >
- Enter menu name here: TopNav or name of your choice > Create Menu
- Menu Settings > Check Primary Navigation Menu
- You can add Pages, Posts, Custom Links or Categories as Menu Items.
Create a Sub Menu
- Create a sub menu the same way using the options from the left-hand column
- In "Link Text", add the Name of your sub menu item and this code: Link Text: Sub Menu 1 <i class="fa fa-angle-right" aria-hidden="true"></i>
This will create a Single Right Pointing Angle icon
3. Setting up the Hero Image and Lead Story for the Homepage
Create "Lead Story” category
Posts > Category
- Name: Lead Story
- Slug: lead-story
- Parent: none
- Description: This creates the Slider or "Hero Image" post on the Homepage.
Create Lead Story Post
Posts > Add New
 NOTE: The Featured Image for the Lead Story/Hero Image on the homepage must be 1600w x 460h
- Title: Enter your title
- Categories > Check
 Lead Story
- Content: Add content
- Featured Image > Set featured image > Upload a 1600w x 460h image
Set TITLE:
Set ALT:
- Click Publish
 The “Lead Story” category with the most recent date will always show as the Hero Image/Lead Story. If you have an older post that you now want as the Lead Story/Hero Image, change the date of your post to make it the most recent post. Another way to control this is by changing the category that is being pulled in Genesis Responsive Slider.
Genesis Slider Settings
Genesis > Slider Settings
- Type of Content > By Taxonomy and Terms > Choose a term to determine what slides to include: Lead Story
- Number of Slides to Show: 1
- Content Settings > Check these: Display Post/Page Title in Slider? Display Content in Slider? Hide Title & Content on Mobile Devices
- More Text (if applicable): Change "Continue Reading” to “Read More"
- Excerpt Location (vertical): Bottom
Set Widgets for Slider
Appearance > Widgets
- Move Genesis Responsive Slider to Home - Featured
4. Default Settings for Widgets
These widgets are just examples of what you can do for the sidebar. Feel free to edit, delete and add new.
WIDGET AREA: Header Right
WIDGET AREA: Primary Sidebar
1. Text Box
- Title: Here is a Message from You
- Content:
<img class="alignleft wp-image-14007 size-thumbnail" src=“/wp-content/themes/ut-theme/images/cowhero.jpg" alt="Hero" width="150" />You can place different kinds of widgets here in the sidebar. They could link to pages or posts. <a href="" class="more-link"><span class="underline">Read more</span> <i class="fa fa-angle-right" aria-hidden="true"></i></a>
2. Text Box
- Title: Read our Newsletter
- Content:
<img src=“/wp-content/themes/ut-theme/images/cowmagazine.jpg" alt="magazine cover" width="250" >
Advertise for your newsletter and link to a copy of it.
- Check box: Automatically add paragraphs
3. Text Box
4. Recent Posts
- No Title
- Number of Posts to Show: 3
- Display post date: checked
5. Text Box
- Title: Your Twitter Feed
- Content: <a class="twitter-timeline" data-height="400" href="https://twitter.com/UTAustin">Tweets by UTAustin</a> <script>platform.twitter.com/widgets.js" charset="utf-8"></script>
WIDGET AREA: Home Featured
Genesis - Responsive Slider
NOTE: This widget must be present in Home Featured for the Hero Image/Lead Story to appear as it does in the demo.
WIDGET AREA: Footer 1, 2, 3
Text Box
WIDGET AREA: Footer 4
Text Box
<a href="/"><img style="max-width:100%" src="/wp-content/themes/ut-theme/images/stackedITSNEW_ITS.png" alt="ITS"></img></a><br><br>Address Link<br>Austin, TX 78712<br>512-555-5555<br><a href=“/" title="Email Address Here">Email Address Here</a></p><a href=“/" target="_blank"><img src="/wp-content/themes/ut-theme/images/UTDonate_165w34h.png" alt="Donate" width="150" border="0"></img></a><br></br><div class="social"><a href="https://www.facebook.com" title="Facebook" target="_blank"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a><span class="no-line"> </span><a href="https://twitter.com" title="Twitter" target="_blank"><i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i></a><span class="no-line"> </span><a href="http://www.flickr.com/" title="Flickr" target="_blank"><i class="fa fa-flickr fa-3x" aria-hidden="true"></i></a><span class="no-line"> </span><a href="https://www.youtube.com/" title="YouTube" target="_blank"><i class="fa fa-youtube-square fa-3x" aria-hidden="true"></i></a></div>
5. Responsive Menu Pro Settings
NOTE: You will want to change this setting: Responsive Menu Pro > Header Bar & Themes
This setting creates the Header Bar Logo (same image as Site Logo that appears in top left-hand corner) when the page responds to mobile sizes.
Responsive Menu Pro > Header Bar & Themes
Header Bar
- Check: Create header bar for use with Responsive Menu
- Enter the URL you use for the Site Logo here: Header Bar Logo
- /: Header Bar Logo Link
- 50px: Header Bar Height
- #ffffff: Header Bar Background Colour
The settings outlined below are for the Responsive Menu Pro plugin. They are already in place and you do not need to do anything else. They are provided to you here only if you change something and want to revert back to the default settings. You can import these settings or manually set them using the information below.
Responsive Menu Pro settings in a XML file - UT WordPress Theme - Responsive Menu Settings (XML file)
TAB: Responsive Menu Pro > Look and Feel
Click Button Settings
- Check: Tick this if you would like the 3 lines to turn into an x once clicked.
- Check: Tick this if you would like the click button to remain in the same place when scrolling.
Click Button Size Settings
- 28px: This is the width of the individual 3 lines
- 4px: This is the margin between the individual 3 lines
- 4px: This is the height of the individual 3 lines
Click Button Location Settings
- 2%: This is the distance from the right/left of the page (as defined below) in % that the menu will be displayed
Menu Settings
- UT WordPress Theme: This is the title at the top of the responsive menu
- Primary Navigation Menu: Choose Theme Location Menu To Responsify
The menu assigned to this theme location (registered with register_nav_menu) will be used for displaying the responsive menu (useful if you use a plugin like polylang).
- /: Menu Title Link - This is the link location for the title
- Right: Slide Side - This is the side of the screen from which the menu will slide
TAB: Colour Settings
Click Button
- #BF5700: Click Button Line & Text Colour - This is the colour of the 3 lines and text for the click button
- Check Box: Click Button Background Transparent - Tick this if you would like a transparent background on the click button
Main Menu
- #392f2d: Link Background Colour
- #6a6361: Menu Link Border Colour
- #392f2d: Current Page Link Background Colour
- #392f2d: Link Background Hover Colour
- #392f2d: Title Background Colour
- #392f2d: Current Page Link Background Hover Colour
Style Settings
- 12px: Click Button Font Size
- 16px: Title Font Size
Animation Settings
- Push: Slide Animation
- 0.25: Animation Speed
- Page Wrappers CSS: .site-container, .nav-secondary .wrap, #responsive_menu_pro_header_bar_left
- 0.5: Transition Speed
TAB: Responsive Menu Pro > Advanced Settings
Menu Advanced Settings
- 1023px: Menu Breakpoint
- 2: Menu Depth
- Check box: Click to Close Menu on Page Click
- .site-header: CSS of Menu To Hide
- 50%: Menu Width
- Above Menu Links: Search Box Positioning
- Uncheck:
 Auto Expand Current Parent Items
- Uncheck: Include script in footer
- Check: Remove CSS !important tags
TAB: Responsive Menu Pro > Header Bar & Themes
Header Bar
TAB: Responsive Menu Pro > Custom CSS/HTML
Custom CSS
.responsive_menu_pro_menu li a{
text-transform: uppercase;
font-size: 13px;
font-weight: bold;
}
.responsive_menu_pro_menu li {
font-size: 12px;
}
.responsive_menu_pro_menu li ul li a{
text-transform: none;
font-weight: normal;
font-size: 14px;
}
#responsive_menu_pro #responsive_menu_pro_search {
width: 100%;
}
#responsive_menu_pro .responsive_menu_pro_menu li.current_page_item > .responsive_menu_pro_append_link:hover,
#responsive_menu_pro .responsive_menu_pro_menu li.current_page_item > .responsive_menu_pro_append_active,
#responsive_menu_pro .responsive_menu_pro_append_link:hover,
#responsive_menu_pro .responsive_menu_pro_append_active {
background-color: #554551;
}
#responsive_menu_pro .responsive_menu_pro_menu li.current_page_item > a:hover,
#responsive_menu_pro .responsive_menu_pro_menu li a:hover{
background-color: #2D2523;
color:#bf5700;
}
#responsive_menu_pro_header_bar_logo,
#responsive_menu_pro_header_bar_logo_image,
#responsive_menu_pro_header_bar_logo .img {
height: 40px;
position: relative;
top: 2px;
}
#responsive_menu_pro_header_bar {
border-bottom: 1px solid #ebe8e2;
}
#responsive_menu_x {
position: relative;
top: -5px;
}
#responsive_menu_pro #responsive_menu_pro_title {
width: 80%;
font-size: 1rem;
white-space: normal;
padding-right: 5%;
}
#responsive_menu_pro_header_bar #responsive_menu_pro_button.responsive_menu_pro_admin_bar_showing {
margin-top: 32px;
}
#responsive_menu_pro_header_bar_logo,
#responsive_menu_pro_header_bar_logo_image,
#responsive_menu_pro_header_bar_logo .img {
height: auto;
max-height: 91%;
top: 3px;
}
@media only screen and (max-width: 480px) {
#responsive_menu_pro_header_bar_logo,
#responsive_menu_pro_header_bar_logo_image,
#responsive_menu_pro_header_bar_logo .img {
top: 4px;
}
@media only screen and (max-width: 400px) {
#responsive_menu_pro_header_bar_logo,
#responsive_menu_pro_header_bar_logo_image,
#responsive_menu_pro_header_bar_logo .img {
top: 3px;
}
@media only screen and (max-width: 320px) {
#responsive_menu_pro_header_bar_logo,
#responsive_menu_pro_header_bar_logo_image,
#responsive_menu_pro_header_bar_logo .img {
top: 2px;
}
|
