This is more a general question, and I'm not sure if it falls under the atahualpa theme or not: is it possible to put widgets on a static page, not in a sidebar? I have widgets associated with various plug-ins that update themselves (for instance, a touring schedule for bands) and I would like that widget to appear on my static greeting page, in a specific location, and not in a sidebar. is it possible to create a table or div structure on my static home page and place the widgets into it with code?

See the top of functions.php on how widget areas are initialized. Repeat what's there for 2 sidebars for X additional sidebars:

Put this

PHP Code:

    register_sidebar(array(
        'name'=>'The Title under which this sidebar will appear at Site Admin -> Widgets',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    )) 


before this:

PHP Code:

} 
# Load functions 


This part

PHP Code:

        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">', 


can also be

PHP Code:

        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '', 


Those tags in the two existing sidebar setups are there for the sidebar widgets, you can leave them empty or add your own HTML tags. It's pretty self explanatory for what these tags are. before_title means before widget title. Many widgets such as the text widget don't need to have a title so there's also no need to wrap the title into some HTML tags.


Then put

PHP Code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(X) ) : endif; ?>

wherever you want to have that widget area in the template. Replace X with the number of the widget area. 1 and 2 are already used for the 2 sidebars. If you put another one into functions.php, that would be the third, so you would replace X with 3.

To have the widget area only on the front page you'd also wrap it into a conditional statement

PHP Code:

<?php if ( is_front_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : endif; ?>
<?php } ?>

Put that code into index.php, for instance above

PHP Code:

        <?php // Post Footer

to have the widget area above the Post Footer

Whoa. This will take some absorption. But I am gonna give it a shot.

Thanks for the detailed explanation!

Absolutely fantastic. Thank you so much for taking the time to put up that tutorial. So great.

My whole front page just became so much easier to control, the entire main section is now widgets.

http://www.midriffrecords.com/midriff_TEST

Is there a downside to widgetizing? Does it slow down a site in any horrible way? Thanks again!

tony

This should not slow down anything. But you would have to apply these file edits again if you ever were to update to a newer Atahualpa version. The current version is rather mature though and you could skip a few new versions if you see no problem with the current version.

Once I get this site live it is staying the way it is until internet 4.0.



Thanks!

Tony

Putting:

<?php if ( is_front_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : endif; ?>
<?php } ?>

right above:

<?php // Post Footer

made my widgets duplicate themselves, putting the code nearer the top of index.php solved the problem.

Question:
How would I get my 3 new widgets to line up next to one another rather than stack one on top of the other?

(so they look like 3 columns, or make that, 5 columns including the original 2?)

Thanks - happy to have widgets in the body of my page!

That's not really related to the widgets as such. You can put the widget areas anywhere inside HTML, i.e. into DIV containers or table cells. For 3 containers side by side, table cells would be more robust and easier

PHP Code:

<table width="100%">
<tr>
<td>
<?php if ( is_front_page() ) { ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : endif; ?>
<?php } ?> 
</td>
<td>
 <?php if ( is_front_page() ) { ?>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : endif; ?>
 <?php } ?> 
</td>
<td>
 <?php if ( is_front_page() ) { ?>
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : endif; ?>
 <?php } ?> 
</td>
</tr>
</table>

This works sort of. The widgets *do* end up in 3 side by side columns,
but if there is too much text they spill into and cover the right sidebar,
also, their size is arbitrary, the ones on the left very skinny, and the furthest
to the right the widest.

How would we fix the column widths/height; say, make widgets 3 and 5, width: 200px,
by height: 200px;
and widget 4: width: 150px, by height: 200px?

Having researched a bit it seems its a bit complicated to make each column a fixed width.
If the content is larger than the width then it can make the column expand. Its important
to know the width of the body the columns are going into, and how much width (combined)
the contents of each column will be, including things such as padding/margins/etc.

Very interesting.

Looks like once again the forum has answered my question! The table solution seems to be the right way to go...would it require modifying any of your settings in the main style.css regarding the widgets and their display (block) settings?

And if I want the titles of the widgets on my main page to be different from the sidebars, what would be the best route to style them? Should I just make custom settings or do I need to modify the original css?

Thanks!

