UA WordPress Theme

The UA WordPress theme allow you to edit and update your website with a simple CMS (Content Management System) interface while taking advantage of the clean, professional look and feel of the UA Web Templates. The instructions on this page will help you get started with setting up the UA theme in WordPress.

This guide includes some references to Adobe Dreamweaver. Please consider Dreamweaver to be interchangeable with any HTML editing software you are using.

Installing the UA Theme in WordPress

If you are new to WordPress and have not already installed the UA Theme, it is highly recommended to use the Dashboard method to install. However, if you are updating to the latest version of the UA Theme, you will need to follow the Manual installation instructions.

Dashboard (recommended for new users)

  1. Download the ZIP file onto your computer.
  2. Login to the WordPress Dashboard as a user with Administrator privelages.
  3. Click on AppearancesThemes→Install Themes tab.
  4. Under the Install Themes tab, click on the Upload link, find the ZIP on your computer and upload the UA Theme.
  5. Activate the theme.

Manual

  1. Download the ZIP file onto your computer and extract the files.
  2. Login to your server with an FTP client and navigate to the wp-content/themes directory.
  3. Upload the ua_theme folder into this directory.
  4. Login to the WordPress Dashboard as a user with Administrator privelages.
  5. Click on AppearancesThemes→Manage Themes tab.
  6. Activate the theme.

UA Theme Options panel

UA Theme Options Panel

The newest release of the UA WordPress Theme is now more dynamic and easily customizable all from within the WordPress admin. After activating the UA theme, you will see a new option created under the Settings tab called UA Theme Options.

WordPress Admin Dashboard: SettingsUA Theme Options

This panel allows you to control various design aspects of your site; all without touching the code. Here are the options you can select from the UA Theme Options panel:

  • Search in header
  • Navigation type
  • Content layout

Basically, this combines all variations of our previous UA WordPress themes into one multipurpose theme.

Search in header

UA Theme Options Panel - Search

One of the variants of our UA Web Templates is the option to have a search box in the header. With the new UA Theme Options panel, you can turn this feature on or off anytime you want to.

The default option is set to off.

Navigation type

UA Theme Options Panel - Navigation

WordPress 3.0 introduces a new Menu feature that allows you to create and control various menus to be used in your theme. The following are the different horizontal navigation types you can select from:

  • One Level (default)
  • Two Level
  • None

By selecting a navigation type, this will determine the active menu locations available to you in the WordPress Menus section. Listed below are the number of different menus you can customize:

  • Primary navigation
  • Secondary navigation
  • Sidebar menu
  • Functional footer (left, middle, and right)
  • Footer links

For detailed instructions on how to create a WordPress Menu, please refer to the Menus Documentation.

Default Menus
To give you a better idea of how your navigation looks upon theme activation, we have created default menus. These are only meant to be placeholders and will automatically be replaced once you have created and assigned a menu to that area.

Content Layout

UA Theme Options Panel - Layout

Another feature the UA Options Panel lets you control is the layout of your content. The UA Theme's structure is based off the 960 Grid System and is very flexible with the number of ways you can customize the content layout. Provided in the options panel are some of the most popular layouts:

  • Small Sidebar on Left - the default option. Two column layout with small sidebar on the left and content area on the right
  • Small Sidebar on Right - Two column layout with small sidebar on the right and content area on the left
  • No Sidebar - One column layout with content area stretching across entire width of the page
  • Large Sidebar on Left - Two column layout with large sidebar on the left and content area on the right
  • Large Sidebar on Right - Two column layout with large sidebar on the right and content area on the left
  • Two Small Sidebars - Three column layout with two small sidebars on the left and right

NOTE: if you choose the No Sidebar option, Widgets will not be active.

Widgets

WordPress Admin Dashboard: AppearanceWidgets

If you have chosen a content layout with a sidebar, the Widget area will be active. In order to give you the greatest number of options to uniquely style your site, you will be able to use these sidebar styles:

  • Sidebar - an area on the sidebar with no background color
  • Sidebar Linksbox (crimson) - a UA-styled linksbox with a crimson header
  • Sidebar Linksbox (gray) - a UA-styled linksbox with a light gray header
  • Sidebar Linksbox (dark gray) - a UA-styled linksbox with a dark gray header

WordPress Widgets

For detailed instructions on how to use Widgets, please refer to the Widgets Documentation.

Featured Image

The Featured Image is an advanced function of WordPress and in order to utilize it, you must uncomment all instances of the_post_thumbnail in the theme files. Please contact us at webmaster@ur.ua.edu if you need assistance with implementing this feature.

Site Styles

There are 3 kinds of website homepages available for you to select: Blog Style, Static Homepage, or a combination of the two.

Blog Style
By default, WordPress will display the homepage of your website as a blog. For many themes, including the UA themes, the default will be to use a blog-style homepage.

Static Homepage
If you would like to use a static homepage to give your website a traditional website feel, there are two methods you can use: Beginner or Advanced.

Beginner Static Homepage

  1. In the WordPress Admin Dashboard, create a new Page and give it a meaningful title such as your website name. This will be your Front page in the SettingsReading panel.
  2. Use the Visual Editor to add images and text. If you would like to use the top image style that matches our web templates, please use one of the provided .psd located in the ua_theme\images folder.
  3. Make a new Page called 'Blog' and publish. Only fill in the title box. Leave the rest of the page blank. This will be your Posts page in the SettingsReading panel.
  4. In the WordPress Admin Dashboard, go to SettingsReading.
  5. Next to the "Front page displays" option, select "A static page" and then use the dropdowns to designate the Front page and Posts page from what you created in the steps above.
  6. Save your changes.

Advanced Static Homepage

  1. In the WordPress Admin Dashboard, create a new Page called 'statichome'. Only fill in the title box. Leave the rest of the page blank.
  2. To the right is a section called 'Attributes'. Under 'Template' select 'Static Home Page' and publish the page. This will be your Front page in the SettingsReading panel.
  3. To edit the content of your static home open up 'statichome.php' in Dreamweaver. This will give you access to add and edit the HTML to the main area of the home page. To place an image within your static homepage, reference images like this <img src="<?php bloginfo("template_url"); ?>/images/imagename.jpg" />. Save 'statichome.php' and upload to the ua_theme folder with Dreamweaver or an FTP program.
  4. Make a new Page called 'Blog' and publish. (Once again, only fill in the title box, and this time do not make any changes in the 'Attributes' section.) This will be your Posts page in the SettingsReading panel.
  5. In the WordPress Admin Dashboard, go to SettingsReading.
  6. Next to the "Front page displays" option, select "A static page" and then use the dropdowns to designate the Front page and Posts page from what you created in the steps above.
  7. Save your changes.

Static Homepage with Blog Page
If you decide to use a static homepage, but you still want to have a blog on your site elsewhere, all you need to do is include an absolute link to your blog within your main or side navigation. You can find this link by going to the 'blog' page that you created above.

Customizing your Site

We have done our best to make the UA WordPress theme fully-functional right out of the box, but you will at least need to customize the header image for your organization. For additional functions and capabilities not covered in this tutorial, please refer to the WordPress Codex.

Header
WordPress Admin Dashboard: AppearanceHeader

Remember that the title of your website will be the same name as your 'Blog Title' when you first install and set up your WordPress site.

Utilizing a new WordPress 3.0 feature, you will now be able to customize the header of the UA Theme by uploading an image via the admin panel.

UA Theme - Custom Header

  1. In the ua_theme\images folder, you will find a header.psd. Open this file in Photoshop and customize the text. Refer to the Template Guide – Elements help text on editing and saving the header.
  2. Go to AppearanceHeader in the WordPress admin and upload your image.
  3. Note: If WordPress asks you to crop the image, you are most likely doing something wrong when editing/saving the Photoshop image. Images sized at 709 x 112 pixels will be used as-is with no cropping necessary.

Navigation
WordPress Admin Dashboard: AppearanceMenus

All navigation is now handled in the WordPress admin using the new Menus feature.

However, there has been one minor change with the Primary Navigation CSS. If you are familiar with our Web Templates, you will know that our CSS allows you to fine tune the width of every "li" in the main menu using CSS IDs of "item1", "item2", etc. This type of control is necessary in case you have menu items of variable length, such as "About", "Academic Programs", "Giving", "Resources and Links", etc.

