Advertisement
Theme Development

Creating a WordPress Theme from Static HTML - Adding Widgets

by

In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file.

So far you've:

  • prepared your markup for WordPress
  • converted your HTML to PHP and split your file into template files
  • edited the stylesheet and uploaded your theme to WordPress
  • added a loop to your index file
  • added meta tags, the wp_head hook and the site title and description to your header file
  • added a navigation menu.

In this tutorial, I'll show you how to register widget areas in your theme and display them in various locations. You'll add a widget area to the header for contact details (or whatever you'd like!) and to the sidebar for sidebar widgets.


What You'll Need

  • your code editor of choice
  • a browser for testing your work
  • a WordPress installation, either local or remote
  • If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run.
  • If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation.

1. Registering Widgets

To register widget areas, you use the register_sidebar() function. You'll create a function in your functions file to include all of the sidebars you need to register and then you'll activate this via the widgets_init action hook.

Note: although this function includes the word 'sidebar' in its name, that doesn't mean your widget areas should just be in the sidebar - this is a hangover from the early days of WordPress as a blogging platform when widgets were just in the sidebar.

Open your functions.php file, then add the following code before the line at the very end which reads ?>:

function wptutsplus_widgets_init() {

	// In header widget area, located to the right hand side of the header, next to the site title and description. Empty by default.
	register_sidebar( array(
		'name' => 'In Header Widget Area',
		'id' => 'in-header-widget-area',
		'description' => 'A widget area located to the right hand side of the header, next to the site title and description.',
		'before_widget' => '<div class="widget-container %2$s" id="%1$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Sidebar widget area, located in the sidebar. Empty by default.
	register_sidebar( array(
		'name' => 'Sidebar Widget Area',
		'id' => 'sidebar-widget-area',
		'description' => 'The sidebar widget area',
		'before_widget' => '<div class="widget-container %2$s" id="%1$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

}
add_action( 'widgets_init', 'wptutsplus_widgets_init' );
?>

This registers two widget areas: one in the header and one in the sidebar itself. The parameters of register_sidebar() are:

  • name - a unique name for the widget area which will be displayed on the Widgets admin screen.
  • id - a unique ID for the widget area which you'll use shortly to add your widget area to the correct location in your theme.
  • description - a description to display in the Widgets admin screen.
  • before_widget - the markup to precede each widget in the widget area. This helps with styling.
  • after_widget - the markup to follow each widget area. Make sure you close any elements you opened using the before_widget parameter
  • before_title - markup to precede each widget's title - I've added an h3 element with a class which helps with styling.
  • after_title - the markup to close any elements you've opened before the widget title.

Now save your functions file.

If you open your site admin, you'll see that you now have access to the Widgets admin page, which has the two widget areas added:

creating-wordpress-theme-from-static-html-widgets-screen-before

However, any widgets you add here won't display in your theme yet as you still need to add them to your template files.


2. Adding Widget Areas to Your Template Files

First, I'll add the widget area for the header and then the sidebar.

Adding a Widget Area to the Header

Open your header.php file and locate the following code:

<aside class="header widget-area half right" role="complementary">
  <div class="widget-container">
    This will be a widget area in the header - address details (or anything else you like) goes here.
  </div><!-- .widget-container -->
</aside><!-- .half right -->

Replace it with this:

<?php if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
  <aside class="in-header widget-area half right" role="complementary">
    <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
  </aside>
<?php } ?>

Save the file.

Adding the Sidebar Widget Area

Now open your theme's sidebar.php and find this code:

</pre>
<aside class="sidebar widget-area one-third right" role="complementary">
  <div class="widget-container">
    <h3 class="widget-title">A Sidebar Widget</h3>
      This is a sidebar widget - in your WordPress theme you can set these up to display across your site.
  </div><!-- .widget-container -->
  <div class="widget-container">
    <h3 class="widget-title">Another Sidebar Widget</h3>
      A second sidebar widget - maybe you could use a plugin to display a social media feed, or simply list your most recent posts.
  </div><!-- .widget-container -->
</aside>

Replace it with the following:

<?php if ( is_active_sidebar( 'sidebar-widget-area' ) ) { ?>
  <aside class="sidebar widget-area one-third right" role="complementary">
    <?php dynamic_sidebar( 'sidebar-widget-area' ); ?>
  </aside>
<?php } ?>

Finally, save the file.


3. Adding Widgets via the Widgets Admin

The final stage is to add some widgets via the widgets admin screen. I'm going to add two widgets to the header widget area:

  • a text widget with contact details
  • a search box

And I'll add two widgets to the sidebar:

  • the "Recent Posts" widget
  • the "Meta" widget

Once I've done that, my "Widgets" admin screen looks like this:

creating-wordpress-theme-from-static-html-widgets-screen-after

Finally, if I open my site in my browser, I can see the widgets populated in the theme:

creating-wordpress-theme-from-static-html-widgets-in-theme

Some work is still needed on styling - the search bar is a little wide for example, but the content is there. You now have widget areas in your theme!


Summary

In this tutorial, I showed you how to register widget areas and add them to two places in your theme: the header and the sidebar. You could add widget areas anywhere you like in your theme - they can be very useful for adding content across your pages or posts via widgets.

Examples include:

  • a widget area before and after the content, maybe for displaying related posts or social media share buttons or a call to action button
  • a widget area before or after the navigation
  • widget areas in the footer—you'll add those to this theme in the next tutorial
  • widget areas just for one content type—in Part 11 of this tutorial I'll show you how to create a custom archive template and you'll see how different templates for different content types could be combined with multiple widget areas to vary the sidebars in your site.

In the next tutorial, you'll finish off the footer.php file in your theme, adding multiple widget area in a 'fat footer', plus a colophon for copyright information and the wp_footer action hook.


Resources

Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding NavigationCreating wordpress theme from html 400
    If you've been working through this series, you now have a working theme with template files which you've uploaded to WordPress. In this tutorial, you'll continue to work on the header.php file that you created in Part 2. You'll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen. To do this you'll also need to create a new file for your theme: the functions file.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…