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

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

How do i make my sidebar-widgets the way i want?

HI,

I watched the video with Zac fomr bootstrap to WP, and as i remember, it was all ok, but i remember when we did widget, we just put them there, what about cutomise them?

I mean, i have my own styles that i want for the widget to have but yet, i want the author, or the person that will use this blog, to tweek around ti so i dont have to change stuff when they wish .

Thats my sidebar which i did put in WP with widget.

Oh , or do i put the code in function ? i did put one class didnt work : p

<div class="col-md-4" id="sidebar">

    <?php if ( ! dynamic_sidebar( 'blog' ) ): ?>

    <div class="box" id="blg-author">
        <div class="widget-header">
            <h3>Author Dorota</h3>
        </div>

        <div class="bg-cover">
            <img src="<?php bloginfo('template_directory'); ?>/images//mum.jpg">
        </div>
    </div><!-- /blg-author -->

    <div class="box" id="social-icons">
        <div class="widget-header">
            <h3>Social Media</h3>
        </div>
        <div class="widget-body">
            <div class="blg-media universal-media-color "><i class="fa fa-facebook"></i></div>
            <div class="blg-media universal-media-color"><i class="fa fa-twitter"></i></div>
        </div>
    </div>

    <div class="box" id="latest-posts">
        <div class="widget-header">
            <h3>Featurette Dishes</h3>
        </div>
        <article class="latest-post">
            <div class="widget-wrapper">
                <div class="widget-body">
                    <div class="row">
                        <a href="">
                            <div class="col-xs-4 col-md-5">
                                <img src="<?php bloginfo('template_directory'); ?>/images//food1.jpg">
                            </div>
                            <div class="col-md-6">
                                <h3>Tiramisu</h3>
                                <p>April 2, 2015</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div><!-- /widget-wrapper -->
        </article><!-- /latest-post -->


        <article class="latest-post">
            <div class="widget-wrapper">
                <div class="widget-body">
                    <div class="row">
                        <div class="col-xs-4 col-md-5">
                            <img src="<?php bloginfo('template_directory'); ?>/images//food1.jpg">
                        </div>
                        <div class="col-md-6">
                            <h3>Tiramisu</h3>
                            <p>April 2, 2015</p>
                        </div>
                    </div>
                </div>
            </div><!-- /widget-wrapper -->
        </article><!-- /latest-post -->

        <article class="latest-post">
            <div class="widget-wrapper">
                <div class="widget-body">
                    <div class="row">
                        <div class="col-xs-4 col-md-5">
                            <img src="<?php bloginfo('template_directory'); ?>/images//food1.jpg">
                        </div>
                        <div class="col-md-6">
                            <h3>Tiramisu</h3>
                            <p>April 2, 2015</p>
                        </div>
                    </div>
                </div>
            </div><!-- /widget-wrapper -->
        </article><!-- /latest-post -->
    </div><!-- /latest-post -->

    <div class="box" id="archives">
        <div class="widget-header">
            <h3>Archives</h3>
        </div>
        <div class="widget-body">
            <ul class="blg-archives-list">
                <a href=""><li>December 2015 <span class="pull-right">(43)</span></li></a>
                <a href=""><li>November 2015 <span class="pull-right">(33)</span></li></a>
                <a href=""><li>October 2015 <span class="pull-right">(3)</span></li></a>
                <a href=""><li>September 2015 <span class="pull-right">(52)</span></li></a>
                <a href=""><li>August 2015 <span class="pull-right">(25)</span></li></a>
                <a href=""><li>July 2015 <span class="pull-right">(12)</span></li></a>
            </ul>
        </div>
    </div><!-- /archives -->

    <?php endif; ?>
</div><!-- col-md-3 -->
Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

oh when i inspected the element, it looked like the class is the same as Zac put, so i believe i would have to build all widgets my slef?

2 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Not sure exactly what you're asking here.

You would create a widget area in the sidebar and then the owner can add and move widgets without you doing anything.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

When we make the the sidebar , and then add widgets such as calendar, recent posts etc.. i want them look like mine .

What i mean is to make this kinds of sidebar, into customasible, and if the customer wants the sidebar to have about me , he can took it off or on , and they will look the same.

I doing a widget lesson with you , but the other widgets are there and they look ugly without the styles.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

You will need to add your own custom styles to make the widgets the way you want.

It is possible in the Widgets area to drag a widget to the Inactive level so it can be reused later.

There is also a plugin called Display Widgets that lets you easily turn widgets on and off for different pages without removing them.

However, the styling you are going to have to do yourself until everything looks how you want.