multiple divs for the same element [share same id]

Tagged: , ,

Author Posts

Artman December 29, 2015 at 6:17 pm

I’m not sure this a microthemer issue or not.

I created 3 footer widgets to add columns to my footer which included registering the widgets in functions.php and adding the divs to footer.php and the accompanying css to custom.css. (all in a child theme).

What is happening is I am getting duplicate div’s for each column. Each set of divs has a different dimension.

In Microthemer I am getting divs id’s like: div#footer-widget2 div#footer-widget2 which is one size and div#footer-widget2 which is a totally different size offset from the first div.

The site is here: website link

I have been over and over the code and looking at my microthemer selectors to see if I inadvertently created something.

Any help would be appreciated.

Sebastian December 30, 2015 at 6:19 pm

Hey Artman,

I can see why you might be getting in a muddle trying to style the custom footer widgets. You’ve created a div element inside another div element with exactly the same id. I can see this from inspecting your site’s HTML:

repeating html

Notice that an element with an of #footer-widget1 has another div inside it, also with the id of #footer-widget1. This happens with your #footer-widget2 widget too. This is invalid HTML. A single id should be reserved for only one element on the page.

Have you added the ids manually in your theme’s PHP files? If so, WordPress might be inserting the exact same ids when it produces the HTML for the widgets.

Cheers,
Sebastian

Artman December 30, 2015 at 11:06 pm

Sebastian,
That is what has me stumped.
I don’t know how I ended up with footer-widget-1 inside footer-widget-1.
In Microthemer is shows as div#footer-widget1 div#footer-widget1.
What is really odd is the div inside the div is a different size.

I created these three columns by following this tutorial: How to add 3 column footer to WordPress theme

I just copied and pasted the code. The only change I made to the tutorial is I surrounded the widget code in footer.php code with:

<footer id="colophon" class="site-footer" role="contentinfo">
		<!-- 3 Footer widgets -->

</footer><!-- #colophon -->
Which was existing and is the div that is the big dark gray box.

Perplexing

Sebastian December 31, 2015 at 12:14 pm

I think the sample code in the tutorial isn’t right. Try removing these lines in functions.php

'before_widget' => '<div id="footer-widget1">',
'after_widget' => '</div>',
'before_widget' => '<div id="footer-widget2">',
'after_widget' => '</div>',
'before_widget' => '<div id="footer-widget3">',
'after_widget' => '</div>',

Artman January 13, 2016 at 2:26 am

Hey Sebastian,

Thought I’d let you know how this turned out.
I couldn’t remove the ‘before_widget’ and ‘after_widget’ because it is the standard code in defining a widget.

But,
I found another version of doing the same thing here: How to Add Widgets to WordPress Theme’s Footer

Basically it changes this code:

'name' => 'Footer Widget 1',
'id'        => 'footer-1',
'description' => 'First footer widget area',
'before_widget' => '<div id="footer-widget1">',

to this

'name' => 'Center Footer Widget',
'id'        => 'center-footer-widget',
'description' => 'center footer widget area',
'before_widget' => '<div id="id="%1$s" class="widget %2$s">',

But that seemed to make the whole difference. I renamed the asides to divs and put in my own id names.

Sebastian January 13, 2016 at 9:52 am

Thanks for sharing! I’m glad you got there in the end 😉

You must login or register to reply to this topic.