You should be able to give each widget its own title regardless of where you put it, into the existing widgets areas in the sidebars or into the newly created widget areas. The before_title, after_title stuff from above is just a way to style the widgets and their content differently depending on where you put them. after_title etc is not meant to provide different title text. You could have a "widget area A" and a "widget area B". By giving area A and area B different HTML tags, i.e. different classes, when you create them in functions.php, you'll get this: Put Widget XY into area A and it looks (= is styled) differently than it is when you put it into area B. But the Widget XY can only be in A or B, it cannot be in both area A and area B at the same time. You can have text widgets in several different widget areas at the same time but those wouldn't be the exactly same widgets. They would be "text widget 1", "text widget 2" etc. The RSS widget can also be used multiple times, but it would also be multiple instances, not identical copies.
I may have misunderstood your question


In functions.php, right before

PHP Code:

} 
# Load functions 


add this:

PHP Code:

    register_sidebar(array(
        'name'=>'Anything, such as Widgets Left',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    ))  
    register_sidebar(array(
        'name'=>'Widgets Middle',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    ))  
    register_sidebar(array(
        'name'=>'Widgets Right',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="widget-title"><h3>',
        'after_title' => '</h3></div><div class="widget-content">',
    )) 


Then address the new widgets either by their ID or through their parent container, the table cell:

HTML/CSS Inserts -> CSS Inserts, accessing each widget through its parent container = table cell

td.widget-left div.widget {
....  /* style the widget container */
}
td.widget-left div.widget-title {
....  /* style the widget title container */
}
td.widget-left div.widget-title h3 {
....  /* style the widget title text */
}

Repeat this for td.widget-right and td-widget-middle. To give all widgets in the new widget table the same styling, CSS Insert

table#widget-table div.widget {
 ....  /* style the widget container */
 }
table#widget-table div.widget-title {
 ....  /* style the widget title container */
 }
table#widget-table div.widget-title h3 {
 ....  /* style the widget title text */
 }

And into index.php put the following code wherever you want to have this widget table. For instance right after <?php get_header(); ?> to put it on top of the middle column (of the Atahualpa layout), or right before <?php get_footer(); ?> to put it at the bottom of the middle column:

PHP Code:

<table id="widget-table" style="width: 100%; table-layout: fixed">
<colgroup>
<col style="width: 200px" />
<col />
<col style="width: 250px" />
</colgroup>
<tr>
<td class="widget-left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : endif; ?>
</td>
<td class="widget-middle">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : endif; ?>
</td>
<td class="widget-right">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : endif; ?>
</td>
</tr>
</table>

@amber: See above for a way to fix the expanding columns by giving the table a fixed layout and colgroup. The code above will make the table span the available width of the parent container, i.e. the middle column of the Atahualpa layout, the left column will be 200px, the right 250px, and the one in the middle will fill the available space. Note that the column widths of the table are being controlled through colgroup, not through the TD's directly.

Well, that works even less than the regular tables. (At least in Firefox).
Now the widgets are stepped, plus the left and middle overlap,
and the right widget continues to spilling over and
out of the body and into the right side of the page.

And even though this was inserted only in index.php, its now causing
the widgets to show up on every page.

I do appreciate your quick response you have made to the problem though.
Obviously this isn't an easy one!

hi flynn, i think you got the gist of my question. it was more about having multiple styles for the widget titles.

so, I gave the table an id as you indicated, and updated an external style sheet. the table idea was fantastic, now I would just like to style the h3 in the "widget table" with an underline and left border, but it isn't coming out that way.

i left your original stylings on the table and on the functions page in place, and styled using all your examples.

