The Berkeley Brand WordPress Theme is a stand alone package that consists of a WordPress theme and plugins. The theme contains accessible, branded styling. The plugins provide functionality to create your site and structure content.

Setup and configuration

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

Installation

Updating from the WP Brand Theme v1? Click here for instructions!

Install the theme

  1. Get the theme by emailing Melani King to request permission to download the WordPress template from berkeley.edu.
  2. Login to your WordPress admin panel
  3. Go to APPEARANCE > THEMES
  4. Click on ADD NEW THEME
  5. In the ADD THEMES page click on UPLOAD THEME
  6. Choose the berkeley_brand.zip file
  7. Click on INSTALL NOW
  8. On the installation page, click to ACTIVATE the Berkeley Brand theme

Install required plugins

  1. Once the theme is installed you will see a notification to install required plugins. If you miss it, go to “Appearance >Themes” in the admin panel. Click on BEGIN INSTALLING PLUGINS.
  2. Install the required plugins:
    • Bootstrap Shortcodes
    • Image Widget
    • List category posts
    • Post snippets
    • Page Builder Sandwich
    • 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 – Photo
    • UCB Brand Component – Promo
    • 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:

Setup

Plugin Setup

  1. Configure Bootstrap Shortcodes
    • Go to SETTINGS > BS SHORTCODES
    • Make sure the first 2 checkboxes are unchecked
    • 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 Worpdress 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:’) +   ‘//www.google.com/cse/cse.js?cx=’ + 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=”http://www.google.com/cse?cx=YOUR_ENGINE_ID&amp;nojs=1″>search on <strong>YOUR-WEBSITE-NAME</strong></a></p> ‘;   ?>   </noscript>

FTP into 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)

  • 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
  • In APPEARANCE > BRAND THEME OPTIONS select a ‘SITE NAME FORMAT’ :
    • One-line with logo:
      logo-one-line
    • Two-line with logo:
      logo-two-line
    • Two-line:
      wordmark-two-line
    • Custom with logo:
      logo-custom
  1. Brand Theme Options. These theme specific options are found under APPEARANCE > BRAND THEME OPTIONS.
    • Navigation Elements (tab)
      1. Site Name Format (see step 2 above)
      2. Show breadcrumb navigation
        • Displays breadcrumbs between headers on posts and pages.
      3. Show content navigation above posts
        • Displays a “previous” and “next” arrow above the title of posts
      4. Show content navigation below posts
        • Displays a “previous” and “next” arrow below a post

        Brand Theme Navigational Elements key

    • 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, if > 0 with a link that takes user to bottom of page where they can post a comment. Will display if enabled and comments are enabled on site under SETTINGS > DISCUSSION. Default is to hide.

        Post meta key

    • 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

    Creating a Mega Menu

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

    • Create Mega Menu:
      1. Go to APPEARANCE > MENUS
      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 new submenu(s) 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.
      3. Change the SUB MENU DISPLAY MODE to MEGA MENU
      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


    • To see more options offered by the Max Mega Menu plugin please visit https://wordpress.org/plugins/megamenu/

    Custom CSS

    Access the CSS editor via APPEARANCE > EDIT CSS. Just add your CSS in the editor and save changes. Jetpack Custom CSS saves your custom styles in the database, making it immune to theme updates or even deactivation of Jetpack.

    Complete documentation for Jetpack Custom CSS can be found at https://jetpack.me/support/custom-css/

    Image sizes

    Heros

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

    Thumbnails

    • 468 x 312px

    Updating WordPress Theme

    1. Download the new theme from gallery.berkeley.edu
    2. Backup current site
    3. On the test/staging/dev server, remove the theme folder and the Plugin folders (all UCB Component plugins, PBSandwich, and Alienship Shortcodes). If you have any non-UCB Component plugins, do not delete their folders..
      • Berkeley Brand Theme (/wp-content/themes/berkeley_brand)
      • UCB Brand Component – Bulleted List Block (/wp-content/plugins/ucbbrand-component_list)
      • UCB Brand Component – Events (/wp-content/plugins/ucbbrand-component_events_list)
      • UCB Brand Component – Events RSS (/wp-content/plugins/ucbbrand-component_events_rss)
      • UCB Brand Component – Photo (/wp-content/plugins/ucbbrand-component_photo)
      • UCB Brand Component – Infographic (/wp-content/plugins/ucbbrand-component_infographic)
      • UCB Brand Component – Promo (/wp-content/plugins/ucbbrand-component_promo)
      • UCB Brand Component – Quote (/wp-content/plugins/ucbbrand-component_quote)
      • UCB Brand Component – Thumb List (/wp-content/plugins/ucbbrand-component_thumblist)
      • UCB Brand Component – Twitter Feed (/wp-content/plugins/ucbbrand-component_twitterfeed)
      • UCB Brand Component – Video (/wp-content/plugins/ucbbrand-component_video)
      • Page Builder Sandwich (/wp-content/plugins/page-builder-sandwich)
      • Alienship Shortcodes (/wp-content/plugins/alienship-shortcodes)
    4. Upload the new/updated Theme folder and Plugin folders
    5. Make sure the theme is activated through the WordPress Admininstration Panel
    6. Make sure all plugins are activated and all non-UCB Component plugins are installed
    7. Look at site and make sure everything works ok
    8. Repeat steps 2-7 on the Production site/server

    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: 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.

    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: http://www.youtube.com/watch?v=0889hqXGXEg
    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

    To fully utilize the Berkeley Brand Theme’s built in structure make use of the built-in grid system, which translates nicely 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.
    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 “Add Post Element” button above 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. Logged into WordPress, go to Settings > Reading
    3. Under Front page displays, select the “static page” option and select as your Front page the page created in step 1
    4. Save changes

    Special Post Types

    posttypes-1

    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. (Gallery, Video and Audio formats are not integrated into the theme at this point.)  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 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:posttypes-2
      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:
      link-typeThe resulting category or archive listing containing this post will display the post title with an arrow, and links directly to the specified URL:
      link-category

    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 a thumbnail image and short blurb, 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.

    posttypes-4

    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. The steps for creating these posts are as follows:

    • Posts > Create a category to uniquely identify the thumb list component (eg. ‘Homepage thumb list’ or ‘About landing thumb list’)
      posttypes-5
    • 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. http://news.berkeley.edu)posttypes-6
    • 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).

    The plugins described in installation instructions need to be installed in order for the widgets to be available in the Available Widgets dashboard.

    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 http://events.berkeley.edu/index.php/rss/sn/SPH/type/future.html 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)

    events-rss-frontend


    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.

    6-3

    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)

    6-4

    6-5


    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”

    6-7


    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 leverages the 3rd party plugin “List Category Posts” (https://wordpress.org/plugins/list-category-posts/other_notes/).

    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” (https://wordpress.org/plugins/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.

    6-8

    6-9


    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)

    6-10

    6-11


    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 similarily to, but not exactly like the Search feature available in Twitter mobile or web clients, such as Twitter.com search. All data are manually entered in the widget form, which accepts the following fields:

    • 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 https://dev.twitter.com/apps/new and log in
    2. Supply the necessary required fields, accept the TOS, and solve the CAPTCHA.
    3. Ensure that your application is configured correctly with the permission level you need (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

    6-12

    6-13


    Component Promo Widget

    This component displays a branded promo block: message with 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)

    6-14

    6-15


    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 leverages 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)

    6-16

    3-17


    Component Video Widget

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

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

    3-18

    3-19


    RSS Widget

    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 leverages 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

    3-20

    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.

    3-4

    4-3

    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.

    4-2

    4-4

    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.

    footer

    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.

    megamenu-widgets

    Components as Post Elements

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

    Add Post Element button locaiton

    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).

    component post elements