CODEWITHSUNDEEP
phpwidgetwordpress
Chauhan
Chauhan

Reputation: 2581

How to implement dynamic_sidebar( 'primary-widget-area' ) with the given html in WordPress

I am working on a WordPress site. I am using by default sidebar.php of WordPress. I show sidebar in <ul><li></li></ul> and the problem is I want to customize this sidebar according to given HTML.

I need the things in <div>.

By default sidebar.php code

<?php
/**
 * The Sidebar containing the primary and secondary widget areas.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
    <div id="primary" class="widget-area" role="complementary">
        <ul class="xoxo">

<?php
/* When we call the dynamic_sidebar() function, it'll spit out
 * the widgets for that widget area. If it instead returns false,
 * then the sidebar simply doesn't exist, so we'll hard-code in
 * some default sidebar stuff just in case.
 */
if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>

        <li id="search" class="widget-container widget_search">
            <?php get_search_form(); ?>
        </li>

        <li id="archives" class="widget-container">
            <h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3>
            <ul>
                <?php wp_get_archives( 'type=monthly' ); ?>
            </ul>
        </li>

        <li id="meta" class="widget-container">
            <h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </li>

    <?php endif; // end primary widget area ?>
        </ul>
    </div><!-- #primary .widget-area -->

<?php
// A second sidebar for widgets, just because.
if ( is_active_sidebar( 'secondary-widget-area' ) ) : ?>

    <div id="secondary" class="widget-area" role="complementary">
        <ul class="xoxo">
            <?php dynamic_sidebar( 'secondary-widget-area' ); ?>
        </ul>
    </div><!-- #secondary .widget-area -->

<?php endif; ?>

Upvotes: 1

Views: 11132

Answers (2)

Sachindra
Sachindra

Reputation: 6969

IMHO, you can replace the "li" with "div" but as "li" is the default tag that wordpress provides or uses why not stick to the use of "li"?? using both are quite similar...

Upvotes: 0

Or Weinberger
Or Weinberger

Reputation: 7472

You practically wrote down your solution. just replace the <li>'s with <div>'s and remove the <ul></ul> tags on the sidebar.php file. Then edit the CSS file of your theme to match the style you want to achieve. As I don't know which theme you are using I cannot give you specific CSS instructions.

Upvotes: 1

Related Questions