How to Customize a UW Madison Theme with the Customizer

Tip: if  you are looking for information on a particular setting, try using your browser’s search feature (Control + s on Windows, or Command + f on the Mac).

Page Index – click the link to jump down to a particular section:

Opening the Customizer

↑ Back to Top

Login to your site.

  1. On the WordPress Admin Dashboard (the black vertical menu at the left), locate and click Appearance..Customize.  The theme Customizer appears, with the Customizer options on the left, and a working display of the homepage on the right so you can see the changes as you make them:
    Theme Customizer Main Screen
  2. Clicking each entry on the left opens a subpanel with more options:
    Subpanel

Options

Site Identity

↑ Back to Top

  • Site Title
    The name of the site.  Appears to the right of the UW shield logo.
  • Tagline
    Not displayed in this theme
  • Campus Title
    The text that appears above or below the site title in all caps.
  • Campus Title Link
    Optional – you can make the this text link to another page on or off the current site.
  • Crest Style (UW shield logo):
Monochrome Monochrome Crest
Color Color Crest
Hybrid Hybrid Crest
  • Site icon
    This is the tiny icon that appears in the upper-left corner of a browser tab or as an app icon on your mobile device.  By default, the site icon is set to a red “W.”  The image for the site icon should be square, and no smaller than 512 pixels x 512 pixels.

Default Site Icon

↑ Back to Top

  • Upload a custom logo
    • Replaces the UW crest logo
    • Acceptable file types – PNG or SVG
    • PNG – maximum dimensions – 250px wide x 80px high
    • SVG – maximum dimensions – not applicable (file type scales up and down without loss of resolution)
  • Upload an alternate logo
    • Allows upload of an alternate logo (PNG or SVG, dimension limits above apply) to cover situations where you need more contrast.  Example: if the existing logo looks great against a white background, it may not have enough contrast against a black background if someone customizes the colors.  You can choose to upload an alternate logo with the colors inverted, or the Customizer will attempt to invert the colors for you.
  • Homepage logo position
    Top left (default), or center left of the hero image (a.k.a. the big image or slideshow at the top of the page)

Colors

↑ Back to Top

  • Background color
    Changes the background color of the page in the band below the bottom of the hero image and above the footer.

    • The default color is #f7f7f7 in case you need to change it back.

Note: the background color change will take effect on the site, but the change does not initially appear in the Customizer when you make the change. To see the effect in the Customizer, click the Refresh button on your browser.

Fonts

↑ Back to Top

This allows you to choose between Verlag, the font used on the main UW Madison website (wisc.edu), and Raleway/Open Sans.

Verlag Sample

  • Verlag has a more distinctive appearance, and the headings are very bold on the page.  It is a little larger than the same size text set in Raleway/Open Sans.  This means text set in Verlag will run a bit longer on the page.

Raleway/Open Sans Sample

  • Raleway/Open Sans is a lighter, more rounded font than Verlag.  The text will appear a little more gray on the page than Verlag.

↑ Back to Top

  • Hide Main Navigation
    Turns off the main menu; use on one-page sites.
  • Navigation Font Size
    Normal (default), or Large

Note: if you have a long menu, enlarging the font could exceeding the menu width; the menu will disappear and be replaced with the three-vertical-bar menu icon:

Menu Exceeds Width

  • Navigation Bar Style
    Opaque Navigation Bar – turns the menu red, and the area above the menu a lighter red:
Opaque Menu Bar
Opaque Menu Bar
  • Transparent Navigation Bar
    Only works over a photo or video – makes a “ghost” (lightened version) of the photo or video behind it:
Transparent Menu Bar Over Photo or Video
Transparent Menu Bar Over Photo or Video

(nope, doesn’t work – Transparent Navigation Bar – on a solid color background – turns the menu background the same color as the background)

  • Drop-down Menus
    Enables the first-level child menus on the horizontal menu, known as the Primary Menu.  The second menu in this theme is the Resource menu, in the upper right corner next to the search icon.  The Resource menu is not affected by changing this setting.
  • Navigation Layout
    Changes the location of the Primary Menu – either above the UW crest, or below it.

