All developers know the time it takes to code a new website template, and any resource that can help shave off some dev time is well worth using. Starting today, we are rolling out a series of free WordPress developer tools in the form of snippet generators and related resources that will help you create clean code in a matter of seconds. Our first generator spins off custom dynamic sidebars for WordPress – just fill out the fields to get started.

About this tool

This is a custom dynamic sidebar snippet generator that was built with both established front-end developers and first-time theme builders in mind. My goal was to simplify and streamline the widgetization process so that you are just entering in a few bits of information to get clean code that you can use to integrate into your existing WordPress theme templating, or as the basis for building the framework of your next project.

What are custom dynamic sidebars and why should you include them in your theme?

Dynamic sidebars are essentially widget areas that may be used to display widgetized content in many locations around your WordPress website. These “sidebars” (or “asides” in the html markup world; “content buckets” in the marketing world) allow non-developer users to drag-and-drop content blocks into themes. This can allow users to integrate versatile plugins via these widget areas or insert hard-coded, custom widgets.

When WordPress first started, it was the norm for widgets to be used in one sidebar location only, with the same content displayed in the sidebar on each page of a site. However, things have evolved since then and there are now many situations in which you may find yourself needing more than one widget area, sidebar, or content block.

Location-wise, a sidebar is just one of the places you can put widgetized content, so the term “dynamic sidebar” actually refers to dynamic content that can be placed in a variety of locations: headers, footers, secondary sidebars, above or below the page content… a sidebar is just one of those areas that can traditionally house dynamic content.

How to use this WordPress Dynamic Sidebar Snippet Generator tool

This dynamic sidebar snippet generator tool is intended to do the heavy lifting for you, so you don’t have to hand-code these standard code snippets for each project or copy/paste from the WordPress codex, where variables and arrays are often represented but not populated in a way that allows direct input into your theme templating. I hope that it helps established developers from having to custom-code this content time and time again, and that it gives the more novice developer an easy way to get started.

STEPS FOR USING THE GENERATOR

1. A the top of this page, in General Setup, enter your Theme Slug and Text Domain.
   1. The Theme Slug is used to prefix all functions and variables that could otherwise conflict with another plugin, theme, or with the WordPress core.
   2. The Text Domain is a unique identifier that helps WordPress identify which translatable strings to attribute to your theme vs. ones that may come from a plugin or the WordPress core.
2. Hop over to Sidebar #1 and click the box next to Activate. This will reveal a new set of fields. The dynamic code blocks below the form will populate with your input as you add it.
   1. Name: Give your sidebar area a name.  This is what will show up on the right side of the page as an available widget area (or sidebar) in Appearance > Widgets, and it typically corresponds to the location of the new widget area. I recommend that it be descriptive and not general.
   2. ID: The ID is a unique key that allows you to display the widget content from this sidebar location as opposed to any other. I recommend that you make this key descriptive. It should contain only letters, numbers, underscores, and hyphens.
   3. Description: This text will appear to users under the sidebar name in Appearance > Widgets. It tends to give users instructions on how to fill out the sidebar location and the purpose of the location.
   4. Class: This parameter is used to attach a class to the sidebar location container on the Appearance > Widgets page. This parameter often causes confusion, as many developers assume it will be displayed in a wrapping HTML tag. Be assured it will not. It only is applied to the sidebar container in the widgets admin page.
   5. Before Widget: This is the opening tag for all widgets added to this dynamic sidebar. I strongly recommend keeping the default ID and classes. Feel free to add additional classes as needed.
   6. After Widget: This is the closing tag for the widget.
   7. Before Title: Opening tag for the title. The default heading is H2.
   8. After Title: This is the closing title tag.
3. Repeat this for as many sidebars as your template requires.
4. Copy and paste the code from the first box to register your sidebar(s) in your functions.php file. Then, copy and paste the code from the second box into whichever template you want the widget area(s) to display. If you have created more than one sidebar, you will want to do this for each snippet you generate.

What do the columns in the tool’s form mean?

You will notice four columns to the right of the input fields. Here is their breakdown:

• Req. – States whether this field is required or not.
• Valid – Determines whether the field has valid input.
• Notes – Includes any important notes about field input.
• Codex – Links to relevant information on the WordPress codex.

