Support » Theme: Twenty Seventeen » Code snippet only applying to sidebar widgets and not footer widgets

  • I have this code snippet (used via the Code Snippets plugin):

    function add_widget_name_id($params) {
    
        $params[0]['before_title'] = '<h2 id="' . $params[0]['widget_name'] . '" class="widget-title">' ;
        return $params;
    }
    add_filter('dynamic_sidebar_params', 'add_widget_name_id');

    This amends widget h2 tags so that they include the widget title as an id attribute e.g. Widget is called “Rainbow” so h2 tag is output as <h2 id="Rainbow" class="widget-title">Rainbow</h2>

    However, this is only working for widgets in the Sidebar and not widgets in the Footer area.

    Screenshot of widget in sidebar with correct id attribute: imgur.com/OOjXIGc
    Screenshot of widget in footer that is missing the id: imgur.com/MUleedv

    What do I need to change so that this code is also applied to widgets in the footer?

    • This topic was modified 6 months, 3 weeks ago by  . Reason: Corrected links to actually link
Viewing 6 replies - 1 through 6 (of 6 total)
  • Also realised from the first screenshot, that it’s not actually applying the widget title to the h2 id but seems to be instead adding the widget type (“text”) so that’s an issue too. 🙁

    for your sidebar, $params[0]['widget_name'] correctly returns the widget name like ‘Text’ or ‘Recent Posts’ or ‘Search’.

    why are you trying to add the widget title text as CSS id to the widget title html?

    to get the expected widget title ‘Test’ (in your case, instead of ‘Text’), try to use for example code found in https://wordpress.stackexchange.com/questions/170619/how-to-retrive-widget-title-data to create a more complex filter

    why the footer sidebar does not react at all could be caused by other plugins, for example the plugin used to get the ‘wpforms’ widget, which might be using their own filters.

    please provide more details, and possibly a link to your site.

    The reason I am wanting to do this is because it’s a one-page website and the menu consists solely of jump links (anchors). Adding anchors to the headers is no problem but because the contact form is a widget, I have no way of adding an id to the widget header. Because of this, I can’t have a nice looking URL when clicking/tapping “Contact” in the nav menu. I can only link something like #text-7 that’s automatically generated for the text widgets. Which would produce a URL like example.com/#text-7 instead of example.com/#contact

    For the time being I have gotten around the problem by installing a plugin that allows you to add custom ids and classes to widgets but it’s overkill for my purposes. Technically, I only need the Contact widget with the appropriate id added to the h2 but it seemed simpler just to target all the widgets than a specific one.

    There are other text widgets in the footer and none of them have the added h2 id either so it’s nothing to do with the WPForms contact widget.

    I can’t link to the website proper as it’s not a live site yet. It can be (mostly) previewed here: https://r4.temporary-access.com/~babyyogaco/
    Or this URL if you want to see that sidebar widgets h2 correctly outputs id (albeit widget type instead of the title): https://r4.temporary-access.com/~babyyogaco/?s=benefits
    It won’t load properly (I use hosts file to view) but for the purposes needed here, you can see the footer widgets just fine. 🙂

    • This reply was modified 6 months, 2 weeks ago by  .
    • This reply was modified 6 months, 2 weeks ago by  .

    continuing with the plugin you found is possibly the best option. it is likely not more code intensive than some homemade codes, and the plugin author might take care of necessary updates.
    I tested some filter code with the theme Twenty Nineteen but can check again tomorrow with Twenty Seventeen to see if the footer widgets are reacting different from the sidebar.

    After fiddling around with the code, the other footer widgets are now also correctly getting <h2 id="text">. Not sure what I have changed that it is now working *shrug*.
    However, you are correct @alchymyth that the WPForm widget is ‘overwriting’ the code I have with it’s own as it’s outputting <h2 id="WPForms" class="widget-title">

    I’ve posted in the support forum over there asking how this can be changed. Although I will still keep working on this code snippet as I do think it can be useful to have widgets with the widget title as a header id attribute.

    it can be useful to have widgets with the widget title as a header id attribute

    this is some code that runs succesfully in Twenty Nineteen:

    function add_widget_name_css_id($params) {
    	$sidebar_id = $params[0]['id']; // code adapted from https://wordpress.stackexchange.com/questions/170619/how-to-retrive-widget-title-data //
    	$sidebars_widgets = wp_get_sidebars_widgets();
    	$widget_ids = $sidebars_widgets[$sidebar_id];
    	$widget_title = '';
    	foreach( $widget_ids as $id ) {
    		if( $params[0]['widget_id'] == $id ) {
            	$wdgtvar = 'widget_'._get_widget_id_base( $id );
            	$idvar = _get_widget_id_base( $id );
            	$instance = get_option( $wdgtvar );
            	$idbs = str_replace( $idvar.'-', '', $id );
    			$widget_title = ( $instance[$idbs]['title'] ? $instance[$idbs]['title'] : $params[0]['widget_name']); //uses default widget name if no widget title is set//
    		}
        }
    	$widget_title_css_id = ( $widget_title ? ' id="' . sanitize_title_with_dashes($widget_title) . '" ' : '' ); //only generates a css id when there is a widget title, and changes the title to all lowercase with spaces chenged into dash, see https://codex.wordpress.org/Function_Reference/sanitize_title_with_dashes //
        $params[0]['before_title'] = '<h2' . $widget_title_css_id . 'class="widget-title">' ;
        return $params;
    }
    add_filter('dynamic_sidebar_params', 'add_widget_name_css_id');

    I opted to output a sanitized widget title as the CSS id, i.e. instead for example ‘Recent Posts’ it would be ‘recent-posts’; this seems to be more in flow with usual CSS ids…

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Code snippet only applying to sidebar widgets and not footer widgets’ is closed to new replies.