Hero Image Options

↑ Back to Top

The hero image displays header slides you create using the Header Slide option on the Admin Dashboard Header Slides.  The slides can contain an image or video, latest posts, a specific post, site search, or remote content pulled in from another WordPress website.  For more information on creating Header Slides, see these instructions.

  • Shown/Hidden
    Toggles the Hero Image/slideshow on or off.
  • Use a cross dissolve effect for Header Slide transitions
    Adds an animation effect when the slides change.
  • Frosted Glass Effect on Homepage
    Takes the hero image and reflects it below the main menu, blurring it.
    Note: this only applies to photo slides, not videos.
  • Frosted Glass Effect on Subpages
    Takes the hero image and reflects it below the main menu, blurring it
    Note: this only applies to photo slides, not videos.
  • Hide Header Slides Dots, Arrows
    Controls the slide navigation options.  By default, the Header Slides display centered dots below the slide and arrows at the far left and right of the slide.
  • Hero Image Size on Homepage
    Changes the space between the slide title and the top of the page content – does NOT change the size or placement of the hero image.  You can use this command to reduce extra white space below the slide.
  • Hero Image Size on Subpages
    insert description here

Page Options

↑ Back to Top

  • Page Breadcrumbs
    This turns off/on the page path with links at the top of page:
    Breadcrumb Trail
  • Posted by Location
    This only applies to Posts (a.k.a. articles) – it moves the name/username of the person who published the post to before or after the article:
    Posted by Location
  • Sidebar Style
    Toggles the styling of the sidebar between dots, card, and line:

Sidebar Style

  • Mobile Responsive Tables (ask Al)
    • Tablesaw
    • Data Tables
  • Sidebar Navigation Style
    This only applies when the page is tied to other pages with a parent/child relationship in the Page Attributes box.

    • Simple Navigation
      Shows the position of the current page at the top of the navigation tree, and displays links to any child pages:
      Simple Navigation
    • Expanded Navigation
      Shows the position of the current page and all the page’s siblings at the same level,  with links to any child pages:
      Expanded Navigation
      In the example above, the current page is documentation, Editing Content and What is WordPress are sibling pages at the same level, and Why Aren’t My Changes Showing? and Where Did My Website Menu Go? are child pages of Documentation.

Social

↑ Back to Top

Adds social media icons to the lower right corner of the footer, shown on all pages of the site:

Social Media Icons

As you enter the social media ID in the fields, an icon appears in the lower right corner of the footer, linked to that account.

Social media account choices include:

  • Twitter
  • Flickr
  • Facebook
  • LinkedIn
  • Instagram
  • YouTube

Addition ways to link to your social media account:

  • The Cals WP Twitterfetcher Widget plugin allows you to add a widget (box) in the sidebar that displays your most recent Tweets.
  • The Advanced Content Editor allows you to add a fancier block to the content area of your page with social media links.  Click here to learn more about the Advanced Content Editor.

Background Image

↑ Back to Top

Adds a background image (the same one) to every page on the website.

Consider these points before adding a background image to your site:

  • Adding a background image may be visually “busy” and may distract visitor’s attention away from your content.
  • It may also cause your webpage to load slowly, particularly over slow connections, like mobile.
  • Screens vary from a tiny phone screen to huge desktop monitors.  You can downsize a big photo to fit a small screen, but you can’t upsize a photo to fit a bigger one – it will just make the dots (pixels) larger and make the photo blurry.  You are stuck with whatever size the original photo was captured at.

Example:

Photo Enlargement-Before

Look at the edges of the water lilies and the water surrounding them.

Watch what happens to those edges and the water when we enlarge that photo by 200%:

