2010 Weaver Theme Documentation -- Version 1.6

See Version 1.6 Release Notes for new features and changes.

If you are upgrading from an earlier version of 2010 Weaver, after you install it, please go to the 2010 Weaver Main Options Admin page and click "Save Current Settings" - even if you haven't made any changes. This will ensure that all the options are correctly set.

Table of Contents

The 2010 Weaver (Weaver) WordPress theme is derived from the WordPress 3 standard Twenty Ten theme. 2010 Weaver allows you to change many of the colors and other aspects of the standard Twenty Ten theme. In addition, it allows you to easily add whatever special code you might need (such as advertising tracking code), all without having to get into the depths of WordPress theme code. It also has many per page and per post options, along with many page templates, that will allow you to totally customize the look of your site.

Weaver allows you to build a custom site look by tweaking many of the style rules for your WordPress blog. You can get a very customized look just by picking colors and layout options. While the Main and Advanced Options control panels may look overwhelming, they really aren't that hard to use once you play with them a bit. This Help document has lots more information to help you design your own site look by changing many of the the standard Twenty Ten theme styles. Don't know what a style is - don't worry, you just have to pick colors and click on check marks.

For more advanced developers, there a many options for fine tuning. These include custom CSS, options to add HTML to various areas of the screen, and several ways to display posts in places other than the standard blog page.

How to get started:

  1. Select one of the predefined sub-themes. There are over twenty to choose from.
  2. Go to the Main Options panel. You'll see a list of options you can change. Play around with them, and see how the theme you selected changes. This may be enough to get a custom theme you like.
  3. If you have ad-sense code, or other code from a similar site, you can easily add it to your site in the Advanced Options panel.
  4. Finally, read the help page. There are lots of tips there, as well as fairly detailed explanations of exactly which CSS rules Weaver supports, and hints on how to go beyond the basics and really customize your site.

Twenty Ten Weaver?

Previously, there were two different versions of Weaver: Twenty Ten Weaver and 2010 Weaver. There was a subtle technical difference between the two versions, but as of Version 1.5, only the 2010 Weaver version is available.

Using With WordPress Multisite

2010 Weaver will work with no additional settings on WordPress Multisite installations. Because the Advanced Options tab allows people to add JavaScript, the Advanced Options and Save/Restore tabs may be partially disabled by changing a value in the Weaver wvr-settings php file. Administrators of Multisite installations can edit the /wp-content/themes/2010-weaver/wvr-settings.php file and change the 'TTW_MULTISITE_ALLOPTIONS' definition to false, which will then disable the potentially unsafe options Advanced Options and Save/Restore tabs. This setting might make a Multisite installation slightly more secure. Weaver does follow the 'unfiltered_html' capability, which means that users below Editor capability will be able to enter only a limited set of HTML. (On a Multi-site installation, this seems to apply to the base site "Super" role. An Administrator of a user site that doesn't have Super-Admin or Super-Editor capabilities will be restricted to 'unfiltered_html' capability.)

All About the Home Page

Your Home Page is the one that is displayed when a visitor enters the address of your WordPress Site. Normally, your blog will serve as the home page, and WordPress will automatically add a Home item as the first item on your menu bar. If you instead want a static page as your home, you can go to the dashboard Settings->Reading menu, and click the "A static page" option, and specify an existing static page to serve as Home. (It will be called Home on the menu even if it has a different name when you created it.) If you don't want a blog at all, you can leave the "Posts page" option as '--Select--', and no blog will be displayed. If you specify the name of an existing static page, then the default blog will be displayed using the title of that page. The content of that page is ignored.

Weaver gives you options on just what appears as your home page. The Main Options, Header Options section has an option called "No Home Menu Item". If you check that, the automatically generated Home menu item goes away. That means if you have your blog set as the home page, there won't be a Home menu item to get back to it, but entering just your site name will get you to the blog.

All that can be very confusing, to say the least. Here's how to get exactly what you want as your Home page.

  1. Create a static page that you want to serve as your Home page - If you want it called Home, then give the page Home as its title. Add content as needed. If you want this page to be your Blog Posts, then use the Page with Posts template when you create the page, and check the 'Hide Page Title' in the Per Page Options section. Don't add any additional content.
  2. Check the 'No Home Menu Item' option in the Main Options:Header Options section.
  3. On the Settings->Reading menu, check the "A static page' option, and specify the page you defined in step 1 as the Front page. Set the Posts page top to '-- Select --' if the static front page you specified will be your blog page or you don't want any blog page at all. If the blog will be on a non-home page, then enter the name of a blank place holder for the blog, as usual.
  4. You can use a Page with Posts page as your blog page, either as the Home page, or as a secondary page. Step 1 explained how to make it your Home page. Use the method of Step 3, and set the Posts page option to --Select--. You can also add filters to the page to control just which posts are displayed -- something you can't do if you use the default Home page.

Design Hints

This section has a few hints on designing your own theme.

Choosing Colors

Good themes use related colors. Many times (but not always), when you look at the Main Options page, you'll notice that all the colors of the should "look good". They don't have to, but having a nicely matching set of colors.

The color picker has an interesting feature. Once you pick a color from the left section, the right bar shows different brightness levels of that color. This is especially useful for making a color lighter or darker.

Some themes use the same colors for all links, some vary. But using the same link hover color for all the different kind of links lends consistency to your theme. The same is true for the other colors - try for a consistent look in your theme.

Testing

There a a couple of tricks that can help make testing you theme easier. First is the preview window at the bottom of the theme settings tabs. However, you might find it easier to open a new tab in your browser. Open the theme admin page on one tab, and the main site on the other. After you make a change (and save them), you can toggle to the second tab and refresh the page.

Another important thing is to change just one thing at a time. This may seem to take longer, but you will really be able to see the effect of your change this way and be sure it does what you want.

Saving Option Settings

After you make any changes to the values of the Main or Advanced Options, you must save your changes. If you navigate away from the design tabs without first saving your values, everything will be lost. This is typical behavior for most WordPress settings screens.

After you save your settings, the preview window at the bottom of the 2010 Weaver admin page will be updated to show the effects of your settings.

Saving Your Own Theme

Once you have a design you like, you can click the "Save in My Saved Theme" button near the bottom of the Main Options tab to save your theme. You restore that saved theme by selecting it from the Sub-Theme list. Your saved theme will then overwrite all options, including the Advanced Options. This is the one way to preserve all your work, so when you get something you like, save it. You can then fiddle and fine tune more without losing your previous work.

You can also use the Save/Restore tab to save your theme definition to a file on your computer, or a file on your site. You can later restore the definitions, or even use them on another Weaver site. If you are experimenting, it is a good idea to save copies of your work so you can get back to where you were.

Sidebar and Content Widths

This table gives the maximum width of the usable areas of sidebars and other areas depending on which sidebar scheme you've selected - using the standard width of 940px. Usable area is the maximum width of an image you could put in the area and still maintain the appropriate margins in area. These numbers will change if you use a custom theme width.

  Content Content
(single col)
Primary
Widget Area
Secondary
Widget Area
Footer
Widget Areas
Top/Bottom
Widget Areas
Default sidebar
1 right
670px 800px 210px 210px 220px 570px
Right sidebar
wider
590px 800px 290px 290px 220px 510px
One Left 630px 800px 210px 210px 220px 590px

Two sidebars
left and right

460px 800px 200px 200px 220px 390px

Two sidebars
right side

490px 800px 210px 160px 220px 410px
Two sidebars
left side
500px 800px 205px 160px 220px 410px
No sidebars 860px 800px n/a n/a 220px 790px

 

Weaver Predefined Sub-Themes

Weaver comes with over twenty predefined themes. You can use them as-is, or as a starting point for your own designs. When you select a new sub-theme, all the options values from the 2010 Weaver Main Options are cleared and set to the new values of the sub-theme. Most of the Advanced Options are not changed - except the Predefined Theme CSS Rules are set to the values required by the new sub-theme.

To select a predefined theme, pick one from the "Select a theme" list, and click the "Set to Selected Sub-Theme" button. The name and small thumbnail of the currently selected theme is displayed on the right. Now you can open the Main Options Tab to start customizing the theme in ways you like.

Weaver Main Options

The Main Options tab provides you with over 100 "checkbox" options for customizing your theme. This might seem overwhelming at first, but the options have been grouped according to the part of the theme they affect. Each option includes an explanation as to what it does, often with extra information about using the option. It will be worth your time to scroll over all the options just to get an idea of all the things you can customize. Many of the options have been added after multiple requests from users on the Weaver Forum, and may not be anything you care about. Remember, these are options - it is unlikely that any one site design will use all the available options.

The options have been organized according to the different parts and functioning of your site's pages. The top of the Main Options page has a sub-menu that let's you quickly jump to each section, or you can scroll over the whole page.

Color Selection

Please note that you can provide values for the color boxes in a couple of ways. The easiest way is to click on a color, and a color selection palette will pop up. You can also provide values directly. This includes hex values as well as text values. The text values can include standard web colors such as red, blue, etc.; transparent; or even rgba() values. This gives you maximum flexibility for specifying colors.

CSS Options

For more experienced users, it is easy to add extra CSS styling to any of the elements included in the Main Options tab that have a color setting. When you click on the + next to the CSS tag, a new input area will open. You can enter CSS style rules, enclosed in {}'s. These rules will be associated with the specific area that the color specifies. There are essentially two kinds of color setting options - a background (BG) color, and a text color. The CSS you add to the pop-open CSS box will apply to the associated area. In practice, it doesn't matter if the option is a BG or a text color - the rules will apply to the same item.

Please see the CSS Help tab to get more details on using this feature.

 

General Appearance

The General Appearance section contains options that affect the overall look of your site, including both content and widget areas. These combine to give your site it overall look, including things such as fonts, width, borders, and more. The entire site is overlaid on the Wrapper, Main, and Container areas. You might want to experiment with primary colors (e.g., red, green, blue) just to get an idea of how they fit into the big picture.

Header Options

The Header Area seems is at the top of your site, and really gives the world the first impression of your site. Thus, there are many options for tweaking the site Header.

Weaver supports up to two menu bars. With no additional action, your menu will be built automatically using the pages you've defined (using the Page Attributes parent and order settings). Display of your posts (blog) in the menu is determined by how you've set the main Settings->Reading Front page displays options. To use a second menu, you'll need to use Appearance->Menus, and define the Secondary Navigation menu. If you define the Primary Navigation menu, it will be used instead of the automatic menu generation. Note that by using the Page with Posts template to create a blog page, combined with the Reading Front page displays setting, and the No Home Menu Item, you have complete control over menu content and blog display.

You also have several options for controlling basic display of the Site Title and Description (set in the Settings->General panel). If these settings don't give exactly what you want, the very best way to get exactly what you want is to use a photo or image editor to add exactly the site logo or title you want - you can simply hide the default display of the site title and description in that case.

You can control the height of the header image used, including specifying a height of 0 if you don't want any image. The header image will always be displayed using the site's full width. The default is 940px width by 198px high. You can also control how much space is displayed after the header and before the content.

This theme (based on its Twenty Ten origins) has automatic header image support for posts that include a Featured Image. You can disable that behavior in this section.

For ultimate control of the Header, it is possible to completely replace it on a site wide or per page basis using the Site Header Insert Code boxes on the Advanced Options tab or using the equivalent per page options.

Footer Options

The Footer Options control basic Footer appearance.

Content Areas

The Content Areas section covers options that affect both your static page content, and blog post pages. These options all work as explained. The Page Title Text option is slightly different in that it applies only to static pages, and not to blog post titles. Each blog post title is actually a link to the full view page of that post, and uses the Post Entry Title Link value in next section to set the title color. It seems common practice to have both the Page Title and the Post Entry Title the same color.

Post Page Specifics

Next to the Header, it seems that control of just how Posts (blog articles) are displayed is something many people want. This section discusses some of the things you can control.

Post BG

This will change the background color of just the post. This can be used to highlight each individual post. You can also add CSS to this option to change the font color ({color:#xxxxxx;}) or add a border with a bit of padding ({border: 1px solid black;padding:5px;}).

Post Entry Title Link

The title of each post is a link, and controlled by the three link colors shown here. Note that the Bar under Titles option in the Content Areas section also controls this title.

The Info Lines

Each post has two information lines (also called Meta Info). The line right after the title has the date of the post and the author. The last line of the post has the post's category, tags, and link for comments. You can control the appearance of these Meta lines in several ways. The two Info BG color settings let you put a background color behind the Meta lines if you wish, and you can add CSS to them for more effects. You can use the default Meta info wording and | separators, hide those, and use Icons for each part of the meta info. You can selectively hide different parts of the meta info. (Comments will always be displayed if they are enabled and associated with a post.) One of the design features of 2010 Weaver is that it is language dependent on the Twenty Ten theme's user interface wording. Thus, it is not possible to change the wording such as Posted on date by author. If you don't like that wording, you can hide it and use icons instead. Unfortunately, if you want to hide the author, you will probably need to hide the wording since the "by" can't be hidden on its own due to the way the translation string was defined by Twenty Ten.

Full Posts and Excerpts

Posts are displayed in three distinct places: the main blog page, when part of a specified list (archives, categories, author, etc.), or when displayed as a single page by itself. The full content of a post is always displayed on the single page view. The blog page also displays the full content of a post, unless you've manually added the <!--more--> tag, which then causes a "Continue reading..." message to be displayed on the blog page. In special list views (archives, etc.), posts are displayed as excerpts. These excerpts are normally 55 words long, with all images, formatting, and links removed. You can adjust the excerpt length. You can specify to display full posts on special post list pages, and display posts as excerpts on the main blog page (which can be combined with the Featured Image to generate nice looking post list). These can also be controlled on a per post basis from the Edit Post page. Note that checking a display as full post option does not override your manual placement of <!--more--> tags.

The Featured Image

You may have seen the Set Featured Image option on your post and static page edit panel. What is it good for? With Weaver's new options, it is good for a lot. The old, default Twenty Ten behavior was to display the Featured Image as a replacement header image for pages and post where it was set. That still works (as long a the Featured Image is as wide as the standard header image). An option to stop that behavior is included in the header section.

In addition, you can now have the Featured Image be automatically displayed whenever you display a post - in any combination of excerpted posts and full length posts. Here's how:

  1. Click the Set Featured Image from the post/page edit panel. It is usually on the lower right. (To change the Featured Image, you first have to delete the current one, and then set a new one all over.)

  2. Pick an image. This will pop up the Add Media interface. After you upload a new image, or pick one from your media library, you'll be shown the info about the image. Important step: at the bottom, click the Use as featured image link. Close that box.

  3. Select one or both of the Weaver Main Options tab options in the Post Page Specific section: Show Featured Image for full posts and/or Show the Featured Image for excerpted posts.

For excerpted posts, a thumbnail will be displayed at the top left of the post. For full length posts, the full image will be displayed at the top of the post.

Other Options

You can set the background color for sticky posts. (Add {border:none;padding:0;} to the CSS of the Sticky Post BG option to make sticky posts look like other posts.)

You can control author information display, as well. You can also show the author's avatar (as defined by a gravatar.com account, for example) on each post. By default, if the author has included biographical information on author's account settings page, that information will be included when the post's single page view is displayed. You can hide that.

When a visitor clicks on a image thumbnail, an attachment page will open up with the full sized view of the image. If you want your visitors to be able to leave comments for that image, check the Allow comments for attachments box.

 

Widget Areas

The Widget Areas section controls the appearance of the various widget areas. The options are fairly straight forward with a couple of exceptions. Also, you have great flexibility on which sidebars are displayed when using the Per Page options from the Edit Page screen.

You can add your own border specifications to any of the widget areas by adding appropriate CSS border styling to the areas BG color option. See the CSS Help document for more information about that.

The Horizontal Footer Widget Area Blocks option allows you to specify how may horizontal blocks are used to display the 4 footer widget areas. By default, 4 blocks are used to display up to the 4 widget areas. If you use less than 4 widget areas, the footer can be a bit unattractive. This option allows you to specify 3 blocks if you use 3 widget areas. However, you can specifies fewer block than widget areas you've used. So if you've used all 4 footer widget areas, and specify 2 blocks, you'll get the widget areas stacked 2 over 2. The stacking isn't a grid, but will depend on the actual height of each widget area. You can mix, match, and reorder to get a decent looking set of widget areas.

Possibly the most confusing option is the Sidebar Border Adjust. This option might be come necessary if you use CSS to add new borders to widget areas, the main content area, or posts. Because Weaver is a fixed width theme (although you can adjust that width), it must calculate all the width interaction among the various areas. Because of the way borders are added to page elements, they can throw off the width calculation. The result will be evident if the sidebars display under the content area instead of at the side. Adding an even number to this option will help adjust the total width calculations. If your sidebars start to display incorrectly because of some styling you added, increase this value by 2's until the sidebars work correctly again.

Weaver Advanced Options

The Advanced Options page allows you to save pieces of HTML code required by third-party plugins and widgets. You can also use them to save Google Maps/Analytics/AdSense JavaScript snippets. You will need to understand a bit of HTML coding to used these fields effectively.

The values you put here are saved in the WordPress database, and will survive theme upgrades and other changes. When you select a new sub-theme, all the Advanced Options are left untouched (except the Special Theme Overrides, which are set by the new sub-theme). However, if you pick "My Saved Theme", then all Advanced options are replaced. The idea is that you can use the Advanced Options to set up things you want, and try different sub-theme looks without losing your work. But if you restore "My Saved Theme", then you should get back what you really saved.

PLEASE NOTE: NO validation is made on the field values, so be careful not to paste invalid code. Invalid code is usually harmless, but it can make your site display incorrectly. If your site looks broken after you add stuff here, please double check that what you entered uses valid HTML commands. Also note that backslashes will be stripped.


This input area is one of the most important options in Weaver for customizing your site. Code entered into this box is included right before the tag in your site. The most important use for this area is to enter custom CSS rules to control the look of your site. Note: The Snippets tab (above) contains many examples of CSS rules to customize your site. This field can also for entering JavaScript or links to JavaScript files or anything else that belongs in the <HEAD> . For example, Google Analytics code belongs here.

Note: You can also insert code into the <HEAD> section on a per page basis when you use the Edit Page editor. If you define a Custom Field named page_head_code for the page, then you can supply HTML for that page's <HEAD> section.


HTML Code Insertion Areas

The options in this section allow you to insert HTML code into various regions of you page. These areas must use HTML markup code, and all can include WP shortcodes. Important: You almost certainly will need to provide CSS styling rules for these code blocks, either as in-tag style="..." rules, or by adding CSS rules the the <HEAD> Section above. Note: Providing margin style values, including negative values, can be used to control the spacing before and after these code blocks.

This must be HTML markup code (including WP shortcodes), and will be inserted into the #branding div header area right above where the standard site header image goes. You can use it for logos, better site name text - whatever. When used in combination with hiding the site title, header image, and the menu, you can design a completely custom header.

Note that this code will be after or before the default Primary menu depending on the move menu setting. You can completely replace the default menu (hide it), but you will have to hard-wire the links to pages in your replacement menu.

If you hide the title, image, and header, no other code is generated in the #branding div, so the code here can be a complete header replacement. You will almost certainly need to add some CSS style, too. (We've added a class called ttw-center which you can use to div-wrap your insert code to center it:
<div class="ttw-center">[shortcode]</div>)

You can also override the CSS #branding rule, create a new div, or use in-line styling. One of the most flexible capabilities of the section is the ability to embed WordPress shortcodes. This might be most useful for adding a rotating header image using a plugin such as Meteor Slides or WP-Cycle.

For example, assume you've installed the Meteor Slides plugin, and have uploaded your rotating header images for the plugin to use. To add this slide show header image, you should first disable the default header image by setting the header image size to zero in the Main Options tab. Then, add this code to the Site Header Insert Code box:

<div class="ttw-center">[meteor_slideshow]</div>

Note that the built-in ttw-center CSS class will ensure the slide show is displayed properly. Without appropriate CSS styling, you may get unexpected placement of the plugin output. The ttw-center class will usually do what you want.

This code will be inserted into the site footer area, right before the before the "Powered by" credits, but after any Footer widgets. This could include extra information, visit counters, etc. You can use HTML here, so include style tags if you want! And like the Site Header Insert Code section, you can also use shortcodes.

Pre-Header, Post-Header, Pre-Footer, Post-Footer, Pre-Sidebar

These areas can be used to insert HTML and shortcodes in the given areas of a site page.


This block functions exactly the same as Site Header Insert Code when used with pages created with the Custom Header (see Adv Opts admin) page template. The template creates pages that use only this code to display a header (they don't use the standard site header image), plus the options below.


The Blank - (see Adv Opts admin) page template will wrap the content of an associated page only with the '#wrapper' HTML div surrounding the optional #header and #footer divs, and the #main div for the actual content. ('<div id="wrapper"><div id="header">header</div><div id="main">Content of page</div><div id="footer">footer</div>'). You will probably want to wrap your content in its own div with styling defined by a class added to the <HEAD> Section. Use Per Page Options on main Page edit menu to control Menu, Site Title, and Header Image visibility.


Weaver allows you to have as many widget areas you need that can be displayed on a per page basis. For example, using the Per Page options when you edit a page, you could have a different Top Widget Area, as well as different Primary and Secondary sidebars for every single page of you site if you wanted. You tell Weaver to create these areas by providing a list of Widget Area identifiers in this option area. The names should be letters, underscores, or numbers, and not include any spaces or other special characters. You can name them as you will - mytop,mytop2,myprimary and so on. These names are then used to specify which widget area to use on a per page basis. Note that some add-on widgets can have only a single instance defined to work properly, so if you have trouble having one work properly, check on that. Standard WordPress widgets don't have that restriction.


Every site should have at least "description" and "keywords" meta tags for basic SEO (Search Engine Optimization) support. Please edit these tags to provide more information about your site, which is inserted into the section of your site. You might want to check out other WordPress SEO plugins if you need more advanced SEO. Note that this information is not part of your theme settings, and will not be included when you save or restore your theme.


If you fill this in, the default copyright notice in the footer will be replaced with the text here. It will not automatically update from year to year. Use &copy; to display ©. You can use other HTML as well.


This code is inserted right before the closing </body> tag. This is the best place for your Google analytics code other final code that is not usually displayed.

Add CSS Rules to Weaver's style rules
Some advanced developers prefer that their custom CSS rules be added to the weaver_style.css file rather than included in the <HEAD> Section above. Any CSS style provided for this option here will be added at the end of the regular Weaver CSS rules. Do not add <style> and </style> to this option - just CSS. These rules will be saved with your theme .wvr file.


The entries in this field are usually generated by some of the example themes provided with 2010 Weaver. You may have to edit these rules to adjust the look, but it is generally better to use the regular <HEAD> overrides. (Note: this code is included before the standard <HEAD> section code above.)

Save/Restore Themes

Weaver saves all the options you've set in a format based on a PHP language tool. (PHP is the programming language used by WordPress.) You can save and restore your settings to a file in several ways.

You should note that if you make changes to the settings, they are saved in the "current" settings. If you then pick another Weaver sub-theme, for example, all those settings will be lost and replaced with the new theme. Thus, you really need to save your work if you want to be able to restore it.

The simplest way to save the settings is to save them to "My Saved Theme". The settings are saved in the WordPress data base. These settings will survive theme and WordPress upgrades, and as long as you're only using one theme, is perhaps the easiest way to save your work.

You can also save your settings to a file, either directly on your WordPress site's file system, or by downloading to your own computer (or both!). While the internal WordPress database almost always survives upgrades, the upgrade process has been known to fail. So it is always best to save a copy of your theme settings, and the best place for that is probably your own local computer.

For each of these save methods, there is a corresponding way to restore your settings.

 

Page Templates

Weaver provides you with several additional page templates for creating static pages.

  1. Alternative Sidebar Left - page with sidebar on left. There is a widget area called the Alternative Widget Area. The two Alternative Sidebar templates use the Alternative Widget Area exclusively - they don't use any other widget areas (except for the footer widgets).

  2. Alternative Sidebar Right- same, on right.

  3. Blank Content Area - Provides a totally blank content area inside the #wrapper div. (This means the page will match the overall look of your site.) It Al lets you provide totally custom HTML on a page. It doesn't show the page title you set when creating the page, nor does it display comments. You can optionally hide the header and footer areas using the check boxes on the Advanced Options tab. This template is good for entering raw HTML using the HTML editor tab. This page does not use any widget areas except when the footer is displayed, and will take the full width of the #wrapper area.

  4. Custom Header - Provides a standard page, but uses a new custom header block found on the Advanced Options page. Doesn't show standard header image, and you can optionally hide menus and site title/description.

  5. Two Column Content - Allows you to create a content page with two columns of content using the standard <!--more--> page tag (entered using the page break icon from the Visual Editor). If you break the content into more than two areas, they will automatically be placed vertically (in other words, you can use more than one <!--more--> tag.

  6. One column, iframe full width - This template is designed especially for using an iframe external site embed on a regular static page. If you have an old site in html that you don't want to convert to WordPress, or some other site you want to take on the appearance of your site, then this is the page template for you. It hides the standard page title so the external site can take the full page space. You can enable comments, if you wish. To embed and external site, simply add an iframe html command to your page:
    <iframe src="http://example.com" style="width:100%;height:600px;border: 0px"></iframe>
    (You'll need to use the "html" page editor view to add this command, and you can include other content as well for titles or introduction material.) You can adjust the height to best display the external page, as well as the width if you want. The page will continue to fill the full width even if you change the overall site width. While this template is designed for using iframes, it really can be used however you like - kind of like the Blank Content Area template, but allowing comments.

  7. One column, no sidebar - This template gives you a single column layout with no sidebar. By default, the single column only uses about 90% of the full width and leaves some padding on the side. This page template is based on the similar page template found in Twenty Ten.

  8. Page with Posts - When used with no options set, this page will display all your posts exactly the same way as the default blog post page. When used in the default mode, the main use for this feature would be to hide the Home menu item, and put your posts on a page with your own title. (You can hide the title from the page using the Per Page options.) But what is really great is that you can create a filter which controls just which posts will be displayed - specific categories, for example.

    The Page with Posts each have a two column variant which shows the full, excerpt, or title posts in two column, arranged left to right, then top to bottom.

    Because these are in fact true static pages with automatic inclusion of filtered posts, you can enter whatever content you want in the content edit box, and that content will appear above the posts that are displayed.

    While the Page with Posts templates allow you to easily display posts on a page, you can also add posts to any static page using the [weaver_show_posts] shortcode for even more fine-tuned control.

  9. Page with Posts (excerpts) - This works exactly like Page with Posts except only excerpts are displayed.

  10. Page with Posts (title) - Again, like Page with Posts, but only post titles, date, and author are displayed.

  11. Page with Posts (one column) - A one column, no sidebar version of Page with Posts. Make your blog full width!

  12. Sitemap - This page template will display a simple sitemap, consisting of a list of all ages, monthly post archives, all categories, and the tag cloud. You can add content to the page that will appear above the sitemap, but there are no other options to control the organization or content of the sitemap.

Settings for "Page with Posts" Template

One of the most powerful features of the Page with Posts template is that it allows you to create filters on a per page basis that lets you display specific posts on a page. You can have as many different pages using the Page with Posts template as you need, all showing a different set of posts.

The standard items you can use in your filter include: Category, Tags, Single Page, Order by, Sort Order, and number of posts to display. The Order by, Sort Order, and Posts per Page are explained on the Weaver Options for This Page form. The Category, Tags, and Single Page options are based on slugs. As a rule, if you include values in more than one box, they will be combined, and the posts displayed will meet all the criteria you specified.

For example, say you have defined the categories 'Cat A', 'Cat B', and 'News' (among others, perhaps). These categories will have the slugs 'cat-a', 'cat-b', and 'news'. You can see the slug names if you open the Posts->Categories admin page. The same is true for tags. So, to display a list of posts from a specific set of categories and/or tags, you simply enter a list of one or more slugs you want included, separated by commas.

The Categories list has an extra feature. If you add a '-' (minus sign) to the front of a category slug (e.g., -uncategorized), then all the posts from that category will be excluded. So if you placed -uncategorized in the Category box, then only posts that have a category other than Uncategorized will be displayed.

The final Advanced Selections bears some explanation. This field is really for advanced users. The entire post filter is based on the capabilities of the WordPress query_posts function. The final field allows one to add some (but not all) of the additional filtering specifications supported by query_posts. So, just for example, if I added the value author_name=wpweaver to the Advanced Selections field, then the Page with Posts would display all the posts on the site made by 'wpweaver'. Values to query_posts that require an 'array' won't work, but any that can be built from a string should work. You can combine different filter specifications using '&' as described in the query_posts documentation. With this capability, anyone who can understand the examples provide for query_posts should be able to create quite explicit filters for the posts that will appear on the page using the Page with Posts template.

Per Page and Per Post Options

One of the most powerful features Weaver provides for customizing the content of your site is the set of Weaver Options for This Page and Weaver Options for This Post. When you create or edit a Page or Post from the admin page, you will see one of those two areas below the Editor box. They contain options that will be applied to that specific page or post. These settings often correspond to setting you find on the Standard Weaver Main Options or Advanced Options pages. Any settings made on the per page boxes will override the standard settings.

Weaver Options for This Post

The per post settings allow you to control excerpts, featured image, and author avatar. In addition, if you mark the post as a favorite, the post will be displayed with a yellow star to its left on all but the single post full page.

Gallery Post Format

Beginning with WordPress Version 3.1, and new feature has been added to the Edit Post screen - Format. Weaver supports on additional Post Format over the Standard one - Gallery. If you check this for a post (or give it a Gallery category), Weaver will display this as a Gallery. When displayed on the blog page or a special post page like category or archive, the post will be displayed as a special excerpt that shows one thumbnail from all the images included from the Media Library. If the user clicks on the image, they will be taken to the full post with all the images.

Weaver Options for This Page

The per page options box has several groups of options. The first option simply has a link to the Weaver Page Templates documentation.

The Per Page Options section controls display of the page's content title (Hide Page Title), as well as several aspects of the standard Header and Footer areas.

The Selective Display of Widget Areas allows fine control of which widget areas are displayed with the page. In addition to hiding specific standard widget areas, you can specify one of the Per Page Widget Areas to serve as a replacement for the standard Primary or Secondary sidebar areas, or an additional Top Widget area for that page. You simply add the name of one of the extra widget areas previously define from the Advanced Options tab.

The Menu "Placeholder" option is useful if you want a top-level menu item that doesn't require a 'dummy page'. This is useful if you have a set of sub-pages on the menu that have content, but you don't want to create a dummy page for the top level item. When the item is clicked, nothing will happen.

The Settings for "Page with Posts Template" is explained above.

Custom Fields Mechanism

All of the per page and per posts options are saved using the standard WordPress Custom Fields mechanism. (If you ever wondered what that was for - well, it is very useful for saving per page values for templates like Weaver to use!) After you set a value in the Weaver Options box and update the page, you'll notice that the Custom Fields box will no longer be empty. (If you've unchecked the Custom Fields box in the Screen Options, then you won't see it displayed.) These values are used by Weaver to implement the options.

While this is a very powerful capability, and allows you incredible per page customization, you should be aware of one factor - these settings will work only with the Weaver theme. These settings are associated with each individual page. They are not part of your theme definition, and won't be saved when you use Weaver's Save/Restore tab. But they are saved with the page, so if you upgrade Weaver, or even switch to an alternate theme, those settings will remain intact. However, even though you can switch themes without losing that information, other themes won't know what to do with it, so your pages will most likely just display with the other theme's default template. You might even have to re-set each page's template after you go back to Weaver. This all isn't bad - but you should know what is going on.

 

Extra Per Page Options

For even more advanced control on a per page basis, Weaver will recognize other options that you must manually define in the Edit Page Custom Fields box. These options match equivalent global settings found on the Advanced Options tab, but apply on a per page basis.

Define page-head-code, and the value contents will be added to the <HEAD> section. This will be inserted into the <HEAD> Section after the settings in the global <HEAD> Section on the Advanced Options tab.

Define page-pre-header-code, and the value contents will be inserted before the <header> div. This setting will override the global Pre-Header Code setting.

Define page-header-insert-code, and the value content will be inserted above the header image. This setting will override the global Site Header Insert Code setting.

Weaver Shortcodes

The Weaver theme includes some shortcodes to allow you to easily add extra content and features to your regular content.


[weaver_show_posts] Shortcode

The [weaver_show_posts] is a very powerful tool for displaying posts from within your pages. Among other possibilities, it can be used to get a magazine style layout on your pages.

Which posts are displayed are controlled by the filtering options provided as parameters of the shortcode. Below is a summary of all parameters, shown with default values. You don't need to supply every option when you add the [weaver_show_posts] to your own content. There may seem to be an overwhelming set of options for this shortcode, but it gives you many options for displaying specific posts within a static page. One way to use this short code would be to create a magazine style layout, for example.

Note that the default global settings for various display options will be used unless overridden with a value in the shortcode. Also, this short code is really intended to show just a few posts, and does not support paging - if there are more posts than 'number' that match the filter, only the first 'number' posts will be displayed. This is really a good thing. For example, if you had a "news" category, you could set cats="news" and number="1" and display just the most recent news post.

Summary

[weaver_show_posts cats="" tags="" author="" single_post="" orderby="date" sort="DESC" number="5" show="full" hide_title="" hide_top_info="" hide_bottom_info="" show_featured_image="" show_avatar="" show_bio="" excerpt_length="" style="" class="" header="" header_style="" header_class="" more_msg=""]

You can enclose the option values in either double or single quotation marks. If there is just one value, you don't need any quotation marks. If you don't include an option, the default value will be used. For most option, the default value is an empty string, which means that option won't be used to filter for posts, or that the global formatting from the Main Options settings will be used.

Filtering Options

These options are used to filter or select which set of posts are displayed. Default value in {}'s.

Formatting Options

These options control how posts displayed by [weaver_show_posts] are formatted, and which parts of a post are displayed. These options will override any other settings for posts. If you don't set a particular option, then the formatting will be controlled first by any per post settings, then by any options specified in the Main Options admin tab.

Using in a Sidebar

This shortcode has been designed to use in a sidebar using the standard Text widget. There is special CSS styling that reduces the margins on the featured image thumbnail. If you provide the posts you want to show in the sidebar a featured image, you can get quite attractive post excerpts in the sidebar. For example, putting this in a text widget in one of your sidebars:
[weaver_show_posts cats='new' show_featured_image='1' show='excerpt' excerpt_length='25' number='2']
will display the latest two posts from the 'news' category. The featured image will be shown in the upper left corner.

CSS styling

The group of posts will be wrapped with a <div> with called .wvr-show-posts. (You provide a CSS rule in the <HEAD> Section of Advanced Options called .wvr-show-posts.) You can add a class to that by providing a 'class=classname' option, where you use the name with a period in the CSS in the <HEAD> Section, but just the classname for the [weaver-show-posts] option.

You can also provide inline styling by providing a 'style=value' option where value is whatever styling you need, each terminated with a semi-colon (;).

These CSS rules are pre-defined, but can be overridden using the <HEAD> Section of the Advanced Options tab. The element you're most likely to want to change is the margin-bottom. That determines how much space is added after each post.

.wvr-show-posts .hentry {margin-top: 0px; margin-right: 0px; margin-bottom: 40px; margin-left: 0px;}
.widget-area .wvr-show-posts .hentry {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}
.widget-area .wvr-show-posts .hentry {margin-bottom: 0px;}
.widget-area .wvr-show-posts .attachment-thumbnail {float: left; margin-right: 2px; margin-bottom: 0px; padding: 2px;}

Custom Menus

One of the new features included with WordPress 3 is support for custom menus. By using the Appearance->Menus panel, you can create a menu completely under your control. While the standard Twenty Ten only supports one custom menu, Weaver supports two. If you have defined two custom menus, they will be placed above and below the site header image.

Custom Menus can let you really customize site navigation. One typical use of multiple menus is one for pages, the other organized by category or tags. But you have complete control. However, which menus show can be a bit confusing. There are three specific cases of specifying menus that are most likely to be useful:

  1. No Custom Menus Defined
    This might be the most common case. If you don't use the Menus panel, and don't define any custom menus, then the theme will automatically generate a menu based on your pages (including Home) using the page order defined in the page editor when you create pages. This is the legacy method, and works fine for many situations.

  2. Defining One or Two Custom Menus
    You can also define one or two custom menus. The two menus supported by Weaver are called the Primary and Secondary Menus. If you define a Primary Menu, then it will be the main menu bar normally under the Header Image. If you don't define a Secondary menu, then only one will be displayed. If you define the Secondary Menu, then it will normally be displayed above the Header Image. You can switch the order of the two menus either using the Main Options tab, or by switching the order in the Menus panel.

    Normally, both menu bars will use the same menu bar color scheme. When you've selected the rounded area option, the top menu bar will have the top edge rounded, and the bottom menu bar the lower edge rounded. This look great with a square Header Image.

    You can use CSS snippets to change the color of the Secondary menu bar - it uses #access2 for its CSS tags.

  3. Define Only Secondary Custom Menu
    If you define only the Secondary Menu and leave the Primary Navigation theme location blank, then Weaver will display two menu bars - the Secondary Menu bar on top as you defined, and the default menu with pages (as discussed in #1 above) on the bottom menu bar.

Miscellaneous Notes

Using Weaver in your language

First of all, WordPress and Twenty Ten have translations available for many languages. If you need to make your site display in a language other than English, the place to start is the Installing WordPress in Your Language page at WordPress.org. You have to install both the WordPress translations for your language, plus the theme translations. But since Twenty Ten is the standard theme, its translations should be automatically included when you install WordPress for your language. Because 2010 Weaver is based on the default Twenty Ten theme, it uses all the same text phrases found on the visitor side of your site that Twenty Ten does. (The Weaver admin panel, on the other hand, is still strictly English - it is has so much help and explanations, that it would be very difficult to translate.) But the important part is that you can easily use the language translation files for Twenty Ten with 2010 Weaver so that people who visit your site will see your native language. Here's what you need to do. The goal is to copy some files from the Twenty Ten theme directory to the 2010 Weaver directory. You may need to use your site's host control panel interface (e.g., cPanel), or use your ftp access. Here's the steps.
  1. Find Twenty Ten's language directory. It will usually be at "/your-site-root-directory/wp-content/themes/twentyten/languages". That directory contains the language files. Once your site has been installed for your language, that directory should contain 2 or 3 files (perhaps more). Two of those files will match your language setting. For example, if you have installed the Spanish version of WordPress, you'll find <es_ES.po and es_ES.mo there. (There is some chance you'll have only .mo file(s).)
  2. Copy the language files (e.g., es_ES.po and es_ES.mo) from the Twenty Ten directory to 2010 Weaver's directory: (/your-site-root-directory/wp-content-themes/2010-weaver/languages). Use your cPanel or ftp to do this.
  3. Your site should now display your native language when visitors see it.

Technical Notes

The Weaver theme was designed as a child theme of the Twenty Ten theme, which is the standard for WordPress 3. Many of the features used by Weaver are completely influenced by Twenty Ten. As of Version 1.5, Weaver has started to move away from the strict child-theme approach, and will become a true standalone theme when Version 2.0 is released (that won't likely happen until well into 2011). However, it the strong influence of Twenty Ten will always remain, as will the dependence on Twenty Ten's visitor interface side language translations.

Weaver HTML <div> Hierarchy

The Weaver theme generates content that is wrapped in HTML <div>'s with a set of conventional names. A typical site page will have the following hierarchy. Knowing this can help you make additional custom modifications. (Another useful thing to do is to use the "View Document Source" option of your web browser to see the actual HTML generated by WordPress for your site content.)

#wrapper
#header
#masthead

# main
#container
#content
#comments

#primary
#secondary
#footer
#colophon

 

More Help - Suggestions

The 2010 Weaver page at WPWeaver.info allows comments. You can leave questions or comments there. No promises on how quickly you will get a response, however. I have a lot of other projects going, and travel some, so I might not get a chance to respond immediately, but I will try. If this theme becomes popular, I might create a support forum for it. But for now - just comments.

Thanks for checking out 2010 Weaver. Hope you create a beautiful WordPress theme with it!

 


Version 1.3 Release Notes

Weaver Version 1.3 has some significant enhancements and changes over previous versions. It is possible you will have to make a couple of minor changes to your theme to have it look exactly the way it did before.

More Header Options Improved Widget Area Options Other new and improved features

Changes to Weaver Functionality

1. Area Background Colors

The most significant change to Weaver involves how the background colors of the major areas are handled. These background colors are set in the Theme Background Colors section of the Main Options tab of the admin page. These are the areas, and the corresponding CSS <div> names:

Wrapper Page BG:  Background for top level #wrapper div - default BG if you don't change others. {#wrapper}
Main Area BG:  Background for main page #main div - wraps container, content and sidebars (uses wrapper bg if not set). {#main}
Container Area BG:  Background for #container div - wraps content and sidebars (uses wrapper bg if not set). {#container}
Content BG:  Background for post and page content area (uses main bg if not set). {#content}
XX Widget Area BG:  Background for the four widget areas. {#primary, etc.}
Footer BG:  Background for the footer area. {#footer}
Outside BG:  Background color that wraps entire page. Using Appearance->Background will override this value, or allow a background image instead.{body}

Previous versions of Weaver had gotten this wrong in two ways. First, it used White as the background colors for the <div>'s nested inside the #wrapper <div>. This was partly from a limitation in the color picker that didn't allow transparent as a value. It turns out that transparent is the "correct" value for these <div>'s. The chart that shows the <div> hierarchy can help understand how these <div>'s interact.

If you've set colors for most of your own BG areas, then it is likely you will see no difference in how your theme looks. However, 1.3 has added the "Container" setting. The previous versions incorrectly set the #container <div> using the "Content BG" setting. Each of these settings now apply to the correct <div>. If you have an issue with your content area not having the correct background color or incorrect rounded corners, try setting the new Container Area BG to the old value, and set the current Content BG to transparent and things should be fine.

2. Theme Save File Extension

The file extension used for Weaver saved theme files. Previously, the extension was .txt. That has been changed to .wvr. The actual format of the file has not changed. If you have old themes saved, simply rename them and change the extension from .txt to .wvr.

3. SEO Tags

A new advanced option called "SEO Tags" has been added. Search Engine Optimization is somewhat of a black art, and this provides minimal support. The difference is that previously, the meta tags now included here were in the <HEAD> Section, which meant your tags were saved in any themes you saved, which isn't exactly correct. Now, these SEO meta tags are not saved with theme settings, but are just site specific. If you had filled in the meta tags on your old versions, you should remove them from the <HEAD> Section, and copy them here.

4. The Last Thing

Just as the SEO tags don't belong with the theme, the code you include in this section are site specific. They will not longer be saved with a theme. If you have an old saved theme, however, the settings will be copied over automatically.

 


Version 1.4 Release Notes

Weaver 1.4 has a few changes and some new features. This is a summary of the changes:
  1. Two new sub-themes
    Transparent Dark and Transparent Light. These two themes use transparent backgrounds, and can make truly beautiful sites when used with an appropriate background image or solid color.

  2. Icons for Post Meta Info
    A set of icons suitable for using with the Meta Information above and below Blog Posts has been included. You can use the default set (a gray theme that works well with almost any color) with a Main Options check mark, or use custom CSS in the <HEAD> Section. There is also a check mark option to remove the fill-in text (e.g., 'Posted on', 'by', etc.) in the info lines, which allows a very nice icon-only look. There are a number of icons available for your custom use in the /wp-content/themes/2010-weaver/images/icons directory.

  3. Advanced Option to customize copyright
    You can now put a totally customized copyright notice in the footer to replace the automatically generated one. There is also a check mark to hide the "Powered by" credit if you really don't want to give credit to WordPress and WPWeaver.

  4. Advanced Option to Clear the Weaver database
    Sometimes it is just best to start over. This new option allows you to clear the existing Weaver settings back to the original default values.

  5. Internet Explorer fixes
    Code was added to support rounded corners in the upcoming IE 9. A long unreported problem with a bug in IE that made it display the color boxes  was fixed to work around the problem.


Version 1.5 Release Notes

Weaver Version 1.5 represents a major revision of Weaver and has many new features, many in response to requests from some of our more advanced users. Virtually every element of your WordPress site can now be easily customized from the Main Options tab. The new features add even more flexibility to how you can customize Weaver.

New feature summary:


Version 1.6 Release Notes

Weaver 1.6 represents yet another major release with the additions of many new features. For this release, the new features concentrated on adding new per post and per page customization features.

 

Possible incompatibilities with older versions