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.
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.