“Bricklayer” Documentation by “Parmenides” v1.0


“Bricklayer - Content and Layout Builder Wordpress Plugin”

Created: 31/01/2014
By: Parmenides
Email: parmenides.themes@gmail.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Bricklayer is a widget based content builder Wordpress plugin. It is build on top of a model that resembles Wordpress widget system so it is easy to use. It also offers a very similar way of registering new widgets to developers.

Table of Contents

  1. Installation
  2. Quick Start Guide
  3. Main Plugin Settings
  4. Layouts
  5. Templates
  6. Bricklayer Settings Page
  7. Rows, Boxes & Widgets
  8. Row
  9. Box
  10. Widgets
  11. Building Forms
  12. Advanced Section For Developers

Installation - top

This part of the documentation is going to cover, in a step by step instruction the installation of WP Plugins on your WordPress blog in general.

Add Plugin Upload Plugin

Should you ever experience slight upload problems then please stay calm, simply use an FTP program to access your blog, then browse to /public_html/wp-content/plugins and upload the unzipped version there. Then check out the Plugin page and activate the plugin.


Quick Start Guide - top

You installed the plugin and now what? Well, plugin is installed and ready to go. By default Bricklayer Content & Layout Builder Plugin is enabled for building pages.

So visit any of the pages

Bellow the content area you will see a section named Bricklayer.

Bricklayer Boxes

Rows, Boxes & Widgets are the main building blocks.

The next thing to do is to ADD A NEW ROW

Click on Add Row button and you will insert a new empty row.

Bricklayer New Row

You now have a ROW, but it's empty. You have to put some BOXES in it.

To do that just drag & drop a box to a row.

Note that boxes have width, so you need to drag a box with the width you need. You can also change the width of the box by clicking on a plus or minus sign after you drag it to a row.

Bricklayer New Box

Boxes represent columns. Now put Widgets in Boxes

To do that you need to click on a Widgets tab.

Bricklayer New Widget

You can put however many widgets you need in each box.

Now you need to edit a widget

When you click on Edit Widget Button you will be presented with settings page for that widget.

Bricklayer New Widget Settings Page

This is where you configure the widget: Enter any data the widget needs.When you finish with editing the widget press Save button. After you finish editing all widgets save Wordpress page.

Each widget has it's own settings and you need to edit each widget you use and populate it with you custom settings.


Main Plugin Settings - top

After installation you will see Bricklayer link at the bottom ot the main admin menu. When you click on that link you'll be taken to Bricklayer plugin main settings page. Here are the global settings for the plugin which, most of them, can be overwritten in the Layouts. Layouts and Templates are two extra sections this plugin adds to admin menu.


Layouts - top

Layout is a html and css template which surrounds the page/post content. For example, on a web page most likely header, footer and sidebar would be considered to belong to a layout and in the middle of the page you would have the content. This Layouts section allows you to predefine layouts yourselfs which you can later assign to a page. Building a layout is identical to building a page with Bricklayer plugin, so continue reading.

This functionality is not turned on by default. It has to be turned on in Bricklayer settings page.


Templates - top

Templates represent peaces of Bricklayer building blocks which can be imported into a page, a layout or even in another template. Templates are created from the Templates section or from any Bricklayer builder using the "save as template" functionality.

This functionality is not turned on by default. It has to be turned on in Bricklayer settings page.


Bricklayer Settings Page - top

These are global plugin settings and many of these settings can be overwritten in a layout.


Rows, Boxes & Widgets - top

These are the main building blocks. First, we need a row. Inside it we put boxes (they represent columns). And in boxes we put widgets.

These panels will appear in page editor under the content area.

boxes-panel
widget-panel
row-box-widget

To manipulate these Bricklayer building blocks there are several icons which allows you to edit, delete, duplicate by clicking on them and by drag and drop. Boxes are different in one respect: only boxes have width. The width of the box is set when the box is created and can at any time be changed by clicking on plus or minus sign on the box.


Row - top

Properties:


Box - top

Properties:


Widgets - top

  1. Text

    • CSS Class

      This class/classes will be set to the container element of this text block in case you need to add extra styling.

    • Title
    • Title Size

      Here you can select an H tag for your title.

    • Title Link To...

      If this is entered, the title will be a link. Should be entered as absolute url (e.i. http://www.google.com).

    • Content

      Standard tinymce content.

    • Use Background Color?

      This select decides if a background color will be used or not.

    • Background color

      Colorpicker for background color.

    • Align

      The alignment of the text.

    • Padding

      Widget padding.

  2. Map

    • CSS Class

      This class/classes will be set to the container element of this text block in case you need to add extra styling.

    • Marker Lat

      Marker Latitude.

    • Marker Lng

      Marker Longitude.

    • Zoom Level

      Map zoom level.

    • Height

      The hight of a map can be set here. As for the with, it assumes the parent width.

    • Custom Marker

      An image for the custom marker.

    • Content

      This is the bubble content.

    • Padding

      Widget padding.

  3. Slider

    • CSS Class

      This class/classes will be set to the container element of this text block in case you need to add extra styling.

    • Transition

      Slide transition type: Horizontal, Vertical and Fade.

    • Auto Play?

      Should slide autoplay.

    • Show Controls?

      Are bullets visible.

    • Show Bullets?

      Map zoom level.

    • Speed

      Time between slides in miliseconds. Enter number only!

    • Save All

      This is required for all items to be saved. Items have their forms which have additional settings for each item.

    • Content

      This is the bubble content.

    • Padding

      Widget padding.

  4. Easy Gallery

    One important thing to make a gellery fit better is to use padded instead of double-padded on a box which contains the gallery

    • CSS Class

      This class/classes will be set to the container element of this text block in case you need to add extra styling.

    • Number Of Columns
    • Make Containers Equal Height

All widget settings are self explanatory and are all provided with necessary info in the widget itself.

Here are the list of the remaining widgets.


Building Forms - top

When editing a post or a page click the icon marked in the image bellow to set up the form for current post or page.

You can view messages received from the form on your page in Bricklayer/Form Feedbacks section in the admin area.


Advanced Section For Developers - top

Bricklayer is a widget based content builder Wordpress plugin. It is build on top of a model that resembles Wordpress widget system so it is easy to use. It also offers a very similar way of registering new widgets to developers.


Creating a Widget

To create a new widget you need to exted the CbpWidget class

	

	class PrefixExampleWidget extends CbpWidget
        {

            public function __construct()
            {
                parent::__construct(
                /* Base ID */'prefix_example_widget',
                /* Name */ 'Content', array('description' => 'This is Example widget.', 'icon' => 'fa fa-list-alt fa-3x'));
            }

            // all elements must be listed here to be displayed in the form
            public function registerFormElements($elements)
            {
                $elements['title'] = '';
                return $elements;
            }

            // the widget form in the Bricklayer builder
            public function form($instance)
            {
                // form element
                CbpWidgetFormElements::text(array(
                    'name'             => $this->getIdString('title'),
                    'value'            => $instance['title'],
                    'description_title' => $this->translate('Title'),
                    'description_body'  => $this->translate('This is form element description.'),
                ));
            }

            // example sanitize method
            // this method is called when saving a widget form
            public function sanitize(&$attribute)
            {
                switch ($attribute['name']) {
                    case CBP_APP_PREFIX . 'prefix_title':
                    case CBP_APP_PREFIX . 'prefix_link_text':
                        $attribute['value'] =    sanitize_text_field($attribute['value']);
                        break;
                    case CBP_APP_PREFIX . 'prefix_number_of_characters':
                        if (!filter_var($attribute['value'], FILTER_SANITIZE_NUMBER_INT)) {
                            $attribute['value'] = 200;
                        }
                    break;
                }

                return parent::sanitize($attribute);
            }

            // this is what is displayed on front end
            public function widget($atts, $content)
            {
            }

       } 
        

Registering a Widget

There are two methods available CbpWidgets::registerWidget($widgetClassName) and CbpWidgets::unregisterWidget($widgetClassName)

So to regiser the Example widget you need to do this:

	
            CbpWidgets::registerWidget('PrefixExampleWidget');
        

If you don't like or just want to modify any of the default widgets use uregister mehod first and than register your version.


Registering a List of CSS Classes

There is a way for you to register for each of existing widgets a key value pair where key will be used as a css classes on the wrapper of particular widget. Value is a display name in the select named "Select Styling". This can be done from the theme or any other plugin. You would need to add a filter like this:

	
            add_filter('cbp_register_custom_css_classes', 'prefix_register_custom_css_classes');

            /**
             * Register custom css classes for widgets
             */
            function prefix_register_custom_css_classes($widgetType)
            {
                $options = null;

                if ($widgetType == 'cbp_widget_row') {
                    $options = array(
                        ''                              => 'No styling',
                        'custom-class-1 custom-class-2' => 'Header',
                        'custom-class-3'                => 'Header inner',
                    );
                }

                return $options;
            }
        

If you don't like or just want to modify any of the default widgets use uregister mehod first and than register your version.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Parmenides

Go To Table of Contents