Title: styling widgets(adding classes to functions)? Last modified: August 19, 2016 --- # styling widgets(adding classes to functions)? * Resolved [David](https://wordpress.org/support/users/thatseoguydavid/) * (@thatseoguydavid) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/) * Hello, I want to add a class above and below my widgets so I can add some css images but im not sure how to go about doing it, I believe i need to add it them to the functions.php but am not quite sure how to do this. my site is ablog4you. net. * I just need a push in the right direction, and if you could help me with the functions override in my childtheme i would also appreciate it, I have been searching for a solution since yesterday. * the html output i want would look something like this: *

  • Topics

    - No categories *
    * or something like that, thanks for any help you can offer. Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/page/2/?output_format=md) [→](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/page/2/?output_format=md) * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921278) * Try playing with something like this: * ``` if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'Your Widget Name', 'description' => 'Description of your widget', 'before_widget' => '
  • ', 'after_widget' => '
    ', 'after_title' => '', )); ``` * Keep in mind that instead of hard-coding IDs & classes you can also use syntax like this: * `
    ` * More here: [http://codex.wordpress.org/Widgets_API](http://codex.wordpress.org/Widgets_API) * Thread Starter [David](https://wordpress.org/support/users/thatseoguydavid/) * (@thatseoguydavid) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921280) * would this apply to all widgets created or just the categories widget? * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921282) * If you want special classes & IDs for your category widget, create a widgetized area for it alone in your functions.php & sidebar.php (or wherever you want your category widget to appear). * You can learn more about how widgets work by reading the Codex link above. 🙂 * Thread Starter [David](https://wordpress.org/support/users/thatseoguydavid/) * (@thatseoguydavid) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921325) * I may be misunderstanding you but i was just showing that category widget as an example i should’ve been more specific, I actually want it to apply to every widget, so it would look like this *
    widget will go here
    * thanks for the link btw im just trying to make sense of it, extreme php noob at the moment. * [Rev. Voodoo](https://wordpress.org/support/users/rvoodoo/) * (@rvoodoo) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921330) * If you edit functions.php to insert your class, it will apply to all widgets in that area. * You may have more than one sidebar/wdgetized area. In which case you would need to add the class to all widgetized areas if that’s your wish * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921334) * As Rev. Voodoo says, look in your functions.php file to see what widgetized areas exist, and add your before/after code accordingly, depending on which widgetized areas you want to affect. Do a search in the file for `register_sidebar` and you’ll find them. * Thread Starter [David](https://wordpress.org/support/users/thatseoguydavid/) * (@thatseoguydavid) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921362) * this is what i am seeing: function twentyten_widgets_init() { // Area 1, located at the top of the sidebar. register_sidebar( array( ‘name’ => __( ‘Primary Widget Area’, ‘twentyten’ ), ‘id’ => ‘primary-widget-area’, ‘description’ => __( ‘The primary widget area’, ‘twentyten’ ), ‘before_widget’ => ‘
  • ’, ‘after_widget’ => ”, ‘before_title’ => ‘

    ’, ‘after_title’ => ‘

    ’, ) ); * // Area 2, located below the Primary Widget Area in the sidebar. Empty by default. register_sidebar( array( ‘name’ => __( ‘Secondary Widget Area’, ‘twentyten’ ),‘ id’ => ‘secondary-widget-area’, ‘description’ => __( ‘The secondary widget area’,‘ twentyten’ ), ‘before_widget’ => ‘
  • ’, ‘after_widget’ => ”, ‘before_title’ => ‘

    ’, ‘after_title’ => ‘

    ’, ) ); * Thread Starter [David](https://wordpress.org/support/users/thatseoguydavid/) * (@thatseoguydavid) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921363) * when it say before and after what is it referring to? * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921365) * So what you’d do is take whichever widgetized area you want to affect, and incorporate the code you want. * So let’s say you want to add your custom div before & after each widget added to the Primary Widget area, you’d get: * ``` function twentyten_widgets_init() { // Area 1, located at the top of the sidebar. register_sidebar( array( 'name' => __( 'Primary Widget Area', 'twentyten' ), 'id' => 'primary-widget-area', 'description' => __( 'The primary widget area', 'twentyten' ), 'before_widget' => '
  • ', 'after_widget' => '
    ', 'after_title' => '', ) ); ``` * I only edited two lines – before_widget & after_widget. * [Rev. Voodoo](https://wordpress.org/support/users/rvoodoo/) * (@rvoodoo) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921366) * ``` // Area 1, located at the top of the sidebar. register_sidebar( array( 'name' => __( 'Primary Widget Area', 'twentyten' ), 'id' => 'primary-widget-area', 'description' => __( 'The primary widget area', 'twentyten' ), 'before_widget' => '
    ', 'after_widget' => '
    ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); ``` * Is how to do it in that area if I understand you right. An open and closed div above and below…. * If you want the div to wrap the whole wigeth you would just have the opening in widget_before and the closing in widget_after * also, looks liek you are using twentyten theme so, [http://go.rvoodoo.com/WPchild](http://go.rvoodoo.com/WPchild) for info on that, basically, don’t do it * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921367) * The best way to understand this is to look at the generated code on your site after you add a widget. 🙂 * before_widget means – add this code **before** each widget in this particular widgetized area of the theme * after_widget means – add this code **after** each widget in this particular widgetized area of the theme * Thread Starter [David](https://wordpress.org/support/users/thatseoguydavid/) * (@thatseoguydavid) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921368) * ok now i understand completely. thank you so much for all your help i just have one more question(i think) how would I incorporate this into a child functions. php file? * Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/) * (@zoonini) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921373) * Rev. Voodoo explains it very well [here](http://www.rvoodoo.com/projects/wordpress/wordpress-tip-stop-editing-twentyten-theme-use-a-child-theme/). * [Rev. Voodoo](https://wordpress.org/support/users/rvoodoo/) * (@rvoodoo) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921388) * Here’s the gist * ``` function voodoochild_theme_setup() { /* Deregister sidebar in parent */ remove_action( 'widgets_init', 'twentyten_widgets_init' ); /** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */ add_action( 'widgets_init', 'voodoo_widgets_init' ); function voodoo_widgets_init() { // Sidebar 1 register_sidebar( array( 'name' => __( 'Primary Widget Area', 'voodoochild' ), 'id' => 'primary-widget-area', 'description' => __( 'The primary widget area', 'voodoochild' ), 'before_widget' => '
  • ', 'after_widget' => '
    • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); // And 2 register_sidebar( array( 'name' => __( 'Secondary Widget Area', 'voodoochild' ), 'id' => 'secondary-widget-area', 'description' => __( 'The secondary widget area', 'voodoochild' ), 'before_widget' => '
  • ', 'after_widget' => '
    • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); } } add_action( 'after_setup_theme', 'voodoochild_theme_setup' ); ``` * You have to unregister twentytens sidebars in your child theme. The register your own. Then copy the code out of twentytens and edit it in your child theme * Thread Starter [David](https://wordpress.org/support/users/thatseoguydavid/) * (@thatseoguydavid) * [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/#post-1921394) * thanks, I came name the function whatever i want, correct? Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/page/2/?output_format=md) [→](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/page/2/?output_format=md) The topic ‘styling widgets(adding classes to functions)?’ is closed to new replies. ## Tags * [styling widgets](https://wordpress.org/support/topic-tag/styling-widgets/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 22 replies * 3 participants * Last reply from: [David](https://wordpress.org/support/users/thatseoguydavid/) * Last activity: [15 years, 3 months ago](https://wordpress.org/support/topic/styling-widgetsadding-classes-to-functions/page/2/#post-1921571) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics