ThemeShaper Forums » Thematic


new widget area above main asides (how)?

(8 posts)
  • Started 10 years ago by Malcolm
  • Latest reply from krowchuk
  • This topic is not resolved
  1. I have done my best to comb through the forum for previous threads on this issue. It seems like a common enough question (for those of us who are very green to php) so if you know of an existing thread please point me there. Otherwise, here's where I'm at with this:

    My goal is to create a new widget area above the primary aside so that I can have a separate search bar. There are other means of attack for this, but I am also interested in learning the process here and would very greatly appreciate the help of a willing soul.

    I believe I understand how to generate content in the thematic_abovemainasides() area, and I am successful in registering a new widget area and placing a widget in it. My problem lies in getting the new widget area to be in the proper location.

    Here is a screen-shot (because I'm working on a local server) of what is happening:

    To register and generate the new widget area, I modified Chris' code (given in these forums) which was meant to create an aside in the header. As you can see in the screen-shot, the widget area is still coming up inside the header (indicated with a black border). I am wondering if I missed something in my modification of the code...

    Here is my code (as written in my child theme's "functions.php"):

    // Code to create a new search widget area above the primary aside.
    function my_widgets_init() {
          	'name' => 'Search Aside',
           	'id' => 'search-aside',
           	'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
           	'after_widget' => "</li>",
    	'before_title' => "<h3 class=\"widgettitle\">",
    	'after_title' => "</h3>\n",
     add_action( 'init', 'my_widgets_init' );
    // this is to add the widget area to my child theme
    function add_widget_above_asides() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('search-aside') ) {
        echo '<div id="search-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
        echo '' . "\n" . '</div><!-- #search-aside .aside -->'. "\n";
    // This is to create the new widget area
     add_action('thematic_header', 'add_widget_above_asides');
    // Adding in content above the asides (sidebar)
    function search_box_above_asides() {
        echo "indicative placeholder text";
     add_action('thematic_abovemainasides', 'search_box_above_asides');
    Posted 10 years ago #
  2. are you getting the widget area to appear in the header at all? in your code you have

    add_action('thematic_header', 'add_widget_above_asides');

    by the way to actually put it in the header you'd need to use a priority number b/c the blog_title and blog_description are already there, etc.

    add_action('thematic_header', 'add_widget_above_asides',8);

    this is the bit that tell the function where to be.... it says add your function "add_widget_above_asides" the the "thematic_header" hook.

    SO- if i have finished confusing you... i believe you need to change your HOOK to coincide with the location you are telling us you'd like your widget to appear.

    i fail to understand why you couldn't just use the pre-existing Primary widget area, but the hook you are looking for is called thematic_abovemainasides. you can see it here:


    armed with this knowledge try replacing the line above with

    add_action('thematic_abovemainasides', 'add_widget_above_asides')
    Posted 10 years ago #
  3. The reason I want to create new widget areas is so that I can style the aside differently than the rest of the asides such that the <h3> on most of the asides can be centered, however on the search bar it remains left aligned or something else. Further I am intending to make them appear to be in separate boxes. The following page provides a close example of the sidebar appearance I'm going for:

    I am actually also hoping to add one more widget area as well. I've assumed the best way to go about this is to add them in the above main asides area. If there is a better way to duplicate the primary aside multiple times, but with different #id's I'd love to hear your ideas.

    I am getting the widget to appear. If you look at the screen-shot I linked above you can see the widget area indicated by the search bar which I've dropped in the area. I did have the 8 in the add_action command which placed it between the #blog title and the #access divs. I removed it to get it coming later.

    Your post illuminated exactly what I was missing I had forgotten to change the "thematic_header" designation to be "thematic_abovemainasides."

    Now, however I have the widget area appearing at the top left of my main content area. The layout of my page is changed such that my entire asides are then placed below the main content area. When I style the new widget area to give it a border and a width of 250px and a height of 50px, the asides return to the right side of my main content however the widget area appears to be in the main content area.

    Here is a screen shot:

    The only thing I have changed from the above listed code is the 'thematic_abovemainasides' in the add_action('thematic_abovemainasides', 'add_widget_above_asides') line.

    Posted 10 years ago #
  4. i still hold that you can style the widgets differently w/o adding a new widget area. if you look at their markup you will see the different IDs or Class names that you could target for CSS specificity.

    getting back to why it is in the wrong place... i've done this before and just forgot to mention it. the new div you've added only as the class "aside" when it is the class "main-aside" (i think it is hyphenated... look at the class on #primary and #secondary to verify) that controls its width and location in the sidebar. SOOOO.... change your add_widget_above_asides function to the following

    function add_widget_above_asides() {
    if ( function_exists('dynamic_sidebar') && is_sidebar_active('search-aside') ) {
        echo '<div id="search-aside" class="aside main-aside">'. "\n" . '<ul class="xoxo">' . "\n";
        echo '' . "\n" . '</div><!-- #search-aside .aside -->'. "\n";
    Posted 10 years ago #
  5. Thank you so much both for the advice, and the picking out of my mistakes. I'm only just beginning to understand php, not to mention write it from scratch. This is also my first time participating in this great support community - it's marvelous to be able to ask (and answer) questions here! (So thanks for contributing to that as well)

    The addition of "main-aside" to the class solved the problem perfectly.

    You're right that I could just as easily use the id's of the widgets themselves to style them individually, however if I swapped out widgets I would then have to change my CSS selectors no?

    I'm building the site to hand on down to new admins, so the more robust I can make it the better.

    Posted 10 years ago #
  6. I agree with TheViking! There are plenty of classes to style every widget differently, however you like them!

    You don't have to "change" the selectors when you swap out widgets... just make sure that you have a rule for each widget that you plan on using, in your style.css. If the widget exists, it gets styled, if it doesn't then nothing will happen, that rule style will be ignored because the class does not get generated in the html.


    Posted 10 years ago #
  7. Alright, you two may be right. I greatly appreciate the lesson in php but I think I'll actually do the css reach around.

    Posted 10 years ago #
  8. I totally understand the "but I want to learn the php" mindset! ;-) But sometimes the easiest and best solution has already been predetermined!

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.