PKB Shortcodes - User Guide

Introduction

PKB Shortcodes provides you an ability to create custom macros and convert complex HTML code to BBCode. It is the administrative tool that helps site integrators to implement various code with shortcode that keeps the content simple and clean. The widget has flexible structure and provide creation of complex macros.

After installation PKB Shortcodes is ready to use, but comes without the set of predefined shortcodes, so you need to create custom shortcodes according to the widget syntax and your tasks.

Requirements

Minimal requirement to the platform: Pagekit 1.0.7 and higher.

Please always clear browser cache after updating the widget to a newer version (Pagekit caches its back-end side).

Configuration

After installation the list of items is empty. Now let's create a macros. To do that go to Administrator Panel > Dashboard > Shortcodes and click on Add Shortcode button in top-right toolbar.

PKB Shortcodes - list of created shortcodes

The widget has special rules for shortcodes. A Macros term is used together with Shortcodes that means the same. When you add a new shortcode, you’ll see the following available fields:

  • Name
  • Shortcode Macros
  • Shortcode HTML
Add a custom macros in PKB Shortcodes

On the right sidebar you can assign an icon to the macros, change its status (Published / Unpublished) and set the date of publication.

Name field and its associated icon will appear in the inline editor when you insert macros from the list. Shortcode Macro is a field where you’re constructing the macros and Shortcode HTML is a text-area to add output HTML text.

The main advantage of shortcoding is the support of variables.

To name a variable the {} symbols are used (curly brackets). To name a macros the [] symbols are used (square brackets).

Example

We need to add a "div" container that includes text with special formatting and .info class is required.

<div class="info">Text</div>

We have one Text variable as a minimum. To convert it into the variable we need to use {} symbols. For macros we should use [] symbols.

Exmaple of creating macros in PKB Shortcodes

As a result our shortcode will look this:

//Shortcode
[info]{text}[/info]
//html
<div class="info">{text}</div>

If the text won’t be large, we can minify the shortcode:

[info text="{text}" /]

Also we can complicate the task and process .info class as a variable. It will look like this:

//Shortcode
[block class="{class}"]{text}[/block]
//html
<div class="{class}">{text}</div>
Exmaple of creating macros in PKB Shortcodes

The quotes are in use in case when the variable is placed inside of square brackets.

Note: You can insert a shortcode inside of another one. To do that, you must place custom {text} variable in the place where another shortcode will be used.
NOTE: Only a single macros in the given string of a text is allowed to use. In case of multiple classes to be used within a single macro, put them in a new macro and use them accordingly.

Use of Uikit elements

It is so easy now to use various elements of this front-end framework whfich is core part of Pagekit by default. We recommend you to examine core and extended components on official Uikit site for best understanding.

If you're going to use any of Uikit components, please do not forget to include all required files (CSS and JS) related to the Uikit component. It can be done in Pagekit settings (Dashboard > Site > Settings > Code). More information which files must be included can be found here: Uikit2

Video guide