[download id="4"]

For reason way beyond me, WordPress staff can find more time tracking the issue, changing it to a “future release” milestone, then decide to change the status from “new” to “closed”, set the resolution to “wontfix” (what a great resolution!), and then remove the milestone “Future Release”, and add the bold comment: “we’ll reopen if/when we’re interested.” source: WordPress Trac

I’m sure it must have been easier to remove the erroneous code: role="search" from the function that generates the search widget.

Here’s a quick trick to avoid these validation errors

Create your own search form

By creating your own searchform.php, you override the one WordPress uses by default, so it’s an easy fix. Using a text editor, like notepad, create a new file, and simply insert the following code:

[php]<form method="get" class="search-form" id="search-form" action="<?php bloginfo( ‘home’ ); ?>/">
<div>
<label class="screen-reader-text" for="s"><?php _e(‘Search for:’); ?></label>
<input class="search-text" type="text" name="s" id="search-text" value="<?php _e(‘Search this site’); ?>" />
<input class="search-submit" type="submit" name="submit" id="search-submit" value="<?php _e(‘Search’); ?>" />
</div>
</form>
[/php]

then save this file in your theme folder, and name it searchform.php.

From now on, your custom searchform will be used by the widget, and there will be no more validation errors.

In the following steps we will:

• Step 1: Create a new page template based on page.php
• Step 2: Modify the new page template
• The finished code

Note, this code is provided “as is” by me, not officially endorsed or supported by iThemes. Furthermore, I do NOT vouch for support for IE6. I have tested this code in IE7, IE8, Firefox, Google Chrome Safari and Opera. If it works in IE6, that’s great, if it doesn’t: bad luck.

All modifications in one file

This time, I have decided to keep all required modifications within the page template. Although some will argue that CSS code has no place inside the main page code (and will actually generate a validation warning), it will make upgrading the theme a lot easier. If you do not want the code inside the page template, you will need to modify the stylesheet style.css AND the header file header.php. On request, I can add instructions to do so at a later stage.

By keeping all code in one file, there is no risk of overwriting your modifications during a theme upgrade, nor do you have to re-apply the modifications after such an upgrade.

Prerequisites:

• iCompany/iCar or iRealEstate theme (version 1.6.2 used for this example) installed on WordPress
• ability to use the WordPress theme editor: WordPress codex on Editing Files
• ability to upload a file to your WordPress theme folder

Step 1: Create a new page template

Use the base code from the page.php file to create a new page template. Name the file page_tabber_only.php and upload/save the file in your theme folder.

More: WordPress codex on Page templates

Step 2: Modify the new page template

Apply the following changes:

• Add the header info to indicate this is a page template
  [php]
  <?php
  /*
  Template Name: Page tabber only
  */
  ?>
  <?php get_header(); ?>

  <!– <?php echo basename( __FILE__ ); ?> –>
  [/php]

• Add the required CSS code

  This will ensure that the grey sidebar will not show by using another background image, and that the content will span the available width (700px).

  [php]<style type="text/css" media="screen">
  /*********************************************
  css for page_tabber_only page template
  *********************************************/
  #container {
  background: url(<?php bloginfo(‘stylesheet_directory’); ?>/images/container-bg.gif) top center repeat-y;
  }

  #inner_tabber_only {
  display: block;
  float: left;
  width: 100%;
  margin: 0px; padding: 10px 15px;
  }
  </style>[/php]

• Change the div containers content and inner:

  remove the inner class from the content div, and replace the inner div with inner_tabber_only.

  [php]<div id="content" class="clearfix">

  <div id="inner_tabber_only">[/php]

• Remove the inclusion of the r_sidebar_page.php file

The finished code

Your entire page template now should look like this:

[php]
<?php
/*
Template Name: Page tabber only
*/
?>
<?php get_header(); ?>

<!– <?php echo basename( __FILE__ ); ?> –>

<style type="text/css" media="screen">
/*********************************************
css for page_tabber_only page template
*********************************************/
#container {
background: url(<?php bloginfo(‘stylesheet_directory’); ?>/images/container-bg.gif) top center repeat-y;
}

#inner_tabber_only {
display: block;
float: left;
width: 100%;
margin: 0px; padding: 10px 15px;
}
</style>

<div id="content" class="clearfix">

<div id="inner_tabber_only">

<?php if (have_posts()) : while (have_posts()) : the_post(); // the loop ?>

<!–post title–>
<h1 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h1>

<!–post text with the read more link–>
<?php the_content(); ?>

