Chapters

This Page

    Theming

    Introduction

    Platform 5 is designed to work seamlessly with most WordPress themes. But it also has a lot of tools built in for expanding on a typical themes functionality within the system.

    Here we will cover the following:

    • Setup and Structure Setting up your themes and child themes
    • Header/Footer Making a theme header and footer drag and drop
    • Page Templates Template scope and adding real time options to a theme page template

    Example Child Theme

    To help you understand child theming, we've made the pagelines.com child theme publicy available. Feel free to use this as a starter and for reference.

    PageLines.com Child Theme


    Theme Structure

    For most use scenarios, it is likely preferable to create a PageLines Framework child theme as opposed to a new base theme to work with Platform 5.

    This is because the base theme requires many files and functions that aren't required in child themes; and most functionality is achievable using a child theme alone.

    The file structure for child themes looks like this:

    wp-content
    └──themes
        └── pl-framework
        └── pl-framework-[framework_id]
            ├── functions.php
            ├── style.css (Note: this includes config and references to parent theme)
            ├── screenshot.png
            ├── tpl-[template_id].php
            ├── readme.md
            └── (other files)

    Theme Config Headers

    To properly setup your child theme, you need to add configuration headers inside of the style.css document. These headers look like this:

    /*
      Theme Name:   [Child Theme Name]
      Theme URI:    [Child Theme URL]
      Description:  [Child Theme Description]
      Author:       [Author Name]
      Author URI:   [Author URL]
      Version:      [Version e.g. 5.0.0]
      Text Domain:  [Text Domain Slug e.g. pagelines]
      Tags:         [Child Theme Tags]
      Category:     [Child Theme Categories]
      Template:     pl-framework
    */

    Theme Head & Footer

    If you are creating a new parent theme, you will need to add a special hook to your header.php and footer.php to enable your theme header and footer with drag and drop functionality. Luckily this is simple.

    To add drag and drop to these areas you'll need the pl_template_hook function. Here is what the header and footer inside of PL Framework look like:

    /** header.php This code is inside header.php of PL Framework */
    <?php pl_standard_head( pl_edit_head() ); ?>
    
    /** footer.php This code is inside footer.php of PL Framework */
    <?php pl_standard_foot( pl_edit_foot() ); ?>

    Note that the drag and drop functionality is create primary through the pl_edit_head(); and pl_edit_foot(); function which in this case tells Platform 5 where to output the header and footer content.

    pl_standard_head() and pl_standard_foot() are used to output standard wrapper HTML that you might find in most themes.

    Page Templates

    Platform 5 has robust support for native WordPress templates. In that, it supports all standard WordPress page template functionality and adds additional functions for including sections and real-time options in them well.

    Note: Page templates in use with Platform do NOT require you include the get_header() and get_footer() functions.

    Adding Real Time Options

    Options can be added onto the 'content section' on any page template using Platform 5. To do this simply pass in an option array to the pl_add_static_settings() function and then use PageLines bindings to render them in the template. Here is an example from the 404 template in PageLines Framework:

    /**
     * Example: Adding real time options with pl_add_static_settings()
     * Add real time options to the page template content section on any page template
     */
    <?php
    
    /** Create Page Template Option Array */
    $opts = array(
      array(
        'key'      => 'four04_message',
        'type'     => 'text',
        'default'  => __('404!', 'pagelines'),
        'title'    => __( 'Edit 404 Message', 'pagelines' ),
      ),
    );
    
    /** Send the option array to Platform 5 system */
    pl_add_static_settings( $opts );
    
    ?>
    
    <div class="pl-content-area">
      <div class="notfound boomboard">
        <div class="boomboard-pad">
          <!-- Bind the option text to the 404 header here -->
          <h2 data-bind="text: four04_message"></h2>
          <p><?php _e('Sorry, This Page Does not exist.', 'pagelines');?></p>
          
        </div>
      </div>
    </div>
    

    Including Sections In Templates

    To make use of full section designs within page templates, PageLines provides some simple utitilies to make including them and setting their defaults easy.

    Below is an example of including the splashup section within a page template. You can add your own HTML and other elements as usual anywhere else you'd like on the template.

    /**
     * Example: pl_get_section function
     * Add this anywhere within a page template to include a section
     */
    $default_settings = array(
      'header'                => 'Platform 5', 
      'subheader'             => 'Insanely-Simple Editing for WordPress', 
      'logo'                  => get_stylesheet_directory_uri() . '/images/pl-logo.png
    ); 
    
    // format: pl_get_section( array( 'section' => [section_id], 'id' => [any_unique_id], 'settings' => [default_settings (array)]))
    
    echo pl_get_section( array( 'section' => 'splashup', 'id' => 'homesplash_321', 'settings' => $default_settings ) );

    Note: When using the pl_get_section function and [pl_section] shortcodes, the ID is used to find and refer to the section data. Therefore, using the same ID on different sections will give you the same data. This can be useful if you'd like to sync sections across many pages.