the sheet is here: midriffrecords.com/midriff.css (it's the first item)

the table is on the index.php here: midriffrecords.com/midriff_TEST

even tho they are in different directories, i made sure they're linked.

i think at this point it is just a css error on my part but i can't find it...any thoughts? thanks!

tony

Hi Flynn,

Though they fit into the 200px or whatever, there's odd padding between
each widget area.

The good part about the code is it works (kindof) with the other widgets I'm using, at least they don't
overlap each other now.

But its weird that putting the code right after
<?php get_header(); ?>
on index.php inserts the widgets into the body of every page.
that's not supposed to happen, right?

Lastly, the basic wp text widget doesn't work with Atahualpa, or at least in this instance.

Post a URL please. If your widget is too wide for the width of the given table cell something needs to be done or happen with the widget, it needs to overlap, hide, be cut off, resize or expand the table cell and/or the table. All the CSS in the world cannot help with that without doing any of the aforementioned.

Hi Flynn,
Here's the url.

http://synchronicitysandbox.com/

Are you saying that each widget needs to be formatted
to fit the particular pixel area set up for it using
the table coding you provided above?

I see nothing odd or overlapping.

The table cells simply need some more styling. It seems you've looked around to find a solution to the few problems that come with using tables for layout. The fixed-layout/colgroup technique I posted above solves those problems.

Add valign=top to each one of the three table cells, and add a padding to each table cell through CSS.

PHP Code:

<table id="widget-table" style="width: 100%; table-layout: fixed">
<colgroup>
<col style="width: 200px" />
<col />
<col style="width: 250px" />
</colgroup>
<tr>
<td valign="top" class="widget-left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : endif; ?>
</td>
<td valign="top"  class="widget-middle">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : endif; ?>
</td>
<td valign="top"  class="widget-right">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : endif; ?>
</td>
</tr>
</table>

You can add a width to the middle column as well by changing this in the code above <col /> to <col style="width: XXXpx" />

CSS Insert for the padding for the 3 table cells:

td.widget-left, 
td-widget-middle, 
td.widget-right {
padding: 0 10px 10px 0;
}

Or without right padding for the right column, and no bottom padding for any column

td.widget-left, 
td-widget-middle {
padding-right: 10px;
}

Thank you! It works perfectly now.

Hi there,

I am trying to use this to put the three widgets in the table into my custom 'home' page which is titled 'main'

I have my WP Admin -> Settings -> Reading: Set to show static pages, with 'Main' set up as the Front Page and 'The Blog' set up as my Posts Page.

The code to initialize the widgets has worked fine, they have been turned on and the table works fine, I have been able to edit the width of left and right to tweak the way the widgets look. However, I can't get the widgets to show on my 'Main' page, they are only showing on the 'The Blog' page. All my pages have been created from a template off of 'index.php' and the widgets don't show on my third page, only the second (Post Page) one.

If I try and install the command

PHP Code:

<?php if ( is_front_page() ) { ?>

into the table, either at the very start (followed by the endif at the end of the table, and even without it) or just before each line of:

PHP Code:

<td class="widget-left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : endif; ?>
</td>

nothing happens on the 'Main' page but the 'The Blog' page will completely vanish everything into a blank white page if clicked.

I was also having trouble trying to remove the text of 'Main' from the very start of the page, is there a simple fix for this too?

the link to my site is www.hhworld.net/blog and from there you can see the widgets working on the 'The Blog' page.

hope you can help!

http://www.hhworld.net/blog/?page_id=14

I've been working on this all day, and I can't get it to work. I don't know if it just doesn't work with WP2.8 and Atahualpa v3.3.3 or if I'm just too stupid to get it. The "best" and only thing I seem to be able to do is a database error when I edit functions.php.

Can anyone help me? I've been trying to merge post #12 and post #18, am I missing something?

Hi,

I'm using Atahualpa 3.2 where I'm using three sidebar columns (left, middle, right) with widgets on the start page. I have some trouble with the margin and padding between the different sidebars when viewing another pages.

There's no problem when viewing the start page but when viewing another page there's a 15px left padding on the middle sidebar: http://bit.ly/aPvhq

And when viewing an entire page with only the middle sidebar i also got a 15px right padding: http://bit.ly/Yojxe

I understand it's because of the td#middle left/right-padding preference but I can't get the middle sidebar with margin on the right or left side on the start page without this preferences.

Any help Appreciated.

Best,
Sebastian

I am using Atahualpa 3.4.1 and WordPress 2.8.3.
We are trying to create a profile page with only 3 horizontally cell for widgets in the center column and no sidebars. We want the header and footer to stay the same, but for some reason we're having problems with setting it up, even with reading through the previous postings and still can't get it to work. Is this because the theme has been updated and something has changed?

Awesome information, but doesn't seem to be working with 3.4.2.

I followed all the information, and configured my "main body widget", as I'd called it. When I put into "index.php", nothing showed up. I placed the code in several places but no joy. (http://jdwrite.com/karate)

updated: This didn't work when I put the second part of the code in the "index.php" file, but DID work when I put it in "page.php".

Thanks!

Can you add center widgets to other pages besides the front page?