Code Snippet Output

Once you have completed filling out the code tool, two types of code snippets will be available to you by scrolling down the page or by selecting the “Code” tab. Here are some notes about how to interpret and use the output in your theme:

Register_sidebar function(s): The first block of code will need to be added to your functions.php file or to a .php file that is called from your funtions.php file. This codes snippet is made up of a few parts. The first line of PHP code looks like this:

add_action( 'widgets_init', 'your_theme_slug_widgets_init' );

…and is followed by the opening line of a function that will be prefixed by your theme slug.

function your_theme_slug_widgets_init() {
    // stuff will go here
}

This function is going to wrap your sidebar registration code and allows you to hook these commands into a specific load-time event using the add_action hook. In this instance, the widgets_init is telling your WordPress site to register and load our new sidebar locations only after all the default WordPress widgets have been registered.

Once you’ve activated a sidebar location on one of the “Sidebar #” tabs, a new block of code will appear within your wrapper function. It should look something like this:

  register_sidebar( array(
    'name' => __( 'Sidebar #1 Name', 'your-text-domain' ),
    'id' => 'sidebar-1-id',
    'description' => __( '', 'your-text-domain' ),
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
  	'after_widget'  => '</li>',
  	'before_title'  => '<h2 class="widgettitle">',
  	'after_title'   => '</h2>',
  ));

This is the function that actually registers your new sidebar location. Once you’ve added this code to your functions.php file, you’ll be able to navigate on your WordPress admin dashboard to Appearance >> Widgets to see your new sidebar listed as a “widgetized” location in one of the two columns on the right side of the page.

Most of the parameters in the array are fairly clear, but at minimum it’s important to be sure that you’ve populated a custom Name and ID. These are the parameters you’ll use to call up and display this sidebar location on your websites public-facing templating. This will be accomplished using the next type of code snippet.

I also strongly suggest that you keep the list item html attributes (ID and class) as they are by default. Adding classes is fine. In fact, it’s a good practice if you plan to style widgets differently depending on the sidebar location, but be sure not to delete or damage the existing classes.

Dynamic_sidebar function(s): The second type of snippet you’ll be provided with is the dynamic_sidebar functions wrapped in some conditional logic. These snippets will tell your WordPress website to check if there are any widgets added to each of the sidebars you’ve registered and, if so, to output the HTML defined by those widgets. Let’s take a look at how one of these should look:

<?php if ( is_active_sidebar( "sidebar-1-id" ) ) : ?>
    <div id="myWrapperID">
      	<php dynamic_sidebar( "sidebar-1-id" ); ?>
    </div>
<?php endif; ?>

In this case, the sidebar ID is sidebar-1-id. This is just a default value and yours will be something descriptive hopefully like small-sidebar-top or footer-row-left or whatever helps you to identify this sidebar. It will be the same ID that you entered into the register_sidebar function that we discussed above.

You can almost read the logic in this snippet without any knowledge of PHP. In English, it reads, “If there is an Active Sidebar named sidebar-1-id, then proceed to line 2. If not, skip to line 3, which tells us to do nothing.” Line 2 simply tells us, “Display the Dynamic Sidebar: sidebar-1-id.” Pretty easy right? The logic is important, because sometimes you’ll want to conditionally display some additional HTML markup only if the sidebar is active. See the next section for more on this.

Customizing the Dynamic Sidebar Snippet Code

We can extend our example from above by adding some wrapping HTML that will help us style this widget location, but only if there are widgets to display:

<?php if ( is_active_sidebar( "sidebar-1-id" ) ) : ?>
    <div id="myWrapperID">
      	<?php dynamic_sidebar( "sidebar-1-id" ); ?>
    </div>
<?php endif; ?>

You can see that I added a <div> with the ID myWrapperID. This might be a container that we float left or right, add a border to, apply padding to, and/or many other style choices. But we only want these stylistic or structural choices to be applied to our public facing website posts/pages if the sidebar is truly active, meaning if it contains widgets.

This is a very simple example, but I hope it helps to illustrate what’s possible.

Conclusion

We hope this code snippet generator helps you out in your next project. Please drop us a line in the comments and tell us what you think of it. We are rolling out a series of these tools to help you in your project workflow, so please view our related content as well.