Widgets and sidebars in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a sidebar in WordPress.

Wordpress

register_sidebar(array('name' => 'Primary Sidebar', 'id' => '[1]'));

Drag options to blanks, or click blank then click option'

Aprimary-sidebar

Bmain-sidebar

Csidebar-main

Dsidebar-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces in the ID string.

Using an ID that does not match the registered sidebar.

The 'id' for the primary sidebar is commonly set as 'sidebar-1' to match WordPress conventions.

2fill in blank

medium

Complete the code to display a registered sidebar in a theme template.

Wordpress

<?php if (is_active_sidebar('[1]')) { dynamic_sidebar('[1]'); } ?>

Drag options to blanks, or click blank then click option'

Afooter-widget-area

Bsidebar-1

Cheader-widget

Dmain-sidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using different IDs in is_active_sidebar and dynamic_sidebar.

Using an ID that was not registered.

To display the primary sidebar, use its ID 'sidebar-1' in both functions.

3fill in blank

hard

Fix the error in the code to properly register a sidebar with a description.

Wordpress

register_sidebar(array('name' => 'Footer Widgets', 'id' => 'footer-widgets', 'description' => '[1]'));

Drag options to blanks, or click blank then click option'

AFooter widget area

BWidgets for the footer area

CWidgets in footer

DFooter sidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving description empty or too vague.

Using description that does not match the sidebar purpose.

The description should clearly describe the sidebar area; 'Footer widget area' is concise and clear.

4fill in blank

hard

Fill both blanks to create a widget area with before and after widget HTML wrappers.

Wordpress

register_sidebar(array('name' => 'Custom Sidebar', 'id' => 'custom-sidebar', 'before_widget' => '[1]', 'after_widget' => '[2]'));

Drag options to blanks, or click blank then click option'

A<div class='widget'>

B</div>

C<section class='widget-area'>

D</section>

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatched opening and closing tags.

Using tags that do not wrap widgets properly.

Widgets are wrapped in

and closed with

to style them properly.

5fill in blank

hard

Fill all three blanks to register a sidebar with before_title and after_title HTML wrappers and a unique ID.

Wordpress

register_sidebar(array('name' => 'Blog Sidebar', 'id' => '[1]', 'before_title' => '[2]', 'after_title' => '[3]'));

Drag options to blanks, or click blank then click option'

Ablog-sidebar

B<h3 class='widget-title'>

C</h3>

D<h2>

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched or missing title wrappers.

Using an ID that is not unique or descriptive.

The sidebar ID is 'blog-sidebar', and widget titles are wrapped in

and

tags.