Support » How-To and Troubleshooting » Adding a widget under the banner

Adding a widget under the banner

  • Hi everyone!

    I am brand new to the forum. I wanted to know if there is a way to add a widget under the header image. I am guessing I would need to go about modifying the css code but I am not sure where to start.

    I am using the twenty ten theme.

    Basically, I am trying to add a 728×90 banner centered under the header image. I would like this to be a widget.

    I tried searching and didn’t find anything that resolves this. Only this http://tinyurl.com/22ksrtb and the question was not answered.

    Thanks in advance for any help on this

Viewing 14 replies - 1 through 14 (of 14 total)
  • You need to create a child theme or edit the template of the theme you’re using… You can either add the image to theme directly or you can create a custom widget.


    If you create a custom widget area you can then add the banner img code to a text widget in the admin.

    Thanks…this is kind of what I am looking for but this talks about adding a side bar. I am not sure how to use this to add a widget where I want to add it. I am new to css and php so I am kind of looking for a step by step guide on adding widget under the header image.

    This was pretty simple to do when I was using blogger.



    Forum Moderator

    the word ‘sidebar’ in the instructions is a synonym for ‘widget area’ – you can have ‘sidebars’ in any location on your site.

    similar problem:

    in your case, instead of after

    <div id="main">

    you would add this code

    	/* A sidebar on top of the content? Yep. You can can customize
    	 * your top with three columns of widgets.
    	get_sidebar( 'top' );

    between these lines:

    </div><!-- #branding -->
    			<div id="access" role="navigation">

    and obviously put one widget area only into ‘sidebar-top.php’

    adjust the css accordingly

    Kinda confusing calling widget zones sidebars……but heck thats WordPress

    Thanks, were do I add this code?



    Forum Moderator

    Thanks, were do I add this code?

    this should be clear after you read the linked thread; imho, the steps are described there.

    Sorry. I should of read the entire linked thread. I am working on this now. I will let you know if I get it to work.


    I created a child theme directory and created the following files in that directory. Does this look correct?







    Forum Moderator

    does it work?

    i am not checking through files, unless something is wrong 😉

    Ok thanks. My web hosting company is having server issues. So I can’t check my site. I will let you know if it works. FATCOW SUCKS! They are cheap and but they suck.

    I took a break for xmas. I am back and I can’t get this to work at all.



    Forum Moderator

    in details: what does not work?

    does the new widget area appear in ‘dashboard’ ‘appearance’ ‘ widgets’ ?
    if so, can you drag your banner widget into it?

    only if something is in the new widget area, anything might show in your site.

    if this is a yes to the two questions above, then try to change sidebar-top.php – remove this:

    if (
                    && ! is_active_sidebar( 'center-top-widget-area' )

    you should then be able to find at least

    <div id="top-widget-area" role="complementary">
    </div><!-- #top-widget-area -->

    in the html code in the browser,
    just below </div><!-- #branding -->

    If it is an advert then the better place may be above the content, and you might want to add a widget area to the “content top” below header and menu rather than fully across the header wasting real estate.

    I published a post yesterday with this scenario and the Google hot spot graphic, there are three child themes in the post to download, the code may help you anyway in what you want, it is often better to just start again.

    To add to an existing child theme:
    Download the Left Sidebar Top Content open the zip and copy the file content-top.php across to the child theme.

    In your style.css add:

    /* Top Content Widget */
    #content-top {
    	display: block;
    	margin: 0 auto;
    	text-align: center;
    	width: 100%;

    Copy index.php and or page.php from twenty ten to your child theme and find:

    <div id="content" role="main">

    Add a two line call to the file with get_template_part( 'content','top' )

    So you will have:

    <div id="content" role="main">
    	/* Add our Content Top Widget Area Here */
    	get_template_part( 'content', 'top' );
    	/* Run the loop to output the posts.
    	 * If you want to overload this in a child theme then include a file
    	 * called loop-index.php and that will be used instead.
    	 get_template_part( 'loop', 'index' );
    </div><!-- #content -->

    Last in your child themes functions.php add:

    add_action( 'after_setup_theme', 'content_theme_setup' );
    /** This function will hold our new calls and over-rides */
    if ( !function_exists( 'content_theme_setup' ) ):
    function content_theme_setup() {
    	/** Add our Extra Widgetized Areas */
    	function child_widgets_init() {
    		// Load our Widget Area Names and ID's into an Array
    		$widgets = array (
    				"name" => "Content Top Widget",
                    "id" => "content-top-widget-area")
    		/* Loop through the array and add our Widgetised areas */
    		foreach ($widgets as $widget) {
    			register_sidebar( array(
    				'name' => __( $widget['name'], 'twentyten' ),
    				'id' => $widget['id'],
    				'description' => __( $widget['name'] .' 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>',
    			) );
    	/** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
    	add_action( 'widgets_init', 'child_widgets_init' );

    Now just ad your text widget with te adSense code, or it could be a slideshow etc:, to the new widget area.



    Thanks Everyone for your help. I can’t get this to work so I just put the html for the banner in the header file and called it quits. It took me 3 mins. I will just modify the code when I want to change the image.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Adding a widget under the banner’ is closed to new replies.
Skip to toolbar