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

Simon Merrick
Simon Merrick
18,665 Points
Posted by Simon Merrick
Simon Merrick
18,665 Points

TinyMCE Widget plugin is wrapping my widgets with <li> tags.

I noticed bullet points appearing before widget headings so i checked the source to find that the plug in seems to be wrapping my widget with <li> tags, how can i stop this?

This is the code I wrote in front-page.php

<div class="row">

    <div class="col-sm-6 col-md-offset-1 col-md-4 text-center">
        <?php if (dynamic_sidebar('front-left'));?>
    </div>

    <div class=" col-sm-6 col-md-offset-2 col-md-4 text-center">
       <?php if (dynamic_sidebar('front-right'));?>
    </div>

</div><!--row-->

And this is the page source after wordpress had dynamically included the widgets

<div class="row">

    <div class="col-sm-6 col-md-offset-1 col-md-4 text-center">
        <li id="black-studio-tinymce-2" class="widget widget_black_studio_tinymce">
            <h2 class="widgettitle">BugPolo</h2>
            <div class="text widget">
                <p>Work as a team to dominate the pool in this unique combination of netball, waterpolo and awesomeness!</p>
               <p><a class="btn btn-md btn-success" href="bugpolo">Find Out More</a></p>
             </div>
         </li>
     </div>

    <div class=" col-sm-6 col-md-offset-2 col-md-4 text-center">
        <li id="black-studio-tinymce-3" class="widget widget_black_studio_tinymce">
            <h2 class="widgettitle">River Bugging</h2>
            <div class="text widget">
                <p>Tackle white water rapids or relax and enjoy the scenery on the best rivers New Zealand has to offer.</p>
                <p><a class="btn btn-md btn-success" href="river-bugging">River Bugging</a></p>

            </div>
        </li>
    </div>

</div><!--row-->

1 Answer

David Foord
David Foord
3,545 Points
David Foord
David Foord
3,545 Points

Hi,

I had exactly the same problem, it turned out that in the function to create the widget

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

}

I had spelled widget wrong in the 'before_widget' (I'd put 'before_widgit'), corrected the spelling mistake and the <li> tags dissapeared