Use case: Pinning content to the homepage
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.
A common scenario: the customer wants to show featured content on the homepage. This can be solved by using the ‘sticky’ feature of WordPress. But you can’t make pages sticky, and the customer insists to have the ability to pin things like job offers and sales to the homepage in an easy way. The graphical design gets made, converted to static HTML, and delivered to you, the developer, to perform your magic.
There are a number of possible strategies to solve this, most of which involve extending standard WordPress features by hacking the theme and using custom fields. In this article, I’ll show you an easier and quicker way to do it, using Dynamic Content Widgets.
Here’s an approximation of the homepage design:
There are 6 areas where dynamic content is needed, divided over two general areas. And one of the areas has a special highlight graphic.
Step 1: define your sidebars
In functions.php, add two dynamic sidebars according to the areas defined in this picture. In the homepage, replace the static HTML with calls to those sidebars.
Step 2: create subtemplates for the widgets
Create a file called ‘homepage-highlight.php’ in your theme directory. Edit it to look something like this:
<?php /** * Subtemplate: Homepage highlight */ ?> <div class="homepagehighlight"> <a href="<?php the_permalink() ?>" >; <strong class="title"><?php the_title(); ?></strong> <span class="text"> <?php echo $post->post_excerpt ?> </span> <span class="readmore">Read more</span> </a> </div>
Important: when editing subtemplates, make sure you also edit the template name. You can find it at the top, it looks like this: “Subtemplate: [name]”.
Make two copies of this subtemplate: one for the arrow highlight (‘homepage-arrow.php’), one for the alternative area (‘homepage-alternative’). Edit them to also match the static HTML that they’re representing.
Step 3: create placeholder content
In WordPress admin, create pages and posts with placeholder content, so you can test if your widgets work.
Step 4. Add widgets to widget areas
In WordPress admin, go to Appearance->Widgets, add 4 Dynamic Content Widgets to the general widget area, and 2 Dynamic Content Widgets to the alternative widget area. Go through each widget, fill out the slug that corresponds to the content you’re pinning to the homepage. If you’ve done everything correctly, you have a choice of 3 subtemplates for each widget. Choose the appropriate one, save, you’re done.