The new UA WordPress theme will automatically assign the appropriate menu class based on the number of menu items you have in your Primary Navigation menu. For example, if you were to have six menu items, the code would assign a class of "menu_6" to the "ul". On a basic level, this will control the width of each "li". However, because of the UA theme now using the WordPress Menus functionality, we lose the custom CSS IDs such as "item1" and others. These are replaced by automatically generated IDs created by WordPress. For example "menu-item-7", "menu-item-22", "menu-item-13", etc.

If you need this fine-grained customization with your menu items, you will need to examine the generated HTML source code of your home page, gather the menu IDs, and add these to the style.css file. Keep in mind that the TOTAL width of these items must not add up to more than 972px.

Please keep in mind that this sort of customization is for advanced users and requires some knowledge of HTML and CSS. With all of that being said, this step is completely optional.

Shortcodes

Links Box
The latest update to the UA Theme adds a Links Box shortcode. A shortcode is custom WordPress tag that allows you to do things that are normally complicated and involve lots of code with very little effort.

Adding a links box to a post with the previous version had you writing lots of HTML. With the new links box shortcode, it's as easy as wrapping your content with [linksbox]...[/linksbox] in the visual editor.

This will work with minimal customization on your part. However, if you do not like some of the defaults, there are several options available for customization.

Option Description Choices Default Setting
title The heading of your links box (required configuration) Any string of text Header Linksbox
color The background color of the heading crimson, gray, darkgray crimson
header_size Text size of the heading normal, large normal
box_size Width of the box cont_col_2, cont_col_3 cont_col_3
no_right Removes right padding on box (if using two/three boxes in a row, add this to last box) true, false false

Here are several examples how you would use some of those attributes:
[linksbox title="Interesting Box"]...[/linksbox]
[linksbox title="Interesting Box" color="gray"]...[/linksbox]
[linksbox title="Interesting Box" color="darkgray" header_size="large"]...[/linksbox]
[linksbox title="Interesting Box" box_size="cont_col_2" no_right="true"]...[/linksbox]

It's important to remember that the recommended usage for a links box is a bulleted list of links.

Contact Form
A brand new feature to the UA Theme is the addition of a fully functional contact form in an easy-to-implement shortcode.

To include a contact form in your post or page, simply add [uaform] in the visual editor. That's it! By default, it will validate and process the user's input then email to the Administrator's address.

You can change some of the defaults by adding the following attributes to the shortcode:

Option Description Choices Default Setting
form_name The name of the form and subject of email Any string of text Contact Us
to Email(s) the message will be sent to. Single or Multiple emails. If using multiple emails, separate each with a comma Administrator's email

Here are several examples how you would use some of those attributes:
[uaform to="nottheadmin@test.com"]
[uaform form_name="Website Feedback"]
[uaform form_name="Ask Us a Question" to="firstperson@test.com,secondperson@test.com"]

Recommended Plug-ins

Below are several plug-ins that you may find useful as well as links for learning more and downloading each one. For other plugins, visit the WordPress site.

Akismet
Akismet blocks spam from posting on your blog pages.

WP-Pagenavi
WP-Pagenavi adds a more detailed page navigation to your site and has already been formatted in the UA style within each template.

  • NOTE: To use the UA CSS formatting for this plug-in, you must uncheck the "Use pagenavi-css.css" option within the PageNavi options page. Please refer to the documentation on how to do this if you have trouble.

Google XML Sitemaps
This plug-in can automatically generate a sitemap that helps search engines better index your blog.

Visual Form Builder
A plugin that allows you to build simple contact forms using an easy-to-use interface.

Members
A powerful role/capability management tool that easily allows you to customize the permissions of each user type. You can also create custom roles with your own permission settings.

Working With WordPress At UA Mailing List

Subscribe to the "Working With WordPress at UA" mailing list

* indicates required
Email Format

Let Us Know!

Are you using these templates for your site? If so, we'd like to hear from you! Please send a link to your site to us at webmaster@ur.ua.edu so we can see the creative ways in which you have implemented the UA WordPress Themes.

Previous UA WordPress Themes

If you are looking for the previous versions of the UA WordPress Themes, please refer to this page. However, in order to take advantage of the newest features of WordPress and our UA theme, we strongly recommend you use the newest version.

NEXT: UA HTML E-mail Templates