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?
