To simplify the use of shortcodes found in themes based upon the GavernWP framework, a button for a theme’s typography has been implemented and is available in the post editor:
By clicking the “GK Shortcode” button, you will see a list of available typography elements:
It is possible to select a style to be applied to the majority of elements. After choosing a particular style, a shortcode will appear to be replaced within content entries by scripts to structure the content in the same style.
Note that adding a new Shortcode code requires three operations:
- adding an entry in shortcodes.js configuration file;
- adding PHP code in support of a given shortcode; and
- adding optional CSS and JavaScript code (if the shortcode requires it).
The shortcodes.js file located in the config catalog includes entries intended to replace the visible menu structure after clicking a typography button. It includes $GAVERNWP_SHORTCODES – a variable for a table of objects which represent menu elements. 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 – This represents the name of a menu position as displayed through a script.
- code – This is a shortcode code which will be added to an entry when the menu of a given position is clicked on. Not all first-level menu positions have a value in this field. With an empty sequence of symbols, clicking on the menu position would result in no reaction.
- submenu – This is a table of a submenu of the given menu position. Each submenu position is identical to first-level menus, but with one difference – a submenu cannot have a submenu of its own, so do not add a submenu feature to a submenu object.
Let’s say we add our shortcode to a typography button using the shortcodes.js file. There is one thing left to do – support our shortcode on the theme side.
To do this, open the gavern/helpers/helpers.shortcodes.php file.
This file is divided into three main sections beginning with lines similar to:
if(get_option($tpl->name . '_shortcodes1_state', 'Y') == 'Y') {
It is a conditional IF instruction associated with a specific group of typography elements. GavernWP icludes three groups:
- typography elements – Associated functions have a gavern_ts_ prefix in the title.
- interactive elements – Associated functions have a gavern_ies_ prefix in the title.
- element characteristic for a particular theme – Associated functions have a gavern_tss_prefix in the title.
We recommend adding new typography elements to the last group; in the Meet GavernWP theme, it is empty by default. Remember to use an appropriate prefix in a function name for a selected group; for example, in the case of the third group, it will be gavern_tss_. The code itself of a selected shortcode must be created according to guidelines described in the Shortcode API.
The last step is optional and depends upon your Shortcode type. If your Shortcode requires additional CSS or JavaScript code, you must define it in shortcodes.*.css and shortcodes.*.js files, where * is the group name to which the Shortcode was assigned.
It is very important to place elements of CSS and JavaScript code in an appropriate file, as it will allow all of the theme code to be optimized when a particular group of Shortcode codes is switched off.