WordPress › Support » Sidebars lose styling when widgets are added

dj1163
Member
Posted 2 years ago #

I've been working on this problem for 3 days now, checked the documentation and forums and can't find the answer, so hopefully some of you experts can help me out. I used Artisteer to create my theme, but I want to integrate multiple sidebars (to create a box on top with 2 columns underneath). Artisteer can't do this, so I'm using the Pixel theme as a guide because it is fairly basic and easy to follow as far as the sidebar thing goes.

Pretty simple - just create multiple dynamic sidebars inside one. OK, the code is a little different between the 2 themes, but I figured it out and got it to work... almost. Everything looks great (default 'widgets') until I ad a widget into one of the sidebars. The widgets work, but the sidebar it's in loses all styling.

I rebuilt my sidebar.php, registered the sidebars in functions.php and added them to my stylesheet.css. I'm hoping this is something simple that someone can just figure out and give me a relatively easy fix, but if I need to post some of the code just let me know. I assume I'll need to use the pastebin for that, but I'll need a little help on figuring out how to use that (like where my text goes, where the code goes and how to add it to this post).

dj1163
Member
Posted 2 years ago #

Also, how do I add a search bar to the lower right corner of my header and a subscribe button to the upper right?

esmi
Theme Diva & Mod
Posted 2 years ago #

The widgets work, but the sidebar it's in loses all styling.

Have you tried validating the markup? Sounds like you have something like a missing closing element. Or perhaps one closing element too many.

Also, how do I add a search bar to the lower right corner of my header and a subscribe button to the upper right?

Assuming that you know the code/template tags to use, it's just a case of placing them in the header and then, probably, floating them left and right respectively.

dj1163
Member
Posted 2 years ago #

I got the header part working perfectly - thanks!

I spent another day on the sidebar format problem and am still at a loss. I'm posting all relevant code below and maybe someone can spot something that I'm not seeing. It's a little ugly being that's it's merged, but everything works except the styling where a widget is added.

sidebar1.php (whole file)

<div class="art-sidebar1">
<div id="sidebar_full">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_full') ) : ?>

<div class="art-Block">
    <div class="art-Block-body">
<div class="art-BlockHeader">
    <div class="l"></div>
    <div class="r"></div>
    <div class="art-header-tag-icon">
        <div class="t"><?php _e('Search', 'kubrick'); ?></div>
    </div>
</div><div class="art-BlockContent">
    <div class="art-BlockContent-tl"></div>
    <div class="art-BlockContent-tr"></div>
    <div class="art-BlockContent-bl"></div>
    <div class="art-BlockContent-br"></div>
    <div class="art-BlockContent-tc"></div>
    <div class="art-BlockContent-bc"></div>
    <div class="art-BlockContent-cl"></div>
    <div class="art-BlockContent-cr"></div>
    <div class="art-BlockContent-cc"></div>
    <div class="art-BlockContent-body">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" style="width: 70%;" />
<span class="art-button-wrapper">
	<span class="l"> </span>
	<span class="r"> </span>
	<input class="art-button" type="submit" name="search" value="<?php _e('Search', 'kubrick'); ?>"/>
</span>

</form>
    </div>
</div>

    </div>
</div>

<?php endif; ?>

</div><!-- Closes Sidebar_full -->

<div id="sidebar_left">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_left') ) : ?>

<div class="art-Block">
    <div class="art-Block-body">
<div class="art-BlockHeader">
    <div class="l"></div>
    <div class="r"></div>
    <div class="art-header-tag-icon">
        <div class="t"><?php _e('Categories', 'kubrick'); ?></div>
    </div>
</div><div class="art-BlockContent">
    <div class="art-BlockContent-tl"></div>
    <div class="art-BlockContent-tr"></div>
    <div class="art-BlockContent-bl"></div>
    <div class="art-BlockContent-br"></div>
    <div class="art-BlockContent-tc"></div>
    <div class="art-BlockContent-bc"></div>
    <div class="art-BlockContent-cl"></div>
    <div class="art-BlockContent-cr"></div>
    <div class="art-BlockContent-cc"></div>
    <div class="art-BlockContent-body">
