If you read my first post comparing WordPress theme development to Joomla template development, welcome back! In this series on WordPress concepts for Joomla developers, I am covering the similarities and differences between WordPress development and Joomla development to help Joomla developers become more comfortable with WordPress development. The goal of this series is not to convert Joomla developers to become WordPress developers, but to help and encourage all developers to become more well-rounded web developers in order to provide the best possible solutions for your clients.

In this post, I will cover sidebars and widgets. Sidebars and widgets are most analogous to Joomla module positions and modules respectively. There are many similarities between the sidebars and module positions and between widgets and modules, but there are also some subtle differences that might leave Joomla developers scratching their heads.

Sidebars and Module Positions

A sidebar is a container for widgets in the same way that a module position is a container for modules. It is an area in the theme where widgets are rendered with a particular set of layout rules, and a module position is an area in the template where modules are rendered with a particular set of layout rules called module chrome.

Registering Sidebars vs. Registering Module Positions

Before a sidebar can be rendered, it must be registered. This is a big difference from Joomla, because although most templates do register module positions in the templateDetails.xml file, it technically isn't necessary to register a module position.

Sidebars are registered in the theme's functions.php file using the register_sidebar() function. Below is an example of a typical call to this function:

register_sidebar( array(
    'name' => __( 'Some Sidebar', 'theme-slug' ),
    'id' => 'some-sidebar',
    'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>',
) );

The function takes a single $args variable that is an associative array of arguments with information about the sidebar. The first argument, name, is the name of the sidebar that gets displayed in the WordPress UI where lists of sidebars are displayed. The id is a unique identifier for the sidebar, and description is a description of the sidebar.

The other arguments, before_widget, after_widget, before_title, and after_title are the WordPress equivalent of module chrome. They define the HTML wrapper around each widget, and the HTML wrapper around each widget title. It's a little less flexible than module chrome in my opinion, but it is a lot more compact and perhaps a bit easier to understand for someone new to theme development.

You can learn more about the register_sidebar() function here.

Rendering Sidebars vs. Rendering Module Positions

Sidebars are rendered with a template tag, while module positions are (usually) rendered with a jdoc markup tag like:

<jdoc:include type="modules" name="some-module-position" style="some-module-chrome-style" />

The template tag for rendering a sidebar is dynamic_sidebar(). This function takes a single parameter, the ID of the sidebar to be rendered. If we want to render the sidebar registered above, it would look something like this:

<?php if ( is_active_sidebar( 'some-sidebar' ) ) : ?>
    <div class="some-class">
        <?php dynamic_sidebar( 'some-sidebar' ); ?>
    </div>
<php endif; ?>

You'll notice the function is_active_sidebar('some-sidebar'). This is similar to Joomla's $this->countModules('some-module-position'), except the former returns true or false depending on whether or not there are active widgets in the sidebar, and the latter returns the number of active modules in the module position. The effect is the same, because both are used as checks for whether or not you should display the sidebar or module position.

Widgets and Modules

Widgets and modules are almost identical in their purpose and functionality. Both are blocks of HTML to be rendered in a specific area in the theme or template. Both can be used for rendering menus, forms, custom HTML content, or basically anything you can think of.

Widgets can also be displayed anywhere using shortcodes if the widget has a corresponding shortcode. Joomla modules can be displayed almost anywhere using the {loadmodule} tag in the Load Modules content plugin, but this is limited to article content and doesn't work everywhere.

Widgets are usually defined in plugins using the widgets API, but they can also be defined in a theme's functions.php file using the widgets API. I'm not a big fan of defining widgets in the theme because it tends to break my rule of keeping presentation logic separate from data logic, but I digress. Modules are always defined as a separate extension type in Joomla. Each module is a self-contained bit of code that resides in the /modules folder. This distinction makes WordPress widget development inherently more flexible, and as a Joomla developer, you should learn to embrace that lack of a rigid structure when it comes to widget development.

Publishing to Specific Pages

One huge difference between Joomla and WordPress that tends to really frustrate Joomla developers is the fact that WordPress doesn't support the ability to publish widgets to specific pages out of the box. In Joomla, you can pick and choose which pages get which modules, but in WordPress, a published widget is published on all pages that render the sidebar in which the widget is published. Honestly, I'm not sure why they don't address this in WordPress core, but again I digress.

Fortunately, there are plugins that fill this glaring hole in WordPress functionality. One plugin that I have used is called Display Widgets, which adds checkboxes to each widget so you can pick and choose the pages where you want to display a particular widget. It's a bit clunky compared to the rest of the WordPress UI and adds some overhead to your site's performance, but it works.

Conclusion and What's Next?

Sidebars and widgets are very similar to module positions and modules, but unless you understand the differences you can easily get frustrated. There are pros and cons to both approaches, and I believe Joomla and WordPress can learn from each other and implement better ways of doing things in this area.

So far, I've covered WordPress themes as well as sidebars and widgets, but I have really only scratched the surface. The next post will cover the WordPress template hierarchy and how it compares to Joomla template overrides. Thanks for reading!

If you are looking for a skilled Joomla developer or WordPress developer for your next project, drop me a line and let's talk.