The Berkeley Brand WordPress Theme is a stand-alone package comprised of a WordPress theme and plugins. The theme contains accessible, https-compatible, branded styling. The plugins provide functionality to create your site and to organize content.

Don’t forget to go over the site release checklist before publishing your site.

Setup and configuration

Instructions on how to install the theme and associated plugins. Includes descriptions and screenshots of theme settings.


Updating from an earlier version? Instructions for updating from an earlier version

Terms of use located on the overview page.

Install the theme

  1. Install WordPress on your server
  2. Get the theme by filling out this form to request permission to download the WordPress template from
  3. Login to your WordPress admin panel
  5. Click on ADD NEW THEME
  6. In the ADD THEMES page click on UPLOAD THEME
  7. Choose the file
  8. Click on INSTALL NOW
  9. On the installation page, click to ACTIVATE the Berkeley Brand theme

Install required plugins

  1. You will see a notification for required plugins. If you miss it, go to the PLUGINS section of the admin panel. Click on BEGIN INSTALLING PLUGINS.
  2. Install the required plugins:
    • Image Widget
    • List category posts
    • Post snippets
    • Page Links To
    • Page Builder Sandwich
    • Bootstrap Shortcodes
    • Classic Editor
    • UCB Brand Component – Bulleted List Block
    • UCB Brand Component – Events
    • UCB Brand Component – Events RSS
    • UCB Brand Component – Facebook Feed
    • UCB Brand Component – Infographic
    • UCB Brand Component – Promo
    • UCB Brand Component – Photo
    • UCB Brand Component – Quote
    • UCB Brand Component – Thumb List
    • UCB Brand Component – Twitter Feed
    • UCB Brand Component – Video
  3. Install and activate the recommended plugins:
    • Jetpack, by Automattic
    • Max Mega Menu, by Tom Hemsley
      • Assumes “free” version of Max Mega Menu, not “pro” version.
      • In the brand theme we have some custom JS & CSS that loads for the Max Mega Menu plugin which overrides some of the plugins default behavior to make it more accessible, per a collaboration with the Web Access team.


Plugin Setup

  1. Configure Bootstrap Shortcodes
    • Make sure the first 2 checkboxes are unchecked
    • Save changes a screenshot of the Bootstrap Shortcut Options screen indicating that the Twitter Bootstrap CSS and Twitter Bootstrap JS boxes are unchecked
  2. Configure Jetpack
    • Need account (log in or create account)
    • Note: Jetpack comes with many features that are beyond the scope of this documentation; for more detail, consult Jetpack’s documentation
  3. Configure Max Mega Menu
    • Go to MEGA MENU > MENU LOCATIONS, select main menu, which will open a panel with settings.
      • check ENABLED
      • EVENT should be CLICK EVENT
    • under ADVANCED:
      • Mobile Menu Behavior: Accordion – Open submenus automatically close when another one is opened
      • CONTAINER should be set to
      • Active menu instance should be 1
    • Save changes

Theme Setup

Google Custom Search (optional) The default search is the built-in WordPress site search. To switch to the Google Custom Search Engine (CSE):

Create a “Search” page in WordPress and paste your CSE JavaScript code (or the code below with your YOUR_ENGINE_ID) into the text view.