<ul>
  <?php wp_list_categories('show_count=1&title_li='); ?>
</ul>
    </div>
</div>
    </div>
</div>

<?php endif; ?>

</div> <!-- Closes Sidebar_left -->

<div id="sidebar_right">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar_right') ) : ?>

<div class="art-Block">
    <div class="art-Block-body">
<div class="art-BlockHeader">
    <div class="l"></div>
    <div class="r"></div>
    <div class="art-header-tag-icon">
        <div class="t"><?php _e('Links:', 'kubrick'); ?></div>
    </div>
</div><div class="art-BlockContent">
    <div class="art-BlockContent-tl"></div>
    <div class="art-BlockContent-tr"></div>
    <div class="art-BlockContent-bl"></div>
    <div class="art-BlockContent-br"></div>
    <div class="art-BlockContent-tc"></div>
    <div class="art-BlockContent-bc"></div>
    <div class="art-BlockContent-cl"></div>
    <div class="art-BlockContent-cr"></div>
    <div class="art-BlockContent-cc"></div>
    <div class="art-BlockContent-body">
<ul>
      <?php wp_list_bookmarks('title_li=&categorize=0'); ?>
      </ul>
    </div>
</div>

    </div>
</div>

<?php endif ?>

</div> <!-- Closes Sidebar_right -->

<div class="cleared"></div>
</div> <!-- Closes Sidebars -->

style.css (partial)

/* begin LayoutCell */
#sidebar_full {
  padding: 0;
  margin: 0;
  width: 442px;
  }

#sidebar_left {
  padding: 0;
  margin: 0;
  float: left;
  width: 172px;
  }

#sidebar_right {
  padding: 0;
  margin: 0;
  float: right;
  width: 270px;
  }
/* end LayoutCell */

functions.php (partial)

if ( function_exists('register_sidebar')) {
    register_sidebar(array(
	'name'=>'sidebar_full',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->',
    ));
    register_sidebar(array(
	'name'=>'sidebar_left',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->',
    ));
    register_sidebar(array(
	'name'=>'sidebar_right',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->',
    ));
}

function art_normalize_widget_style_tokens($content) {
	$bw = '<!--- BEGIN Widget --->';
	$bwt = '<!--- BEGIN WidgetTitle --->';
	$ewt = '<!--- END WidgetTitle --->';
	$bwc = '<!--- BEGIN WidgetContent --->';
	$ewc = '<!--- END WidgetContent --->';
	$ew = '<!--- END Widget --->';
	$result = '';
	$startBlock = 0;
	$endBlock = 0;
	while (true) {
		$startBlock = strpos($content, $bw, $endBlock);
		if (false === $startBlock) {
			$result .= substr($content, $endBlock);
			break;
		}
		$result .= substr($content, $endBlock, $startBlock - $endBlock);
		$endBlock = strpos($content, $ew, $startBlock);
		if (false === $endBlock) {
			$result .= substr($content, $endBlock);
			break;
		}
		$endBlock += strlen($ew);
		$widgetContent = substr($content, $startBlock, $endBlock - $startBlock);
		$beginTitlePos = strpos($widgetContent, $bwt);
		$endTitlePos = strpos($widgetContent, $ewt);
		if ((false == $beginTitlePos) xor (false == $endTitlePos)) {
			$widgetContent = str_replace($bwt, '', $widgetContent);
			$widgetContent = str_replace($ewt, '', $widgetContent);
		} else {
			$beginTitleText = $beginTitlePos + strlen($bwt);
			$titleContent = substr($widgetContent, $beginTitleText, $endTitlePos - $beginTitleText);
			if ('&nbsp;' == $titleContent) {
				$widgetContent = substr($widgetContent, 0, $beginTitlePos)
					. substr($widgetContent, $endTitlePos + strlen($ewt));
			}
		}
		if (false === strpos($widgetContent, $bwt)) {
			$widgetContent = str_replace($bw, $bw . $bwc, $widgetContent);
		} else {
			$widgetContent = str_replace($ewt, $ewt . $bwc, $widgetContent);
		}
		$result .= str_replace($ew, $ewc . $ew, $widgetContent);
	}
	return $result;
}

