Latest Posts Page

Theme CSS

Theme’s CSS code is divided into a few files, loaded in order specified. All these files are in css catalog. You have to remember that order of these files is very important and its change may cause unpredictable changes of theme’s look because of using moving from general styling to detailed styling in CSS code.

The list of CSS files used in a theme is presented below (order according to recommended order of loading these files):

normalize.css – CSS code unifying page’s elements styling in all browsers
template.css – the most important CSS file responsible for page’s layout styling , basic typography, widget styling, etc.
wp.css – CSS rules which are responsible for WordPress elements styling, e.g. a comments form , comments themselves or posts elements.
shortcodes.*.css (optional) – a group of CSS files responsible for typography elements styling inserting to posts with Shortcodes.
stuff.css – it includes styling of additional theme’s elements sucha s breadcrumbs or font-size switcher.
wp.extensions.css – CSS rules connected with styling of standard widgets available with WordPress.
extensions.css (optional) – a CSS file which you have to add yourself in the case when you want to style additional widgets. In the case of small changes in widget styling, we recommend to use override.css file instead of this file.
tablet.css – CSS rules used while displaying a page on tablet devices.
mobile.css – CSS rules used while displaying a page on smartfon devices.
ie*.css – a file or a group of CSS files used for correcting page’s look in an Internet Explorer browser.
style*.css – a file or a group of CSS files used for changing coloring or general style of a theme – they are loaded automatically by a mechanism responsible for theme’s coloring.
override.css (optional) – you may add your own rules in this file which will overwrite existing rules in previous files – a perfect solution for theme modification without modifying the remaining CSS files.

Additionally, CSS code used in a theme itself, you will also find in a templates catalog where there are CSS files loaded on chosen styles of subpages, e.g. needed for correct work of a gallery.

Theme structure

Each theme’s subpage in GavernWP is created and based on one file from theme’s main catalog, e.g. single.php and at least four additional files from layouts catalog:

header.php – this file includes starting page’s structure i.e. a head section and the whole headline with elements such as: logo, main menu, etc.
before.php – there are all widget positions included in this file which are before page’s main content.
after.php – this file is an equivalent of before.php file but with one difference – it includes widget positions which are after page’s main content.
footer.php – similarly to header.php file, it includes a starting page’s structure as footer.php includes the ending page’s structure, i.e. a footer and and elements below.

The above files with a file given from a main catalog, create a basic structure of each page. The remaining elements are generated by additional files or functions. The majority of of such files can be found in layouts catalog; e.g. files with names content.post.*.php, include constituents of each post. . Using these files allowed to restrict the amount of code in theme’s main files and simplify its modification as change e.g. an entry footer requires modification of one or two files only.

Functions used for generating additional information displayed in posts are in gavern/helpers/helpers.layout.fragments.php file.

Social API

Thanks to Social API, adding buttons to an entry for sharing posts in the most popular social network services is very easy.

At the moment, Social API supports four services:

Facebook
Google+
Twitter
Pinterest

Buttons for sharing are generally added under an entry. All contact data needed for sharing are loaded from entry content or from OpenGraph metatags.

Thanks to extensive configuration options, it is possible to adjust buttons look in accordance with available configuration parameters.

The most important thing is that the work of Social API can be limited to specific posts or switch off some posts from its work.

Open Search support

Open Search is a technology which allows to create your own browsing engine used by a browser. Thanks to it, e.g. in a Firefox browser, a user may define a new browser after entering our website based on GavernWP framework. Because of it, in the case of more extensive websites, e.g. data catalogs, searching is much easier.

Switching on support for Open Search requires switching on one option in an administration panel in a tab of advanced settings. All other operations are made with GavernWP.

Responsive Layout

GavernWP makes possible to create themes based on Responsive Web Design. That’s why, it has two additional CSS styles:

tablet.css
mobile.css

Thanks to options available in an administration panel, it is possible to specify when these styles will be loaded.

Two column layout (if a column is switched on) is loaded when tablet.css file is not loaded.

At the moment of reaching maximum width for tablet.css file, page’s layout is changed into one column and the column itself is placed before or after page’s main content.

Additionally, in widget positions like top or bottom1/2/3, modules from three column layout are changed into one column layout.

After loading mobile.css file there is one column layout used everywhere.

A very important improvement is a possibility of specifying whether a module will be loaded in tablet or mobile mode. More information can be found in Widget Rules entry.

Color Styles

GavernWP has an extensive mechanism allowing to create additional theme styles. We may distinguish two main groups of styles in this mechanism:

style family
styles included in style family given

The whole configuration is included in styles.json file:

[{
"family": "color",
"family_desc": "Theme color",
"family_tooltip": "You can select one of the theme colors",
"styles": [
{
"name": "Color I",
"value": "color1",
"file": "style1.css"
},
{
"name": "Color II",
"value": "color2",
"file": "style2.css"
}
]
}]

