GithubHelp home page GithubHelp logo

modernadventure / cmb2-grid Goto Github PK

View Code? Open in Web Editor NEW

This project forked from origgami/cmb2-grid

0.0 1.0 0.0 104 KB

A grid system for Wordpress CMB2 library that allows columns creation

PHP 100.00%

cmb2-grid's Introduction

CMB2-grid

A grid system for Wordpress CMB2 library that allows the creation of columns for a better layout in the admin.

Installation

For now you have to install this as a WordPress plugin:

  1. Download the plugin
  2. Place the plugin folder in your /wp-content/plugins/ directory
  3. Activate the plugin in the Plugin dashboard

Usage

Create your cmb2 metabox like you always do:

$prefix = '_yourprefix_demo_';
$cmb = new_cmb2_box(array(
	'id'			 => $prefix . 'metabox',
	'title'			 => __('Test Metabox', 'cmb2'),
	'object_types'	 => array('page',), // Post type
));

$field1 = $cmb->add_field(array(
	'name'		 => __('Test Text', 'cmb2'),
	'desc'		 => __('field description (optional)', 'cmb2'),
	'id'		 => $prefix . 'text',
	'type'		 => 'text',
));

$field2 = $cmb->add_field(array(
	'name'		 => __('Test Text2', 'cmb2'),
	'desc'		 => __('field description2 (optional2)', 'cmb2'),
	'id'		 => $prefix . 'text2',
	'type'		 => 'text',
));

Now, create your columns like this:

if(!is_admin()){
	return;
}
$cmb2Grid = new \Cmb2Grid\Grid\Cmb2Grid($cmb);
$row = $cmb2Grid->addRow();
$row->addColumns(array($field1, $field2));

You can also use custom bootstrap column classes if you want, like this

$row->addColumns(array(
   array($field1, 'class' => 'col-md-8'),
   array($field2, 'class' => 'col-md-4')
));

FAQ

  • It works on group fields also
  • If you want, you can opt to use the metabox and the field IDs also.
  • Currently the grid system is using a lite version of Twitter Bootstrap
  • You can create as much rows as you want
  • You have to put the fields in the columns in the same order they were created
  • You can follow exactly what is in Test/Test.php file to see it in action

Screenshots

This is what you get using columns

Image

cmb2-grid's People

Contributors

pablo-sg-pacheco avatar jrfnl avatar jimboobrien avatar templeman avatar mte90 avatar jmarceli avatar maarten00 avatar mikeill avatar aydin41k avatar belenski avatar codiceovvio avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.