Options files are in gavern/options catalog in a folder connected with a currently used language. In the catalog, you will find two main files groups:

• tabs.json file – it includes a list of sections visible on the right side of an administration panel:  each section is described with a table in the form

  ["Basic", "options.basic", "enabled"]

  the first element of a table is a section name displayed in a panel, the second element is a file name without “.json” extension which stores a list of options available in a section given and the third value refers to whether a section given is visible in a panel. In this case, there will be a Basic tab displayed in a panel based on content of options.basic.json file.
• options.*.json files – they include a list of options available in a section given – their names are strictly connected with the content of tabs.json file.

Each options.*.json file includes three main fields in an object stored:

• groupname – it is a section title
• groupdesc – it specifies a section description displayed directly under a  section title
• fields – it includes a table of objects of fields displayed under the title and a section description

Each field defined by an object including the following fields:

• name – it specifies an option name which will be connected with a particular field. There is a prefix added automatically to an option name which is a theme name (it is stored in a global variable – $tpl->name).
• type– it specifies a field type. Standard fields are:
  • TextBlock – a field including a description text – it is not used for storing any option value
  • Text – the easiest text field allowing to insert short text values
  • Textarea – a text field used for inserting a greater number of text values
  • Select – a select field
  • Switcher – a checkbox restricted to two options: “Enabled” and “Disabled”
  • Media – a field allowing to choose images
  • WidthHeight – a field allowing to specify two values defining width and height (mostly used with a Media field)

These fields are defined in a gavern/form_elements/standard.php file and their code was derived from a GKFormInput field. It is worth remembering that files connected with options are parsed by a gavern/form.parser.php file. Additionally, you may create your own fields types in a gavern/form_elements catalog. In GavernWP, we have included the following fields types:

• Menu – a field allowing to generate options connected with page’s menu – used in a Navigation section
• ThemeStyle – a field allowing to choose page’s style – used at the beginning of a Basic section.

The description of creating your own fields types we will describe in the further part of this article.

• label – it specifies a label text visible next to a field
• tooltip – (optional) it allows to specify tooltip content which will appear after mousing over a label of a field given
• default – default value of a field given
• class – (optional) this field allows to specify CSS classes added to an element while generating it (if a field code supported such a functionality)
• format – (optional) a field specifying a desired field content in the form of a regular expression. e.g. value: 

  [a-zA-Z]{2,5}

  specifies that a field given will be filled in correctly only when a user set as its value a sequence of capital or small letters from 2 to 5 symbols.
• required – (optional) allows to specify whether filling in a particular field was required
• visibility – (optional) specifies when a particular field is visible. Visibility rules are separated with commas and are created in FIELD_NAME=VALUE format – in the case of a few visibility rules, they are linked with AND operator. The value of  FIELD_NAME is a name without a prefix with a theme name. e.g.

  option1=10,option2=20

  will cause that a field given will be visible when an option with option1 name will be set to 10 and, at the same time, an option2 option will have have value equals 20.
• other – (optional) this field is used for storing additional values, e.g. in the case of a Select field, it is used for storing names and options values. This field is very useful when creating more advanced fields which may require additional configuration options.

After adding a new option, you have to remember about its support in the theme. Option value is loaded by using a get_option function of a schemata given:

get_option($tpl->name . '_OPTION_NAME', 'DEFAULT_VALUE');

when OPTION_NAME is an option name from a JSON file and DEFAULT_VALUE is default value of an option which will be used when a user does not specify a value of an option given. What is important, there is a “_” symbol which you cannot omit. A prefix with a theme name is added in order differentiate values of options of different themes.

Creating your own field types options

While creating a new field type, you have to start from creating a catalog compliant with a field name, e.g. CustomField in a gavern/form_elements catalog. Then, you have to create a config.json file in this catalog and fill it in according to the schemata below:

{
"name": "CustomField",
"description": "Example Custom Field",
"js": false,
"css": false,
"php": "customfield.php",
"class": "GKFormInputCustomField"
}

name, description, php i class fields have to include particular values; js and css fields are optional – they allow to specify whether a field given has to use additional CSS and JavaScript code (then, a name of files from a field catalog has to be set as a value). Also, you have to create a customfield.php file including a GKFormInputCustomField class derived after a GKFormInput class.

Also, a customfield.css file must include a safety code at the beginning:

// disable direct access to the file
defined('GAVERN_WP') or die('Access denied');

