WordPress.org

1. clint6998
   Member
   Posted 6 months ago #
   

   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

2. clint6998
   Member
   Posted 5 months ago #
   

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

3. esmi
   Theme Diva & Forum Moderator
   Posted 5 months ago #
   

   Are you using a child theme?

4. clint6998
   Member
   Posted 5 months ago #
   

   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

5. esmi
   Theme Diva & Forum Moderator
   Posted 5 months ago #
   

   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.

6. clint6998
   Member
   Posted 5 months ago #
   

   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

7. esmi
   Theme Diva & Forum Moderator
   Posted 5 months ago #
   

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

8. clint6998
   Member
   Posted 5 months ago #
   

   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

9. esmi
   Theme Diva & Forum Moderator
   Posted 5 months ago #
   

   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.

10. clint6998
    Member
    Posted 5 months ago #
    

    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.

11. clint6998
    Member
    Posted 5 months ago #
    

    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

12. esmi
    Theme Diva & Forum Moderator
    Posted 5 months ago #
    

    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.

13. clint6998
    Member
    Posted 5 months ago #
    

    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.

14. clint6998
    Member
    Posted 5 months ago #
    

    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?

15. esmi
    Theme Diva & Forum Moderator
    Posted 5 months ago #
    

    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

16. clint6998
    Member
    Posted 5 months ago #
    

    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

17. esmi
    Theme Diva & Forum Moderator
    Posted 5 months ago #
    

    No! Never, ever, edit WordPress core scripts. And do not encourage others to do so. Editing core scripts can bring down your entire site and/or open security holes for hackers to use.

18. clint6998
    Member
    Posted 5 months ago #
    

    Well if I would have had some assistance instead of criticism and telling me to just to read a 4600 word page, maybe it would have been done correctly...Don't you think?

    And I didnt't edit any "core code" I wrapped my HTML around the core code. Adding a couple of extra div's will not help a hacker any more than the ones that are there now...

19. esmi
    Theme Diva & Forum Moderator
    Posted 5 months ago #
    

    That 4600 word page contained information that you need to know. Ditto for all of the other Codex pages that relate to theme development. You've been repeatedly pointed in the right direction but you seem unwilling to actually do any of the work yourself. If you cannot manage the work yourself, perhaps you need to consider hiring someone to carry out the work for you.

    This is a support forum. We help people to help themselves. We do not do all of the work for you. If that is not suitable for your needs, there are plenty of other resources that you can use instead.

Topic Closed

This topic has been closed to new replies.