Carrington Build Documentation
Integrating Carrington Build with Your Theme
Installing Carrington Build
Carrington Build works best when integrated into a WordPress theme.
- Download and expand the Carrington Build package. You will see a folder inside called
carrington-build - Move the code>carrington-build folder into your theme’s root folder. For example, if your theme was called
my-theme, Carrington Build would be located atmy-theme/carrington-build. - Include Carrington Build through the
functions.phpfile of your theme. Use something like this:include_once(trailingslashit(TEMPLATEPATH) . 'carrington-build/carrington-build.php'); - That’s it! You’re done!
Developer Note
Because Carrington can live in the plugins, mu-plugins or theme directory, it does some sniffing to find out where it exists. It looks for “plugins”, “mu-plugins” or “themes” in the file path, and bases the URL off of what it finds. In the (strange) event that you have “plugin” in the file path to your WP install, you could experience issues with URLs.
Integrating the CSS
Next up, you’ll want to integrate some basic CSS styles for Carrington Build. Carrington Build automatically styles rows and columns for your site using percentages. However, you’ll want to add a few additional styles to get things looking their best.
Adding Gutter Spacing to Columns
Columns in Carrington Build do not have gutters by default. We’ll want to add some. The following CSS adds 30px margins between columns, for a nice, spacious layout. You can add these styles to your style.css file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /** * Add default margins to modules */ .cfct-module { margin-right: 15px; margin-left: 15px; } /** * Remove left-hand margin from modules in first columns */ .cfct-block-a .cfct-module, .cfct-block-ab .cfct-module, .cfct-block-abc .cfct-module, .cfct-block-d .cfct-module { margin-left: 0; } /** * Remove right-hand margin from modules in last columns */ .cfct-block-c .cfct-module, .cfct-block-bc .cfct-module, .cfct-block-abc .cfct-module, .cfct-block-e .cfct-module { margin-right: 0; } |
What’s happening here? Modules are the individual “chunks” of content you can add to columns in Carrington Build. Since Columns are using percentages (e.g. a 1/3 column is 33.33% wide), we can’t add margins to columns, since (33.33% + 15px) x 3 > 100%. In other words, the percentage plus the margin would be too wide. We can add margins to elements inside the columns, however, and that’s just what we’re doing here.
You can tweak the left and right margins on .cfct-module to customize the spacing between columns for your site.
Styling Modules
You’ll also want to add some bottom margin to modules to keep them spaced apart. You can do this by targeting the class .cfct-module
WordPress Blogs are full of user-generated content, so designing defensive CSS styles is key. Setting overflow: hidden; on module wrappers keeps users from accidentally breaking your layout with long strings of unbroken text or enormous images.
Frequently, content inside modules will be wrapped in paragraph (p), list (ul, ol) or similar tags. Occasionally, however text in a module may not be wrapped in any tag at all. Since most themes will a include default bottom margin on these elements, bottom module spacing could potentially be inconsistent.
A neat trick to keep spacing consistent is to add a bottom margin to the module content wrapper (.cfct-mod-content) that is greater than or equal to the bottom margin of potential content tags. Since elements that are display: block will collapse adjacent margins, spacing will always remain consistent at the bottom of modules. This is particularly useful if you plan to style modules using a visible box.
Combine these styles together and you get something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 | /** * Keep overflow contained */ .cfct-module { margin-bottom: 10px; overflow: hidden; } /** * Keep spacing consistent with margin collapse */ .cfct-module .cfct-mod-content { margin-bottom: 12px; } |
Adding a Full-width Page Template
Carrington Build layouts are is at their best when they have some room to breathe, so you’ll want to add a full-width custom page template to your theme. To do so, you’ll need to create a custom page template.
Markup and styling for this page template will vary from theme to theme, but we’ve created some drop-in page templates for popular themes, available only to Carrington Build customers like you.
Full-width Page for TwentyTen
Full-width Page for Carrington Text
Advanced Module Styling
Module Markup Pattern
This is the markup pattern used for Carrington Build modules:
1 2 3 4 5 | <div class="cfct-module"> <h2 class="cfct-mod-title">...</h2> <img class="cfct-mod-img" alt="..." src="..." /> <div class="cfct-mod-content">...</div> </div> |
There are three main pieces of content represented by the markup:
- Module
- Title
- Image
- Content
All of these elements, except for the module wrapper are optional. So a module may not have a title, for example, but if it does, it will have the .cfct-mod-title class.
Given this mini markup-pattern, there isn’t much you can’t do by simply adding a class to the module wrapper. For example, to style a module title, you could add the class style-b to the module wrapper, using specificity to target only modules with that class:
1 2 3 | .cfct-module.style-b .cfct-mod-title { font-color: #090909; } |
Taking this approach means you can change the visual style of a module completely by adding one simple class to the wrapping module element.
You can add custom classes to the module wrapper, on a per-module basis using the class-addition feature. Clicking the Gear icon in the top-right corner of any module edit box reveals a “Set CSS Classes” option. Click it and you can add a space-separated list of additional classes to add to the module.
Creating Custom Module Styles
Since the module markup stays consistent, it’s easy to create interchangeable styles by adding CSS classes to the module wrapper. To add custom classes, just click the “gear” menu in the top-right corner of any module edit lightbox.
Let’s create a grey callout box style that can be used to highlight important content. We want a rounded border around the box and 20px of padding on the inside of the box. Additionally, we want 6px of space between the title and content. One hitch: box may or may not have a title. The style is applied to a module by adding the class special to the module.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /* Best-practice shared module styles */ .cfct-module { /* Keep overflow contained */ overflow: hidden; } .cfct-mod-content { /* Keep spacing consistent */ margin-bottom: 20px; } /* Grey box styles */ .cfct-module.special { background: #eee; border: 4px solid #ddd; /* Rounded corners */ -moz-border-radius: 4px; /* FF1+ */ -webkit-border-radius: 4px; /* Saf3+, Chrome */ -khtml-border-radius: 4px; /* Konqueror */ border-radius: 4px; /* Standard. IE9 */ margin-bottom: 20px; padding: 20px 20px 0; /* Space on bottom will be filled by -content margin */ } .cfct-module.special .cfct-mod-title { margin: 0 0 6px; } |
Let’s break this down.
- Add a bottom margin to the module: all modules have 20px of space below them from the module content margin. Now that we’ve wrapped that space in a box style, we’ll want to add extra space below the box so it doesn’t bump into modules below it.
- Pad module inside: padding is added to the left, right, and top of the module. The bottom is left at zero, because…
- Margin on bottom of module content keeps spacing consistent.
Advanced Row Customization
Removing Default Styles
Carrington Build automatically adds default percentage-based row styles to the front-end of your WordPress site. You may however want to replace these styles with your own. Carrington Build uses wp_enqueue_style to add an additional stylesheet to the front-end, so it’s easy to remove using the plugin API. Adding the following to functions.php will remove the default Carrington Build front-end styles:
1 2 3 4 5 6 7 8 | /** * Run the following tasks on init * Keep Carrington Build styles out of the front-end. We'll add our own. */ function my_theme_remove_build_css() { wp_deregister_style('cfct-build-css'); } add_action('init', 'my_theme_remove_build_css'); |
Keep in mind, if you do this you’ll have to style rows from scratch!
Column and Row Naming Convention
Columns, called “Blocks” in Carrington Build, have a handy CSS class naming scheme. In addition to the standard .cfct-block class that all Blocks receive, they also get a class that describes both their position in the row and their width.
.cfct-block-a
is the first column and is 1/3 of the width of the page.cfct-block-b
is the middle column and is 1/3 of the width of the page.cfct-block-c
is the last column and is 1/3 of the width of the page.cfct-block-dbr /> is the first column and is 1/2 the width of the page.cfct-block-e
is the last column and is 1/2 the width of the page.cfct-block-ab
is the first column and is 2/3 of the width of the page.cfct-block-bc
is the last column and is 2/3 of the width of the page.cfct-block-abc
is a full-width column
Rows follow this same naming convention. In addition to a .cfct-row class, they also get a class that tells you what kind of columns are contained inside.
.cfct-row-a-b-c
contains an a, b and c block.cfct-block-ab-c
contains an ab and a c block- Etc…
Styling Columns and Rows from Scratch
If you remove the default CSS, you’ll have to add some additional styles to your style.css file for columns and rows. Here are some helpful best-practices we’ve found help.
Floating Columns
Columns are floated to stack items horizontally.
1 2 3 4 5 | .cfct-block { /* Prevent double-margin float bug */ display: inline; float: left; } |
To avoid running into the double margin float bug in IE6 and IE7, it’s recommended that you add display: inline; to columns, as seen above. Styling columns this way inoculates your layout against the bug, and does no harm in modern browsers, since floats are always “block” regardless of display.
You will also have to assign widths to each block type. For reference, here are the width definitions Carrington Build uses for the default styles:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .cfct-block-a, .cfct-block-b, .cfct-block-c { width: 33.3%; } .cfct-block-ab, .cfct-block-bc { width: 66.6%; } .cfct-block-abc { width: 100%; } .cfct-block-d, .cfct-block-e { width: 50%; } |
Automatic Row Clearing
Floats will muck up any layout if they’re not contained properly. Adding clearfix styles to your rows (seen below) expands the row to the height of the largest float, containing all floats.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .cfct-row:after { /* Clear floats */ clear: both; content: " "; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden; } .cfct-row { display: block; zoom: 1; /* Clearfix for IE */ } |
Developer Row Examples
We ship Carrington business with a default set of rows, and you can create your own rows too. An example of rows you are able to create on your own is the multi-row.
The multi-row highlights the versatility of row layouts. This module is for demonstration purposes only, and can be activated in the default row set by navigating to rows/stacked/stacked.php file and uncommenting the registration function call at the bottom of the file:
1 2 | Line 96 #cfct_build_register_row('cfct_row_stacked_example |
Advanced Development - Creating Custom Build Modules
IMPORTANT CHANGES TO CARRINGTON BUILD MODULE REGISTRATION
$id passed during module registration has been deprecated
Deprecated
Since the $id passed during module registration was only done so for internal housekeeping the requirement of the variable has been deprecated. It is now only required to pass the module, row, & module-extra registration functions the classname of the item being registered.
The registration methods will throw a WordPress _deprecated_argument warning if used with the old $id structure and will internally fix the arguments so that registration of the items succeeds.
NOTICE: The next major version of Build, probably version 1.1.1, will remove these deprecated notices and internal fixes and item registration will fail.
Old and Busted
1 2 3 | cfct_build_register_module('my-module-id', 'my_module_classname'); cfct_build_register_row('my-row-id', 'my_row_class'); cfct_build_register_extra('my-module-extra', 'my_module_extra_class'); |
New Hotness
1 2 3 | cfct_build_register_module('my_module_classname'); cfct_build_register_row('my_row_class'); cfct_build_register_extra('my_module_extra_class'); |
UPDATE YOUR MODULES & ROWS!
Build can automatically account for this change and load in the legacy data with just a slight tweak to your modules and rows. Modules and rows should be updated to include a member named $_deprecated_id that is the old registration id. This allows the legacy data stored in the database to be recognized and continue to function under the new registration setup.
1 2 3 4 5 6 7 8 9 10 11 | class my_custom_module extends cfct_build_module { protected $_deprecated_id = 'my-custom-module-id'; // deprecated property, legacy id for modules that have been used under the old registration scheme // ... } class my_custom_row extends cfct_build_row { protected $_deprecated_id = 'my-custom-row'; // deprecated property, legacy id for modules that have been used under the old registration scheme // ... } |
All of Carrington Build’s internal modules have been updated to this new scheme.
Updates to Filter Names for Consistency
Filters and actions were changed in version 1.1 so that all consistently use dashes instead of underscores. The following filters and actions were updated (Old names are listed):
- cfct_build_enabled_post_types → cfct-build-enabled-post-types
- cfct_admin_pre_build → cfct-admin-pre-build
- cfct_admin_post_build → cfct-admin-post-build
- cfct_build_pre_build → cfct-build-pre-build
- cfct_build_post_build → cfct-build-post-build
- cfct_build_content → cfct-build-content
- cfct_build_css → cfct-build-css
- cfct_build_js → cfct-build-js
- cfct_build_postmeta_key → cfct-build-postmeta-key
- cfct_build_module_url_unknown → cfct-build-module-url-unknown
- cfct_build_module_url → cfct-build-module-url
- cfct_build_module_urls → cfct-build-module-urls
- cfct_build_included_modules → cfct-build-included-modules
- cfct_build_included_module_options → cfct-build-included-module-options
- cfct_build_included_rows → cfct-build-included-rows
- cfct_row_defaults → cfct-row-defaults
- cfct_module_divider_css_classes → cfct-module-divider-css-classes
- cfct_module_heading_h_tags → cfct-module-heading-h-tags
- cfct_module_{$module_id}_admin_form → cfct-module-{$module_id}-admin-form
- cfct_module_{$module_id}_admin → cfct-module-{$module_id}-admin
- cfct_module_{$module_id}_text → cfct-module-{$module_id}-text
- cfct_module_{$module_id}_display → cfct-module-{$module_id}-display
- cfct_module_{$module_id}_html → cfct-module-{$module_id}-html
- cfct_module_{$module_id}_update → cfct-module-{$module_id}-update
- cfct_module_{$module_id}_url → cfct-module-{$module_id}-url
- cfct_module_{$module_id}_path → cfct-module-{$module_id}-path
- pre_cfct_build → pre-cfct-build
- cfct_admin_pre_build → cfct-admin-pre-build
- cfct_admin_post_build → cfct-admin-post-build
Fixed general consistency errors
- cfct-module-{$moduleid}module-icon (added dash after moduleid)
Carrington Build modules are very much like WordPress Widgets. They’re simple PHP Classes that contain functionality for registering and outputting data. If you’re accustomed to making WordPress Widgets you’ll be making Carrington Build modules in no time at all.
Modules Directory Structure
Carrington Build is designed to load groups of modules out of folders. Individual modules aren’t registered by hand, they’re registered when Build loads in the module files. Consider the included modules directory in Carrington Build:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | -modules/ - callout/ - callout.php - icon.png - view.php - post-callout/ - css/ - module-css.inc - icon.png - img/ - button-sprite.png - etc... - js/ - module-admin-js.inc - post-callout.php - view.php |
The Callout module is representative of a typical module. There is a folder named to correspond to the filename that needs to be loaded from that folder, much like a plugin file. Also provided with the module is an icon file as well as a view.php file. The icon file can be named anything appropriate as its path is defined in the plugins constructor function. The view.php should be named view.php to be automatically picked up by Carrington Build.
The Post Callout module is an example of how complex a module can be by providing some of its own javascript, images and css.
Deregistering Modules
The included modules can be disabled if desired. The best time to do this is at the cfct-modules-included action. Deregister the module using the same name that it was registered with. You can find these names at the bottom of the included module’s file in the cfct_register_module function call.
1 2 3 4 | function my_deregister_module_function() { cfct_build_deregister_module('module_class_name'); } add_action('cfct-modules-included', 'my_deregister_module_function'); |
Defining Module Load Directories
Carrington Build loads modules by scanning directories for compatible file structures much like WordPress loads Plugins by scanning the Plugins directory. To define a module load directory add a function that runs on the cfct-module-dirs filter. For example, to add a modules directory in your theme directory use the code:
1 2 3 4 5 | function my_register_module_dir($dirs) { array_push($dirs, trailingslashit(get_stylesheet_directory()).'modules'); return $dirs; } add_filter('cfct-module-dirs', 'my_register_module_dir', 11); |
If your module extends a built in module be sure that you add your directory to the end of the array so that it loads after the built in modules. Modules are currently supported loading from themes and child themes.
The Module File
The main module file is where the module should be defined and registered with Carrington Build. The minimum requirements for a module to work are the __construct method, the admin_form method, the display method, and the text method. While other methods can be defined and used to create complex modules they’re not required to create a valid module.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | class my_build_module_class extends cfct_build_module { public function __construct() { $opts = array( 'description' => _('...'), 'icon' => 'path/to/icon.png' ) parent::__construct('my-module-id', __('My Module'), $opts); } public function admin_form($data) { // ... build form return $form_html; } public function display($data) { // build HTML display from saved data return $this->load_view($data); } public function text($data) { // return short textual represntation of the module's saved data here return '...'; } } cfct_build_register_module('my_build_module_class'); |
Available Methods
- Return false or null from this method to not display a form. The Admin will auto-fill a “no options” message for you.
load_view() method for HTML construction. While the use of load_view is not required it is highly recommended to make the module flexible.
Construct
Use the module constructor to define the module’s options & ID.
The icon location and module description are defined in the constructor of the module. When registering your module’s options point to the module location relative to the location of the module’s include directory when defining the icon. For example, if your module structure looks like this:
1 2 3 4 | - modules/ - my_module/ - my_module.php - my-icon.png |
Your constructor should look like this:
1 2 3 4 5 6 7 8 9 10 11 | class my_build_module extends cfct_build_module { public function __construct() { $opts = array( 'description' => _('My Module Description.'), 'icon' => 'my_module/my-icon.png' ) parent::__construct('my-module-id', __('My Module Name'), $opts); } // ... } |
The icon path will first be checked to see if it is a full URL, if not it will be prepended with the module’s include directory url. Provide a full url, including the http:// to define the full url to an icon file that’s outside of the normal Carrington Build structure.
Construct is also a good place to do any additional setup for the module.
“Autofocus” on First Form Element
By default each module is loaded with a helper JavaScript function that attempts to apply focus to the first visible element in the Module Admin Form that is a text input element. To apply focus to a custom element use Construct to define the $focus_target member variable to the ID of the form element that you want to be the autofocus target. Set to the ID to a bogus element (ie: point it to an element that doesn’t exist) to not use the autofocus functionality.
PHP 5 Is Required
__construct() when defining your constructor.The Admin Form
The admin_form() method is used to collect user settings and content for each module. The admin_form() method must return HTML. The module admin form only needs to contain the form fields you need to collect. Do not include the form tags as those are automatically added to the output.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | class my_build_module extends cfct_build_module { // ... public function admin_form($data) { $title = (isset($data[$this->get_field_name('title')]) ? $data[$this->get_field_name('title')] : null); $content = (isset($data[$this->get_field_name('content')]) ? $data[$this->get_field_name('content')] : null); $html = ' <fieldset> <div> <input type="text" name="'.$this->get_field_name('title').'" id="'.$this->get_field_id('title').'" value="'.esc_html($title).'" /> </div> <div> <textarea name="'.$this->get_field_name('content').'" id="'.$this->get_field_id('content').'">'.htmlentities($content).'</textarea> </div> </fieldset>'; return $html; } // ... } |
Like WordPress Widgets there are helper methods to help keep your field names and IDs name-spaced. The following is an example of a basic admin interface that gathers title and content data from the user:
Any fields included in the admin for that are not disabled (ie: disabled=”disabled”) will be submitted and passed through the update() method before being saved. If there are auxillary fields in the markup that shouldn’t be saved in to the database or if some data transformations should be done use the update() method to modify $data before it is saved. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | class my_build_module extends cfct_build_module { // ... public function update($new_data, $old_data) { if (!empty($data[$this->get_field_name('foo')])) { $data[$this->get_field_name('bar')] += ' '.$data[$this->get_field_name('foo')]; unset($data[$this->get_field_name('foo')]); } return $data; } // ... } |
The View File
Carrington Build’s default Modules all use the combination of a view.php file and the load_view() method to provide some separation between the module logic and the module display. The default location for the view.php file is the root level of your module’s folder. View’s are loaded in an output-buffer so while it is required that Modules return html this allows the use of functions that echo.
While using load_view() is recommended, it is not mandatory. The base requirement is that your display() method return HTML.
Loading the View
To use the load view function pass $data as the first parameter and optionally supply a key => value array of extra parameters that you want to pass in to the view. Anything passed in via the 2nd parameter will be extracted in to the local scope for the view. So, below, $my_param will be made available in the view.
1 2 3 4 5 6 7 8 9 10 11 12 13 | class my_build_module extends cfct_build_module { // ... function display($data) { // pre-process the module data here if necessary $my_param = 'foo'; return $this->load_view($data, compact('my_param')); } // ... } |
Overriding the View
By default the load_view() method will look for a view.php in your module’s folder. If it finds none it will return null. In some situations it may make sense to alter the view file based on some parameter (like, maybe your front page needs a slightly different output template). In this case use the included filter to change the module’s view file before it is loaded.
The view can be filtered on a per module basis using cfct-module-module-id-admin-view. Replace module-id with the id of the target module. In your function you need to return the full path to the view file to override the default. $data is passed to the filter as well so views can also be filtered based on the content of the module.
An example of overriding the Callout module’s view for the home page:
1 2 3 4 5 6 7 | function my_load_callout_view($view, $data) { if (is_home() || is_front_page()) { $view = trailingslashit(get_stylesheet_directory()).'views/callout-home-view.php'; } return $view; } add_filter('cfct-module-cfct-callout-view', 'my_load_callout_view', 10, 2); |
Providing Multiple Views
The view loading mechanism also allows for custom view files to be defined by the module itself. Lets say, for example, that you want to provide different layouts to your module as a selectable preference. Provide the user with a way to select the view template to use and then change the $this->view property of the module before calling load_view().
Custom JavaScript
Modules can provide additional functionality for both the admin and front end displays by overriding the admin_js() and js() methods. Carrington Build uses a [jQuery](http://docs.jquery.org, “jQuery Documentation”) wrapper with $ enclosed in a local scope. This may be incompatible with your preferred JavaScript library. There are no plans at this time to officially support other libraries besides jQuery.
Client side JavaScript is straight forward. Add a js() method to your module, return the Javascript to be included and it will be included in the front end output.
JavaScript for the Admin requires a bit more attention. Since the modules are loaded in via Ajax
Admin JS Module Load Callbacks
Because modules are loaded via Ajax the typical DOM Ready methods are not relevant. For this purpose Carrington Build provides the ability to add Module Load Callbacks. You are not limited to a single callback function, so if your module extends another module you don’t have to replicate its JavaScript, just include your JavaScript along with it. Any JavaScript actions can be performed within the module including show/hide actions, click events, and Ajax calls. An example of using the Module Load Callback framework:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class my_build_module extends cfct_build_module { // ... function admin_js() { $js = ' cfct_builder.addModuleLoadCallback('.$this->id_base.', function() { $("#my-element").click(function() { // attach functionality here }) }); '; return $js; } // ... } |
Admin JS Module Save Callbacks
Carrington Build also provides a callback at Module Save so that the form data can be pre-compiled, cleaned up, or checked for requirements before the form is submitted. Adding a Module Save Callback is similar to the Module Load Callback except that the return value of the function affects whether the module form will submit or not. Returning true allows the module save action to continue, returning false aborts the click action on the module save and the module form will not submit and the module edit window will stay open.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class my_build_module extends cfct_build_module { // ... function admin_js() { $js = ' cfct_builder.addModuleSaveCallback('.$this->id_base.', function() { if ( $("#'.$this->get_module_id('my-element').'").val().length == 0 ) { // attach functionality here } }); '; return $js; } // ... } |
When Extending Other Modules
When extending an existing module you probably also want to include its JavaScript as well. If you don’t need to modify the JavaScript or add any new JavaScript you simply do nothing. The parent module’s admin_js() method will be called and included.
If you need to add to the Javascript create an admin_js() method that defines all of your required Javascript and also includes the parent class’ admin_js(). If the parent class’ Javascript was properly name-spaced then your module’s $id_base will be used when including the Javascript to avoid conflicts. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | class my_build_module extends some_other_module { // ... function admin_js() { $js = some_other_module::admin_js(); $js .= ' cfct_builder.addModuleSaveCallback('.$this->id_base.', function() { if ( $("#'.$this->get_module_id('my-element').'").val().length == 0 ) { // attach functionality here } }); '; return $js; } // ... } |
Custom CSS
CSS inclusion, like JS inclusion, is separated in to distinct front end and admin methods. To add client side CSS create a css() method and return the necessary style declarations. To add Admin styling add an admin_css() method and return the necessary styling elements. An example of Admin CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class my_build_module extends cfct_build_module { // ... public function admin_css() { $css = ' #'.$this->get_field_id('my-element').' { width: 500px; color: red; } '; return $css; } // ... } |
Suppressing Module Save
Modules can define wether they can be saved or not. If, for example, your module should only be modified by editors and higher, then you can use the $suppress_save member variable to control the appearance of the save button in the module admin. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class my_build_module extends cfct_build_module { // ... public function admin_form($data) { // build admin form $html = '...'; if (!current_user_can('edit_posts')) { $this->suppress_save = true; } return $html; } // ... } |
Controlling Module Availability
If you only want your module to display under certain conditions you can override list_admin() method to control the module’s availability in the edit screen. Returning false from the list_admin() method will prevent the module from appearing in the module selection dialog. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class my_build_module extends cfct_build_module { // ... public function list_admin() { if ( condition == true ) { return true; } else { return false; } } // ... } |
This does not prevent a module that is used in a layout from displaying in the layout. It simply prevents the addition of new modules of that type.
Module Options
Carrington Build contains a framework for creating Module Options that are added to every module’s Edit Screen under the “cog” menu. The default Module Option is a Module Classes option that allows each module to be given additional classes on its wrapping </div>.
Module Helper Methods
These remain mostly undocumented for now, but the examination of carrington-build/classes/module-utility.php will reveal many helper functions that you as a developer can take advantage of.
Advanced Development - Creating Custom Build Rows
Carrington Build Rows are customizable in much the same way that Modules are.
Rows Directory Structure
Rows are loaded in the same manner as Modules are loaded. The loading process is based on the parent Rows directory containing folders of rows.
1 2 3 4 | - rows/ - 1col - 1col.php - icon.png |
Defining Row Load Directories
Carrington Build loads rows by scanning directories for compatible file structures much like WordPress loads Plugins by scanning the Plugins directory. To define a row load directory add a function that runs on the cfct-row-dirs filter. For example, to add a modules directory in your theme directory use the code:
1 2 3 4 5 | function my_register_row_dir($dirs) { array_push($dirs, trailingslashit(get_stylesheet_directory()).'rows'); return $dirs; } add_filter('cfct-row-dirs', 'my_register_row_dir', 11); |
Custom CSS
Rows can provide custom CSS for both the admin and front end outputs. Create a css() method to return client side CSS or an admin_css() method to return admin CSS. These methods are called automatically by Build and the returned CSS is added to the CSS delivered by Build.
See the Custom CSS section of the “Creating Modules” documentation (above) for examples of how to return custom CSS.
The Row File
The main row file is where the row should be defined and registered with Carrington Build. The minimum requirements for a row to work is the __construct() method. The constructor is where everything the row needs is defined via the $config array.
The icon location is defined in the constructor of the row. When registering your row’s options point to the row location relative to the location of the row’s include directory when defining the icon.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class my_special_row_class extends cfct_build_row { public function __construct() { $config = array( 'name' => __('My Special Row'), 'description' => __('Its is neat, I tells ya!'), 'icon' => 'my-special-row/icon.png', 'class' => 'my-special-row-class', 'blocks' => array( array( 'class' => 'my-special-row-block-a' ), array( 'class' => 'my-special-row-block-b' ) ) ); parent::__construct($config); } } cfct_build_register_row('my_special_row_class'); |
Config Variables
- name: A friendly name for the row. Appears under the row icon in the row chooser on hover.
description: A friendly description for the row. Appears in a tool-tip in the row chooser on hover.
icon: location of the icon file for the row. This follows the same convention as module icons with
module-folder-name/icon-file.ext. If left empty or not included a default icon will be used.class: the classname for the outer row wrapper. This is also used for internal identification purposes and should be unique.
html: custom front end HTML output for the row. By default Build wraps the row’s blocks and modules in a simple div wrapper.
admin_blocks: custom admin layout for the row. By default Build wraps each block in a table cell and auto associates the block controls with the block. Use this field to provide a custom inner table structure for the layout of the admin row display.
See the included “Stacked” row type in carrington-build/rows/stacked/ for an example of how all these variables can be used to create a custom, complex row.
Advanced Development - Customizing Carrington Build Modules
Carrington Build ships with many included filters that allow for the modification of Build data at many points during both the input and output of data.
Carrington Build Core Filters
Change Carrington Build’s Path or URL
cfct-build-loc: Returns an array of Build’s determined URL & Path values. Alter these to run Build out of a non-standard location. Standard (ie: supported) locations include: the main or child theme folder, the plugins directory, the mu-plugins directory. Build is not officially supported outside of these directories so use caution as Build may not function properly in your chosen location.
Change Default Classes for Content Styles
cfct-class-groups: Carrington Build supplies some default classes for defining content output options in some modules (ie: callout, post-callout) for size of headers and content as well as image alignment. The defaults for these options can be modified to support a custom naming scheme or can be extended as necessary to fit the project at hand.
Modify list of Widgets in Module Select List
cfct-modern-widgets: Carrington Build automatically enables all “modern” (ie: object style widgets) as Carrington Build modules for use in Build layouts. Use this filter to modify the list of widgets that will be included as Carrington Build modules.
Add a Module Load Directory
cfct-mdoule-dirs: Carrington Build loads modules on a per directory basis, not a per module basis. Use this filter to register a new location for Carrington Build to load modules from. See the “Modules Directory Structure” section of the “Creating Modules” documentation for more information.
Add a Module-Options Load Directory
cfct-module-options-dirs: Carrington Build loads module-options in the same way that it loads modules. Use this filter to add additional module-options load directories.
Add a Row Load Directory
cfct-row-dirs: Carrington Build loads Rows in the same way that it loads modules. Use this filter to add additional row load directories. See the documentation on “Creating Rows” for more information on Build rows.
Modify Build Default Data Structure
cfct-default-data: Use this filter to add some additional default data to modules when they are created. Unexpected results may occur from removing any of the default data items.
Modify a Post’s Data from the Database
cfct-get-postmeta: Use this filter to inspect or modify an entire post’s build data before it is acted upon. This filter is used on both the front end output and in the admin screens.
Row Filters
Modify Row Default Class Names
cfct-row-defaults: Allows for the modification of default front end row & block class names. Admin row & block class names cannot be modified.
Modify a Row’s HTML Output
cfct-build-row-{$row_class}-html: Modify the row’s compiled HTML before it is merged for front-end output.
Modify a Row’s HTML Wrapper
cfct-row-html: Modify the wrapper HTML used for row output before it is merged with the module content. See the documentation on “Creating Rows” for more information on how to manage the row wrapper HTML.
Modify a Row’s Block Wrapper
cfct-block-html: Modify the wrapper HTML used for block output before it is merged in with the row. See the documentation on “Creating Rows” for more information on how to manage the row wrapper HTML.
Modify a Row’s Chooser Icon
cfct-{$row_class}-row-icon: Modify the URL to the row’s icon file.
Output Filters & Actions
Modify or Inspect the Build Object at Output
cfct-build-pre-build/cfct-build-post-build: Use these actions to modify or inspect the Carrington Build object before/after the output HTML is built.
Modify the Build Output Before it is Rendered
cfct-build-content: Use this filter to modify the Build HTML output before it is passed on to WordPress.
Modify the Build CSS or JavaScript
cfct-build-css/cfct-build-js: Modify the front end CSS or Javascript after it is compiled for delivery to the browser.
cfct-module-extras: Modify the front end or admin CSS or JavaScript after its compiled for delivery to the browser. Passed arguments allow for determination of Javascript vs. CSS and front end vs. admin.
Admin Filters & Actions
Active Carrington Build on Other Post Types
cfct-build-enable-post-types: By default Carrington Build is enabled only on pages. To enable Carrington Build on other post types use this filter to add other post types to the enabled types array.
Modify Build Before Admin Display
cfct-admin-pre-build: Modify the Build object before the Admin Interface is displayed.
Modify the Default Page Title for Build Pages
cfct-autosave-title: Carrington Build will force an autosave if a Build layout is started on a new post/page. Use this filter to change the default title given to autosaved posts/pages.
Modify Saved Post Content
cfct-pre-save-post: Carrington Build saves a stripped down version of the module content in the $post->post_content field for search purposes. This filter enables the modification of that content. Note that since Carrington Build saves each module’s content individually the post’s content is also updated on each save.
Modify the Postmeta Key for Build Data
cfct-build-postmeta-key: The default value for the Build postmeta key is _cfct_build_data. Use this filter to modify that key. Changing this value with existing Build data will orphan that data, but not destroy it.
Modify Page Options Menu
cfct-build-page-options: Carrington Build provides a page options menu under the cog icon. The cog icon shows only when there’s a build layout. It appears inline with the Build tab. This filter allows for adding items to the page options menu.
Module Filters
Modify a Module’s Class Name(s)
cfct-build-module-class: By default a module’s wrapper div is output with 2 class names, cfct-module and the $id_base of the module. Use this filter to modify the wrapper div’s class output on a per-module basis. Each individual module in a layout will fire this filter on front end output.
Modify a Module’s HTML Output
cfct-module-{$module-id}-html: Each individual module’s HTML output can be filtered here. This is the last filter available before the Module is rendered in the page and consists of all pre-rendered HTML.
Modify a Module’s View File
cfct-module-{$module_id}-view: Override the module’s view.php file. Provide a full file path to a view file to load. See “The View File” section of the Creating Modules documentation for more details on this filter.
Modify a Module’s Admin Form HTML Output
cfct-module-{$module_id}-admin-form: Each module’s Admin Form HTML can be filtered here. This is the last filter available before a module’s Admin Form is wrapped in the Module Edit HTML.
cfct-module-{$module_id}-admin: Modify the complete Module Edit screen HTML before it is sent back over Ajax.
Modify the Module’s Text output
cfct-module-{$module_id}-text: Modules should return a plain text representation of their data to be inserted in to the post_content for search and accessibility purposes (WordPress will still make excerpts from the post_content). This filter allows access to the plain text representation of a module before it is saved in to the post_content. By default, too, the Admin text is pulled from this as well.
Modify a Module’s Icon File URL
cfct-{$module_id}-module-icon: Each module, whether it supplies an icon or uses the default icon, is asked for the url to its icon when the admin screen is rendered. Use this filter to change the URL to the icon to customize a module’s icon.
Modify a Module’s Data When Saved
cfct-module-{$module_id}-update: Use this filter to inspect or modify a specific module’s save data before that data is saved.
Modify a Module’s URL or Filesystem Path
cfct-module-{$module_id}-url/cfct-module-{$module_id}-path: The base module class provides helper methods of get_url() and get_path() to assist modules that need to load or enqueue additional resources (like javascript or images). This filter allows access to that url to override or customize those resources without modifying to module itself. The module has already been constructed by the time this gets run.
cfct-build-module-url: Alter the module’s URL at module load time. This gets run at module construct.
cfct-build-module-url-unknown: If for some reason the URL to the module cannot be determined it will be passed through this filter before it is recorded by build.
cfct-build-module-urls: Carrington Build keeps a list of module URLs that from which the modules can pull their URL. Use this filter to modify the list as a while. This is run after cfct-build-module-url & cfct-build-module-url-unknown.