Each field class has to include at least one public method – output not loading any additional arguments. This method must return HTML code of a field given. Field properties froma JSON file are available as class fields, e.g. required is available as:

$this->required

The second important public methid of each class of a form field is a getValue method which loads one argument – $default. Its use is optional and useful only when a value of a field given uses more than one field in the data base. Then, it is useful to overwrite this method – as an example we recommend a standard code of a WidthHeight field where overwritting a getValue method was used for storing values of two form fields in one main field created by a GKInputFormWidthHeight class.

The remaining class methods have to be created according to the needs of the author of a form  field given.

• options connected with sharing at Facebook
• options connected with sharing on G+
• options connected with sharing on Twitter
• options connected with sharing on Pinterest
• options allowing to switch on/off Social API on particular subpages.

Options connected with sharing are the equivalent of parameters available in online editors, used for creating buttons like:

• Facebook – ‘like it’ button
• Goggle Plus – ‘+1′ button
• Twitter – ‘tweet’ button
• Pinterest – ‘pin it’ button

The last group of options allows to specify where they will be displayed – thanks to Include/Exclude specified articles from Social API option, it is possible to switch off Social API completely or switch on/off this functionality only for chosen posts, subpages and categories.

We specify the list of posts, subpages and categories in three last options:

as a sequence of ID, slug or the names of posts given, subpages or categories separated with comas, e.g. 

1,5,25

typography,theme-settings,theme-essentials

• Widget rules allows to switch on this mechanism. It is recommended to switch on this option in the case when you do not need to use widgets visible on a chosen subpages. Note that it will allow to optimize a little bit the speed of a website as operations of checking rules for each widget will not be made.
• Support for Google Chrome Frame – it switches on a metatag forcing use of  Google Chrome Frame plugin on Internet Explorer browsers if it is installed.
• Parse emoticons in the text widgets – it activates parsing emoticons to a graphic form in widgets.
• Parse shortcodes in the text widgets – it activates parsing of Shortcodes in widgets.
• Use Thickbox – it allows to switch on Thickbox  script for presenting images included in posts.
• Value for the $content_width variable –  $content_width variable is used while creating thumbnails of images for posts, that’s why it has to be defined as an appropriate value – we recommend to set the value not bigger than the max. page’s width.
• Use the override.css file – thanks to switching on this option, an override.css file will appear at the end of the list of CSS files which allows to overwrite theme’s CSS rules easily without interference in existing CSS code.
• Enable support for Open Search – it allows to switch on support for  Open Search technology.
• Enable support for Open Graph – it allows to switch on support for Open Graph  technology – after switching on this option, an additional metabox will appear on a page for editing posts: 

• Basic settings
• Layout settings
• Fonts settings
• Navigation settings
• Advanced settings
• Shortcodes settings
• Social API settings
• Theme branding settings
• Back-end branding settings
• SEO settings

Also, some additional elements generated by a framework in an administration panel in some various places appear, namely:

• Typography button
• Widget rules
• Open Graph metabox
• GavernWP SEO settings metaboxes

It is also worth getting acquainted with a theme configuration with files use in JSON format:

• Option files
• Theme configuration

The ability of these files edition, gives a possibility of deep interference in websites work based on GaverWP.

The first option allows to choose a color version of a theme. In this place, there may appear a few various fields depending on the conent of styles.json configuration file.

There is an option allowing to switch a style-switcher after an option/options of choosing theme’s styles  – it is an element allowing for a website’s user to choose a theme style himself/herself.

The next option is connected with switching on breadcrumbs element on a website. There are the following options to choose from: Enabled, Disabled and Conditional rule – then, you have to set a rule using Conditional Tags and logic operators of PHP language in a Conditional rule field, e.g. a rule displayinga a breadcrumbs element on the homepage and in the “Meet GavernWP” category will be in the following form:

is_homepage() || is_category('Meet GavernWP')

“Show mainbody widgets insteads of blog posts on the homepage” option is useful when you want to place a widget instead of entries on the homepage – then  you have to switch it on mainbody widget position, place a widget needed which will replace a standard list of posts generated by WordPress.

The last option, namely “Show author info” allows to display information about its author under each post in the following form:

The first group of options is connected with page’s title:

• Use blogname in title – this option allows to switch on showing a blogname in the title
• Separator used in title – it specifies a separator which is between a title description and a pages’s name
• Title – description – it allows to specify page’s title description (the first part of a title – before a separator)
• Title – blogname – it allows to specify page’s name (the second part of a title after a separator)