As you can see, it includes color style family which has two styles, namely: Color I and Color II.

In order to create new style family or a style for style family given, it is enough to create a next object in styles.json file and then create CSS files connected with a family given – in the case of color family, these are style1.css and style2.css files.

GavernWP will load CSS files of a style given in a head section – chosen in an administration panel or, if there is a tool for choosing user’s styles switched on, they will be loaded based on a Cookie file storing data about a style used by a user.

You have to remember that for each style family there is at least one CSS file loaded. Therefore, creating coexisting style families like:

dark styles and light styles
blue styles and green styles

is incorrect because at least one CSS style from each family will be loaded immediately. So the correct one is creating style families responsible for some elements of website styling, e.g. a separate family responsible for website coloring (colors) and a separate one for website background (patterns).

Generally, you have to care about particular style families in order not to overwrite one another.

Open Graph support

GavernWP has built – in support for Open Graph protocol. Thanks to it, each post added may have metatags specified and during publishing a post given on Facebook, there will be information specified earlier by an author of an entry displayed:

title
entry description
thumbnail connected with an entry

Thanks to it, an author of a post has better influence on the information displayed on social media services. It’s also worth remembering that in the case when fields connected with Open Graph will not be filled, then GavernWP will try to fill them automatically basing on the entry data.

Support for Open Graph is a great supplement for a Social API system implemented in GavernWP.

JSON Configuration

In order to make GavernWP framework more flexible, we decided to use files in JSON format for storing thme’s configuration and options layout in an administration panel.

You may find files responsible for theme’s configuration in gavern/options/ catalog:

fonts.json – a file which stores theme’s groups of fonts. By default, there are three main gropus created. In order to create a new group, it is enough to add a next object to the object table existing in this file.plik przechowujący grupy czcionek szablonu.
menus.json – you will find space for menu used in a theme in this file. You have to remember that except adding a new object, you have to add PHP code generating menu data in theme’s code. It is also worth remembering that there could be one main menu (main field in menu object).
opengraph.json – this file includes configuration of fields used in a block connected with metabox which is used for generating Open Graph data. We do not recommend to make any changes in it before you get acquainted with Open Graph tags implementation in GavernWP framework.
styles.json – this file is used for generating additional theme’s styles. Except adding a new style, you have to remember about creating an additional CSS file which will be loaded while changing theme’s style.
template.json – it is the most important configuration file. It includes information about a theme and it allows to switch off chosen elements of theme administration panel. It is NOT recommended to add new fields to this files because they will not be used without additional PHP code.
widgets.json – a file including a list of all positions of widgets. Similarly to menus.json file, you have to remember that except adding a new widget position, you have to also add PHP code which generates it in a theme.
widgets.styles.json – a file used for creating new widget styles. Thanks to its implementation, it allows to assign a style given to one widget type only or exclude some widget types from a style given.

In order to understand better JSON files format, we recommend to visit the official website of this format.

Translations

GavernWP has full support for making translations. Because of differences being a result of using JSON files for generating theme’s options, a theme’s translation should be done in three places:

with files use from a languages catalog
by creating a catalog of a language given in a config catalog
by creating a catalog of a language given in an options catalog

The first stage is a standard operation described in details in WordPress documentation. Let’s focus on the two remaining stages then:

Generally, there is en_US catalog created in config and options catalogs which includes JSON configuration files in an English language. So, in order to translate a theme to a different language , you have to copy this catalog and change its name to a respective language used in your installation, e.g. pl_PL. Then, you have to change all phrases from the English language to your language.

NOTE! You must not change the names of keys in JSON files, the same as, proper names because they are used for proper work and reading values.

e.g. in a widgets.json file for a fragment:

{
"name": "Top widgets",
"id": "top",
"description": "Widgets area on under the header of website",
"before_widget": "<div id=\"%1$s\" class=\"box%2$s\">",
"after_widget": "</div>",
"before_title": "<h3 class=\"box-title\">",
"after_title": "</h3>"
},

change the following phrases only:

“Top widgets”
“Widgets area on under the header of website”

After this operation, you will see sentences in your mother tongue in an administration panel.

It’s worth remembering that in the case when GavernWP will not find a catalog corresponding to the language set in configuration, there will be files used from en_US catalogs.

oEmbeds

oEmbeds is an important facility used while creating posts. Thanks to it, a user may embed in an entry easily, e.g. a movie from You Tube service by giving just a link to the movie – WordPress will generate a movie from this link automatically.

A few examples are presented below:

YouTube

Twitter

What is your favorite demo toolbar? bit.ly/demo_toolbar fb.me/1NuSjW3kb

— GavickPro (@gavickpro) lipiec 6, 2012

Flickr

Meet GavernWPFree WordPress template

Destinos Turisticos Group Peru

For all your travel needs in Peru