function art_sidebar($index = 1)
{
	if (!function_exists('dynamic_sidebar')) return false;
	ob_start();
	$success = dynamic_sidebar($index);
	$content = ob_get_clean();
	if (!$success) return false;
	$content = art_normalize_widget_style_tokens($content);
	$replaces = array(
		'<!--- BEGIN Widget --->' => "<div class=\"art-Block\">\r\n    <div class=\"art-Block-body\">\r\n",
		'<!--- BEGIN WidgetTitle --->' => "<div class=\"art-BlockHeader\">\r\n    <div class=\"l\"></div>\r\n    <div class=\"r\"></div>\r\n    <div class=\"art-header-tag-icon\">\r\n        <div class=\"t\">",
		'<!--- END WidgetTitle --->' => "</div>\r\n    </div>\r\n</div>",
		'<!--- BEGIN WidgetContent --->' => "<div class=\"art-BlockContent\">\r\n    <div class=\"art-BlockContent-tl\"></div>\r\n    <div class=\"art-BlockContent-tr\"></div>\r\n    <div class=\"art-BlockContent-bl\"></div>\r\n    <div class=\"art-BlockContent-br\"></div>\r\n    <div class=\"art-BlockContent-tc\"></div>\r\n    <div class=\"art-BlockContent-bc\"></div>\r\n    <div class=\"art-BlockContent-cl\"></div>\r\n    <div class=\"art-BlockContent-cr\"></div>\r\n    <div class=\"art-BlockContent-cc\"></div>\r\n    <div class=\"art-BlockContent-body\">\r\n",
		'<!--- END WidgetContent --->' => "\r\n    </div>\r\n</div>\r\n",
		'<!--- END Widget --->' => "\r\n    </div>\r\n</div>\r\n"
	);
	$bwt = '<!--- BEGIN WidgetTitle --->';
	$ewt = '<!--- END WidgetTitle --->';
	if ('' == $replaces[$bwt] && '' == $replaces[$ewt]) {
		$startTitle = 0;
		$endTitle = 0;
		$result = '';
		while (true) {
			$startTitle = strpos($content, $bwt, $endTitle);
			if (false == $startTitle) {
				$result .= substr($content, $endTitle);
				break;
			}
			$result .= substr($content, $endTitle, $startTitle - $endTitle);
			$endTitle = strpos($content, $ewt, $startTitle);
			if (false == $endTitle) {
				$result .= substr($content, $startTitle);
				break;
			}
			$endTitle += strlen($ewt);
		}
		$content = $result;
	}
	$content = str_replace(array_keys($replaces), array_values($replaces), $content);
	echo $content;
	return true;
}

My guess is it's something in functions.php, but it's hard for me to figure out what everything does. The original register code was:

REPLACED:

if (function_exists('register_sidebars')) {
register_sidebars(1, array(
'before_widget' => '',
'before_title' => '',
'after_title' => '',
'after_widget' => ''
));

WITH THIS:

if ( function_exists('register_sidebar')) {
register_sidebar(array(
'name'=>'sidebar_full',
'before_widget' => '',
'before_title' => '',
'after_title' => '',
'after_widget' => '',
));
register_sidebar(array(
'name'=>'sidebar_left',
'before_widget' => '',
'before_title' => '',
'after_title' => '',
'after_widget' => '',
));
register_sidebar(array(
'name'=>'sidebar_right',
'before_widget' => '',
'before_title' => '',
'after_title' => '',
'after_widget' => '',
));

WordPress.org

Forums

Sidebars lose styling when widgets are added (4 posts)

Topic Closed

About this Topic

Tags

Code is Poetry