Summary: Learning about WordPress Widgets and Footer Template.
WordPress Widgets
Widgets are one of the core features in WordPress that allow us to add content features or functionality to our WordPress sidebars also known as widget-ready areas. Widgets can be used to enhance the design and functionality of our website without needing to code.
What are Widgets?
- Widgets are modular elements that can be added to a WordPress theme’s widget-ready areas usually sidebars, footers, or other sections defined by the theme.
- Common widgets include: Recent Posts, Categories, Archives, Search, and Custom HTML.
- Widgets allow us to extend the functionality of our site with minimal effort and without the need to understand coding.
Widget-Ready Areas
- These are sections of our theme where widgets can be placed. These are typically sidebars, footers, or headers.
- The number of widget-ready areas depends on the WordPress theme we are using.
- Many themes allow us to add widgets to more than just the sidebar, like footers, below the content and even custom-defined widget areas.
Default WordPress Widgets
- Text Widget: Allows us to add text or HTML to our site.
- Image Widget: Adds an image to the sidebar or footer.
- Categories Widget: Displays a list or dropdown of categories.
- Recent Posts Widget: Shows the most recent posts on our blog.
- Search Widget: Adds a search bar for users to search through our website.
- Custom Menu Widget: Adds a custom navigation menu.
- Calendar Widget: Displays a calendar with links to posts based on the publishing date.
- Custom HTML Widget: Enables us to add custom HTML or JavaScript code.
Custom Widget
Registering Widget
// Register the widget
function my_custom_widget() {
register_widget( 'Social_Widget' );
}
add_action( 'widgets_init', 'my_custom_widget' );
Define the Widget Class
<?php
/**
* Social Widget class
*
* Extends `WP_Widget` class to create new `Social Widget`.
*/
class Social_Widget extends \WP_Widget {
/**
* Registers social widget.
*/
public function __construct() {
parent::__construct(
'seti_social_widget',
__( 'Social Media Widget', 'screen-time' ),
array( 'description' => __( 'A widget to display social media icons and links.', 'screen-time' ) )
);
}
/**
* Outputs widget content on the frontend
*
* @param array $args Display arguments including 'before_title', 'after_title',
* 'before_widget', and 'after_widget'.
* @param array $instance The settings for the particular instance of the widget.
* @return void
*/
public function widget( $args, $instance ): void {
$socials = array(
'facebook',
'twitter',
'youtube',
'instagram',
'rssfeed',
);
if ( ! empty( $instance['title'] ) ) {
printf(
'<h3 class="seti-social-widget-heading">%s</h3>',
esc_html( $instance['title'] )
);
}
echo '<ul class="seti-social-widget-wrap">';
foreach ( $socials as $social ) {
if ( empty( $instance[ $social ] ) ) {
continue;
}
printf(
'<li>
<a href="%s" target="_blank">
<img src="%s" width="50" height="50" alt="%s" />
</a>
</li>',
esc_url( $instance[ $social ] ),
esc_url( get_stylesheet_directory_uri() . '/assets/src/images/' . $social . '.svg' ),
esc_attr( $social )
);
}
echo '</ul?';
}
/**
* Outputs the settings update form.
*
* @param array $instance Current settings.
* @return void
*/
public function form( $instance ): void {
// Widget admin form fields.
$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Follow Us', 'screen-time' );
$facebook = ! empty( $instance['facebook'] ) ? $instance['facebook'] : '';
$twitter = ! empty( $instance['twitter'] ) ? $instance['twitter'] : '';
$instagram = ! empty( $instance['instagram'] ) ? $instance['instagram'] : '';
$rssfeed = ! empty( $instance['rssfeed'] ) ? $instance['rssfeed'] : '';
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e( 'Title:', 'screen-time' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'facebook' ) ); ?>"><?php esc_html_e( 'Facebook URL:', 'screen-time' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'facebook' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'facebook' ) ); ?>" type="url" value="<?php echo esc_attr( $facebook ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'twitter' ) ); ?>"><?php esc_html_e( 'Twitter URL:', 'screen-time' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'twitter' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'twitter' ) ); ?>" type="url" value="<?php echo esc_attr( $twitter ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'instagram' ) ); ?>"><?php esc_html_e( 'Instagram URL:', 'screen-time' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'instagram' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'instagram' ) ); ?>" type="url" value="<?php echo esc_attr( $instagram ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'rssfeed' ) ); ?>"><?php esc_html_e( 'rssfeed URL:', 'screen-time' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'rssfeed' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'rssfeed' ) ); ?>" type="url" value="<?php echo esc_attr( $rssfeed ); ?>">
</p>
<?php
}
/**
* Sanitize widget form values and save them.
*
* @param array $new_instance New settings for this instance as input by the user via
* WP_Widget::form().
* @param array $old_instance Old settings for this instance.
* @return array Settings to save or bool false to cancel saving.
*/
public function update( $new_instance, $old_instance ): array {
$instance = array();
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['facebook'] = esc_url_raw( $new_instance['facebook'] );
$instance['twitter'] = esc_url_raw( $new_instance['twitter'] );
$instance['instagram'] = esc_url_raw( $new_instance['instagram'] );
$instance['rssfeed'] = esc_url_raw( $new_instance['rssfeed'] );
return $instance;
}
}
Footer Template
The footer.php file or the footer template is an essential part of a WordPress theme. It defines the footer section of our WordPress website which is displayed at the bottom of every page or post. The footer typically includes copyright information, links, widgets, social media icons, or custom HTML. It’s often one of the globally included files in WordPress templates along with the header, sidebar, and content templates.
<footer class="seti-site-footer">
<div class="seti-site-info">
<?php if ( has_custom_logo() ) : ?>
<div class="seti-site-logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>
<?php if ( is_active_sidebar( 'seti-footer-widget' ) ) : ?>
<div class="seti-footer-widget-wrap">
<?php dynamic_sidebar( 'seti-footer-widget' ); ?>
</div>
<?php endif; ?>
</div>
<?php if ( has_nav_menu( 'footer' ) ) : ?>
<nav class="seti-footer-nav-wrap">
<p><?php echo esc_html( wp_get_nav_menu_name( 'footer' ) ); ?></p>
<?php
wp_nav_menu(
array(
'theme_location' => 'footer',
'menu_class' => 'seti-footer-nav',
'container' => false,
)
);
?>
</nav>
<?php endif; ?>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="seti-footer-nav-wrap">
<p><?php echo esc_html( wp_get_nav_menu_name( 'primary' ) ); ?></p>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_class' => 'seti-footer-nav',
'container' => false,
)
);
?>
</nav>
<?php endif; ?>
</div>
</footer>
Leave a Reply