ThemeShaper Forums » Thematic

[closed]

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

(7 posts)
  • Started 10 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 10 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 10 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 10 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 10 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 10 years ago #
  6. scottnix.com/test2 has a example up temporarily.

    Posted 10 years ago #
  7. corizo
    Member

    Thanks again! Everything is working great now :)

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.