WordPress.org

Ready to get started?Download WordPress

Forums

Adding a widget under the banner (15 posts)

  1. cssnovicedude
    Member
    Posted 3 years ago #

    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 728x90 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

  2. theApe
    Member
    Posted 3 years ago #

    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.

    http://codex.wordpress.org/Widgetizing_Themes

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

  3. cssnovicedude
    Member
    Posted 3 years ago #

    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.

  4. alchymyth
    Forum Moderator
    Posted 3 years ago #

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

    similar problem:
    http://wordpress.org/support/topic/create-3-horizontal-boxes-between-menu-and-container?replies=13

    in your case, instead of after

    <div id="main">

    you would add this code

    <?php
    	/* 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

  5. Root
    Member
    Posted 3 years ago #

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

  6. cssnovicedude
    Member
    Posted 3 years ago #

    Thanks, were do I add this code?

  7. alchymyth
    Forum Moderator
    Posted 3 years ago #

    Thanks, were do I add this code?

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

  8. cssnovicedude
    Member
    Posted 3 years ago #

    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.

  9. cssnovicedude
    Member
    Posted 3 years ago #

    Alchymyth,

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

    style.css
    http://wordpress.pastebin.com/b7icgUYg

    header.php
    http://wordpress.pastebin.com/7tPtaefJ

    sidebar-top.php
    http://wordpress.pastebin.com/YXgZaNC6

    Functions.php
    http://wordpress.pastebin.com/CtW4U2ip

  10. alchymyth
    Forum Moderator
    Posted 3 years ago #

    does it work?

    i am not checking through files, unless something is wrong ;-)

  11. cssnovicedude
    Member
    Posted 3 years ago #

    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.

  12. cssnovicedude
    Member
    Posted 3 years ago #

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

  13. alchymyth
    Forum Moderator
    Posted 3 years ago #

    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' )
    
            )
                    return;

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

  14. Digital Raindrops
    Member
    Posted 3 years ago #

    Hi,
    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">
    
    	<?php

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

    So you will have:

    <div id="content" role="main">
    <?php
    	/* 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 (
    
    			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' );
    }
    endif;

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

    HTH

    David

  15. cssnovicedude
    Member
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic