Click here to load reader

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

  • View
    1

  • Download
    0

Embed Size (px)

Text of WORDPRESS FEATURES THEME · PDF file 2018-03-05 · WORDPRESS FEATURES THEME | A...

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

Search related