WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Widgetising A Theme (9 posts)

  1. coolkarthik88
    Member
    Posted 8 years ago #

    hey guys i want my theme to support widgets but i have three block which i want to widgetise and i want all of them to have differant names..

    i read the tutorial at automattic but didn't quite understand it.. can you please help me..

    to see the theme i am talking about please visit
    http://www.33rockers.com/2006/07/04/fauxed/

    thank you..

  2. whooami
    Member
    Posted 8 years ago #

    link doesnt work, connection refused.

  3. coolkarthik88
    Member
    Posted 8 years ago #

    my hosting seems to be down i guess

  4. coolkarthik88
    Member
    Posted 8 years ago #

    my hosting is back..

  5. Samuel Wood (Otto)
    Tech Ninja
    Posted 8 years ago #

    hey guys i want my theme to support widgets but i have three block which i want to widgetise and i want all of them to have differant names..

    i read the tutorial at automattic but didn't quite understand it.. can you please help me..

    Sure. It's easy. First you have to understand what a widget is. Basically, a widget is a block of some HTML that will be inserted into the page somewhere. Several of them will be inserted in some order. So you can define html to go before and after the widgets, as well as around the title of them. What I'm getting at is that a widget on the page looks like this:

    before_widget
    before_title
    Title
    after_title
    widget content
    after_widget

    As a theme designer, you have to determine what the before's and after's are. They may be LI and H2 tags or they may be DIVs or could be anything you like, really.

    Once you've worked that out, you need to create a functions.php and add this to it:

    if ( function_exists('register_sidebar') )
    {
    register_sidebar(array(
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    'name' => 'Sidebar Name 1'
    ));
    register_sidebar(array(...
    register_sidebar(array(...
    }

    This basically creates your three sidebars (widget spaces). Having this in your functions.php file will do several things, but the main noticable one is that it will make the widgets config page have the three spaces for you to drag and drop widgets into. The "name" parameter you use on each one will be the names shown for these three spaces.

    You might be asing what the %1$s and %2$s and such are all about. Each widget may have styling that it wants to use for itself, and this allows the widget to specify its own classes and id's. %1$s is for the ID, %2$s is for the class. I highly recommend leaving those bits inside the before_widget, even if you do change it to a DIV or something else. In fact, if you're satisfied with LI's and H2's (you really should design your sidebars to this semi-standard approach, it makes things simpler in the long run), then you can use this simpler register line instead of the complex one above:
    register_sidebar(array('name' => 'Sidebar Name 1'));

    Then, in your theme itself, you need to provide someplace where these sidebars will actually be displayed. And that is as trivial as it can possibly be:
    <?php if ( function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Sidebar Name 1');
    } ?>

    That will display all the widgets in the "Sidebar Name 1" sidebar space that you created in functions.php. It will automatically add the tags you specified around the necessary elements. You may need to do some other formatting, like adding UL's around it or something, but that's basically all there is to it.

  6. coolkarthik88
    Member
    Posted 8 years ago #

    hey thanks for the help

  7. coolkarthik88
    Member
    Posted 8 years ago #

    i tried it out and my blog homepage shows the following..

    # if ( function_exists('register_sidebar') ) { register_sidebar(array( 'before_widget' => '', 'after_widget' => '
    ', 'before_title' => '
    ', 'after_title' => '
    # ', 'name' => 'Bottom_left' )); register_sidebar(array( 'before_widget' => '', 'after_widget' => '
    ', 'before_title' => '
    ', 'after_title' => '
    # ', 'name' => 'Bottom_middle' )); register_sidebar(array( 'before_widget' => '', 'after_widget' => '
    ', 'before_title' => '
    ', 'after_title' => '
    # ', 'name' => 'Bottom_right' )); register_sidebar(array( 'before_widget' => '', 'after_widget' => '
    ', 'name' => 'top_side' )); }
    Warning: Cannot modify header information - headers already sent by (output started at C:Program Filesxampphtdocswordpresswp-contentthemesfauxedfunctions.php:13) in C:Program Filesxampphtdocswordpresswp-login.php on line 9
    <code>
    know what is wrong

  8. Samuel Wood (Otto)
    Tech Ninja
    Posted 8 years ago #

    You screwed up the PHP somewhere. Is your PHP code inside of <?php ... ?> tags?

  9. coolkarthik88
    Member
    Posted 8 years ago #

    hey i have corrected that bug but the widgets don't show up.. see my related post : http://wordpress.org/support/topic/78598

Topic Closed

This topic has been closed to new replies.

About this Topic