WORDPRESS FEATURES THEME
A REFERENCE GUIDE
Last updated: March 2, 2018
1
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
TABLE OF CONTENTS
Wordpress FeaturesTheme ......................................................................................................... 2
The Marketing Home Page ...................................................................................................... 3
The Marketing Home Page Attributes ................................................................................. 3
The Marketing Home Page Sections .................................................................................. 10
Marketing Page Child Pages .............................................................................................. 12
Features ................................................................................................................................ 13
Feature Post Type Landing Page ........................................................................................ 13
Feature Properties ............................................................................................................ 13
Feature Shortcodes ........................................................................................................... 18
Carousel Slides ...................................................................................................................... 20
Carousel of Videos ............................................................................................................ 20
Carousel of Images Under Development ........................................................................... 22
Carousel Shortcode ........................................................................................................... 22
Advanced Styling and Layout................................................................................................. 23
Overriding Classes Or Creating New Ones ......................................................................... 23
Template parent ............................................................................................................... 23
Features HTML Layout....................................................................................................... 25
2
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
WORDPRESS FEATURESTHEME
The WordPress (WP) Features Theme is a child theme of the root theme, bcgov-responsive-theme. The bcgov-responsive-theme is the main wrapper of the look and feel of marketing, citizen engagement, and other related WordPress web properties that are required at a minimum to share the main gov.bc.ca Developer’s Guide styles found in the header, footer and navigational menu.
Held within the main container of the Features Theme, the functional purpose is the integration of unique page templates leveraging ‘shortcode’ from the custom post types ‘Features’ and ‘Carousel Slides’. This document will aim to provide you with an understanding of how these pieces fit together, different levels of customization from default settings to leveraging how the elements are laid out with Bootstrap 3.x, and using CSS with inline or unique class assignment to get the look and feel desired.
3
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
THE MARKETING HOME PAGE
When creating a WordPress instance, there are multiple page types that could be used for the homepage. With this theme, it should be based on a page leveraging the ‘Marketing home page’ Template. The actual home page for a WordPress site is set within ‘Settings’ -> ‘Reading’ -> ‘Static Page’ and your page of choice.
THE MARKETING HOME PAGE ATTRIBUTES
Create a new Page, and select Template ‘Marketing home page’. Next select “Publish.”
The default WYSIWYG editor will disappear, and replaced by the page templates ‘Additional options’.
Each option plays a part in the Marketing home page’s components which includes: a banner, banner overlay text, and banner button for call to action.
4
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
FEATURED IMAGE = BANNER IMAGE
The banner of the marketing page template is set by selecting the ‘Feature Image’ of the page. The banner is full width of the browser screen, excluded from a container. The feature image should be a minimum of 1600px wide by 600px high. The height of the graphic will determine the height of the main banner section.
BANNER DISPLAY OPTION
Parallax: The banner image will be the background with a parallax scroll effect.
Block: The banner image will be set in place with no effect, using CSS display:block.
5
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
RANDOM BANNERS BY RANDOM BANNER TAG
The marketing page template has the ability to have random banners, as many as a user tags in the Media library.
To have the banner randomly selected on page load, tag the relevant images in Media->Media Tags. Any images that match the tag will be part of a random pool for the page banner.
MEDIA TAGS
Within the Media section, select any images and apply the same tag within the ‘Media Tags’ field.
Back in the Marketing Theme attributes, select all images tagged with ‘front page’, as an example.
6
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
BANNER TEXT BACKGROUND COLOR
The colour of the background for the text area of the banner.
BANNER TITLE TEXT
The title on the featured image set for the marketing page.
7
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
BANNER TITLE CSS
Change the CSS style of the banner title. The CSS is treated inline, so the format must be ‘style:attribute;’ Example: color: #261149;
BANNER DESCRIPTION
The short description will appear on the banner, below the title.
8
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
BANNER DESCRIPTION CSS
Change the CSS style of the banner description text. The CSS is treated inline, so the format must be ‘style:attribute;’ Example: color: #68555A;
BUTTON TEXT
The text of the button that appears on the banner. If this is not filled out, the button will not appear.
BUTTON TEXT CSS
Change the CSS style of the button text. The CSS is treated inline, so the format must be ‘style:attribute;’. Example: background-color:#68558A; font-size:16px;
Before
After
BUTTON URL
The URL of the button that appears on the banner. If this not filled out, the button will not appear.
9
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
BANNER TEXT OVERRIDE
This allows for the entire banner text overlay objects to be replaced by everything within this editable area. If this field is used it will allow users to override the above banner options and have full control over all elements of the overlay.
10
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
THE MARKETING HOME PAGE SECTIONS
With a marketing page set, the next part focuses upon sections. A section is created when a page is selected to be a child of the page with a Marketing home page template. You can have many sections/child pages to a marketing page. The order of the sections is determined by the ‘Order’ of the page attribute of the child page. Hence -> 0 is first, 1 is second etc.
The child page of the marketing page layout is a full width section, not constrained by a container, and reaches the entire browser window. The WYSIWYG editor is there for the bulk of the content of that section, with ‘Additional options’ for styling the section HTML element.
‘Home’ is using the Marketing Template page type, and ‘-home-section-01’ is using a Default page type. ‘-home-section-01’ is a child of ‘Home’, and will have it’s content aggregated into the home page, as if they are a single page, divided by sections.
BACKGROUND COLOR
The colour of the background for the section. This is full width of the browser screen.
11
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
TITLE CSS
The ability to add inline CSS modifications to the Section Title.
FONT CSS
Change the CSS style of the section’s font choice. This does not impact the section title. An example here would be to reference a different font family.
Before
After
HIDE SECTION TITLE
If this checkbox is checked, this section title will not be displayed.
12
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
NO FEATURE LINKS
If this checkbox is checked, all Features link functionality will be disabled.
Default Clickable Feature Custom Post Type
Up state
Hover state
Selecting ‘No feature links?’ will disable the interactivity of all features, as above, within the section.
MARKETING PAGE CHILD PAGES
In practice, as a content make or web designer, a child page has a lot of customization options, where the ability to add or design elements in the WYSIWYG editor becomes quite pliable. It is recommended to become familiar with two of the themes custom post types, Features and Carousel Slides for populating a child page, as the theme was built out to be used first and foremost with those in mind. However, additional examples will be provided leveraging Bootstrap layouts using container, row, and column CSS within divs.
13
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
FEATURES
A ‘Feature’ is a custom post type in WordPress, creative specifically for this theme. Additional information about the Shortcode and default presentation options available for Features can be found within the site at BCGov Settings -> Marketing Theme Settings.
FEATURE POST TYPE LANDING PAGE
A Feature has two components for rending. The first is found by leveraging the ‘Shortcode’, to display rows and columns of features groups by Categories. The second by default has the Feature link to a Feature landing page. The Feature landing page uses Title, Feature Image if one is available, and content from the main editor.
FEATURE PROPERTIES
A feature contains the default elements of a WordPress post/page type, including the title, main content, category, order and featured image.
The Feature rendering types below, which can leverage CSS to override presentational elements, reference the above elements as associated.
There are many different Feature properties permitted to allow for these elements to be heavily customizable, including look and feel and interactivity.
ID
If this field is used it will set the ID attribute for the Feature. This is generally used for custom JavaScript functionality, or the requirement to target a unique Feature on the DOM using CSS when a class just won’t work.
TITLE OVERRIDE
If this field is used it will override the default title used for the Feature. This field does allow HTML tags to better customize the title styling. HTML selector and inline style is permitted. For example: <h2 style=”color:pink”>Fix You</h2>
14
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
TITLE CSS
If the Feature’s Title Override is not selected, the default Feature title is to be used, but the CSS can still be modified with this field. The CSS is treated inline, so the format must be ‘style:attribute;’. Example: color: #000; font-style: bold;
TITLE CLASS
If the Feature’s Title Override is not selected, the default Feature title is to be used, but a class can be assigned rather than using the Title CSS inline field. Example: myFeatureClass redClass
SUBTEXT
Some default Feature Shortcodes take advantage of this field. By design, these elements display directly below the Title. The default Feature Shortcodes that use this field are Cards, Alternate Rows, and Circles.
15
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
SHORT DESCRIPTION
The short description will appear within the featured boxes when they are rendered with Shortcode.
TEXT CSS
This field changes the style of the Feature’s Short Description using CSS inline. i.e. color: #000; font-style: bold;
16
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
TEXT CLASS
This field permits using a CSS class, rather than inline text of the Text CSS field, to style the Feature Short Description text. The class should be declared in WordPress’ Customization -> Additional CSS.
URL
The URL field has offer three user interface functions for a Feature.
1. If no URL is entered, the Feature will link to the Feature Posty Type Landing Page. 2. If a URL is entered, the Feature will now link to the supplied URL and not direct to the
Feature Post Type Landing Page. 3. If the URL is set to "#" and there is an ‘Add “More" button’, the Feature’s content from
the main editor is loaded in page when a user clicks on the ‘More’ button. The functionality is collapsible.
a. Warning: The Sections ‘No Feature Link’ must be selected for this function to work.
PINNED
If this checkbox is checked, this feature will be pinned appearing at the start of the list from the Shortcode declaration. This will override the order of the features as set by the Order.
HIDE FEATURED IMAGE
In some cases, the Featured Image will not want to be used on the Feature Post Type Landing Page, and only in the Shortcode rendering of the Feature. If this checkbox is checked, the featured image will not be displayed on the feature landing page.
DISABLE FEATURE LINK
If this is selected the Featured link will be disabled.
ADD ‘MORE’ BUTTON
The More button provides multiple functional outcomes.
17
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
If this checkbox is checked, a "More" button will be added to the bottom-right of the Feature, and when clicked will link to the URL defined in the URL field.
If this checkbox is checked, and the URL is set to a ‘#’, then the the Feature’s content from the main editor is loaded in page when a user clicks on the ‘More’ button. The functionality is collapsible.
Screen readers will see a link to the feature title instead of a link to "More".
MORE BUTTON TEXT
This field overrides the text for the "More" button. If nothing is set, the default text is set to "More".
MORE BUTTON CSS
Change the style of the More button using CSS inline. i.e. color: #000; font-style: bold;
MORE BUTTON CLASS
Change the style of the More button using CSS classes. The classes must be entered in WordPress’ Customization -> Additional CSS.
BACKGROUND COLOUR
When the Feature is clickable, this overrides the background colour when the Feature is hovered over/selected.
BORDER CSS
Change the style of the Feature’s surrounding border using CSS inline. i.e. border: 1px solid #000;
FEATURE IMAGE LOCATION
This field overrides some of the Feature’s default rending styles to place the Featured Image either above the Featured Title or below the title to the left of the Feature’s short description.
18
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
FEATURE SHORTCODES
The default Shortcodes for rendering features, and their associated design classes are listed below. These are also found within the WordPress site administration panel, BCGov Settings -> Marketing Theme Settings.
TILES
Shortcode: [display-tiles cat=”category-slug”]
The Feature properties used within this rendering are the Title, Short Description and Background Color.
CARDS
Shortcode: [display-cards cat=”category-slug”]
The Feature properties used within this rendering are the Title, Featured Image, Subtext and Short Description.
19
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
ALTERNATE ROWS
Shortcode: [display-alt cat=”category-slug”]
Feature properties used are Title, Featured Image, Subtext and Short Description.
CIRCLES
Shortcode: [display-circles cat=”category-slug”]
Feature properties used are Title, Featured Image, Subtext and Short Description.
20
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
CAROUSEL SLIDES
CAROUSEL OF VIDEOS
The theme also features a Carousel Post Type. Much like features, the Carousel Post Type is made up of a Title, Main Content Area, Order, Carousel Category (‘Carousel’) and optional Video URL. It is up to the administrator to determine:
• The order of the Carousel elements as set in the Order of each Carousel slide. • The grouping of a set if Carousel slides is set by the Carousel ‘Category’ • The Main Content Area is optional, but will show the equivalent of a caption/description
of the video.
21
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
CAROUSEL SLIDE TITLE
The Carousel Slide title is currently only used for reference in the backend within the WordPress Carousel screen. It is not pulled out to the front end.
CAROUSEL DESCRIPTION
The Carousel Main Content area is where the descriptive content for the slide can be entered. CSS classes or wrappers can be added directly within the main editor to change the look and feel of the descriptive text.
VIDEO URL
The Carousel Video can be from YouTube, Vimeo or other. The preference is hosting videos on the Provincial YouTube channel. The YouTube format for the URL must be the embed URL of the video. For example: https://www.youtube.com/embed/AfRpIMGELCE. If it’s not provided in this format, the video may not work.
22
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
CAROUSELS CATEGORY
Carousel slides are put together by tagging each entry with a Carousel ‘category’. In this example, every slide that has the Carousel ‘videos’ will render from the Carousel Shortcode.
CAROUSEL OF IMAGES UNDER DEVELOPMENT
The Carousel Post Type is current expanding to permit Slide Images.
CAROUSEL SHORTCODE
To render a video carousel on a page/section, use the following format:
[video-carousel slug=”carousel category”]
In the example of the ‘videos’ category above, it would be [video-carousel slug=”videos”]
23
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
ADVANCED STYLING AND LAYOUT
As this document evolves, this section is intended to provide more additional documentation for advance users whom will use CSS to override the default behaviours of the theme.
OVERRIDING CLASSES OR CREATING NEW ONES
You can override any CSS classes using the WordPress “Additional CSS” editor (Customize->Additional CSS). This is also where new CSS classes should go in the customization work.
Each section can be customized using this editor by using nested CSS:
.template-child-1 h1 {
color: #123456;
}
TEMPLATE PARENT
<div class=”feature-banner”> - parallax option, image is BG image
<img class=”img-responsive” src=”$feature_image”> - block option
<div class=”feature-banner-inner”>
Banner title + banner desc + banner button – controlled by options on the page
OR
Banner override – custom html
</div>
</div>
24
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
TEMPLATE CHILD 1
<div class=”$template_child_1_slug feature-section”>
<h1>$section title</h1>
<div class=”section-content”>
$wysiwyg_content
</div>
</div>
TEMPLATE CHILD 2
<div class=”$template_child_2_slug feature-section”>
<h1>$section title</h1>
<div class=”section-content”>
$wysiwyg_content
</div>
</div>
TEMPLATE CHILD 3
<div class=”$template_child_1_slug feature-section”>
<h1>$section title</h1>
<div class=”section-content”>
$wysiwyg_content
</div>
</div>
25
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
FEATURES HTML LAYOUT
SHORTCODE FOR [DISPLAY-TILES CAT=’’ COL=’3’]
Cat = Feature category slug
Col = # of columns
<div class=”row”>
<div class=”col-md-4 col-sm-6 col-xs-12”>
<div class=”feature-tile”>
<div class=”feature-tile-top”>
<h1>$feature title</h1>
</div>
<div class=”feature-tile-middle”>
<p>$short_description</p>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12”>
…
</div>
<div class=”col-md-4 col-sm-6 col-xs-12”>
…
</div>
</div>
SHORTCODE FOR [DISPLAY-CARDS CAT=’’ COL=’3’ BOOTSTRAP=’’]
26
WORDPRESS FEATURES THEME | A Reference for Theme Administrators
Cat = Feature category slug
Col = # of columns
Bootstrap = bootstrap class override (ie col-md-6 col-sm-6 col-xs-12)
<div class=”row”>
<div class=”col-md-4 col-sm-6 col-xs-12”>
<div class=”feature-tile”>
<div class=”feature-tile-top”>
<h1>$feature title</h1>
</div>
<div class=”feature-tile-middle”>
<p>$short_description</p>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12”>
…
</div>
<div class=”col-md-4 col-sm-6 col-xs-12”>
…
</div>
</div>