If you like my work, please consider supporting its development.

This page describes the particulars of setting up custom sidebar widgets. It should be considered supplemental to the documentation for general plugins.

Type

The plugin type for sidebar widgets is sidebar. So the configuration for the Recent Articles widget would be under params.sidebar.recent instead of params.plugins.recent.

Widget Partial

The partial partial for sidebar widgets should have this general structure:

<div class="widget">
	<header>
		<span class="widget-header">
            <span class="fas fa-icon-name fa-xs" aria-hidden></span>
            Widget Title
        </span>
	</header>
	<a class="widget-header-small button" href="#">
        <span class="fas fa-rss fa-xs" aria-hidden></span>
        Link Text
    </a>
	<ul>
	    <li>List items</li>
    </ul>
    <!-- Or -->
    <div>
        Widget Content
    </div>
</div>

The key pieces from this template are:

  • The widget should be contained within a <div> with class widget.
  • The widget header/title should be in a <span> with class widget-header inside of a <header> tag.
  • All Font Awesome icons should have the fa-xs class applied to them, especially when in the widget title.
  • All other widget content is a sibling to the <header> element and does not need to be inside a containing div, but can be.

These guidelines help make your custom widget look integrated with the rest of the theme and with the other, built-in widgets.