Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialSamuel Strickland
Courses Plus Student 1,076 PointsDynamic classes for widgets
Hi Zac,
Excellent course you've put together. I have a question on how to give widgets a dynamic class so that each newly created widget can have custom style.
How would I achieve this with the function below?
thanks!
<?php
function create_widget( $name, $id, $description ) {
register_sidebar(array(
'name' => __( $name ),
'id' => $id,
'description' => __( $description ),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
5 Answers
Samuel Strickland
Courses Plus Student 1,076 PointsFinally. Figured. It. Out.
Instead of this
'before_widget' => '<div class="widget">',
It need to be this in order to create a unique id for each widget created.
'before_widget' => '<div id="%1$s" class="widget %2$s">',
I hope this helps someone.
Bob Sutherton
20,160 PointsWow. Congratulations man. What are those strange characters inside of the id and class? Where'd you find the answer?
Nijad Kifayeh
6,092 PointsSamuel, can you please elaborate on "%1$s" and %2$s"?
chooiyenlim
10,219 PointsInteresting idea and nice solution there, Samuel! Though, wouldn't the div id alone suffice for custom styling?
Andrew Shook
31,709 PointsDo you mean dynamic as in it changes every time the page loads? If so, how would you plan to style it? Or do you mean giving the widget and unique ID?
Samuel Strickland
Courses Plus Student 1,076 PointsGiving the widget a unique ID. Each time a new widget (text, latest posts, etc.) are created the new widget gets an ID so that they can be styled individually.
Samuel Strickland
Courses Plus Student 1,076 PointsAny help on this would be really appreciated!
Edmund Punongbayan
12,117 PointsAs far as I understand your query.
If you put a text widget there will be a class called "textwidget" and I think same goes for other types of widgets. You can specify which to style.
.widget .textwidget { /* some style */ }
this can style all text widgets the same, all blog post widgets the same, etc..
I've search some website with widgets, It generates a widget with id so you can have different style to different "text widget" for example.
<div id="teopopularposts-5" class="widget widget_teopopularposts">
Hope this helps.
Bob Sutherton
20,160 PointsAs Edmund Punongbayan has said, each individual widget will generate it's own ids and stuff. You can use the INSPECT ELEMENT tool in your browser to find out what these are. If you don't know how to use the inspect element feature on your browser, now is the time to learn (it's not hard).
If you do know about it then that's the way to find it and style the widgets individually.
Samuel Strickland
Courses Plus Student 1,076 PointsBrock and Edmund,
Thanks for the replies. I do know how to inspect an element with developer tools in chrome. In my site, I get .widget .textwidget, but no unique ids and stuff for each text widget within a sidebar or (widget area).
My question is how do I force WP to create a unique ID for each widget that I create? For instance, here is the output of my blog archive with sidebar. Notice no unique id's or classes for each widget.
<div class="col-md-4 sidebar">
<div class="widget">
<div class="textwidget">
<h3>You Want Stuff?</h3>
<h4>Get Stuff Here</h4>
</div>
</div>
<div class="widget">
<div class="textwidget">
<h3>You Still Want Stuff?</h3>
<p>Get more stuff here.</p>
</div>
</div>
</div>
Ryan Duchene
Courses Plus Student 46,022 PointsRyan Duchene
Courses Plus Student 46,022 PointsTweaked your post a bit to give it syntax highlighting. :)