ThemeShaper Forums » Thematic

[closed]

New Widget Area below Menu with 3 Widgets (like Footer)

(7 posts)
  • Started 2 years ago by corizo
  • Latest reply from corizo
  • This topic is resolved
  1. corizo
    Member

    Hello Themeshaper Forum,

    sorry I have to ask this, but as I'm not too much into php and overly complicated HTML/CSS, I'm more the "can edit things"-type, not the "add new things"-type.

    My site: www.satori-nihon.de

    I would like to add a new widget area between the menu and the next areas ("Die letzten Twitter-Beiträge" and "Satori Nihon auf…") with two or three widgetized Areas, exactly like within the footer area.

    Like this:

    ----

    [Menu] Start » Blog » Japanaufenthalte Kyoto » Geschichte »

    [New Widget Area] WidgetArea1 WidgetArea2 WidgetArea3

    [Start of Content] "Die letzten Twitter-Beiträge" and "Satori Nihon auf…"

    ----

    I can do the CSS-part most likely by myself, but I have no clue what to insert into functions.php.
    Thanks for any provided code :)

    Greetings

    Posted 2 years ago #
  2. Well, I was having a little trouble adding the priority to the menus for the admin and I assume there is probably something else that could be better, but this does work.

    // define arrays for the header widgetized areas
    function register_header_subsidiary() {
    	register_sidebar(array(
    		'name' => '1st Header Aside',
    		'id' => '1st-header-aside',
    		'description' => __('The 1st widget area in the header.', 'thematic'),
    		'before_widget' => thematic_before_widget(),
    		'after_widget' => thematic_after_widget(),
    		'before_title' => thematic_before_title(),
    		'after_title' => thematic_after_title(),
    	));
    	register_sidebar(array(
    		'name' => '2nd Header Aside',
    		'id' => '2nd-header-aside',
    		'description' => __('The 2nd widget area in the header.', 'thematic'),
    		'before_widget' => thematic_before_widget(),
    		'after_widget' => thematic_after_widget(),
    		'before_title' => thematic_before_title(),
    		'after_title' => thematic_after_title(),
    	));
    	register_sidebar(array(
    		'name' => '3rd Header Aside',
    		'id' => '3rd-header-aside',
    		'description' => __('The 3rd widget area in the header.', 'thematic'),
    		'before_widget' => thematic_before_widget(),
    		'after_widget' => thematic_after_widget(),
    		'before_title' => thematic_before_title(),
    		'after_title' => thematic_after_title(),
    	));
    }
    add_action( 'init', 'register_header_subsidiary' );
    
    // add header subsidiary to belowheader hook
    function add_header_subsidiary() {
    ?> <div id="header-subsidiary"> <?php
    	if (is_active_sidebar('1st-header-aside')) {
    		echo thematic_before_widget_area('1st-header-aside');
    		dynamic_sidebar('1st-header-aside');
    		echo thematic_after_widget_area('1st-header-aside');
    	}
    	if (is_active_sidebar('2nd-header-aside')) {
    		echo thematic_before_widget_area('2nd-header-aside');
    		dynamic_sidebar('2nd-header-aside');
    		echo thematic_after_widget_area('2nd-header-aside');
    	}
    	if (is_active_sidebar('3rd-header-aside')) {
    		echo thematic_before_widget_area('3rd-header-aside');
    		dynamic_sidebar('3rd-header-aside');
    		echo thematic_after_widget_area('3rd-header-aside');
    	}
    ?> </div> <?php
    }
    add_action('thematic_belowheader', 'add_header_subsidiary');

    No CSS though, you could most likely stack this with some of the footer CSS so you can reuse it instead of creating from scratch (if it is the same).

    Posted 2 years ago #
  3. corizo
    Member

    It works indeed, thank you very much!

    The only thing I noticed that with Browser Opera, the sidebar and footer take a long time to appear. With Chrome it's fluently like always, strange.

    Posted 2 years ago #
  4. corizo
    Member

    Noticed some minor problems:

    1) I can only apply a background if I specify the height of #header-subsidiary. As the content of the widgets always change, this is a little inconvenient.

    2) I can't work out how to apply a specific width to #1st-header-aside, #2nd-header-aside etc. I can only apply one width for all widget areas through .aside :/

    Posted 2 years ago #
  5. Crap, I am sorry, I just blew through it so fast I didn't notice this one. http://css-tricks.com/28-ids-cannot-start-with-a-number/ I haven't had to think about that for a long time and I usually never ever do it. So I have removed it "#1st" to "first".

    Corrected:

    // define arrays for the header widgetized areas
    function register_header_subsidiary() {
    	register_sidebar(array(
    		'name' => '1st Header Aside',
    		'id' => 'first-header-aside',
    		'description' => __('The 1st widget area in the header.', 'thematic'),
    		'before_widget' => thematic_before_widget(),
    		'after_widget' => thematic_after_widget(),
    		'before_title' => thematic_before_title(),
    		'after_title' => thematic_after_title(),
    	));
    	register_sidebar(array(
    		'name' => '2nd Header Aside',
    		'id' => 'second-header-aside',
    		'description' => __('The 2nd widget area in the header.', 'thematic'),
    		'before_widget' => thematic_before_widget(),
    		'after_widget' => thematic_after_widget(),
    		'before_title' => thematic_before_title(),
    		'after_title' => thematic_after_title(),
    	));
    	register_sidebar(array(
    		'name' => '3rd Header Aside',
    		'id' => 'third-header-aside',
    		'description' => __('The 3rd widget area in the header.', 'thematic'),
    		'before_widget' => thematic_before_widget(),
    		'after_widget' => thematic_after_widget(),
    		'before_title' => thematic_before_title(),
    		'after_title' => thematic_after_title(),
    	));
    }
    add_action( 'init', 'register_header_subsidiary' );
    
    // add header subsidiary to belowheader hook
    function add_header_subsidiary() {
    ?> <div id="header-subsidiary"> <?php
    	if (is_active_sidebar('first-header-aside')) {
    		echo thematic_before_widget_area('first-header-aside');
    		dynamic_sidebar('first-header-aside');
    		echo thematic_after_widget_area('first-header-aside');
    	}
    	if (is_active_sidebar('second-header-aside')) {
    		echo thematic_before_widget_area('second-header-aside');
    		dynamic_sidebar('second-header-aside');
    		echo thematic_after_widget_area('second-header-aside');
    	}
    	if (is_active_sidebar('third-header-aside')) {
    		echo thematic_before_widget_area('third-header-aside');
    		dynamic_sidebar('third-header-aside');
    		echo thematic_after_widget_area('third-header-aside');
    	}
    ?> </div> <?php
    }
    add_action('thematic_belowheader', 'add_header_subsidiary');

    Ok, now for the CSS, I would suggest reusing the same style as the footer elements that come with a default thematic layout.

    #subsidiary, #header-subsidiary { width:940px; margin:0 auto; overflow:hidden; }
    #subsidiary .aside, #header-subsidiary .aside { width:300px; float:left; margin:0 20px 0 0; }
    #subsidiary #third, #header-subsidiary #third-header-aside { margin:0; }

    That "overflow:hidden" on the #header-subsidiary is what gets that box to clear the others without a fixed height.

    There are a few things I would probably change if I had more time, I don't like doubling up ID's like that but for speed sake, it works.

    Posted 2 years ago #
  6. scottnix.com/test2 has a example up temporarily.

    Posted 2 years ago #
  7. corizo
    Member

    Thanks again! Everything is working great now :)

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.