Photo Enlargement-After

  • Preset
    Fill screen, Fit to screen, Repeat, Custom
  • Image Position
    Allows you to position the background image in the browser window.
  • Image Size
    Original, Fit to Screen, Fill Screen
  • Scroll with Page
    Normally, everything layered on the page is tied together, and everything moves together when you scroll the page up or down.  Turning off this setting means the background image will remain in place, while the content layers scroll over it.

Analytics

↑ Back to Top

Analytics monitors your site traffic, and breaks it down into statistics like number of site visitors, which pages they visited, at what time, where the visitor was from, and what type of technology they used to access the site.

These types of statistics are useful for faculty annual activity reports, reports to funding agencies, grant proposals, and faculty tenure packages.

Two free analytics programs are Google Analytics and Facebook Pixel Analytics.  You must first create an account and get a tracking ID, then you add the tracking ID to the fields in this section of the customizer.

For more information on setting up analytics for your site, email websupport@cals.wisc.edu.

↑ Back to Top

WordPress has a built-in site search.  However, if your site contains a number of files such as Word or PDF files, and you want people to be able to search for terms contained inside these files, you may want a more powerful search for your site.

In the past, we have used Google CSE for this purpose.  Unfortunately, Google is in the process of phasing that product out.  We are currently searching for a replacement product.

↑ Back to Top

This theme allows two menus:

  • the main horizontal menu, which is located near the top of the page or post
  • a resource menu, located in the upper right of the page or post

Main menu:

  • supports a single level of child entries*
  • by default, the theme does not display child entries – you must enable them in Customizer..Navigation Options..Drop-down Menus
  • the single level limit makes the menus easier to navigate on mobile devices
  • if there are too many entries on the menu, or the individual labels are too long, the main menu will collapse to a three-vertical bar icon

* child menu entries are the drop-down list entries that appear offset to the main “parent” menu entry when you hover your cursor over the entry, or click the entry.

Resources menu:

  • appears collapsed by default; when you click the menu, a popup appears with the menu items
  • does not support child entries

This section of the Customizer shows what menu files are assigned to the main and resource locations.

The Customizer provides little context for working with the menus; you may want to read this page to learn how to work with the full menu editor (Appearance..Menus). The full menu editor allows you to create menu files, add content to them, and then assign them to either the main or resource menu locations.

Widgets

↑ Back to Top

This theme has multiple locations to place widgets:

  • for posts – five locations – four 25% width boxes in the footer, and one area in the sidebar
  • for pages – five locations – four 25% width boxes in the footer, and one area in the sidebar

Widgets placed in the footer always display; widgets placed in a sidebar only display when you enable their display – edit the page or post, and in the Page Options box, click Show Page Sidebar Widgets.

Tips:

  • By default, when you place a widget in the Posts or Pages widget area, it will display on all the Posts or Pages in the entire site.  It is possible to have individual pages display different widgets, but it requires planning, a special plugin and the help of the Web Support team.  Consider it carefully, because displaying different widgets can confuse the users.
  • If you are troubleshooting why a widget won’t display in the sidebar on a page, double-check that the widget is in the pages widget area, not the posts widget area.  The posts widget area is at the top, and the pages area is down below the footer widget areas.
  • The display of the widget areas in the Customizer is context-sensitive – it will change based on the content (page or post) in the right area of the Customizer.  If the widget area does not have any content, it  may not show up in the left area of the Customizer.
  • By default, the posts widget area contains a bunch of widgets – Search, Recent Posts, Recent Comments, Archives, Categories, and Meta.  You won’t realize that the default widgets are there until you create a post and turn on the sidebar.  It’s a good idea to clean out the posts widget area by dragging the widgets left off the widget area.

The full widget editor (Appearance..Widgets) shows you all available widgets, and lets you add, configure, and remove them from the widget areas.

Static Front Page

↑ Back to Top

By default, WordPress displays your latest posts on the homepage.

This section of the Customizer lets you change that setting, and display either a regular page, or a “post” page consisting of all the posts for a given category.

Additional CSS

↑ Back to Top

If you understand HTML and CSS, you can use this section to add CSS to override the theme’s stylesheet.