wordpress_calparents1379x919Cal Parents: featured site using WordPress Berkeley brand theme

Installation and setup

Email Sara Leavitt or Melani King to request permission to download the WordPress template from gallery.berkeley.edu.

  1. Install WordPress on your server
  2. Download Berkeley Brand parent and child theme and plugins
  3. Unpack contents of berkeley_brand_wp_content.zip and upload the following to your WordPress installation as follows:
    • All *.zip files in folder “plugins” to /wp-content/plugins/
    • All subfolders/files in folder “themes” to /wp-content/themes/
    • Go to Appearance > Themes and activate “Berkeley Brand” theme (child theme of Alien Ship)
    • Go to Appearance > Theme Options and uncheck the following:

      Show Top Menu navigation bar?
      Show site name in Top Menu navigation bar?
      Show search bar in Top Menu navigation bar?

      Log into WordPress

  4. Underneath the message that begins “The theme requires the following plugins…” click on the link Begin installing plugins.  These are plugins that come bundled with the Berkeley Brand theme package and need to be installed (unzipped) and activated:
    • UCB Brand Component – Bulleted List Block
    • UCB Brand Component – Events
    • UCB Brand Component – Events RSSUCB 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
    • Page Builder Sandwich Version 1.1.1  (do not update to the newer version)
    • Alienship Shortcodes
  5. Underneath the message that begins “The following required plugins are currently inactive…” click on the link Begin activating plugins.  These are required 3rd party plugins that are already installed upon theme activation but still need to be activated:
  6.  Optional plugins:
    1. Page Links To:  https://wordpress.org/plugins/page-links-to/
  7. Configure Bootstrap Shortcodes
    • In WordPress left menu, Settings > BS Shortcodes
    • Make sure the first 2 checkboxes are unchecked:
      bs-shortcodes
    • Save Changes
  8. Configure Jetpack
    • Configure Jetpack (click Jetpack in left menu)
    • Need wordpress.com account (log in or create account)
    • Make sure the following Jetpack modules are enabled (Jetpack > Settings):
      • Custom CSS
      • Custom Content Types
      • Shortcode Embeds
      • Widget Visibility
    • Optional recommended modules
      • Extra Sidebar Widgets (Social Media Icons and more)
      • Contact Form
    • Note:  Jetpack comes with many features that are beyond the scope of this documentation.  Visit http://jetpack.me for full documentation.

Google Custom Search (optional)

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

  1. Create a “Search” page 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>

2. Copy the contents of searchform-google.php (below) to 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>
<button type=”submit” class=”btn btn-default” aria-label=”search” value=”Search” role=”button”><span class=”entypo search”></span></button>
</form>

Creating the Mega Menu

At this point it is assumed that the Berkeley Brand theme has been successfully installed along with its required plugins.  When viewed in a browser, however, there is no menu or header to indicate that it is a Berkeley-branded website.  This page outlines the steps needed to create the main menu structure for your site and make it a “mega menu.”

1.  Create the top level menu structure

menu

Start by defining each top level main menu item in your site architecture.  These can be different link types:  pages, posts, custom links, or categories.  Since no pages or posts have been created yet, initially assigning each top level item to a category is a quick and easy way to generate the menu bar.  This can be changed later on to link to specific pages or posts after they have been published.  But for now, each link will lead to a dynamically generated listing of all posts in that category.

  • In WordPress go to Posts > Categories
  • Under “Add New Category” add the name and “slug” of the category
  • Since these are top level menu items keep the Parent selected as “None”
  • Enter a description, if desired.
  • Posts or pages created in these categories will automatically be displayed if the URL is structured as follows:  site-url/category/category-name/

2.  Defining the Main Menu

  • Appearance > Menus
  • Create new menu, eg. “Main menu”
  • On left side of page, expand Categories panel and select categories created in step 1 on left side, click “Add to Menu”.  You can change these links later to pages, posts or custom links if top level does not correspond to a category.  Hovering over the title of of a main link/category will reveal a blue “Settings” button. Click on this, then go to “Settings” on the left side of the modal that opens. Check the “Disable Link” checkbox to ensure that the top level item is a label and not a link.
  • In “Menu Settings” at bottom of page assign the theme location “Main Menu” to this menu by clicking the checkbox.
  • On left side page, expand Enable Max Menu Settings panel and make sure “Enable” is checked, along with the following settings:
    Event: Click
    Effect: Slide
    Theme: Default
  • Remember to click the Save button (again)2-2

3.  Creating the sub-menus for the mega menu

