WordPress.org

Support

Support » Themes and Templates » [Resolved] Change design layout of sidebar problems

[Resolved] Change design layout of sidebar problems

  • clint6998

    @clint6998

    I am trying to make the sidebar look like the rest of my site by adding images around the title, content of the section, and add a footer to each sidebar item. I have edited sidebar.php to add my code but it is not showing up. Everything looks the same.

    Here is the previous code:

    <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; ?>

    Here is what I have changed:

    <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">
          	<div class="leftBoxContainer">
              <table height="39px" cellpadding="0px" cellspacing="0px" border="0px">
              	<tr>
                	<td align="center" valign="top" width="224px">
              			<table height="39px" cellpadding="0px" cellspacing="0px" border="0px">
                			<tr>
                  			<td><img src="wp-content/themes/to/images/SideBar_MiddleTitle_Area_01.png" width="6px" height="39px" alt="" /></td>
                   		 	<td align="center" width="10px" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"></td>
                   		  <td align="center" valign="middle" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"><h3 class="widget-title"><?php _e( 'Archives', 'twentyten' ); ?></h3></td>
                   		  <td align="center" width="10px" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"></td>
                   		  <td><img src="wp-content/themes/to/images/SideBar_MiddleTitle_Area_04.png" width="6px" height="39px" alt="" /></td>
                 		  </tr>
               		  </table>
                  </td>
                </tr>
              </table>
            </div>
    				<div id="leftBoxContent">
    					<ul>
    						<?php wp_get_archives( 'type=monthly' ); ?>
    					</ul>
    				</div>
    				<div id="leftBoxFooter"></div>      
    
    			</li>
    
    			<li id="meta" class="widget-container">
    
    				<div class="leftBoxContainer">
              <table height="39px" cellpadding="0px" cellspacing="0px" border="0px">
              	<tr>
                	<td align="center" valign="top" width="224px">
              			<table height="39px" cellpadding="0px" cellspacing="0px" border="0px">
                			<tr>
                  			<td><img src="wp-content/themes/to/images/SideBar_MiddleTitle_Area_01.png" width="6px" height="39px" alt="" /></td>
                   		 	<td align="center" width="10px" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"></td>
                   		  <td align="center" valign="middle" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"><h3 class="widget-title"><?php _e( 'Meta', 'twentyten' ); ?></h3></h3></td>
                   		  <td align="center" width="10px" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"></td>
                   		  <td><img src="wp-content/themes/to/images/SideBar_MiddleTitle_Area_04.png" width="6px" height="39px" alt="" /></td>
                 		  </tr>
               		  </table>
                  </td>
                </tr>
              </table>
            </div>
    				<div id="leftBoxContent">
    				<ul>
    					<?php wp_register(); ?>
    					<li><?php wp_loginout(); ?></li>
    					<?php wp_meta(); ?>
    				</ul>
    				</div>
    				<div id="leftBoxFooter"></div>        
    
    			</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; ?>

    Nothing is happening. From what I have read I am in the right place, and want to edit the original sidebar, not add my own. I have added all images and css for the layout.

    Any ideas?

    Thanks,

    Clint