The remaining options allow to switch on advanced management of keywords and description metatags:

In the case of a homepage, these metatags values are specified in a SEO settings panel whereas in the case of subpages, there are two settings available for both metatags:

• Disabled
• Enabled (custom field in the post editor)

When you switch on these settings, under a posts editor two additional fields will appear:

If you fill them in, metatags used on one subpage with an entry will be created.

• Custom page styles – they extend functionality of standard subpages.
• Typography – an advanced list of elements gives a possibility to enhance posts about various add ons.
• Social API – it allows to add buttons for sharing posts in social network services very easily.
• Open Graph – it allows to specify the way in which content shared on Facebook will be visible.
• Threaded comments – they allow to make discussions under posts in a clear way.
• Branding – it simplifies setting key elements of a website connected with its name or brand.
• Color styles – thanks to color styles, it is possible to create many various color and stylistic versions of a theme.

Thanks to a Page layout option, it is possible to specify a column position in page’s layout: on the left/right side or switch off showing a column completely (in this situation, you achieve the layout available via an additional subpage style – fullwidth).

A Theme width option specifies maximal page’s width – no matter what width a browser window has, page’s width will not exceed this value.

Column width is specified in per cents thanks to a Sidebar width option. Tablet width and Mobile width options allow to specify width of a browser window in pixels where css/tablet.css and css/mobile.css files are loaded.

In the case of tablet.css, modules which normally create four – column layout (max.), will appear in two – column layout which after loading a mobile.css file will change into one – column layout. Additionally, after loading a tablet.css file,a column moves under main content of a page given.

Note: all options from a Layout section are also in a live-preview editor which allows to adjust values of these options easily, thanks to a site live preview.

There are a few options available for each menu available on a website. Website’s main menu has more options than a menu placed e.g. in a page’s footer.

The difference is that a main menu has additional options connected with animation:

These options allow to specify the type and speed of animation of a submenu.

Additionally, all menu types have the two options:

• an option specifying whether a menu given was switched on – a menu given can be switched on only on a particular subpages thanks to a Conditional rule option – then, you have to insert a rule from  Conditional Tags and logic operators of a PHP language in  a Conditional rule field, e.g. a rule displaying a menu on the homepage and in a category called “Meet GavernWP” will have the following form: 

  is_homepage() || is_category('Meet GavernWP')

• an option specifying menu depth i.e. a maximal nesting level for all menu positions displayed. If e.g. you want to skip the second menu level and display menu positions which are on the first menu level, you have to set this option to 1. Of course All levels value will cause displaying all menu postions available for a menu given.

You have to remember that adding a menu, except adding an appropriate entry in an configuration file menus.json, also requires creating appropriate code in a theme.

This code uses a standard wp_nav_menu function but you have to remember about three crucial things:

• code of wp_nav_menu function has to be placed inside IF condition in a form:

  if(gk_show_menu('MENU_NAME')) {

  where MENU_NAME is a menu name, e.g. mainmenu. Thanks to it, there will be a functionality which allows to display a menu only on subpages chosen.
• in the case of main menu, it is very useful to create a duplicate in a mobile version so as while displaying a website on mobile devices, a menu will be adjusted to mobile devices.
• in the case of a main menu, you have to use a special class derived from Walker: GKMenuWalker class; however, for a mobile menu, you have to use GKMenuWalkerMobile class. Thanks to it, appropriate menu structure will be generated.

CSS code connected with a menu is in css/wp.css and css/mobile.css files.

Scripts creating main menu animations are in js/gk.menu.js file.

• page’s logo
• page’s footer
• framework’s logo under a page’s footer

There are the following administration panel options responsible for these elements:

In the case of a framework’s logo, it is only possible to switch it on/off.

Footer content is defined in Footer content option. It will be displayed at the bottom of the page, usually on the right side.

The majority of parameters are connected with a page’s logo. The first step in a logo configuration is to choose a logo type; there are the following logo types available:

• Defined in the CSS code – a logo is defined theme’s CSS style as an element having cssLogo class. In this case, except CSS code modification, no other settings changes are needed.
• Image logo – after choosing this option, some additional options will appear:  You have to choose an image logo and specify its sizes.
• Text logo – likewise in the previous option, some additional options appear:  Theme logo text option specifies whether main logo text and the signature below it will be taken from WordPress settings (from WordPress settings) or will be specified by a user (Own). In the case of choosing the second option, two additional fields to fill in will appear: 
• None – in this case, a logo will not be displayed.