Next, we create sub-menus for each top level menu item.  Sub-menus are placed inside Custom Menu widgets to populate the mega menu.

  • Create new menu, eg. “Submenu 1 – campus tours”
  • Select categories, pages, posts or custom links from left side and add to menu structure
  • Go back to “Main Menu” created in step 2 by selecting it from the dropdown
  • Hover over top level item in menu structure to activate blue “Mega Menu” button and click
    2-3
  • In popup, configure mega menu of image plus up to 3 sub menus
    1. Sub menu display mode:  Mega Menu
    2. Select a Widget to add to the panel (8 columns)
      1. Select “Image Widget” and select/upload thumbload image for first column
      2. Select “Custom Menu” and select sub-menu(s) created in step 1, Save.  Repeat for multiple sub menus in mega menu panel.
    3. Close popup

    2-4

  • Mega Menu > General Settings
    • CSS Output: select “Don’t output CSS”
    • Click Event Behaviour: select “First click will open a sub menu, second click will close the sub menu”
    • Mobile Menu Behaviour: select “Accordion”
    • Main Menu should be assigned to the menu created in step 2
    • Save Changesmaxmegamenu
  • NOTE:  Because the mega menu is activated by mouse click (as opposed to hover), top-level menu items that should link somewhere don’t work when the menu has been “megafied”; i.e. there is no way to get to a top-level page from the main menu once the mega menu has been enabled. In order for a top level item to link to a page you should include a sub-menu item for that page – for example, the link text could read “Overview” and include in that item’s sub-menu.

Configure Branded Site Title with Berkeley logo

  • In Settings > General, enter your site title (eg. Visitor Services)
  • Adjust any other settings (eg. timezone, URL, etc) and Save Changes
  • In Appearance > Theme Options select a “Site name format” (see examples below):
    • One-line with logo:
      logo-one-line
    • Two-line with logo:
      logo-two-line
    • Two-line:
      wordmark-two-line
    • Custom with logo:
      logo-custom
  • Adjust any other theme options and Save Options
  • View your site in the browser.  At this point you should see the default “Hello World!” WordPress front page with a branded header and main navigation with mega menu

Adding custom CSS without modifying the theme CSS is best done using Jetpack’s Custom CSS feature.  The Custom CSS Editor allows you to add customizations without interfering without theme updates.

Adding Custom CSS

Make sure the Custom CSS module is activated on the Jetpack dashboard, then access the CSS editor via <strong>Appearance &gt; Edit CSS</strong>.  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 <a href=”https://jetpack.me/support/custom-css/” target=”_blank”>here</a>.

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

WordPress template change log

Version 08.19.16 (Adjusted right margin on wordmark in site.css)

Version 05.23.16 (Adjusted font sizes for heros)

Version 05.18.16 (Department name lockup update, removed BerkeleyOS font, branded component color corrections, adjusted hero text alignment)

Version 04.25.16 (Fixed path in layout.css to ‘../images/css/tessellation-bg-03.png’)

Version 03.31.16 (Added fix for WP 4.4.1 showing featured post image with http instead of https; changed gold color of photo thumb widget for accessibility; added underline for links in paragraphs for accessibility)

Version 01.14.16 (Removed unused icomoon fonts; added css to print toggles open)

Version 12.20.15 (Hide text widget in megamenu on mobile)

Version 12.11.15 (Fixed error with page and post submenu items)

Version 11.23.15 (Google search option; sort accordion-format posts)

Version 11.17.15 (first release)

Creating a Page with Hero

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
  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-Tile templates:
    • No featured image – page title appears in color band
  6. Save page

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

To populate the page with content, see Building pages with components and Using Branded Components in WordPress Widgets.

Building pages with components

The Berkeley Brand WordPress theme allows for pages (or posts) to be built using the branded components shown in http://www.berkeley.edu/styleguide/components.  (Note:  the “hero” components shown in the style guide do not apply here – see Creating a Page with Hero for specific instructions on using the hero component)

