How to add WordPress widgets?Theme integration Widgets area

Custom menu features and sidebar widgets, yesWordPressFeatured features in the theme.

• Making a theme, if it doesn't include these two functions, is like a chicken rib...

Chen WeiliangBeforeBuilding websiteIn this tutorial, I share how to give a WordPress themeAdd custom menu.

This article describes how to add custom widget functions when creating a theme.

Just like adding custom menus to themes, custom adding widgets takes just 3 steps.

The first step, gadget registration

To use the widget, you must first register, open the functions.php file under the WordPress theme,

In the functions.php file, add the following code:

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

Modify the li and h2 tags in functions.php to correspond to the tags in sidebar.php:

The li and module h2 titles of 'before_widget' and 'after_widget', modify the code according to the actual situation.

(maybe without modification)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

The above code registers a widget area named "top-sidebar":

• The displayed name is "Top Sidebar".
• Add an h2 tag to the title.
• Content items are tagged with li.

log inWordPress backendDashboard, go to Appearance → Widgets.

If you can see the Top Sidebar widget area on the right side of the picture below, it means the registration is successful ▼

The second step, gadget call

After the gadget is registered, it can be called in the theme template file, and the following code can be called in the sidebar.php file.

1) In the sidebar.php file, below the largest li or div tag, insert ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2) In the sidebar.php file, the largestorAbove, add ▼

<?php endif; ?>

Step XNUMX: Set up widgets

1) The gadget is registered, and the display position is also defined in the theme file.

• You can set the widget group area in the WordPress background ▼

2) After saving, refresh the front page.

• The sidebar of our website will look like the image below ▼

You can see the picture above, indicating that our gadget has been made and is running as usual.

How to add multiple WordPress widgets in different areas?

Repeat steps XNUMX and XNUMX to make your WordPress theme support widgets in different locations.

Suppose you need to add a widget to the header, sidebar, and bottom of the theme.

1) First, you need to copy the following code into the functions.php file ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2) Next, add the following code to header.php, sidebar.php and footer.php files respectively.

header.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

sidebar.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

footer.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

This is a success!

• Of course, you can also modify various details in the code according to your needs ^_^
• The 2 steps above, allow the rest of the theme to integrate the functionality of the widget.

Next, continue to share tips for using widgets in WordPress.

WordPress Theme Integration Widget Widget Tips

Efficiently manage custom widgets:

1) After adding widgets to the theme, you can create a separate file and name itwidgets.php.

• In order to save all the custom widget code added in step 1 to this folder.

2) Add the code to the functions.php file:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3) Save all the custom widgets widget code added in step 1 to the widgets.php file.

This method ensures that all widgets load smoothly and work on all WordPress versions that support widgets.

This way, you can manage your WordPress theme files more efficiently.