Viewing 15 replies - 1 through 15 (of 18 total)
  • clint6998

    @clint6998

    Can anyone tell me how to edit the appearance of the side bar?

    esmi

    @esmi

    Forum Moderator

    Are you using a child theme?

    clint6998

    @clint6998

    I am using my own theme if that is what you are asking. If not, please define.

    Something I noticed is that I edited the sidebar.php and one of the first few lines is:

    if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>

    so I put my code where the is NOT a dynamic side bar. How do I edit the dynamic sidebar or am I on the wrong track?

    Thanks,

    Clint

    esmi

    @esmi

    Forum Moderator

    The dynamic sidebar is the widget-capable area defined in your theme’s functions.php file when you registered the sidebar.Have you reviewed Theme Development yet? If not, I’d suggest that you start reading that first.

    clint6998

    @clint6998

    I have tried and it confuses the hell out of me. There is just so much content. All I need to do is add a table around each title, add a background image for the body of each section, and then add a footer.

    Can you please assist me in doing this?

    Clint

    esmi

    @esmi

    Forum Moderator

    Table markup should never be used for presentational reasons. Tables are for displaying tabulated data only.

    clint6998

    @clint6998

    I understand that. I have my reasons for using tables for this. Trust me, I avoid them at all cost, but for the way my headers are, this is how I am doing it.

    Now I appreciate the constructive criticism, but that is not what I am looking for right now. I am looking for a resolution to my problem. Can you help or not?

    Thanks,

    Clint

    esmi

    @esmi

    Forum Moderator

    This level of coding is really beyond the scope of the support we are able to provide in the forum, as it requires custom code to be written and tested. I can only suggest that you start by reading the WordPress documentation and its related resources that I linked to originally.

    clint6998

    @clint6998

    So what your saying is that the WordPress › Support » Themes and Templates support forum is not where I would go to find out how to add images to the sidebar of a theme??

    All I am asking is how to add background images to the dynamic sidebar. I don’t see how someone with wordpress programming knowledge cannot answer that question.

    clint6998

    @clint6998

    I’ll do you one better. I have removed the dynamic sidebar, and while I have been waiting on a response that could be helpful, I have achieved what I am looking for in a manner of speaking. works great in all browsers except the crappy IE.

    http://tacticaloffense.com/news/

    That is what I am trying to accomplish. Is anyone else willing to help?

    Thanks,

    Clint

    esmi

    @esmi

    Forum Moderator

    I am saying that we can point you in the right direction but we cannot do the work for you. You need to start by learning how the themes work by reading the extensive WPORG documentation on the subject – such as widgetizing themes. This, of course, assumes that you have a basic knowledge of PHP, HTML & CSS. If you don’t, then we can point you towards suitable learning resources.

    clint6998

    @clint6998

    Yes, I have a basic knowledge of PHP, and a excelent knowledge of HTML & CSS. But I don’t have an extensive knowledge base of wordpress and the structure. And you are correct, reading your documentation is EXTENSIVE. While I have been reading it, I am in need of assistance to get this part up and running asap. I am not asking anyone to do it for me, but point me in the right direction or tell me what I need to edit and how instead of just pointing me to a page that has 4600 words to it and saying good luck.

    clint6998

    @clint6998

    ok, a simpler question. IN the functions.php of my theme, there is this:

    register_sidebar( array(
    		'name' => __( 'Primary Widget Area', 'twentyten' ),
    		'id' => 'primary-widget-area',
    		'description' => __( 'The primary widget area', 'twentyten' ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h3 class="widget-title">',
    		'after_title' => '</h3>',
    	) );,

    Where do I find the file that controls where those parameters are positioned or added to the HTML of the page?

    esmi

    @esmi

    Forum Moderator

    There is no file. They are used when you add a widget to your dynamic sidebar (see sidebar.php). See http://codex.wordpress.org/Function_Reference/register_sidebar

    clint6998

    @clint6998

    There is a file and I just found it…actually, multiple files.

    ***NOTE***
    This is not the best way to do it but it works. If you upgrade to a newer version, you take the risk of your files being overwritten so make sure you know what you did and where you did it. Also, BACK UP each file before making any modification.

    For those wanting to do what I did for my side bar or something similar, you can edit the following files:

    wp-includes/default-widgets.php

    Find the widget you are wanting to edit and add in your html. Here are my edits for the search function:


    [Code moderated]

    That will edit the body of the widget, not the header, and you can also add a footer as I did.

    Then edit in your theme the functions.php file. Here is how I edited mine:

    function twentyten_widgets_init() {
    	// Area 1, located at the top of the sidebar.
    	register_sidebar( array(
    		'name' => __( 'Primary Widget Area', 'twentyten' ),
    		'id' => 'primary-widget-area',
    		'description' => __( 'The primary widget area', 'twentyten' ),
    		'before_widget' => '<li id="%1$s" class="widget-container %2$s"><div id="widgetContainer">',
    		'after_widget' => '</div></li>',
    		'before_title' => '<div class="leftBoxContainer">
              <table height="54px" cellpadding="0px" cellspacing="0px" border="0px">
              	<tr>
                	<td align="center" valign="top" width="305px" style="background-image:url(wp-content/themes/to/images/Cart_Sidebar_01.png); background-repeat:no-repeat">
              			<table height="39px" cellpadding="0px" cellspacing="0px" border="0px">
                			<tr>
                  			<td><img src="wp-content/themes/to/images/SideBar_MiddleTitle_Area_01.png" width="6px" height="39px" alt="" /></td>
                   		 	<td align="center" width="10px" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"></td>
                   		  <td align="center" valign="middle" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"><h3 class="widget-title"><h3 class="widget-title">',
    		'after_title' => '</h3></td>
                   		  <td align="center" width="10px" style="background-image:url(wp-content/themes/to/images/SideBar_MiddleTitle_Area_02.png); background-repeat:repeat-x;"></td>
                   		  <td><img src="wp-content/themes/to/images/SideBar_MiddleTitle_Area_04.png" width="6px" height="39px" alt="" /></td>
                 		  </tr>
               		  </table>
                  </td>
                </tr>
              </table>
            </div>  ',
    	) );

    I added my HTML for the header in the before_widget, after_widget, before_title, and after_title.

    Then if you need further customization for your search form such as adding your own button, you can edit the wp-includes/general-template.php file as I did here:

    function get_search_form($echo = true) {
    	do_action( 'get_search_form' );
    
    	$search_form_template = locate_template('searchform.php');
    	if ( '' != $search_form_template ) {
    		require($search_form_template);
    		return;
    	}
    
    	$form = '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '" >
    	<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    	<div id="searchMainL"><input type="text" style="height:26px;" value="' . get_search_query() . '" name="s" id="s" /></div>
    	<div id="searchMainR"><input type="image" src="wp-includes/images/button_submit.png" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    	</div>
    	</div>
    	</form>';
    
    	if ( $echo )
    		echo apply_filters('get_search_form', $form);
    	else
    		return apply_filters('get_search_form', $form);
    }

    Then just add your css to give additional styling.

    Again, this is not the ideal way to do it, but it works for what I need and this is how I did it. You can see the finished side bar at http://www.tacticaloffense.com/news.

    Clint

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘[Resolved] Change design layout of sidebar problems’ is closed to new replies.
Skip to toolbar