Creating Widgets

In this tutorial you'll learn how to create widgets and get an insight of the general structure of Widgetkit.

Where to find the Widgetkit interface

After you've installed Widgetkit, it will be available from the backend of your CMS. Both in Joomla and WordPress, Widgetkit adds its own administration interface where you can create new Widgets and manage existing ones.

In Joomla, the Widgetkit administration can be accessed from Components » Widgetkit. In WordPress, you can find the same interface under the Widgetkit section in the backend navigation.

In addition to the stand alone interface, you can also use Widgetkit inside a lightbox right from your content. Inside an article or component, you can click the Widgetkit button to open the Widgetkit lightbox. All settings and options from the stand alone interface are available in this editor as well.

Create Widgets from your CMS content

  1. Inside the editor of your CMS hit the Widgetkit button. This will open Widgetkit in a lightbox.
  2. Insert one of the already existing widgets from the list by clicking inside the widget title or hit the New button to create a new widget. You can also edit, duplicate or delete single widgets by clicking the icons that appear on the right hand side when hovering an item.
  3. Choose the content type and pick the widget you want to be rendered. For more information, take a look at the Widget Plugins doc. Afterwards hit Create to proceed.
  4. Enter a name for your widget and start adding your content. For more information, check out the Widget Content doc. In the Settings panel you can change the configurations of the widget plugin, like animations and display options or add a custom class to your widget. To change the content type or widget plugin click on the gear icon.
  5. Hit Save to finalize your widget. Then hit Cancel and you will be taken back to the list of widgets, where your newly created widget will appear. Click inside the widget title to insert the shortcode into your content.

Visual Guide: Insert existing Widget

Insert existing Widget

Visual Guide: Create and insert a new Widget

Create and inser existing Widget

WordPress widget or Joomla module

Widgetkit also provides a WordPress Widget or Joomla module. In WordPress, go to Appearance » Widgets and drag and drop the Widgetkit widget to any theme position. In Joomla, create a new Module in the Module Manager and select Widgetkit as the Module Type. The editor will then display a Select Widget button which opens the Widgetkit dialog.

Shortcodes

Shortcodes are a very popular concept from Wordpress which allows you to easily publish dynamic content without any programming knowledge. Basically you insert a shortcode in a WordPress post or Joomla article and it will be rendered as a widget, for example a slideshow which loads dynamic content from your CMS.

All shortcodes include the id and the title of the widget that you want to display.

[widgetkit id="1" name="My Slideshow"]

If you want to edit your widget afterwards, you need to click inside the shortcode before hitting the Widgetkit button. Otherwise you can only create a new widget.

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!