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.
Instructions on how to install the theme and associated plugins. Includes descriptions and screenshots of theme settings.
Learn how to use branded components to structure your site and content.
Downloadable resources for use on your website.
Updating from an earlier version? Instructions for updating from an earlier version
Install the theme
Install required plugins
Google Custom Search (optional)
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)
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 https://blogs.berkeley.edu
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.
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: http://www.berkeley.edu/styleguide/components#heros. WordPress templates corresponding to each type of hero component are available in the Page attributes template select dropdown.
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.
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:
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.
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:
Components may be added to pages or posts, or used as native WordPress widgets (under Appearance > 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:
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.
The widget pulls the next specified number of posts and displays them in a branded event listing block. Widget form accepts the following fields:
Component Infographic Widget
This component displays a branded widget single metric infographic. Data is entered manually in the widget form.
Accepted fields are:
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:
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” (https://wordpress.org/plugins/list-category-posts/other_notes/).
To create a thumb list:
Note: A thumb list can also be used in any post or page, by inserting the following short code in the main content editor:
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:
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 Twitter.com search. All data fields are manually entered in the widget form, which accepts the following:
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:
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:
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:
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:
This component is used for parsing entries from any RSS or Atom feed. For example, http://news.berkeley.edu/category/research/feed/ 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:
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.
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.
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.
Components as Post Elements
Click on “Add Post Element” button above content editor box to enter a widget component with a grid.
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.