Add unique id to widgets
-
Default widgets all got the class “sb-widget” but dont have any specific id.
It can be easy to improve your theme modifying the functions mh_widgets_init() to make styling more easy.
-
Hi alexisj,
thanks for your suggestion. We’ve this already implemented for some of our other themes and we’ll also add it for this theme with one of the next updates.
In the meantime, in case you need specific classes or IDs for the default WordPress widgets, you could modify the function as you like and add a placeholder (%2$s) which will automatically be replaced with a specific class/ID for the widget, for example:
register_sidebar(array( 'name' => __('Sidebar', 'mh-magazine-lite'), 'id' => 'sidebar', 'description' => __('Widget area (sidebar left/right) on single posts, pages and archives', 'mh-magazine-lite'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>' ));Thank you for your answser and your trick.
Hovewer it doesn’t work if i put only that in my child theme’s functions.php.
For now i use an adaptation of the whole mh_widgets_init function :
if (!function_exists('mh_widgets_init')) { function mh_widgets_init() { register_sidebar(array('name' => __('Sidebar', 'mh-magazine-lite'), 'id' => 'sidebar', 'description' => __('Widget area (sidebar left/right) on single posts, pages and archives', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Home 1', 'mh-magazine-lite'), 'id' => 'home-1', 'description' => __('Widget area on homepage', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget home-1 home-wide %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Home 2', 'mh-magazine-lite'), 'id' => 'home-2', 'description' => __('Widget area on homepage', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget home-2 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Home 3', 'mh-magazine-lite'), 'id' => 'home-3', 'description' => __('Widget area on homepage', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget home-3 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Home 4', 'mh-magazine-lite'), 'id' => 'home-4', 'description' => __('Widget area on homepage', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget home-4 home-wide %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Home 5', 'mh-magazine-lite'), 'id' => 'home-5', 'description' => __('Widget area on homepage', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget home-5 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Posts 1', 'mh-magazine-lite'), 'id' => 'posts-1', 'description' => __('Widget area above single post content', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget posts-1 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Posts 2', 'mh-magazine-lite'), 'id' => 'posts-2', 'description' => __('Widget area below single post content', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="sb-widget posts-2 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>')); register_sidebar(array('name' => __('Footer 1', 'mh-magazine-lite'), 'id' => 'footer-1', 'description' => __('Widget area in footer', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="footer-widget footer-1 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="footer-widget-title">', 'after_title' => '</h6>')); register_sidebar(array('name' => __('Footer 2', 'mh-magazine-lite'), 'id' => 'footer-2', 'description' => __('Widget area in footer', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="footer-widget footer-2 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="footer-widget-title">', 'after_title' => '</h6>')); register_sidebar(array('name' => __('Footer 3', 'mh-magazine-lite'), 'id' => 'footer-3', 'description' => __('Widget area in footer', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="footer-widget footer-3 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="footer-widget-title">', 'after_title' => '</h6>')); register_sidebar(array('name' => __('Footer 4', 'mh-magazine-lite'), 'id' => 'footer-4', 'description' => __('Widget area in footer', 'mh-magazine-lite'), 'before_widget' => '<div id="%1$s" class="footer-widget footer-4 %2$s">', 'after_widget' => '</div>', 'before_title' => '<h6 class="footer-widget-title">', 'after_title' => '</h6>')); } } add_action('widgets_init', 'mh_widgets_init');This will work for sure (if implemented properly) as it’s the default way of doing this in WordPress. Your code itself looks fine, so if it’s not working for you at the moment, you might want to do some troubleshooting on your site (e.g. clear the browser cache).
For your reference, you can also check one of our other themes where it is already implemented out of the box. For example: https://wordpress.org/themes/mh-squared-lite/
We’ve implemented now widget specific classes for the default WordPress widgets with the most recent update of the theme.
Great! Thank you!
The topic ‘Add unique id to widgets’ is closed to new replies.