<!–for paginate posts–>
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

<?php //comments_template(); // uncomment this if you want to include comments template ?>

<?php endwhile; // end of one post ?>
<?php else : // do not delete ?>

<h3>Page Not Found</h3>
<p>We’re sorry, but the page you are looking for isn’t here.</p>
<p>Try searching for the page you are looking for or using the navigation in the header or sidebar</p>

<?php endif; // do not delete ?>

</div>

</div>

<?php include(TEMPLATEPATH."/tabber.php"); ?>

<!–include footer–>
<?php get_footer(); ?>
[/php]

And that should be it.

Initially, Flexx was shipped without the additional Page Templates. Once these were implemented, we felt that we could increase functionality, by creating separate widget sections for these pages. That is when the Page widgets where created.

The following image shows the original Flexx setup, widget sections indicated in the Red Box. The additional widget sections that were added when the page templates were added, are in the Blue box.

So all “normal” pages (those using the default Page template), and pages such as the home page, the posts, single post pages, archive and category pages all use the widgets from the Red section.

Pages using any of the Page templates

• Page with Left Sidebar (narrow layout)
• Page with Left Sidebar (wide layout)
• Page with no Sidebars (narrow layout)
• Page with no Sidebars (wide layout)
• Page with Right Sidebar (narrow layout)
• Page with Right Sidebar (wide layout)
• Page with Split Sidebars (wide layout)

will use the same Top and Bottom widget sections, but different widget section for the sidebar. These are indicated in blue.

So, with that in mind, here’s how the widgets on pages using a Page template are populated:

In a default and fresh theme installation of Flexx, the option to “Identify Widget Areas” is set to yes. This will indicate on each page where widgets may appear, and what widget section is used.

So we realise that the extra Flex that we wanted to put in Flexx has created some confusion. We also realise that the confusion will increase once you change your theme to another iThemes theme, and then perhaps back to a Flexx theme, or when you change the layout in the theme settings. There may be residu from the previous setup that can create an issue in the new setup. To solve this, the reset options function has been added to the theme settings. Using that function will reset your entire widget setup, so you need to be aware of that.

Other issues:
In some cases, the fancy drag-and-drop in WP 2.8+ will not work as expected. This is a WordPress issue, and to circumvent that, WordPress has introduced accessibility mode

To activate accessibility mode, click on screen options in the right top of your widgets panel, and enable accessibility mode:

Finally, other issues may arise from file and folder permission settings. This is neither a WordPress nor a theme issue, but can cause unpredictable results. I always suggest to install and activate the WP security Scan plugin, and check the scanner settings to identify any of these.

I hope, as usual, this helps a bit.

Then go back into theme selection, and re-select your desired theme. Upon activation, you will see this message at the top of the screen.

Click the widgets settings page link, and you should be able to gain back control over your widgets.

It’s IM, e-mail, twitter, calendar, scheduler and more in one collaboration application. Not in a suit of applications, but integrated into one application. Google Wave will be released end 2009, so be prepared. API developers can already get there hands on it and request sandbox access.

Watch the video here:

Follow these steps carefully and you will have a page with header, a white page, and footer credits only.

In the following steps we will:

• Step 1: Create a new page template based on page.php
• Step 2: Modify the new page template
• Step 3: Add styling to the stylesheet
• Step 4: Modify footer.php to take out the bottom blocks

Note, this code is provided “as is” by me, not officially endorsed or supported by iThemes. Furthermore, I do NOT vouch for support for IE6. I have tested this code in IE7, IE8, Firefox, Google Chrome Safari and Opera. If it works in IE6, that’s great, if it doesn’t: bad luck.

Prerequisites:

• bSocial theme (version 1.1.0 used for this example) installed on WordPress
• ability to use the WordPress theme editor: WordPress codex on Editing Files
• ability to upload a file to your WordPress theme folder

Step 1: Create a new page template

Use the base code from the file page.php to create a new page template. Name the file page_no_sidebar.php and upload/save the file in your theme folder.

More: WordPress codex on Page templates

Step 2: Modify the new page template

Apply the following changes:

• Add the header info to indicate this is a page template
• Change div container inner to inner_wide
• Change div container content to content_wide
• Comment out the inclusion of the sidebar.php file
• Comment out the horizontal line with the shadow

Your page template should look like this:

<h1 id="post-">








<!--
 -->

Step 3: Add styling to the stylesheet

We need to add styling for the wide content areas. The vertical line that borders the current content left and right is contained in an image. We will take out that image so that leaves us with a plain white area spanning the entire site width.

