Creating your own columns is easier that you might think. It basically requires just three steps:
On this page we’ll look at extending the default column class
If you’re looking for a cut-and-dry solution you can check out our free starter column
The DefaultColumn class, located in the CuisineSections\Columns\DefaultColumn namespace handles everything for our columns. Front- and backend. So saving column data? DefaultColumn, deciding which fields are in the admin-lightbox? DefaultColumn. Hooking in before or after the template? DefaultColumn.
The most basic example features no fields to save in the admin, just a column type that’s selectable:
namespace MyCustomColumn;
use CuisineSections\Columns\DefaultColumns;
class Column extends DefaultColumn{
/**
* Type of this column
*
* @type String
*/
public $type = 'custom-column';
}
The $type declaration is needed and should be the same as the key you’ve registered it with. But that’s it! You now have a custom column. With extending this class you’re basically done.
Obviously this isn’t a very usefull column, so let’s look at adding some custom fields:
Using the Cuisine Field engine, you can easily create the layout of fields for the lightbox:
/**
* Get the fields for this column
* This function always needs to be public.
*
* @return array
*/
public function getFields(){
return array(
Field::text(
'title', //variable name
'', //field label
array(
'label' => false,
'placeholder' => 'Titel',
'defaultValue' => $this->getField( 'title' ),
)
),
Field::media(
'media', //this needs a unique id
'Media',
array(
'label' => 'top',
'defaultValue' => $this->getField( 'media' )
)
)
);
}
The getFields() function gets called by the DefaultColumn class, when building the lightbox. This should return an array of Cuisine Field objects. An important note here is that we need to feed the Field objects with the column’s saved values by using defaultValue…
We use the column’s getField() function for this. Notice that the parameter we pass to $this->getField() is exactly the same as the first parameter of the Field object.
You can also create a custom lightbox for your column, if you need another interface or multiple places to put your fields. The DefaultColumn class just has an overwritable function called buildLightbox().
This is the function as defined in the DefaultColumn:
/**
* Build the contents of the lightbox for this column
*
* @return string ( html, echoed )
*/
public function buildLightbox(){
$fields = array();
if( method_exists( $this, 'getFields' ) )
$fields = $this->getFields();
echo '<div class="main-content">';
foreach( $fields as $field ){
$field->render();
if( method_exists( $field, 'renderTemplate' ) )
echo $field->renderTemplate();
}
echo '</div>';
echo '<div class="side-content">';
$this->saveButton();
echo '</div>';
}
Let’s look at this in a little more detail: