Giter Club home page Giter Club logo

tutty-meta-box's Introduction

Tutty Meta Box Framework

Create custom fields with simple and easy to use WordPress meta box framework.

Screenshots

Tutty Meta Box - Screen Shot Tutty Meta Box - Screen Shot

Fields

  • Text
  • Number
  • Textarea
  • Upload
  • Select
  • Checkbox
  • Switcher
  • Heading Box

Installation

-) Usage as Plugin

  • Download files from GitHub or WordPress plugin directory.
  • Copy to wp-content/plugins folder
  • Active plugin.

-) Theme Integration

  • Download files from GitHub.
  • Copy to your theme folder. ( wp-content/themes/your-theme )
  • Add the following codes to theme function file. ( your-theme/functions.php )
require_once get_template_directory_uri() .'/tutty-metabox/tutty-metabox.php';

Create custom fields meta box

  • Open tutty-metabox-fields.php in framework folder.
Key Default Desc
id required Meta box ID
post_type null Meta box post type
title null Meta box title
priority low Meta box priority (low, high)
context normal The context within the screen where the boxes should display. Available contexts vary from screen to screen. (normal, side, advanced)
$fields[] = array(
    'id'       => 'post_settings', // Meta box ID
    'title'    => 'Post Settings', // Meta box title
    'priority' => 'high', // Meta box priority
    'fields'   => array( // Meta box fields
        array(
            'id'      => 'text_field', // Field ID
            'title'   => 'Text Field', // Field Title
            'type'    => 'text', // Field Type
        ),
    ),
);

Text Field - #text

Key Default Desc
id required Field unique ID
title null Field title
default null Field default value
attr null Standart html attributes
desc null Description of field
sanitize true Sanitize of field
array(
    'id'      => 'text_field',
    'title'   => 'Text Field',
    'type'    => 'text',
    'desc'    => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    'attr'    => array(
        'placeholder' => 'Placeholder value...',
        'maxlength'   => 5
    ),
)

Number Field - #number

Key Default Desc
id required Field unique ID
title null Field title
default null Field default value
attr null Standart html attributes
desc null Description of field
sanitize true Sanitize of field
array(
    'id'      => 'number_field',
    'title'   => 'Number Field',
    'type'    => 'number',
    'desc'    => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    'attr'    => array(
        'placeholder' => 'Placeholder value...',
        'min'         => 1000,
        'max'         => 2000,
    ),
)

Textarea Field - #textarea

Key Default Desc
id required Field unique ID
title null Field title
default null Field default value
attr null Standart html attributes
desc null Description of field
sanitize true Sanitize of field
array(
    'id'      => 'textarea_field',
    'title'   => 'Textarea Field',
    'type'    => 'textarea',
    'desc'    => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
)

Upload Field - #upload

Key Default Desc
id required Field unique ID
title null Field title
default null Field default value
button_title Upload Image Upload button title
desc null Description of field
sanitize true Sanitize of field
array(
    'id'           => 'upload_field',
    'type'         => 'upload',
    'title'        => 'Upload Field',
    'button_title' => 'Upload'
),

Select Field - #select

Key Default Desc
id required Field unique ID
title null Field title
default null Field default value
attr null Standart html attributes
desc null Description of field
options null Options of select box. (categories, pages, post_types or custom options)
// You can use categories, pages, post_types
array(
    'id'      => 'category_select',
    'type'    => 'select',
    'title'   => 'Category Select',
    'options' => 'categories'
),

// Custom Select Box
array(
    'id'      => 'custom_select',
    'type'    => 'select',
    'title'   => 'Custom Select',
    'default' => 'turkish',
    'options' => array(
        'english' => 'English',
        'turkish' => 'Türkçe',
        'german'  => 'Deutsch',
    ),
),

// Custom Select Box
array(
    'id'      => 'custom_select',
    'type'    => 'select',
    'title'   => 'Custom Select',
    'default' => 1,
    'options' => [ 'English', 'Türkçe', 'Deutsch' ],
    'attr'    => array(
      'multiple' => 'only-key',
      'style'    => 'width:200px'
    ),
),

Checkbox Field - #checkbox

Key Default Desc
id required Field unique ID
title null Field title
default null Field default value
attr null Standart html attributes
desc null Description of field
options null Options of select box. (categories, pages, post_types or custom options)
// You can use categories, pages, post_types
array(
    'id'      => 'page_checkbox',
    'type'    => 'checkbox',
    'title'   => 'Page Checkbox',
    'options' => 'pages',
),

// Custom checkbox
array(
    'id'      => 'custom_checkbox',
    'type'    => 'checkbox',
    'title'   => 'Custom Checkbox',
    'options' => [ 'English', 'Türkçe', 'Deutsch' ],
    'default' => [ 1,2 ]
),

Switcher Field - #switcher

Key Default Desc
id required Field unique ID
title null Field title
default null Field default value
desc null Description of field
array(
    'id'      => 'switcher_field',
    'type'    => 'switcher',
    'title'   => 'Switcher Field',
),

array(
    'id'      => 'switcher_field_default',
    'desc'    => 'This is a switcher field with default value.',
    'type'    => 'switcher',
    'title'   => 'Switcher Field',
    'default' => 'on'
),

Heading Field - #heading

Key Default Desc
title null Heading box title
content null Heading box content
array(
    'type'    => 'heading',
    'title'   => 'Lorem Ipsum',
    'content' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
),

tutty-meta-box's People

Contributors

mustafakucuk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

reswordpress

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.