Add the following code to the end of your stylesheet style.css:

[css]
/*********************************************
Additional Styling for page without sidebars
*********************************************/

#content_wide {
float: left;
margin: 0px;
padding: 25px 50px;
width: 90%;
display: block;
border: 0px solid black;
}

#inner_wide {
background: #fff;
}

#content_wide h1 {
font-family: "Arial Black", Arial, Helvetica, Sans-Serif;
font-size: 14px;
line-height: 46px;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
padding: 0px 15px;
color: #FFF;
background: #000 url(images/filmstrip.gif) repeat-x;
}
[/css]

Step 4: Modify footer.php to take out the bottom blocks

If you wish to take out the footer blocks with the “About” and “Navigation” area as well, you should add a condition to the code to make sure this code will only be included IF the page template is not the one you’ve created here. This will ensure that the footer will be displayed as intended on all other pages.

It is vital that you use the exact same name as you did in the first step, so in this case page_no_sidebars.php.

In order to achieve this, we use conditional tags, in this case, the is_page_template? condition.

Your footer code should look like this.

[php]
<?php global $wp_theme_options; ?>

<?php if (!is_page_template(‘page_no_sidebar.php’) ) { ?>

<div id="bottom" class="clearfix">
<?php if(is_home()) : ?>
<div id="video">
<h3>Video of the Week</h3>
<div class="videowrap">
<?php echo stripslashes($wp_theme_options['feature_video']); ?>
</div>
</div>
<?php else : ?>
<div id="about">
<h3>About</h3>
<?php echo stripslashes(nl2br(nls2p($wp_theme_options['about']))); ?>
</div>
<?php endif; ?>

<div id="nav" class="clearfix">
<h3>Navigation</h3>
<div id="navwrap" class="clearfix">
<div id="navcats">
<ul>
<?php if($wp_theme_options['include_pages']['0'] == ‘home’) { ?>
<li><a href="<?php echo get_settings(‘home’); ?>"><?php _e("Home"); ?></a></li>
<?php } ?>
<?php //Lists pages, only pages selected in theme options ?>
<?php if($wp_theme_options['include_pages']) $include = implode(",", $wp_theme_options['include_pages']); ?>
<?php $my_pages = "title_li=&depth=1&sort_column=menu_order&include=".$include; wp_list_pages($my_pages); ?>
</ul>
<ul>
<?php //Lists categories, only categories selected in theme options ?>
<?php if($wp_theme_options['include_cats']) $include = implode(",", $wp_theme_options['include_cats']); ?>
<?php $my_cats = "title_li=&number=7&hide_empty=0&hierarchical=0&orderby=ID&include=".$include; wp_list_categories($my_cats); ?>
</ul>
</div>

<div id="navsocial">
<?php
$Social = array( ‘twitter_url’=>$wp_theme_options['twitter_url'], ‘technorati_url’=>$wp_theme_options['technorati_url'], ‘facebook_url’=>$wp_theme_options['facebook_url'], ‘feedburner_url’=>$wp_theme_options['feedburner_url'], ‘youtube_url’=>$wp_theme_options['youtube_url'], ‘delicious_url’=>$wp_theme_options['delicious_url'], ‘myspace_url’=>$wp_theme_options['myspace_url'], ‘digg_url’=>$wp_theme_options['digg_url'], ‘flickr_url’=>$wp_theme_options['flickr_url'], ‘stumble_url’=>$wp_theme_options['stumble_url'], ‘netvibes_url’=>$wp_theme_options['netvibes_url'], ‘newsvine_url’=>$wp_theme_options['newsvine_url']);
$i = 1; foreach((array)$Social as $label=>$social) {
if($social && $i <= 10) {
echo ‘<a href="’.$social.’" target="_blank"><img src="’.get_bloginfo(‘template_directory’).’/images/social/’.$label.’.gif" alt="" /></a>’."\n"; $i++;
} } ?>
</div>
</div>
</div>
</div>

<?php } ?>

<div id="footer">
<!–footer.php–>
© <?php print date(‘Y’); ?> <?php bloginfo(‘name’); ?> :: <?php _e("Powered by"); ?> <a href="http://wordpress.org/">WordPress</a> :: <a href="http://churchtheme.com/bchurch/">bChurch Theme</a>.

<!–necessary–>
<?php wp_footer(); ?>
</div>

</div><!–end #wrap–>
</div><!–end #container–>
</body>
</html>
[/php]