Download pdf - WORDPRESS FEATURES THEME · 2018-03-05 · WORDPRESS FEATURES THEME | A Reference for Theme Administrators TEXT CLASS This field permits using a CSS class, rather than inline text

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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




$wysiwyg_content

</div>

</div>

TEMPLATE CHILD 3




$wysiwyg_content

</div>

</div>

25


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>


…

</div>

</div>

SHORTCODE FOR [DISPLAY-CARDS CAT=’’ COL=’3’ BOOTSTRAP=’’]

26


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=”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>


…

</div>

</div>