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 trial

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Adding Widget Areas to the Front Page

Samuel Strickland
PLUS
Samuel Strickland
Courses Plus Student 1,076 Points
Posted by Samuel Strickland
Samuel Strickland
Courses Plus Student 1,076 Points

Dynamic 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>'
    ));

}
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Tweaked your post a bit to give it syntax highlighting. :)

5 Answers

Samuel Strickland
PLUS
Samuel Strickland
Courses Plus Student 1,076 Points
Samuel Strickland
Samuel Strickland
Courses Plus Student 1,076 Points

Finally. 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
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Wow. Congratulations man. What are those strange characters inside of the id and class? Where'd you find the answer?

Nijad Kifayeh
Nijad Kifayeh
6,092 Points

Samuel, can you please elaborate on "%1$s" and %2$s"?

chooiyenlim
chooiyenlim
10,219 Points

Interesting idea and nice solution there, Samuel! Though, wouldn't the div id alone suffice for custom styling?

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Do 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
Samuel Strickland
Courses Plus Student 1,076 Points
Samuel Strickland
Samuel Strickland
Courses Plus Student 1,076 Points

Giving 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.

Edmund Punongbayan
Edmund Punongbayan
12,117 Points
Edmund Punongbayan
Edmund Punongbayan
12,117 Points

As 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
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

As 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
Samuel Strickland
Courses Plus Student 1,076 Points
Samuel Strickland
Samuel Strickland
Courses Plus Student 1,076 Points

Brock 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>