Use case: Custom featured content gallery

Notice: this article is written for advanced WordPress users, and assumes some prior knowledge. Specifically, you should know how to do the following things: Understanding and modifying PHP-code in WordPress templates, creating and using dynamic sidebars in functions.php, and working with widgets.

Another note: there are plugins that take care of featured content galleries automatically, but they don’t offer the kind of fine-grained control over the HTML that we like to have. This is a professional scenario.

Say, the customer demands a top-of-the-line, bleeding edge, fancy pantsy featured content gallery on his homepage. For this, you have been given the latest and greatest Javascript and HTML5 driven gallery. It has everything: smooth animations, sound effects, the works. The only thing it doesn’t have is a ready-made plugin that embeds the gallery in WordPress for you, because it’s custom built for this customer only. The customer also wants to be able to show any content from the site in the gallery.

Oh, and he wants it done yesterday.

Examining the static HTML, you notice that the repeating element that holds the content looks something like this:

<div class="galleryitem">
    <a href="latestnews.html" >
<h3>Important News Item</h3>

        <img class="visual" src="latestnews.png" />
    </a>
</div>
<div class="galleryitem">
    <a href="product1.html" >
<h3>Our awesome product</h3>

        <img class="visual" src="product1.png" />
    </a>
</div>
<div class="galleryitem">
    <a href="product2.html" >
<h3>Another product</h3>

        <img class="visual" src="product2.png" />
    </a>
</div>
<div class="galleryitem">
    <a href="joboffer.html" >
<h3>Wanted: Senior Java programmer</h3>

        <img class="visual" src="joboffer.png" />
    </a>
</div>

As there is no standard way to render that kind of HTML in WordPress, the only way to solve this is to write custom code that fetches articles and pages based on, for example, a custom field, and render them in a loop.

You can do it faster and easier with Dynamic Content Widget.

Step 1: Create subtemplate

Create a file called ‘gallery-item.php’ in your theme directory.

Copy and paste the HTML of the repeating element into this file, replacing the static elements with the dynamic ones in the subtemplate. Here’s a hypothetical example:

<?php
/**
 * Subtemplate: Gallery item
 */
?>
<div class="galleryitem">
    <a href="<?php the_permalink(); ?>" >
<h3><?php the_title(); ?></h3>

        <?php the_post_thumbnail('large') ?>
    </a>
</div>

Step 2: Define widget area

In functions.php, register a new sidebar. Make sure it has no before/after elements.

	register_sidebar( array(
		'name' => 'Homepage Featured Gallery',
		'id' => 'homepage-featured-gallery',
		'description' => 'The homepage featured gallery. Has room for 4 featured items',
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '',
		'after_title' => '',
	) );

In the homepage, replace the repeating elements with a dynamic_sidebar call to the new sidebar.

<?php dynamic_sidebar( 'homepage-featured-gallery' ); ?>

Step 3: Add Dynamic Content Widgets to widget area

In WordPress admin, go to Appearance->Widgets, add 4 Dynamic Content Widgets to “Homepage Featured Gallery”. Go through each widget, fill out the slug that corresponds to the content you’re putting in the gallery. If you’ve done everything correctly, you have a subtemplate called ‘Gallery item’ to select. Choose that one, save, you’re done.