Mike Cho Development

Add “blocks” in WordPress

One of the coolest features of Drupal, that WordPress has no true equivalent for, is the block. This is what you can think of as a piece of content that can be placed in various locations on the page.

Sounds like widgets, right? Indeed, that is the closest analogue to the block. The difference is one, that Drupal makes it very easy to make blocks of anything, whereas WordPress has a limited repertoire of widget types, and two, that Drupal has a flexible way of displaying them on the page.

In both cases, to get a similar effect, you need to write some PHP in WordPress.

Let’s go ahead and do that!

Our goal — see the three “blocks” under the image

The behavior I seek is the three gray blocks under the image. These are blocks in Drupal, but will be widgets in WordPress. They are, if you don’t mind me re-using the word, like Lego blocks that I’ll be able to display anywhere I like. You could think of them as sidebars or parts of a sidebar that I’m displaying in a three-column row.

Register the widget areas

The first step is to call the register_sidebar() function. If your theme already has a sidebar, this will already be in place, normally in the ‘widgets_init’ hook.

It’s easy enough to modify the existing function (it may be called your_theme_widgets_init() ) by adding additional calls to register_sidebar.

In my theme, which is built from Underscores, it looked like this:

function fake_drupal_widgets_init() {
	register_sidebar(
		array(
			'name'          => esc_html__( 'Sidebar', 'fake-drupal' ),
			'id'            => 'sidebar-1',
			'description'   => esc_html__( 'Add widgets here.', 'fake-drupal' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
}
add_action( 'widgets_init', 'fake_drupal_widgets_init' );

The existing call to register_sidebar is creating a region where widgets can be placed. In the default Underscores theme, that will be in the sidebar. We will do the same thing, but will call it in a place of our choosing.

Now, as I have three blocks, I’ll need to register three new widget areas. Here is my code:

register_sidebar(
		array(
			'name'           => esc_html__('Recent News', 'fake-drupal'),
			'id'             => 'recent-news-view',
			'description'    => esc_html__('Add widgets here', 'fake-drupal'),
			'before_widget'  => '<aside id="%1$s" class="widget-area %2$s">',
			'after_widget'   => '</aside>',
			'before_title'   => '<h2 class="recent-news-view-title">',
			'after_title'    => '</h2>',
		)
	);
	register_sidebar(
		array(
			'name'           => esc_html__('Upcoming Events', 'fake-drupal'),
			'id'             => 'upcoming-events-view',
			'description'    => esc_html__('Add widgets here', 'fake-drupal'),
			'before_widget'  => '<aside id="%1$s" class="widget-area %2$s">',
			'after_widget'   => '</aside>',
			'before_title'   => '<h2 class="upcoming-events-title">',
			'after_title'    => '</h2>',
		)
	);
	register_sidebar(
		array(
			'name'           => esc_html__('Departments', 'fake-drupal'),
			'id'             => 'departments-view',
			'description'    => esc_html__('Add widgets here', 'fake-drupal'),
			'before_widget'  => '<aside id="%1$s" class="widget-area %2$s">',
			'after_widget'   => '</aside>',
			'before_title'   => '<h2 class="departments-title">',
			'after_title'    => '</h2>',
		)
	);

This goes inside the existing function. It will create three new widget areas that can then be deployed inside the theme.

Add content to the widget areas

Now go into your WordPress dashboard, to Appearance/Widgets. Here–if all goes well–you will find three new widget areas on the right. Their names and description will be reproduced from the code you just wrote.

The “Available Widgets” on the left are the sorts of things you can put into the new widget areas.

I put the “Archives,” “Recent Posts,” and “Calendar” widgets into my new widget areas. These are placeholders, as later on, I want to add custom functionality here (another thing that Drupal does easily, but with WordPress, requires code).

Place the new widget-areas in the theme

We’re almost there! We have registered the new widget areas, put widgets in them, and now have only to tell WordPress where these new blocks will go.

As I am using them in my front-page.php, that’s where I will go.

It’s a simple matter of calling the function dynamic_sidebar (the names of the functions really show where the whole idea of widgets came from). The argument will be a string calling either the name or the id of the newly registered widget.

In my case, I am going to plop these in a structure like this:

<section class="three-cols">
        <div class="col">
            <?php dynamic_sidebar( 'departments-view' ); ?>
        </div>
        <div class="col">
            <?php dynamic_sidebar( 'recent-news-view' ); ?>    
        </div>
        <div class="col">
        <?php dynamic_sidebar( 'upcoming-events-view' ); ?>
        </div>
    </section>

I made a section with three divs in it. Each div will contain one of the new widget areas.

The result, with a bit of css to control the display (made the containing section a flexbox container):

The initial deployment of WordPress widgets

A bit rough, but you can see where this is going. I need to add some more css to get it up to snuff, visually, and then I need to write some code to get the widget content to be what I actually want, instead of these placeholders.