Latest Posts Page

Main front-end features

Themes based on GavernWP framework have support for many useful solutions and technologies. The most important ones are:

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.

Layout settings

Layout settings in a theme are connected with five main options:

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.

Navigation settings

GavernWP gives a possibility of advanced menu managing on a website. There is a list of menus available in a theme in a configuration file – menus.json. These menus are displayed in a Navigation tab:

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.

Shortcodes settings

Shortcodes are facilities which are not used by everyone. Besides, XHTML code of the majority of typography elements can be generated manually. It causes that not all CSS and JavaScript files connected with Shortcodes are needed while loading a page.

Thanks to a Shortcodes tab, it is possible to switch off chosen groups of Shortcodes:

Note! Switching off a given group of Shortcodes will cause not only switching off adding CSS and JS files connected with a group given but will also switch off functions which parse Shortcodes in articles. That’s why, you have to make sure that Shortcodes groups you want to switch off, are not used in existing articles.

Theme branding settings

There are four key places connected with branding in a theme based on GavernWP framework:

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

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 Theme logo type. 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.

Note: None option is useful when you want to define a logo code in theme’s code yourself – then, it is enough to add your own code to an appropriate file (usually it is: layouts/header.php).

The last section of theme branding settings is connected with the favicon. Page favicon is a small graphic, that is associated with the page or Web site. You have to specify direct path of favicon.ico file or use the Upload Image button.

Back-end branding settings

In order to adjust stylistics of an administration panel to a GavernWP page, there are some options allowing to adjust the look of administration panel elements to a theme of a page given.

You will find the following options in a back-end branding tab:

The first two options are connected with a logotype displayed on a log in page. You have to choose an image which will be used as a logo and then insert the size of the image chosen. In this way, you may achieve, e.g. the following log in panel:

The remaining two options are connected with theme’s login displayed in a main menu of an administration panel:

We recommend to use an image in 16×16 size – bigger or smaller images may cause problems with menu layout.

Typography button

To simplify shortcodes use available in themes based on GavernWP framework, a button for theme’s typography has been implemented which is available in a posts editor:

By clicking this button, you will see a list of available typography elements:

It is possible to choose a version with a stylistic specified for the majority of elements. After choosing a particular style, a shortcode will appear which will be replaced in entry content by scripts to structure styled in a way given.

Please, note that adding a new Shortcode code requires three operations:

adding an entry in shortcodes.js configuration file
adding PHP code supporting a shortcode given
adding optional CSS and JavaScript code (if a shortcode given requires it)

shortcodes.js file in config catalog includes entries which are replaced to menu structure visible after clicking a typography button – it includes $GAVERNWP_SHORTCODES variable which is a table including objects representing elements of a menu. Each object has three features: title, code and submenu. Let’s analyze this structure with a Highlight position:

{
"title": "Highlight",
"code": "[highlight]Your text[/highlight]",
"submenu": [
{
"title": "Style I",
"code": "[highlight style=\"1\"]Your text[/highlight]"
},
{
"title": "Style II",
"code": "[highlight style=\"2\"]Your text[/highlight]"
},
{
"title": "Style III",
"code": "[highlight style=\"3\"]Your text[/highlight]"
}
]
},

title – it includes a menu positon name displayed by a script
code – it is a shortcode code which will be added to an entry when clicking a menu position given – you have to remember that not all menu positions on the first level have a value in this field – if it was an empty sequence of symbols, it means for a script that clicking on a menu position given does not request any action.
submenu – it is a table of a submenu of a menu position given. Each submenu position is built the same as menu positions as these on the first level but with one difference – a submenu cannot have the next submenu, so you do not add a submenu feature in a submenu object.

Let’s say, we added our shortcode to a typography button using shortcodes.js file. So, there is one thing left to do – support our shortcode from a theme side.

To do this, you have to open gavern/helpers/helpers.shortcodes.php file.

This file is divided into three main sections starting with lines similar to:

if(get_option($tpl->name . '_shortcodes1_state', 'Y') == 'Y') {

It is a conditional IF instruction connected with a group of typography elements given. Gavern icludes three groups:

typography elements – functions connected with it have gavern_ts_ prefix in the title
interactive elements – functions connected with it have gavern_ies_ prefix in the title
elements characteristic for a particular theme – functions connected with it have gavern_tss_ prefix in the title

We recommend to add new typography elements in the last group – in Meet GavernWP theme, it is empty by default. Please, remember about using an appropriate prefix in a function name for a group given, e.g. in the case of the third group, it will be gavern_tss_. The code itself of a shortcode given has to be created according to guidelines described in Shortcode API.

The last step is rather optional and depends on your Shortcode type. If your Shortcode requires additional CSS or JavaScript code, you have to define it in shortcodes.*.css i shortcodes.*.js files, where * is a group name to which a Shortcode given was assigned.

It is very important to place elements of CSS and JavaScript code in an appropriate file, as it will give a possibility of optimizing whole theme code when switching off given group of Shortcodes codes.

Import/Export settings

Sometimes, there is a situation when you have to copy a configuration from one installation to another. In order to simplify it, GavernWP has been equipped with an import and export options of theme’s settings in “Import/Export” tab of a theme’s main menu:

After entering a page of these settings, you will see the following view:

When you click the Backup Template Settings button, system will generate a template backup file for you to save it on your computer. (Filename contains theme name, date and time of backup).

This backup file contains your Gavern template configuration and setting options.

After exporting, you can either use the backup file to Restore template settings on this site again or another WordPress site when using same Gavern theme.

Note! While exporting settings, you have to remember that it is possible to copy settings between the same themes.
Theme’s settings are available in JSON format, so it is possible to save these settings to a file and then modify them manually before loading to a different theme.

Tip: We recommend to make a backup of theme’s settings, thanks to it, you will be secured against not desired effects of greater changes in a theme’s configuration.

Updates

GavernWP has an update section which allows to access information whether a theme was updated to the latest version. In order to access an updates panel, you have to use “Updates” submenu from a main menu of theme’s options:

If a theme was not updated, a list of updates will appear; which are newer than your theme version.

However, when you have a theme in the latest version, you will see an appropriate message that a theme does not have any new updates to download.

It’s worth remembering that a free theme – MeetGavernWP is available through a public repository in a github service which allows to easy analysis of changes implemented in particular files. In the case of commercial themes, it is recommended to use tools like WinMerge (Windows) or File Merge (MacOS X) to compare changes in files. Each update in our update system has information about the list of modified files. Generally, it is recommended to compare only these files which you modified manually after loading a theme.

Theme live editor

GavernWP has basic support for a new option available in WordPress 3.4 – an options editor with themes preview. Now, the most important options connected with theme’s style and its layout has been implemented to a live editor.

In order to reach it easier, we placed a direct link to this editor in the top part of themes’ options:

All options included in this editor are also available via traditional theme’s options panel.

In order to simplify adding your own options to a live editor, the whole code generating options is placed in a separate file: gavern/helpers/helpers.customizer.php.

You have to remember that all options and settings from a live editor are stored in the same place as their equivalents from an administration panel so settings change with a live editor causes changes in an options panel. That’s why, it is recommended not to use a traditional administration panel and a live editor at the same time because saving options with various values in two different places at the same time may not give the expected result.