<style scoped type=”text/css”>   input.gsc-search-button {height: 35px;background-color: #fafafa;}   .cse input.gsc-input, input.gsc-input {background-image:none !important;}   </style>   <script type=”text/javascript”>   (function() {   var cx = ‘YOUR_ENGINE_ID‘;   var gcse = document.createElement(‘script’);   gcse.type = ‘text/javascript’;   gcse.async = true;   gcse.src = (document.location.protocol == ‘https:’ ? ‘https:’ : ‘http:’) +   ‘//’ + cx;   var s = document.getElementsByTagName(‘script’)[0];   s.parentNode.insertBefore(gcse, s);   })();   </script>   <gcse:search></gcse:search>   <noscript>   <?php   print ‘ <p>Use Google to <a href=”;nojs=1″>search on <strong>YOUR-WEBSITE-NAME</strong></a></p> ‘;   ?>   </noscript>

With your choice of sftp client, connect to your server and go to wp-content/themes/berkeley_brand. Copy the contents of searchform-google.php (below) into searchform.php

<form class=”navbar-form navbar-right” role=”search” id=”navbar-search” action=”/search” method=”get”>     <div class=”form-group”><input type=”search” class=”form-control” name=”q” title=”search term” placeholder=”Search” aria-label=”search term”></div>

Configure Branded Site Title with Berkeley Logo (optional)

  • Add a menu to your site.
    • Create a menu
    • Save menu
  • In SETTINGS > GENERAL enter your site title (e.g. Berkeley Brand Example Site)
  • Adjust any other settings (e.g. timezone, URL, etc) and SAVE changes
    • One-line with logo: screenshot showing Berkeley logo on the left with one line of text showing site name in the freight font in the color medalist on the right
    • Two-line with logo: screenshot showing Berkeley logo on the left with two lines of text showing longer site name in the freight font in the color medalist on the right, seperated by a thin vertical black line
    • Two-line: screenshot showing the two lines of the longer site name in the freight font in the color medalist, with no Berkeley logo
    • Custom with logo: screenshot showing Berkeley logo on the left with a longer custom set site title which takes up three lines on the right in the freight font in the color medalist, seperated by a thin vertical black line
  1. Brand Theme Options. These theme specific options are found under APPEARANCE > BRAND THEME OPTIONS.
    • Navigation Elements (tab)
        1. Show Top Menu navigation bar
          • A white menu bar that appears at the very top of the window, above the brand blue bar
        2. Show site name in Top Menu navigation bar
          • Displays site name in the white menu bar (if set in step 3.a.ii) above the brand blue bar
        3. Show search bar in Top Menu navigation bar
          • Displays search box in the white menu bar (if set in step 3.a.ii) above the brand blue bar
        4. Show breadcrumb navigation
          • Displays breadcrumbs between headers on posts and pages.
        5. Show content navigation above posts
          • Displays a “previous” and “next” arrow above the title of posts
        6. Show content navigation below posts
          • Displays a “previous” and “next” arrow below a post
  • Post Meta Info Options (tab)
    1. Show post author
      • Displays post author below post title. Default is show. Uncheck this box to hide the post author.
    2. Show published date
      • Displays post publishing date below post title. Default is show. Uncheck this box to hide post published date.
    3. Show post categories
      • Displays assigned post categories, if any, above post title. Remember that UNCATEGORIZED is a default category! Default is show. Uncheck this box to hide post categories.
    4. Show post tags
      • Displays post tags, if any, below post title. Default is show. Uncheck this box to hide post tags.
    5. Show link for number of comments
      • Displays number of comments with a link that takes user to the bottom of page where they can post a comment. Will display if enabled, comments are enabled on site under SETTINGS > DISCUSSION, and a given post has comments. Default is to hide.
  • Post & Page Element Options (tab)
    1. Toggle open first brand toggle component on a page
    • The toggle post element is by default closed. Checking this box will load the first toggle element on each page as opened instead of closed.
  • Featured Posts (tab)
    1. By default your site’s homepage will be the post index. If you change your homepage to a static page (see Creating your site’s home page), then use the this link [your-site-url]?post_type=post to reach the post index.
    2. Choose to display the posts as a slider or a grid (which displays in two columns)
    3. Select the post tag you wish to display for posts
      • Create a tag to use as the “featured post” tag
      • Tag the posts you wish to feature. Make sure that they have featured images with the same size
    4. Select the number of posts to display in your featured posts section
    5. Choose whether or not to display post titles as captions
    6. If posts are displayed as a slider, choose to show or hide slider indicators
    7. Choose to display featured posts in the list of posts
    8. The recommended size for featured post featured images is 850×350. If you are using a different size of image please enter it here.
      • Full width is only displayed in the slider option or with a grid size of one featured post
  • Footer Element Options (tab): Options for text that displays in the footer.
    1. Show Departmental Footer?: Display a paler blue departmental footer that will show footer widgets above the Universal Footer. Default is enabled.
    2. Change Privacy Policy Link: the default links to /privacy-policy. You can change this to link to another URL.
    3. Add Contact Us Link: this link appears over the UC Regents Copyright notice in the footer. You can set it to either an email or a URL. Leaving it empty (the default) will result in the link not showing.

Creating a Mega Menu

A Mega Menu is an expandable menu with a two-dimensional dropdown layout that can contain submenu items and widgets. It is a good option if your site has a large selection of pages with clearly defined categories and subcategories. This site uses a Mega Menu. An example of a Berkeley Branded WordPress site without a Mega Menu is

  • Create Mega Menu:
    2. Create new menu, eg. “Main menu”
  • Create top level menu items
    • Add pages, posts, custom links, or categories to your Main Menu to create the top level menu items.
    • In the left column, under MAX MEGA MENU SETTINGS:
      • ENABLE
      • Event: Click
      • Effect: Slide, Medium
      • Theme: Default
      • Click SAVE
  • Create a new menu under APPEARANCE > MENUS to serve as a submenu in your Mega Menu, eg. “Submenu 1 – campus tours”
  • Edit your top level menu items. In this example we will add one image and two submenus to our top level item.
    1. Hovering over the name of the item will reveal a blue MEGA MENU button. Click on this button.
    2. A modal window will open.
    4. Change the far left drop down to 3 COLUMNS
    5. Select the widgets that you wish to add to the Mega Menu
      1. First add an IMAGE WIDGET, then two CUSTOM MENU widgets
      2. Change each widget with to 1/3
      3. Click on the wrench icon to add an image or custom menu, see below. Save the edits to the widget before closing.
      4. Close the modal window, and click to SAVE MENU screenshot showing setup of mega menu with one image widget and two custom menu widgets, each at 1/3 size
  • To see more options offered by the Max Mega Menu plugin please visit the Max Mega Menu plugin page.

Custom Functionality and Styling

Any style changes or functional changes must be made in a child theme; otherwise, they will be overwritten on updates. To make a child theme, consult the WordPress documentation on how to make a child theme.

Image sizes


  • 1-story: 1200 x 600px
  • Text box: 800 x 450px
  • Video split: 800 x 450px
  • Landing page: 1200 x 450px


  • 468 x 312px

Page Templates

The branded “hero” component is a fundamental building block of the Berkeley Brand and it is strongly recommended for use in the site’s homepage. A hero template can also be used for any Page (as opposed to a Post), whether or not it is the homepage. Examples of the hero component are shown here: WordPress templates corresponding to each type of hero component are available in the Page attributes template select dropdown.

  1. Pages > Add New
  2. Enter title and edit permalink as necessary
  3. Page Attributes meta box > select template from one of the following:
    • Hero: image (1200px x 450px) takes full width of page, heading and subheading are overlayed on image
    • Hero-Band-Web-Founders-Rock: no image, heading in color band with tessellations
    • Hero-Band-Web-Medalist: no image, heading in color band with tessellations
    • Hero-Band-Web-Soybean: no image, heading in color band with tessellations
    • Hero-Band-Wellman-Tile: no image, heading in color band with tessellations
    • Hero-Text-Box: split image (800px x 450px) and text box on right
    • Hero-Video-Split: split video (YouTube) with poster image (800px x 450px) and text box on right
    • Full-Width: takes full width of page with no header image
  4. Hero, Hero-Text-Box and Hero-Video-Split templates:
    • In Featured Image meta box, select “Set featured image”
    • Browse to and select image or upload a new one
    • In attachment details box, enter Caption (required main heading) and Subheading (optional)
    • Select Background color and enter Photo Credit, External URL, Video URL (Hero-Video-Split template only)
    • For Hero-Video-Split template, video URL should be in the following format:
  5. Hero-Band-Web-Medalist, Hero-Band-Web-Soybean and Hero-Band-Wellman-Tiletemplates:
    • No featured image – page title appears in color band
  6. Save page

Building a page with the Classic Editor

To get the most out of the Berkeley Brand Theme’s built in structure, use the built-in grid system, which corresponds to the Bootstrap responsive framework.

  1. In the visual editor, click the “Columns” icon in the editor toolbar to create a grid. A grid is made up of rows of columns of equal or varying widths. Select one of the available options, eg. 2/3 + 1/3 columns, which can be thought of as a bootstrap 8-col/4-col row. screenshot showing location of the ADD POST ELEMENT button directly above the WYSIWYG and the CREATE GRID button which is the last button on the top row of the WYSIWG buttons
  2. A grid-like layout appears with default “Column text” inside each grid cell. Select text and start typing to enter content. Or, click on the “Add Post Element” button above the content editor box to enter a widget component. A popup window will appear with all available component options.
  3. Create more grid elements by cloning rows and/or columns, and entering/editing the content as above. (helpful hint: make sure “Enable full-height editor and distraction-free functionality” is unchecked in Screen Options.)
  4. Save the page and preview, tweak as necessary to get desired layout.

Creating your site’s home page

In WordPress, the default homepage for a new installation is a list of the most recent posts. To set your site’s home page as a static page with a branded “hero” component:

  1. Create a page with hero as detailed above
  2. o to Settings > Reading
  3. Under “Your homepage displays”, select the “static page” option and select the page created in step 1
  4. Save changes

Special Post Types

Post types are available on the right under “Format” when creating a new post or editing an existing post. By default, new posts are “Standard.” However, the Berkeley Brand theme also provides “Accordion” and “Link” formats. These differences are described below.

  • Accordion – a custom post type that can be used on a category or archive listing to show and hide large areas of content quickly on a single page without scrolling. Each post title is displayed in a collapsible gray box, and clicking the + toggles an excerpt of the post to open and close:screenshot showing an example of multiple accordion post types displayed on a page as a column of collapsible items To change the default sort order, edit each post, scroll down to Custom Fields section, select the Custom Field “displayOrder” from the dropdown, assign a number, press “Add Custom Field,” then “Update.”
  • Link – a custom post type that can be used on a category or archive listing to link directly to an external URL. Enter the external URL into the main content area, followed by text content (optional) as shown below.The resulting category or archive listing containing this post will display the post title with an arrow, and links directly to the specified URL:screenshot showing edit post for a link post type. first line of text in the WYSIWYG is a URL and the LINK post format is checked in the Format option box below the SAVE button screenshot showing a link post type is displayed on your site's All Posts page as a list showing each post's title and summary

Posts for Component Thumb List Layout

Component thumb list is a custom component widget that comes bundled with the Berkeley Brand theme. It is useful when displaying a list of links accompanied by thumbnail images and short blurbs, as in a landing or overview page for a given section of the website. See Photoshop templates to transform a portrait image into a landscape image for use in this layout.

In order to make it available as a widget or page element, each item in the thumb list needs to exist as a post in a specific category. This is how to create such posts:

  • Posts > Create a category to uniquely identify the thumb list component (eg. ‘Homepage thumb list’ or ‘About landing thumb list’)
  • For each thumb list item, add a post (Posts > Add New) and select the new category created above. Required fields are Title, Excerpt and Featured Image. The Featured Image is the thumbnail image that is displayed in the thumb list, and dimensions should be 468px wide by 312px high.
  • Customize:
    • In order to control the display order of posts created in step 2 assign each post a custom field with the name displayOrder with a value being an integer indicating the order of the post (1, 2, 3, etc)
    • Default behavior is that each item in the thumb list will link to its single post view. If it should link to a specific URL, assign the post a custom field with the name externalURLwith its value being the URL (e.g. showing that Custom Fields for the Link Post Type shows below the Post Excerpt field
  • Create widget component as described in Component Thumb List.

Branded Components

Components may be added to pages or posts, or used as native WordPress widgets (under Appearance > Widgets).

a screenshot showing a Berkeley Branded webpage with page specific grid and components added using the Page Builder as well as widgets added to the page using WordPress native widgets

Components Events RSS Widget

This component fetches a valid RSS feed from UC Berkeley Calendar, parses it and displays as a branded event listing block. The widget form accepts the following fields:

  • Events block title
  • UCB Event Calendar RSS Feed URL – this refers to the RSS feed generated automatically for all calendars in the UCB Calendar Network. Refer to the documentation for details. The URL format is where SPH is the (case-sensitive) calendar name. For example, “coe” for College of Engineering, “lhs” for Lawrence Hall of Science, “CNR” for College of Natural Resources, etc.
  • Include recurring events (checkbox)
  • Number of items to display
  • XML element containing date (typically ‘link’)
  • Type of display (vertical or horizontal)

Component Events List Widget

This component fetches Events (a special type of post) in WordPress (managed from main WP Menu). Each event must have a Title and Start Date; all other fields are optional.

screenshot of the WP admin panel with the EVENTS post type in the left side menu below POSTS

The widget pulls the next specified number of posts and displays them in a branded event listing block. Widget form accepts the following fields:

  • Title
  • Number of events (max 10)

Component Infographic Widget

This component displays a branded widget single metric infographic. Data is entered manually in the widget form.

Accepted fields are:

  • Infographic Amount (required)
  • Caption (optional)
  • Shape (default is ribbon badge)
  • Color (of infographic. Default is Berkeley blue.)

Component List Block

This component displays a branded bulleted list of links. All data is entered manually in the widget form, which accepts the following fields:

  • Title
  • Bulleted item text
  • Bulleted item link (prepended with “http://” if external URL)
  • Optionally open in new window (checkbox)
  • Click “Add Item” to add new item
  • Control display order by clicking and dragging items around, or check “Reverse output order”

Component Thumb List

This component is useful for creating a sub-navigation list on a landing or overview page, by aggregating all posts assigned to a specific category and displaying the title, featured image thumbnail, and excerpt in a branded thumb list.

It uses the 3rd party plugin “List Category Posts” (

To create a thumb list:

  1. Create individual posts for each item in the thumb list as outlined in Special Post Types. Optional: To link the post to an external site, install the plugin “Page Links To” (
  2. In Appearance > Widgets add the “Component Thumb List” widget to a sidebar
  3. Widget form fields are Title and Category (dropdown of all categories). Select the category created in step 1.

Note: A thumb list can also be used in any post or page, by inserting the following short code in the main content editor:

[catlist ID={categoryid} orderby=ID order=ASC excerpt=yes thumbnail=yes thumbnail_size=full thumbnail_class=navthumb template=brand]

where id is the category ID, found by going to Posts > Categories in the WordPress dashboard and hovering over the category name.

Component Quote Widget

This component displays a branded quote block with quote and byline, with an option of Web Pacific or Founder’s Rock for the background color. All data is entered manually in the widget form. Accepted fields are:

  • Quote text
  • Quote source or attribution
  • Quote byline
  • Background color (select menu: web-pacific or founders-rock)

Component Twitter Feed

This component performs a search via Twitter Search API via Oauth Authentication. It allows queries against the indices of recent or popular Tweets and behaves similarly to, but not exactly like the Search feature available in Twitter mobile or web clients, such as search. All data fields are manually entered in the widget form, which accepts the following:

  • Title
  • API Consumer Key
  • API Consumer Secret
  • Search Query: Enter from:<twitterhandle> for recent tweets from a specific user, or <@ or #><search string> to search on a specific handle or hashtag
  • Number of Tweets to be displayed (max 5)

The Consumer Key and Consumer Secret are obtained by creating an app in your Twitter account, which will generate an API key. Here are the steps:

  1. Go to and log in
  2. Supply the necessary required fields, accept the TOS, and solve the CAPTCHA.
  3. Ensure your application is configured correctly with the appropriate permission level (read-only, read-write, read-write-with-direct messages)
  4. Submit the form
  5. Copy the consumer key (API key) and consumer secret from the screen into your application

Component Promo Widget

This component displays a branded promo block: a message with a linked URL, brand color background, and optional image. All data is entered manually in the widget form. Accepted fields are:

  • Promo heading
  • Image Crop: “square” or “circle”
  • Promo Message (appears below heading)
  • Promo link (prepend with http:// for external URL)
  • Background color (select from allowed brand colors)

Component Photo Widget

This component displays a static image with caption, with or without modal “zoom” popup. All data is entered manually in the widget form, which uses Media Manager for selecting the image. Accepted fields are:

  • Caption
  • Image (select from Media Library or Upload New)
  • Photo Credit (Optional)
  • Link (prepend with http:// for external URL)
  • Modal popup (checkbox)

Component Video Widget

This component displays a thumbnail image and caption, which links to an embedded YouTube video in a Bootstrap modal popup. All data is entered manually in the widget form, which uses Media Manager to select the image. Accepted fields are:

  • Caption
  • Poster image (select existing from Media Manager or Upload new)
  • YouTube Video URL (must be in format: where videoid is unique id from YouTube

RSS Widget

This component is used for parsing entries from any RSS or Atom feed. For example, is the RSS feed for Research News. Styling is customized to match the branded bulleted list component. It uses the built-in WordPress “RSS” widget for the widget form. Accepted fields are:

  • RSS Feed URL
  • Title
  • Number of items to display (max 10)
  • Checkboxes to display item content, author, date

Components as widgets

WordPress widgets are pieces of content that are placed in “sidebars,” although sidebars do not have to be vertically oriented. Widget content in sidebars can be repeated on other posts or pages using the same template.

For this theme, there are four widget sidebar areas:

1. Homepage Widgets

Homepage Widgets are intended for use only in “Home” pages that use the homepage hero templates. These sidebars are actually horizontal “rows” rather than sidebars, and 3 of these rows are available for widget content. The horizontal spacing of widgets placed in these rows are evenly distributed within the row.

screenshot showing the Widget panel of the WP admin, with three sections for Homepage Widgets located on the right side of the screen

screenshot showing that widgets in Homepage Widgets 1, 2, or 3 sections will display below the page content in order of Homepage Widgets 1 section, Homepage Widgets 2 section, etc

2. Primary Sidebar

The Primary Sidebar is for use primarily in posts and is intended to be more of a traditional vertical sidebar column. Visibility of widgets placed here can be controlled at a granular level using the “Visibility” settings which are part of the Jetpack plugin.

screenshot showing the Widget panel of the WP admin with the Primary Sidebar section on the right side of the screen. Widgets added to this section will not show on hte Homepage of your site.

screenshot showing that widgets added to the Primary Sidebar section will show on pages and posts that are not the Homepage of the site

3. Footer

The Footer sidebar is used for creating up to 4 columns of content in the departmental footer area, above the main Berkeley footer. These sidebar areas are appropriately named Footer 1, Footer 2, Footer 3 and Footer 4.

4. Mega Menu Widgets

The Mega Menu Widgets sidebar is limited to the Mega Menu dropdown area illustrated below. Note that the only widgets supported here are the Image Widget and Custom Menu.

screenshot showing that widgets added to the Mega Menu Widgets section in the WP Widgets admin panel will be available to use in you Max Mega Menu

Components as Post Elements

Click on “Add Post Element” button above content editor box to enter a widget component with a grid.

screen shot showing the Add Post Element button is located to the right of the ADD MEDIA button directly above the WYSIWYG

A popup window will appear with all available component options. Berkeley Brand components are labeled as such, other elements that appear are widgets (default WordPress and from installed plugins).

Components as Shortcodes

Branded components can also be added to pages as shortcodes. Below is a list of the shortcodes and their options.

  • Bullet List
    • [pbs_component_list title="test" item1="blah" item_link1="blah" /]
  • Events List
    • [pbs_component_events_list title="The title" number_events="3" /]
  • Events RSS
    • [pbs_component_events_rss title="Event Rss" feeds="SPH" recurring="true" max="5" datefield="link" list_format="1" /]
  • Photo
    • [pbs_component_photo title="A Caption" image_id="79" text="A Credit" link="" is_modal="true" /]
  • Promo
    • [pbs_component_promo promo_heading="Promo Heading" promo_message="A Promo Message" image_id="76" promo_link="" promo_background_color="web-soybean" /]
    • For a circle image add: promo_block_type=”promo-image-circle”
    • Background color options are: web-medalist, wellman-tile, rose-farden, golden-gate, web-lap-lane, web-soybean, web-gray
  • Quote
    • [pbs_component_quote quote_text="This is a quote" quote_source="Me" quote_byline="a web developer" quote_background_color="web-founders-rock" /]
    • Background color options are: web-founders-rock, web-pacific
  • Thumblist
    • [pbs_component_thumb_list title="A Thumblist" categoryid="5" /]
  • Twitter
    • [pbs_component_twitterfeed title="A Title" consumer_key="CONSUMER_KEY" consumer_secret="API_CONSUMER_SECRET" query="oskibear" number="3" /]
  • Video
    • [pbs_component_video title="A Caption" image_id="82" video_url="" /]
  • Infographic
    • [pbs_component_infographic infographic_amount="32" infographic_caption="A Caption" infographic_shape="badge-ribbon" infographic_color="berkeley-blue" /]
    • Infographic shape options are: badge-ribbon, bubble, burst-8, burst-12, circle, diamond, heart, hexagon
    • Infographic color options are: Berkeley-blue, founders-rock, California-gold, medalist, wellman-tile, rose-farden, golden-gate, south-hall, bay-fog, Lawrence, lap-lane, pacigic, sather-gate, ion, soybean, stone-pine