Adding components is made easy with the help of a third-party plugin, Page Builder Sandwich (https://wordpress.org/plugins/page-builder-sandwich/), which enables drag-and-drop functionality within the WordPress visual editor.  PB Sandwich also lets you create a grid layout which translates nicely to the Bootstrap responsive framework. Unlike native WordPress Widgets, components added using PB Sandwich are unique to the page and are not repeated elsewhere.

pb-widgets

  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.3-1
  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. In addition to widgets supported natively by PB Sandwich, the Berkeley Brand theme comes with brand components available for use in PB Sandwich.  The Berkeley Brand components are named with the prefix “Component” (with the exception of the RSS Widget – see below) and are described as follows:
    • Component Events List:  Branded list of events from local (WordPress) “Events”
    • Component Events RSS:  Branded list of events from specified UCB Calendar Network RSS feed (http://events.berkeley.edu)
    • Component List Block:  Branded bulleted list of user-entered text and optional links
    • Component News Widget RSS:  Branded News list from specified RSS Feed
    • Component Photo:  (468 x 312px) Branded thumbnail photo with caption, with or without modal enlargement
    • Component Promo:  Branded block containing call-to-action text with specified brand color background, with or without image
    • Component Quote:  Branded block containing quote and byline with specified brand color background
    • Component Thumb List:  Branded nav list of linked thumbnail image and accompanying text
    • Component Twitter Feed:  Branded block containing one or more tweets from specified Twitter username or hashtag search
    • Component Video:  Branded block containing image and caption linking to specified YouTube video player in a modal popup
    • Widget – RSS:  Branded list of items from any RSS feed
  4. Other non-Berkeley Brand widgets and elements can also be inserted using PB Sandwich, which has out-of-the-box support for native widgets such as Categories, Custom Menu, Images, Image Galleries, Pages, Recent Posts, Search, etc. as well as Jetpack-enabled widgets.
  5. 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.) 3-2
  6. Save the page and preview, tweak as necessary to get desired layout.
  7. To edit previously inserted Post Elements (components/widgets), hold the control key down while clicking on the Post Element, release the control key and double click the pencil icon.
    3-3

Using Branded Components in WordPress Widgets

In addition to building pages with unique widgetized components with the Page Builder Sandwich plugin, another way to use the Berkeley Brand components is with WordPress’ native 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-44-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-24-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


Supported Widgets:

Currently for the Homepage and Primary Sidebars, the following custom branded components from the style guide components are supported in the Berkeley Brand theme:

  • Component Events List:  Branded list of events from local (WordPress) “Events”
  • Component Events RSS:  Branded list of events from specified UCB Calendar Network RSS feed (http://events.berkeley.edu)
  • Component List Block:  Branded bulleted list of user-entered text and optional links
  • Component News Widget RSS:  Branded News list from specified RSS Feed
  • Component Photo:  Branded thumbnail photo with caption, with or without modal enlargement
  • Component Promo:  Branded block containing call-to-action text with specified brand color background, with or without image
  • Component Quote:  Branded block containing quote and byline with specified brand color background
  • Component Thumb List:  Branded nav list of linked thumbnail image and accompanying text
  • Component Twitter Feed:  Branded block containing one or more tweets from specified Twitter username or hashtag search
  • Component Video:  Branded block containing image and caption linking to specified YouTube video player in a modal popup
  • Widget – RSS:  Branded list of items from any RSS feed

In addition, the following non-branded widgets are supported in the Homepage and Primary Sidebars:

  • List category posts
  • Archives
  • Calendar
  • Blog subscriptions (Jetpack)
  • Contact info (Jetpack)
  • Custom menu
  • Facebook Like Box (Jetpack)
  • Image Widget
  • Login Form
  • Recent Posts
  • Social Media Icons (Jetpack)
  • Text
  • Top Posts & Pages (Jetpack)

The following non-branded widgets are supported in the Footer sidebar:

  • List category posts
  • Archives
  • Custom Menu
  • Text
  • Recent Posts
  • Social Media Icons (Jetpack)

Finally, the following non-branded widgets are supported in the Mega Menu Widgets sidebar:

  • Image Widget
  • Custom Menu

Adding widgets to sidebars:

  1. In the Widgets admin page (Appearance > Widgets) the list of widget areas is on the right, while the available widgets are on the left.
  2. Branded component widgets have the “Component” prefix and are described in Building Pages with Components
  3. Add widgets by selecting from available widgets on left and dragging into widget area on right. Most widgets are configured by filling out one or more form fields. Remember to press Save when finished.  See Creating component widgets page for specifics related to branded component widget configuration.
  4. Insert up to 3 widgets in Homepage widgets area.  Each area is rendered as a bootstrap row with columns of equal width.3-6
  5. To control the visibility of widgets, click the “Visibility” button to Show or Hide each widget by Category, Post, Page, Author, User, Date or Tag.  If Visibility rules are not added the widget will appear by default on all pages that use the Hero templates.
    3-7

Creating branded component widgets

The custom WordPress widgets described on this page were created to facilitate the use of Berkeley-branded web components as showcased in http://www.berkeley.edu/styleguide/components.  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 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:

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

3-21

Special Post Types

This page describes how to create special post types that allow for different layouts.Custom WordPress Post Formats

posttypes-1

WordPress 4 introduced post formats, which are available in the right sidebar of the screen when creating a new post or editing an existing post.  By default, new posts are “Standard” format. However, the Berkeley Brand theme allows you to also choose “Accordion” or “Link” to apply a different UI and functionality to the post when it is viewed in a list or archive.  (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 Thumb List LayoutComponent 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 externalURL with its value being the URL (e.g. http://news.berkeley.edu)posttypes-6
  • Create widget component as described in Creating component widgets.