Weaver II Theme Documentation -- Version 1.0

See the Release Notes for a summary of changes from the previous Weaver

Weaver II represents a significant upgrade from the previous version of Weaver. It has been almost completely rewritten, and includes many new features. It now generates HTML 5 code to keep your site up to date with the latest Web standards. The handling of sidebars has been totally changed, resulting in complete flexibility of when and where you use sidebars.

If you are upgrading from the previous version of Weaver, Weaver II can perform an automatic conversion of most of your previous settings. But because some of the basic page organization of Weaver has changed, certain elements of your old site might require some manual conversion. This will most likely be true for sidebar arrangement and content, as these have been totally restructured. In the end, however, these manual fixes are likely to take only a few minutes.

Table of Contents

The Weaver II WordPress theme represents a totally revised version of its predecessor, Weaver. Weaver II allows you to change colors, fonts, sidebars, and other aspects of your site's look. In addition, it allows you to easily add whatever special code you might need (such as advertising tracking code), all from an easy to use "check mark" based theme admin page. It also has many per page and per post options, along with several page templates, that will allow you to totally customize the look of your site.

Weaver II 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. The different option tabs have been organized by the logical regions of your site. Thus, to change how the menu or info bar appears, go to the Main Options:Menus tab. If you want to change specifics of how posts are displayed, go to the Main Options:Post Specifics tab. Other tabs are similarly organized.

Weaver II's design was based on the default WordPress Twenty Eleven theme. While previous versions of Weaver were based on Twenty Ten, Weaver II does not share many features of Twenty Eleven. The main elements of Twenty Eleven includes are HTML 5 support, and the language translation files. Weaver II shares all the visitor side message wording with Twenty Eleven. This means that the all the Twenty Eleven translation files can be used by Weaver II, thus making it instantly available worldwide.

The Help document has lots more information to help you design your own site look. You can start with one of over 20 pre-defined sub-themes, and change the settings to suite your needs. It is easy to get started: 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 tabs with options for the various parts of your theme attributes 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.

Previous Versions of Weaver

Previously, there were two different versions of Weaver available: 2010 Weaver and Weaver. These older versions were originally based on the standard WordPress Twenty Ten. While support for the most recent Weaver will continue for some time, ultimately Weaver II will completely replace that version.

Weaver II is a completely new theme. Every effort has been made to make a transition from Weaver to Weaver II as smooth as possible, because it is a new theme, there are some aspects that cannot be converted automatically. Please see the Upgrading from Weaver section for more detail.

Using With WordPress Multisite

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/weaver-ii/settings.php file and change the 'WEAVERII_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 Your Site's Home Page

Your Home Page is the one that is displayed when a visitor enters the address of your WordPress Site. Commonly, your blog will serve as the home page, and WordPress will automatically add a Home item as the first item on your menu bar. (That is the default WordPress setting.) 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 (as well as the page's template, such as Page with Post) is ignored: that static page serves only to set the title for the blog page.

Weaver gives you options on just what appears as your home page. The Main Options→Menu 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→Menus 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--. This step is important. If you specify the static "Page with Posts" page in the selection box, you will end up with get the default blog page, and not your "Page with Posts" and any options you may have set for that page. And the main reason to use a "Page with Posts" for your blog page is to add filters 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. 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.

Important: Most modern browsers will cache web pages it loads. Sometimes, this can make testing your site very difficult because the changes you make won't show up because the browser has cached your page. If you find this happening, you should clear the cache. Some browsers (e.g., Firefox and Chrome) have plugins available that will let you disable the cache. If you are using Weaver II Pro, you should develop your site with the Weaver II Pro:Development Mode checked. This will cause the CSS to be generated inline, which help with most cache issues.

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 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 save your work. You can then fiddle and fine tune more without losing your previous work. The easiest way to save your work is to go to the Save/Restore tab, and use the Save/Restore Current Settings using WordPress Database option. This will save all your settings in the WordPress database. Any settings you make will be preserved until you save new ones. They will survive theme switches and upgrades. If you want to restore those saved themes, click the Restore Settings button.

The Weaver II basic version only supports this single way to save your settings. The Weaver II Pro version offers options that let you save and restore you settings from a settings file. There are two types of settings files - one that just saves the theme related options (and leaves out site specific options such as SEO and other settings), and another that saves everything. These files can be downloaded to your own computer, or use by others to share you site design. And you can save many versions of your work.

If you are experimenting, it is a good idea to save copies of your work so you can get back to where you were.

Weaver Predefined Sub-Themes

Weaver comes with over twenty predefined themes (displayed on the Weaver II Themes tab. 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 Weaver Main Options are cleared and set to the new values of the sub-theme. Most of the Advanced Options are not changed.

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 "check box" 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 tabs that let you quickly jump to each section.

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.

Weaver defines default colors for many items. If the color value is blank, then the default value will be used. The default will either be the same as surrounding page elements, or be defined in the default theme style sheet.

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 document 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 width, borders, and more. The entire site is overlaid on the Wrapper, Main, and Container areas. Hint: You might want to experiment setting the options to primary colors (e.g., red, green, blue) just to get an idea of how they fit into the big picture.

With Weaver II Pro, you can also define different default borders for the site when you also check the "Major Area Borders" option. There also in an option to tweak the search form.

Layout

Weaver II supports these sidebar layout arrangements:

Header Content
Pri Up Low
Footer Single Column - Right
Header
Pri Up Low
Content Footer Single Column - Left
Header
L
Content
Pri R
Footer Split - Left & Right
Header Content
Pri
L R
Footer Double Cols, R, top wide

Header
Pri
L R
Content Footer Double Cols, L, top wide
Header Content
L R
Pri
Footer Double Cols, R, bot wide
Header
L R
Pri
Content Footer Double Cols, L, bot wide
Header Content Footer No Sidebars

The sidebars support three widget areas (Primary, Upper/Right, and Lower/Left). There are other widget areas supported, and described in the next section.

The single biggest change included in Weaver II is much better control over site page layout, including margins, sidebar layout, and sidebar sizes. There are two major sidebar areas - one on the left of the site, and one on the right. The Layout tab allows you to control which layout is used for most of your pages. You can also set the layout for any individual static page. Thus, you can essentially have any of the 8 different sidebar arrangements appear on any of your pages.

One typical site design is to use one sidebar arrangement for regular pages - the blog, static pages, and single post pages, while using an alternate sidebar arrangement for the Archive-like pages - archives, categories, etc.

The basic version of Weaver II allows you to specify a sidebar arrangement for those two basic cases. You can also alternatively specify a different sidebar arrangement for your blog, static pages, and the single post page. These options will allow great flexibility in site look. You can also set the sidebar arrangement on a per page basis.

In addition, the Weaver II Pro version allows you to specify sidebar layout for each of the specific archive-like pages.

You can also specify the width of any of the individual sidebar widget areas. These are expressed as percentages. You can add more precision to the percentage if needed (e.g., 24.375%).

Technical Note: Weaver II's layout design separates the left and right sidebar layout wrappers (e.g., Right Side, Two Column) from the actual sidebar widget areas (e.g., Primary, Left, Right). The Pro Version allows you to control the background color of the sidebar wrappers, including the ability to have the color flow all the way to the top of the footer area.

Note for Double Column Sidebars: If you want a double column sidebar on the left or right side, but don't want the wide Primary area at the top or bottom, simply don't add any widgets to the Primary Widget area, and it will not be displayed - leaving you with two side by side widget areas (Left and Right).

Widget Areas

As just noted, Weaver II separates the sidebar wrapper areas from the sidebar widget areas. The Widget Areas tab controls the background, margins, and borders of both individual widgets, and the different widget areas, including the sidebar widget areas, the top and bottom widget areas, and the footer widget areas.

The handling of Widget Areas is another significant design enhancement found in Weaver II over previous versions. For example, the widget areas are now insensitive to the border and margin widths - thus the option to specify border attributes in the General Appearance tab. The footer region automatically adjusts widget area widths depending on how many footer widget areas you actually use (from 1 to 4).

"Disappearing sidebars" - If you find the sidebars are not displaying in the right place (they will usually end up below the content area), it means there is some incorrect HTML code in your page or post content. This is the most likely reason for this, although incorrect HTML in a widget (usually a text widget) can cause the same symptoms. This behavior is not due to any issues with Weaver II, but is inherently a part of the way HTML code works. The cause will almost always be a missing </div> tag (or an extra <div>). HTML uses <div>...</div> blocks to determine different parts of a web page. If your content has a missing </div> tag, then the bad HTML will confuse your browser, resulting in the incorrect display of the sidebar.


Weaver II allows you to have as many widget areas you need. These new widget areas 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, Upper, and Lower sidebars for every single page of your site if you wanted. You tell Weaver II to create these areas by providing a list of Widget Area names 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 in the Per Page option area on the Page Editor screen to specify new or replacement widget areas. They also can be used by the Weaver II Pro widget area shortcode.

Special Sidebar Handling for Some Plugins
Weaver II uses an approach to generating sidebars that may conflict with some plugins. For example, there are some e-commerce plugins that generate an equivalent of their own page template that does not know about all the Weaver II sidebar layout options. Typically, these plugins will generate a <div id="content"> for the content area, and then invoke a theme specific file called "sidebar.php". Normally, Weaver II does not use that file, but provides a special version just for these plugins.

Here's how it works. Weaver II will check for a extra widget area called plugin_replacement (you would create it on the Main Options:Widget Areas tab). If it finds that widget area defined, it will generate a <div id="sidebar_plugin" class="widget-area" role="complementary"> area with the widgets included in that widget area. You will have to define some CSS to get that widget area to display how you want on the plugin's special page. Because getting the content area and the sidebar to appear side by side requires some fairly complicated CSS code, that can be a non-trivial task. You could also create a child theme with your own sidebar.php file.

If you do nothing - and don't add a plugin_replacement extra widget area, nothing will be added to the page, and the most likely result is a full width content page, which will often be just fine. Adding sidebar CSS or creating a child theme for sidebar.php are both tasks for advanced web site developers.

One more note - the special plugin page may appear in the WordPress All Pages list, and if you open it, it may have the Weaver II Per Page options box, but these options will probably not be used by the special plugin page. As explained, these pages are really like a custom page template, but outside the normal processing done by the Weaver II theme.

Header Options

The Header Area 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 from the Page Attributes settings. 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 dashboard 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. Check "Hide Header Image" to hide it. The header image will always be displayed using the site's full width. The default is 940px width by 188px high. You can also control how much space is displayed after the header and before the content.

This theme 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.

Header Horizontal Widget Area

Weaver II has totally reworked the support for the header widget area. The new version allows you to build a great looking header for your site using this new horizontal widget areas. This area supports up to four different widgets displayed horizontally in the header area. This widget area is placed immediately before the standard site image (which you can hide if you need to.)

Consider this very simple example. It has a menu on the left, a message next, the site name, and finally a banner image.

Home
Page 1
Page 2		 Welcome
to our
site!
Weaver II Theme

You can use any widget in the Header Widget Area. It is likely the standard Text Widget will be very useful here. For example, you can insert a welcome message, as well as a banner image using the Text Widget. Because Weaver II adds support for shortcodes in the Text Widget, you can put almost any shortcode feature in your header. But you could also use a Menu widget, a slide show widget, an RSS feed widget - whatever you might want in your header.

The layout of each widget in the area can be set using the Main Options:Header tab. You can set the overall background color for the widget area, the font size, and the min-height. You can set it so the Header Widget area appears only on the front page. You can hide it from the Mobile view. Note that you can use the CSS+ option on the Area BG color to add whatever CSS you might need.

Widget Layout

You can also control the layout of each of the four widgets. Note that only the number of widgets you actually add to the area will be displayed. So if you have 3 widgets, only the settings for the first three widgets are used. For each widget, you can specify BG color (or per widget CSS with the CSS+ option), the width used for that widget (in %), and a different width for the mobile view. The widths must add up to 100%. If you don't specify a width, the widgets will simply be left aligned and take up their "natural" width.

It is likely that your custom Header Widget Area based header won't look great when viewed on a mobile device. The width options allow you to play with the mobile look. For example, you can specify a 0 (zero) width, and that widget won't be shown. (Works on the standard view, too, you can mix and match which widget areas are displayed on regular and mobile screens.) Typically, you might use just 1 or 2 widgets for the mobile device, and specify an alternate spacing. You can use the Advanced Options:Mobile:Simulate Mobile Device option to see just how your header will look on a mobile device.

Important Guidelines

When you create a header using the Header Widget Area, you should be sure to follow these two important guidelines:

  1. Specify a width for the all widgets except the last widget. If you have 3 widgets, then you should specify a width for the first two widgets in the Main Options:Header:Header Widget Area Widgets section. For example, use 50% for the first, 30% for the second, and the third will fill out the space using 20%. You can specify a width for all widgets if you want to.
  2. If you use any images in a text widget, it is very important to specify a max-width style. For example, say you are using a logo image that is 100px high, and 500px wide. You should include the <img> tag in the text widget something like this:
    <img src="http://yoursite.com/wp-content/images/2011/09/logo.png" style="max-width:500px;" />
    This will ensure the image will display properly on all browsers, including mobile browsers.

Technical Details

The Header Horizontal Widget Area is laid out as an HTML table. Because headers usually have large sized content, it was determined that supporting up to four widgets per row was optimal. Each widget is contained in a table element (<td class="header-widget widget_widgetname header-widget-1">). The "header-widget-1" class name is unique per column (1,2,3,4). If you supply more than 4 widgets, the Header Widget Area will add a new row, but reuse the 1-4 "header-widget-#" class name.

The table generated starts out with no borders, no margins, no padding, and uses a top vertical alignment. This is really a bare-bones layout, and allows complete flexibility in how you style each widget in the horizontal area.

Style to Position Text

If you want to position the content within the a table cell, you could do it like this from within a text widget. This example would be the text you add to a Text Widget.

<span style="position:absolute;padding-left:20px;padding-top:30px;">TEXT TO POSITION</span>

Menu Bar and Info Bar

Weaver II allows you to control many aspects of the main menu bars, as well as the Info Bar (which is new to Weaver II).

Menu Bar

Weaver II Basic allows you to control the menu bar colors, as well as the colors of the submenus and hover colors. You can specify bold or italic text. The font style will match the Titles font settable on the Font tab.

Weaver II Plus allows quite a few extra options for tweaking your menus.

Info Bar

The Info Bar is new to Weaver II. It provides two basic features - a "breadcrumb" menu that shows the path to the current page. On blog pages, there is an additional "Navigation Page" display that displays a numbered menu for quick access to a specific block of blog posts.

The basic version allows you to hide the info bar, as well as control if the info bar is displayed right after the menu bar (thus taking the full width of the page), or right above the content area (thus only going to the sidebar).

Weaver II Pro offers other options for the Info Bar, including the ability to add extra HTML to it.

Links

Options for all links now appear on a single tab: Links. Many sites will use the same coloring and style for all links, but Weaver allows you to control the default links, Post Info Line links, and Widget links separately.

While you can set a separate color for Visited links, this option has fallen out of widespread use, and is usually left the same as the regular link color.

Post Entry Title Link

Note that in WordPress, the title of each post is actually a link that will open the full single page view of each post. It is customary to style the post title to use the same color as page titles, but use a different hover color (which usually matches the standard link hover color) to indicate the title is a link.

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 set the post title color.

Leaving Comments

It seems that disabling Comments and Talkbacks for posts and static pages is one of the more common tasks that people want to do, but have trouble finding the right options to do it. I don't think the WordPress interface makes it very clear what is going on, because this topic may be the #1 most asked question on the Weaver froum. So, here's the scoop on controlling comments.

  1. This is really not a theme issue – the control is entirely done using regular WordPress options.
  2. Comments are controlled in the Dashboard Settings->Discussion page. There are quite a few options available, but if you want to disable comments by default for posts and pages, select the appropriate options on that page. (Unchecking the first 3 boxes will do it.) Don't forget about trackbacks and pingbacks because they can generate "comments" as well.
  3. If you've turned off comments by default (and you will probably end up doing that because even with Akismet and a Captcha plugin, you're likely to end up with plenty of spam), then you can re-enable comments for specific pages and posts from the Page and Post editor screens.There is an option panel on the Page/Post editor pages called "Discussion" with check boxes for that option. If you don't see that panel, you need to display it by opening the Screen Options tab in the upper right corner of the Page/Post editor page, and then check the Discussion show option.
  4. Now, if you created any posts or pages before you disabled comments, you'll have to go to each individual page and post and disable comments explicitly. Setting from the Settings->Discussion screen doesn't retroactively change the option. You'll have to delete any old comments you've accumulated as well.
  5. After you've done all this, by default, you will not see any reference to comments in the Post bottom info line, or at the bottom of regular pages. There is a Weaver Main Options in the Post Page Specifics section to display a "Comments are closed" message if you want .

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 use the CSS + 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 on the Link tab. Note, however, that the Bar under Titles option in the Content Areas tab also affects post titles.

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 with | separators, or use Icons for each part of the meta info. You can selectively hide different parts of the meta info (which forces use of icons, however). (Comments will always be displayed if they are enabled and associated with a post.) One of the design features of Weaver II is that it is language dependent on the Twenty Eleven 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 use icons instead.

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? Unfortunately, there is no specific WordPress standard on how to use Featured Images. However, Weaver II's design has attempted to maximize their usefulness.

If you add a featured image that is at least as wide as the standard header image, then that Featured Image will be used as a replacement image for that page or post single page view.

If the image is smaller, then it will be displayed inline with the post or page. Here's how to add a Featured Image and control how it is displayed:

  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.

Custom Post Info Lines

One commonly request is the ability to tweak the top and bottom info lines associated with blog posts. Weaver II Pro now includes a template function that gives you total control over the top and bottom info lines of posts displayed on a blog page, and posts displayed on the single page.

The custom info lines are set on the Main Options:Post Specifics:Custom Info Lines tab. You can change the top and bottom info lines on blog pages (including Page with Posts and [weaver_show_posts], and on the single page. You need to specify all options if you want the standard info lines replaced.

The text you specify can contain any valid HTML you wish, plus a set of special template %values% that will get replaced by the correct values for the specific post. For example, setting the Top Post Info line to:

<strong>%title%:</strong> %date-icon%%date% %author-icon%%author%

will create a top info line that looks like this:

The %title% is replaced by the post's title. The %date-icon% produces the calendar icon, while %date% produces the published date and link to the post. Similarly, the %author-icon% and %author% produce the author and link to the author archive page. Given a mixture of HTML, possibly including styling, and the provided set of parameters, you can build almost any combination of relevant information on the post top and bottom information lines.

There is no restriction on which values can be used on which line, nor other HTML you might wish to include. You can include whatever text you want mixed in with the definition. Some of the values allow you to override the standard text included with the standard values (e.g., 'permalink'). If you define an info line template, it will override any other info line setting you have (except hiding and position swap).

Here is a list of the supported template values:

 

Footer Options

The Footer Options control basic Footer appearance.


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 © to display ©. You can use other HTML as well.

Fonts

The Weaver II basic version design groups font family usage into two basic areas: the Content Font, which includes most content and widget text, and the Titles Font, used for post, page, and widget titles, info labels, and menus.

In addition, the design is based on a single "Site Base Font Size". This value is expressed in px, and defaults to 12px. All other text elements are sized as a percentage of that base size. One of the main reasons of this is for consistent display on various screen sizes, including mobile devices. It is possible to simply change the base font size, and the rest of the site will automatically be adjusted to match.

Note that it still possible to set the size and font family using Custom CSS Rules with the Weaver II basic version. However, Weaver II Pro provides much greater control over fonts.

Weaver II Pro Font Control

The Weaver II Pro Font Control panel gives you fine tuned control over the fonts various elements of your site will use. You can use a set of standard Web fonts, or for total flexibility, you can use any of the free Google Web Fonts. In addition to the two general areas available in the basic Weaver II version, the Pro version lets you set the font of virtually every text element on your site. You can also specify font size, style, and other attributes.

Weaver Advanced Options

The Advanced Options page allows you to define many more advanced options. While the Basic version of Weaver II supports many Advanced Options, some are available only in the Weaver II Pro version.

The values you put here are saved in the WordPress database, and will survive theme upgrades and other changes.

PLEASE NOTE: Limited 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 settings in these sections, please double check that what you entered uses valid HTML commands.

Site <HEAD> Section

The <HEAD> Section tab includes two major setting areas. These areas are used to provide advanced code to enhance the functionality and style of your site.

The <HEAD> Section

This input area is one of the most important options in Weaver for customizing your site. Code entered into this tab is included right before the </head> tag in your site. This code can include almost anything that can be added to the <head> section of a site. One of the most common uses will be to add code snippets provided by outside sites such as Google Analytics. You can also provide extra links to external style sheets or JavaScript libraries as might be needed.

Unlike with previous version of Weaver, the <HEAD> Section should not be used to enter custom CSS rules. Instead, use the next section - Custom CSS Rules

The Custom CSS Rules Section

This section may be one of the most useful and used advanced option sections. This is where you can enter custom CSS to fine tune the styling of your site. The sources for these CSS rules can vary. For example, the Weaver II Snippets document describes many possible CSS code snippets that can be used and modified to control your site's styling.

You should enter just CSS rules in this box. Don't include a <style></style> block. This is changed from how CSS was entered into the <HEAD> Section in previous versions of Weaver. The style rules you add here will be included after any other CSS rules Weaver II generates - so they will override those rules.

Note that with Weaver II Basic, these CSS rules will be added to the general <style> section Weaver II generates in the site <head> block. In Weaver II Pro, this code is added at the end of the actual .css style file Weaver II Pro generates, and won't appear directly in the <head> block.

The Weaver II documentation also includes a short introduction of CSS, and you will likely find it worth your time to learn a a bit about CSS.

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 your pages. 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 Custom CSS Rules Section described above. Note: Providing margin style values, including negative values, can be used to control the spacing before and after these code blocks.

The first area - Site Header Insert Code - is likely to be the most useful area as it can be used to define custom headers for your site. The Footer Area can also be used for custom copyright or administrative menus. The other areas are mostly useful for more advanced web site builders, and are available only in the Weaver II Pro version.

Each of the HTML insertion sections includes two additional options - Hide on the front page, and Hide on non-front pages. These settings can be used to control where the areas are used.

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 <header> block (HTML 5!), 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 checking the "Hide Header Image" in the Main Options tab. Then, add this code to the Site Header Insert Code box:

<div class="aligncenter">[meteor_slideshow]</div>

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

This code will be inserted into the site footer area, right 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, Pre-Main, Pre-Container, Pre-Comments, Post-Comments, Pre-Footer, Post-Footer, Pre-Left Sidebar, Pre-Right Sidebar

These areas can be used to insert HTML and shortcodes in the given areas of a site page. These options are available only in the Pro version. Each of these areas a wrapped in an "#inject_areaname" <div>. The name is included on the admin page. In order to get proper display, you may have to add an extra empty <div> in your code block to clear the floats: <div style="clear:both;"></div>. You could also include that in a CSS rule for the respective '#inject_xxx" rule.

Page Templates

The information on this tab applies to the different Weaver Page Template areas.

Some add-on widgets can have only a single instance defined to work properly, so if you have trouble having one work properly and you've used it in more than one widget area, check on that. Standard WordPress widgets don't have that restriction.

This tab also provides brief descriptions of the different Weaver II page templates.

Archive-type Pages

WordPress supports several kinds of pages that are often called "Archive" pages. These include pages that will display different post archives such as by category, tag, author, or date. It also includes the search page. Normally, such pages will include a title that describes the archive page type. In the Pro version, this tab allow you to hide those titles.

Background images

This page is functional in Weaver II Pro, and allows you to specify specific background images for different areas on any page. You can also set the appropriate repeat options. The little "image" icon on the right lets you open the media library browser to upload or pick images. (Show an image, then click "Insert into Post" to insert the image's address into the desired image box.) These images are used on a site wide basis.

Mobile

Having a great looking mobile view of your website has become an essential part of any modern website. Weaver II has you covered! Weaver II will work seamlessly on most mobile devices, automatically adjusting the styling for various sized screens. This section includes some basic options, as well as more advanced options in the Pro version. There is also special support for the iPad, so your site will look great on that device.

Mobile View Behaviors

Unlike other WordPress mobile themes and plugins, Weaver II uses all the knowledge about the options you've set to display a mobile view that visitors will recognize as being your site, and not something that looks completely different.

The main thing Weaver does is eliminate the sidebars. These generally don't contain important content. By not showing them, the real content will take up the entire device display. Sometimes, however, you really want some auxiliary content that will appear on every page of your site. For this purpose, Weaver II provides a Mobile Device Widget Area. You can add whatever widgets you want to that area, and it will be displayed between your content and the footer area when your site is view from a mobile device. This option gives you the best of both worlds - maximize the content display area, while still allowing for a sidebar.

Weaver II also automatically adjusts some other behaviors. By default, the font size is increased. While it might seem you want to decrease the font size to allow more content to be displayed, in fact, making the font larger makes your site much easier to read on tiny screens.

For the most part, the standard Weaver II menu bar works quite well on mobile devices. You menu items will likely wrap to multiple lines, but they still function as expected. Submenus are displayed with a shift to better fit on small screens.

The site title will always appear above the header image, and the description is hidden. You can provide an alternate site title if you want. The standard header image will completely displayed in a reduced size, but it will not be clipped. You can specify an alternate image for the mobile view (Weaver II Pro).

Posts on the blog page are automatically displayed as excerpts. The Info Bar is not displayed. The margins between titles and content have been reduced. Top and bottom widget areas are displayed, but they can be disabled as well. The "Powered by" information in the footer is hidden.

A toggle view icon will be displayed in the header and the footer. Tapping this will switch the view from the Mobile view to the standard web view. Most modern mobile browsers allow the user to view standard websites and pinch and spread the view. This gives the visitor the option to view your standard site from their mobile device.

Finally, if you want, you can specify a different front page when your site is viewed by a mobile device. This lets you provide a special greeting. Unfortunately, this also will hide the standard home page on mobile devices, so please be aware of that. This alternate page works by detecting that the front page is being requested, and redirecting to the special mobile front page.

Mobile Device Simulation

Because not everyone with a website has access to a smart phone or other mobile device, and because they aren't that convenient to test on, Weaver II provides a mobile device simulation mode. If you enable the mobile device simulation from the Advanced Options:Mobile tab, when you view your site, you will get a view that very closely matches the view on typical 320px wide mobile devices.

The display you would see on an iPhone or iPod Touch is exactly the same, with a couple notable differences. First, the mobile device won't be as tall as what you see on your screen - but they generally scroll very quickly, and it is easy to see all the content on the mobile devices.

Second, because most modern mobile devices are touch based, users have a big finger that covers the links. Users won't typically see the a:hover behavior, or the pop up tip boxes. For this reason, the default behavior for Weaver II mobile view is to underline all links in the content area. This can be changed (in Weaver II Pro), but testing on various mobile devices seem to demonstrate that the underlined links are easier for the user.

You should also remember you are looking at the site on a big screen. It might seem you should reduce the font size or other features, but remember that most mobile devices have physically tiny screens. Everything you see on your full sized monitor will be physically much smaller on real mobile devices.

Finally, please remember to disable the mobile device simulation when you make your site available for public viewing. Otherwise, all visitors will see the mobile view! There's a red box at the top of the simulation to help remind you of that. If you work on a live site, you might consider one of the maintenance mode plugins to temporarily disable your site while you test out your changes or use the mobile view.

Mobile Device <body> Classes

Weaver II will add one of two classes to the <body> section if a mobile device is detected: weaver-mobile is added if a smart-phone-like device is detected. If a tablet is detected, weaver-tablet is added. You can use these tags to form conditional CSS rules. For example: .weaver-mobile .entry-utility {display:none;} will hide the bottom post info line on mobile devices.

Alternative Mobile Theme

Weaver II Pro offers the option of defining a completely new alternative theme to be used when the site is views with Mobile Devices. This is an overview of using that feature.

First, you need to save your current "normal" theme in a file using the Save/Restore tab. Then design your mobile version with all options you want. While it doesn't have to look anything at all like the original site, keeping both versions looking similar will help your visitors recognize your site. You can use the Mobile Simulator to view your mobile design while it is serving as your "main" theme. When you are finished, you should save the new "mobile" theme in a file.

Then, from the Save/Restore tab, click the "Save Settings for Mobile View". This will save the settings in a special WordPress database entry that will be used when the site is viewed from a mobile device.

You should now restore your "normal" theme by reloading it from the saved version.

One last step - to enable having mobile devices use the alternate theme, you need to check the "Use Alternate Mobile Theme" option while your "normal" theme is active. Now your site will have two possibly completely different themes for the normal and the mobile views of your site.

Note that the mobile theme works only on smartphone sized devices - it is not used for iPad-like devices. And finally, while you can use the Mobile Simulator during design, once it is set as the Alternate Mobile Theme, it will not display with the simulator -- you will need to view it with a real mobile device.


SEO

Weaver II has been carefully designed to follow the basic rules used by most Search Engines - it is already SEO friendly. The built-in SEO features are based on the development efforts of the WordPress design team, and are identical to those used by the standard Twenty Eleven theme. Some of these features include generation of proper site titles that are displayed in the browser's title line, as well as the ability to define global meta description and keyword definitions. And Weaver II generates HTML5 tags, which are further used by search engines to index your site.

While Weaver II will automatically generate description and keyword tags, you should update the"SEO Tags: settings to better reflect your site's content.

You may also know that SEO plugins are among the most popular plugins found on WordPress. Weaver II will also work well with those plugins, but you must first disable Weaver II's own basic SEO features. Check the "Use SEO plugin instead", and Weaver II will then let your plugin of choice take over SEO.

Site Options

This tab allows you to set additional site specific options, and it provides links and hints on setting other site options. The main option provided is the ability to specify an arbitrary image to use for your site's FavIcon - the unique little icon that is displayed in the browser site title bar.

Weaver Admin Options

These options control some options that may be important for some users. The options are explained on the page.

Weaver II Pro Options

This page controls some administrative options for the Weaver II Pro version.

Pro Administrative Options

The main option in this section is the "Use Inline CSS" option. The Weaver II Basic version always emits the necessary custom CSS rules in each page's <head> block. There is some debate in the SEO circles if having a block of CSS will hurt a site's SEO ranking, with the majority seeming to believe that a large block of CSS in the header is a negative. Weaver II Pro instead generates a custom css style file when the theme's options are saved. The keeps the CSS out of the <head> block, as well as eliminating the need to generate the custom CSS when the actual site page is loaded.

The other option is called Development Mode. This mode supports a few options that might make it easier to develop the site. When it is enabled, Inline CSS is used which usually will avoid browser caching issues. The other options are explained on the option page.

Pro Shortcodes & Features

Many of the features of Weaver II Pro are implemented via shortcodes. While the settings and information about the Pro Shortcodes are found on the Appearance→Shortcodes + Pro menu, this admin tab functions much like the WordPress "Installed Plugins" tab - it is mainly used to enable and disable the various plugins.

In general, Weaver II's shortcodes work very much like regular plugins. And like them, there is a small overhead when a site page is loaded. When a shortcode is disabled, it is the same as deactivating a plugin, and any overhead of using the shortcode will be eliminated. So, ideally, just as you deactivate plugins you're not using, you can disable any Pro Shortcode you don't need. The savings will be very small, but for busy sites, it might make a small difference.

Save/Restore Themes and Backups

Weaver II Basic allows you to save a backup of all your settings in the WordPress database. The Pro version allows you to save both backups and theme settings in files.

 

  1. Save Backup - If you save your settings to a backup (and this includes "Save Settings to Database"), then every setting is saved. For Weaver II Pro, this can be in a file with a ".w2b" extension. Using the "Make a Backup" button saves the current settings in a file called "weaverii_backup_date-info.w2b". There is a maintenance option to delete unneeded backup versions.

  2. Save Theme Settings - If you save the current theme to a file on your site's file system, then the settings relevant to a theme are saved in a file with a ".w2t" extension. Settings that are considered "per-site" (like customize headers, showing excerpts, and others) are not saved or restored from a theme ".w2t" file.

What is the difference between the two?

You might ask what the difference between a Backup and a Theme Setting is. The difference is that when you save a theme's settings, settings that apply to a particular site aren't save. This allows people to share their theme designs. Most people won't care about sharing their theme design - they will be using it just for their own site. So unless you know you're going to be sharing a theme, stick to Backup or Save in My Saved Theme.

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, many of your settings will be lost and replaced with the new theme settings (per-site settings are not replaced when you change a sub-theme, but ARE replaced when you use "Restore Settings from Database"). 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 "Save Settings to Database". 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.

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

Weaver Page Templates

Weaver provides you with several additional page templates for creating static pages. Users of the previous Weaver version should note that because of the new, flexible sidebar layout options, the need for several page templates is no longer needed or provided.

  1. Default - The default template uses the standard page formatting defined by your settings. The default sidebar layout will use the standard Static Page layout, but you can use the Per Page options to override the default layout.

  2. Blank - Provides a totally blank content area inside the #wrapper div. (This means the page will match the overall look of your site.) It lets you provide totally custom HTML on a page. It doesn't show the page title you set when creating the page. It does show page top and bottom templates and comments unless you explicitly hide theme on a per page basis. You can optionally hide the header and footer areas using the check boxes on the per page options. This template is good for entering raw HTML using the HTML editor tab. This page will use the default widget areas for a standard page, but this can be overridden in the per page options.

  3. 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.

  4. iframe, full content 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. Use the Per Page options to select a sidebar layout - most likely "none".
    The easiest way to add an iframe is with the [weaver_iframe] shortcode. Or you can also embed an external site by simply adding 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.


  5. 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.

    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.

    The "Page with Posts" template options won't be displayed in the per page box until after you've selected the "Page with Posts" template in the Page Attributes box, and saved the draft or published the page.

    Then you will get the options needed to filter the posts to display, as well as options to control how the posts are displayed (full, excerpts, title only). You can also display the posts in 1, 2, or 3 columns. In the previous version of Weaver, each of these options was implemented as a separate page template instead of a simple per page option.

    While the Page with Posts template allows 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.

  6. Raw - This template has minimal styling, and is intended to allow you to add pure HTML to a page. One use for this template is as a suitable target of a pop up link (such as provided by Weaver II Pro [weaver_popup_link] shortcode).

  7. 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.

Other options for creating custom pages

You can provide additional customization for a given page using the Extra Per Page Options described below. For example, the previous version of Weaver had a Custom Header page template. That can now be accomplished by checking the "Hide Entire Header" per page option, and including a Custom Field called "preheader" that has the code for the custom header.

Any page can be made into a one full column page simply by setting the "No sidebars, one column content" sidebar layout in the per page option box.

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.

Note: Because of what might be described as a quirk in how WordPress handles category filtering, if you specify specific categories to show (as opposed to not show), then sticky posts won't be displayed at the front with special formatting. They are displayed in their normal sort order. You can also see this behavior if you look at a category archive page, for example. Unfortunately, there seems to be no work around for this strangeness. So if you have a page that you want to display specific categories that include sticky posts, then you have to exclude all other categories rather than include the categories you do want to show.

The "Page with Posts" per page options also let you set how the posts are displayed: Full post, Excerpt, Title Only, and number of columns. You can also selectively hide the meta info lines.

Post/Page Editor Styling

Weaver II adds style settings for the tinyMCE editor used whenever you edit a page or post. The colors and font information for your text, headings, images, and tables will now closely match the values you've set for your theme.

For the most part, the layout presented in the Page/Post editor will very closely match the final page. However, the match is not always perfect. Changing the font or theme width can cause a mismatch. In addition, the width is determined by the default layout for a default static page, and if your blog post pages doesn't use the standard page layout, the editor width will not match.

There are a couple of other caveats. Weaver allows you to style your page content and post content a little differently. The Page/Post editor does not distinguish between the two types of content, so you will see Page styling for both pages and posts.

Technical Note: The occasional mismatch of the Editor view and the final display of your content is caused by differences in how the tinyMCE editor determines the style it uses to display content. It is also related to the fact that tinyMCE doesn't have full access to the theme settings (it is a different dashboard menu selection). Ultimately, the final look of your pages depends on the browser used to view the pages.

Entering Raw HTML and Scripts

A not commonly known feature of the WordPress page and post editor is the significant amount of automatic formatting and filtering it does. It will automatically add paragraph tags, it will "texturize" content by changing quote marks to "curly" quotes and others, it adds smiley graphics, and does some other automatic character conversions. This automatic formatting happens even if you use the HTML view. The HTML view will allow you to add some HTML markup, but the auto-paragraph filtering still happens.

Sometimes you just need to enter HTML markup, and even JavaScript code, and have the page look exactly how you want it to. You might have HTML from another site or page you've created somewhere else. Weaver has a per page and per post option called "Allow Raw HTML and scripts." If you check this option, your page content will not be filtered. Shortcodes are still processed. This option also disables the Visual editor. If you were to switch between the HTML and Visual editor views, your carefully crafted HTML code will be altered.

If you check the "Disable Visual Editor" option, the Visual editor will be disabled, and your simple HTML will be left alone, but the auto-paragraph and other filtering will still happen.

Post Formats

Beginning with WordPress Version 3.1, a new feature has been added to the Edit Post screen - Format. Weaver supports several additional Post Formats over the Standard one. You may find the Post Formats useful. Posts with a Format specified will display a "pre-title" showing the Format. This helps these posts stand out. The descriptions for each Post Format describe how the post will be displayed from the blog pages. Archive pages display the post as an excerpt, but with the Format type's titles. These Post Formats were modeled after Twenty Eleven.

Aside

The Aside Format is intended to display a short note from the author. This Format does not display the post title or category info, and puts the date and author at the bottom.

Gallery Post Format

If you check this for a post, Weaver will display this as a Gallery. When displayed on the blog page, a Gallery Format Post will display 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.

Link

The Link Format is intended to display links. It will be displayed like the Aside, but with Link as the title.

Quote

The Quote Format is intended for quotations. (For the language sticklers, this should be called Quotation, but Quote is the name used.). It works like any other post, but with a "Quote" pre-title.

Status

The Status Format is intended for a short status update from the author. It displays like an Aside, but also add the Author's avatar to the post.

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.

Per Post Style

Per Post Style allows you to add CSS styling to a specific post. To add CSS, you place rules in the Per Post Style box. Each rule should be bracketed by the usual {}'s, and you should not add the <style> and </style> tags. If you want the rule to apply to the entire post, you would just provide the {}'s with no class or id name. If you are styling a specific element in the post (e.g., '.entry-title a' for the post's title), then add the class or id name. (See the example below.) Weaver will automatically add a post specific id (in the form '#post-nnn') to the beginning of each rule you provide. Note that this means you cannot combine classes into one rule (e.g. '.class1, .class2 {style info}'). Use a separate rule for each class or id.

For example, to put a yellow background with a border and some padding around the post, plus make the title italic, add the following CSS to the Per Post Style box:

{background-color:yellow; border:1px solid blue; padding:5px;} /* style entire post with these styles */
.entry-title a {color:red; font-style:italic;} /* make the title red and italic */

Here's a list of most of the elements of a post:

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, Upper/Right, and Lower/Left 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 can be used 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 "Hide Page on the Primary Menu" option will hide the specific page from the automatically generated Primary menu. If you define a custom Primary menu, then this option isn't really needed. This will not hide the page from the Page widget - you will have to use the exclude feature of that widget to hide the page there. One good use of this option is to remove obsolete pages from your primary menu, yet retain the page's URL so that if other sites have linked to it, there will still be a page there.

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. You can include specific CSS rules here, but you must wrap them in a <style>...</style> block.

The other options match one to one with the equivalent Advanced Options HTML Insertion areas. These include: preheader, header, premain, precontent, presidebar_left, presidebar_right, precomments, prefooter, footer, postfooter.

Weaver Shortcodes

The Weaver theme includes some shortcodes to allow you to easily add extra content and features to your regular content. The Weaver II Basic shortcodes are described here. Weaver II Pro includes several others, and they are described in a separate document.

[weaver_breadcrumbs] Shortcode

The [weaver_breadcumbs] shortcode allows you display "breadcrumbs" to the current page. This is the same breadcrumb content as displayed in the standard Info Bar. The intent of this short code is to allow you to disable the default Info Bar and place the breadcrumbs wherever you like.

Shortcode usage: [weaver_breadcrumbs class='alt-class' style='inline-style']

  1. class='alt-class-name' - By default, the breadcrumb is wrapped with the same .breadcrumbs class used in the Info Bar. You can specify an alternate wrapping class if you wish.
  2. style='inline-style-rules' - Allows you to add inline style to wrap output of the shortcode. Don't include the 'style=' or wrapping quotation marks. Do include a ';' at the end of each rule. The output will look like style="your-rules;" - using double quotation marks.

[weaver_header_image] Shortcode

The [weaver_header_image] shortcode allows you display the current header image wherever you want. For example, you can get the header image into the Header Widget Area by using this shortcode in a text widget. The current standard or mobile header image will be displayed. Only the <img ... > is displayed -- the image will not be wrapped in a link to the site.

Shortcode usage: [weaver_header_image h='size' w='size' style='inline-style']

  1. w='size' h='size' - By default, no height or image properties are included with the header <img ... >, which will result in an image scaled to fit into whatever the natural width of the enclosing HTML container is (the content area, a text widget, etc.). You may specify an explicit value (usually in px) for the height and width of the image.
  2. style='inline-style-rules' - Allows you to add inline style to wrap output of the shortcode. Don't include the 'style=' or wrapping quotation marks. Do include a ';' at the end of each rule. The output will look like style="your-rules;" - using double quotation marks.

[weaver_html]

The Weaver [weaver_html] shortcode allows you to add arbitrary HTML to your post and page content. The main purpose of this shortcode is to get around the auto paragraph and line break and other HTML stripping functionality of the WordPress editor.

Shortcode usage: [weaver_html html-tag args='parameters']

  1. html-tag - The first parameter to the shortcode must be present, and must be a standard HTML tag - p, br, or span, for example. You just supply the tag - no quotation marks, no '=', just the tag. The shortcode provides the < and >. If you need a wrapping HTML tag (e.g., span and /span), use two shortcodes:
    [weaver_html span args='style="color:red"']content to make red[weaver_html /span]
  2. args='parameters' - Allows you to specify arbitrary parameters for your HTML tag. See the example above.

[div]text[/div]

The Weaver [div] shortcode allows easily add HTML <div> tags to your post and page content. The main purpose of this shortcode is to get around need to switch to the HTML editor view when you need to wrap your content in a <div>.

This will work exactly like a standard HMTL <div> tag. It supports 'id', 'class', and 'style' parameters, which are the most useful. Instead of wrapping your text in <div> tags, wrap them like this (the Visual view will work just fine):
[div style="font-size:20px;']This content will be large.[/div]

Shortcode usage: [div id='class_id' class='class_name' style='style_values']text[/div]

  1. id='class_id' class='class_name' style='style_values' - Allows you to specify id, class, and style for the <div>. See the example above.

iframe - [weaver_iframe]

The [weaver_iframe] shortcode allows you easily display the content of an external site. You simply have to specify the URL for the external site, and optionally a height. This shortcode automatically generates the correct HTML <iframe> code.

Shortcode usage: [weaver_iframe src='http://example.com' height=600 percent=100 style="style"]

  1. src='http://example.com' - The standard URL for the external site.
  2. height=600 - Optional height to allocate for the site - in px. Default is 600.
  3. percent=100 - Optional width specification in per cent. Default is 100%.
  4. style="style" - Optional style values. Added to <iframe> tag as style="values".

Blog Page Navigation - [weaver_pagenav]

The [weaver_pagenav] shortcode allows you display numbered blog page navigation links on blog pages. This is the same page navigation content as displayed in the standard Info Bar. The intent of this short code is to allow you to disable the default Info Bar and place the number pages wherever you like. Note: this shortcode will display output only on blog pages - there will be nothing on standard static pages. It is probably most useful when used in an HTML insertion area or in a text widget in a blog page widget area.

Shortcode usage: [weaver_pagenav style='inline-style' end_size=1 mid_size=2]

  1. style='inline-style-rules' - Allows you to add inline style to wrap output of the shortcode. Don't include the 'style=' or wrapping quotation marks. Do include a ';' at the end of each rule. The output will look like style="your-rules;" - using double quotation marks.
  2. end_size=1 mid_size=2 - This shortcode uses the standard WordPress function paginate_links to generate the links. The end_size and mid_size are used to specify how many page numbers are displayed at the ends of the list, and surrounding the current page when in the middle of the list. The defaults are 1 and 2. You can experiment to get whatever looks best for your site.
  3. error_message='text' - If you want, you can have the shortcode display a message on non-blog pages.

[weaver_show_if_mobile] / [weaver_hide_if_mobile]

The [weaver_show_if_mobile] and [weaver_hide_if_mobile]shortcodes allow you to selectively display content depending if the visitor is using a standard browser or a mobile device browser. You might want to disable a video on for mobile devices, or even disable the Weaver Slider Menu on mobile devices, for example.

Shortcode usage: [weaver_show_if_mobile type='mobile']content to show[/weaver_show_if_mobile]

You bracket the content you want to selectively display with [weaver_show_if_mobile] or [weaver_hide_if_mobile] and closing [/weaver_show_if_mobile] or [/weaver_hide_if_mobile] tags. That content can contain other shortcodes as needed.

The type argument can specify 'mobile' which includes all mobile devices (not tablets), 'touch' which includes touch sensitive mobile devices (e.g., small screen phones),'smalltablet' for small screen tablets (e.g. Kindle Fire), 'tablet' which includes only tablets such as the iPad, or 'any' which will include any mobile device. The default is 'mobile'.

[weaver_show_if_logged_in] / [weaver_hide_if_logged_in]

The [weaver_show_if_logged_in] and [weaver_hide_if_logged_in]shortcodes allow you to selectively display content depending if the visitor is logged in or not.

Shortcode usage: [weaver_show_if_logged_in]content to show[/weaver_show_if_logged_in]

You bracket the content you want to selectively display with [weaver_show_if_logged_in] or [weaver_show_hide_if_logged_in] and closing [/weaver_show_if_logged_in] or tags [/weaver_show_if_logged_in]. That content can contain other shortcodes as needed.

[weaver_show_posts] Shortcode

The [weaver_show_posts] is a very powerful tool for displaying posts from within your pages or from a text widget. Among other possibilities, it can be used to get a magazine style layout on your pages. This shortcode is intended to display a relatively small number of selected posts. It does not split posts into multiple pages like a blog page does. If you need selective display of many posts, the Page with Post page template is the better choice.

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.

The default global settings for various post display options will be used unless overridden with a value in the shortcode. If there are more posts than 'number' that match the filter, only the first 'number' posts will be displayed. 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="" post_type= "" 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="" left=0 right=0 clear=0]

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.

Important Note: [weaver_show_posts] will work on pages, widget areas, and even from within most posts. The only thing you need to be careful about when using this in a post is to avoid including the current post in posts that would be displayed by the shortcode. For example, don't use the shortcode inside a post that is in "Category A" to display other posts from "Category A". This creates an endless nesting situation (technically, called infinite recursion) that will likely fail with the "white screen of death". But don't worry - that can't happen from regular pages and widget areas, and not from most posts, either. But you can't use it within a post to show "similar" posts from the same category, for example.

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;}

Example of Two Columns

This example demonstrates how to add two columns of posts on a page. This example will display the first 5 posts in the left column, and the last 5 posts in the right column. 

[weaver_show_posts sort="DESC" number="5" left=1]
[weaver_show_posts sort="ASC" number="5" right=1 clear=1]

[weaver_site_desc]

The [weaver_site_title] and [weaver_site_desc] shortcodes allow you display the current site title and site description. This can be useful in a text widget in the Header Widget Area, for example.

Note: If you want to position the content of a text widget within the a cell of the Header Widget Area, you could use the following example:

[weaver_site_title style='font-size:150%;position:absolute;padding-left:20px;padding-top:30px;']

Shortcode usage: [weaver_site_title style='inline-style'] [weaver_site_desc style='inline-style']

  1. style='inline-style-rules' - Allows you to add inline style to wrap output of the shortcode. Don't include the 'style=' or wrapping quotation marks. Do include a ';' at the end of each rule. The output will look like style="your-rules;" - using double quotation marks.

Video - [weaver_vimeo], [weaver_youtube]

Weaver II supports specialized shortcodes to display video. While there are other ways to embed video, the Weaver II versions have two important features. First, they will auto adjust to the width of your content, including the mobile view. Second, they use the latest iframe/HTML5 interface provided by YouTube and Vimeo.

Specifying Video Display Size for both shortcodes

Weaver II supports a common set of options for both the YouTube and Vimeo shortcodes to support displaying your videos with a specific width and correct height. By default, your videos will be displayed using the full width of the content area being used (percent=100). The percent= parameter is used to specify the width you want.

The height of the video is automatically determined based on the width and the display ratio of the particular video. By default, Weaver II will assume a widescreen 9:16 ratio (height is width*0.5625). If you specify 'sd=1', then standard def ratio is assumed (3:4 ratio - height is width*0.75). If you have a custom sized video clip, you may also specify an exact ratio (e.g., 3:9, or ratio=.333). Both Vimeo and YouTube will accept videos with custom ratios, but they must be generated correctly without any letterboxing to display correctly.

Finally, you may specify if the video should be centered or no within the display area using "center=0" to not center (centering is on by default).

Note - if you want to display more than one video horizontally, use "center=0" and specify an appropriate percentage to fit all the videos.

Parameters in Common

Vimeo

[weaver_vimeo vimeo-url id=videoid sd=0 percent=100 ratio=0.5625 center=1 color=#hex
   autoplay=0 loop=0 portrait=1 title=1 byline=1]

This will display Vimeo videos. At the minimum, you can provide the standard http://vimeo.com/nnnnn link, or just the video ID number (which is part of the Vimeo Link). The other Vimeo specific options include:

YouTube

[weaver_youtube youtube-url id=videoid sd=0  percent=100 ratio=0.5625 center=1 rel=1 https=0 privacy=0 {youtube options}]

This will display YouTube videos. At the minimum, you can provide the standard http://youtu.be/xxxxxx share link (including the options YouTube lets you specify), the long format share link, or just the video ID number using the id=videoid parameter (which is part of the YouTube Link). The other YouTube specific options include:

In addition to the above [weaver_youtube] options, the shortcode also supports most standard YouTube options. These are more fully described on the YouTube Embedded Player Parameters page.

The supported options, with Weaver's default values include:

'autohide' = '1' . . . . . . 0: always show controls; 1: autohide controls; 2: autohide progress bar
'autoplay' = '0' . . . . . . 1: auto play; 0: don't
'border' = '0' . . . . . . . . 0: no border; 1: border using color1 and color2 (don't seem to work)
'color' = not set . . . . . . progress bar color - red or white
'color1' = not set . . . . . RGB hex value for border color
'color2' = not set . . . . . RGB hex value for control bar bg
'controls' = '1' . . . . . . . 0: hide player controls
'disablekb' = '0' . . . . . . 1: disable keyboard controls
'egm' ='0' . . . . . . . . . . . 1: enable "Enhanced Genie Menu"
'hd' = '0' . . . . . . . . . . . . 1: enable HD playback by default
'iv_load_policy' = '1' . . . 1: show annotations; 3: don't show; 2: discontinued support
'loop' = '0' . . . . . . . . . . . 1: loop video
'modestbranding' = '0' . .1: hide YouTube logo - will still show label in upper right corner
'origin' = not set . . . . . . . See YouTube docs
'playlist' = not set . . . . . . Comma separated list of videoIDs to play (id/url video played 1st)
'showinfo' = '1' . . . . . . . 0: hide video title
'showsearch' = '1' . . . . . 0: hide video searchbox
'start' = not set . . . . . . . start vide this number of seconds from start
'theme' = 'dark' . . . . . . . dark or light - display theme for player
'wmode' = 'transparent' . Keeps video behind menu bars, etc. Other values available - see YouTube

Custom Menus

One of the 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. Weaver II allows you to define two custom menus to be used with the main menu bars. If you have defined two custom menus, they will be placed above and below the site header image. (You can also define other custom menus for use with Weaver II Pro extra menus, as well as the custom menu widget.)

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 looks 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.

  4. Define Other Menus for Weaver II Pro
    Weaver II Pro includes an "Extra Menus" shortcode. While the previous explanation about the Primary and Secondary menus is true, you can really define as many menus as you want or need. You can then use the extra menu names for Weaver II Pro's extra menus.

Built-in Support for Other Plugins

Weaver includes built-in support for a few plugins available from WordPress.org. These plugins have been tested, and work well with Weaver.

  1. Meteor Slides - This plugin uses shortcodes to display a slide show. Weaver includes some extra CSS styling to make Meteor Slide shows display better. You won't need to do anything extra to use this plugin. (Meteor Slides)

  2. Dynamic Headers - This plugin gives you extreme control over your headers. It normally requires some modification to your code, but with Weaver, you can simply upload and activate Dynamic Headers, and it will be ready to use. (Dynamic Headers)

  3. WP PageNavi - This popular plugin adds a page numbered navigation menu for your blog posts. It normally requires modification to code, plus some extra CSS styling. Now you can simply install and activate WP PageNavi, and your site will feature page number navigation. (Note - while Weaver II continues to provide automatic support for WP PageNavi, its functionality is largely duplicated by the new built-in Weaver II Info Bar feature.) The default styling creates menus that work with existing Weaver sub-themes, but you can still use WP PageNavi options to fine tune its appearance, and add custom styling for the .wp-pagenavi rules (see wp-pagenavi documentation about its rules) to the Advanced Options <HEAD> section if needed.

    PageNavi menus can be displayed a the top, bottom, or combination on your post pages. You can add the following rules to the <HEAD> Section of advanced options to control where the PageNavi menus are displayed:

    • Not at top on first page, include at top on subsequent pages: default behavior
    • Always show at top: #nav-above {display:block !important;}
    • Never at top: #nav-above {display:none !important;}
    • Always on bottom: default behavior
    • Never on bottom: #nav-below {display:none !important;}

    You can also control the position of the PageNavi menu by adding these rules to the <HEAD> Section:

    • Left: default
    • Center: .wp-pagenavi {text-align:center;}
    • Right: .wp-pagenavi {float:right;}

    (WP-PageNavi)

  4. Events Manager Extended - This plugin is among the best plugins for managing events for your club or other organization. While it technically doesn't require extra support, adding proper styling information to the EME's settings page makes it work totally seamlessly with your Weaver theme. Please see the Events Manager Extended - Calendar Plugin article on the wprewvr.info web site. (Events Manager Extended)

  5. Mingle Forum - WP Weaver uses the Mingle Forum as the main support forum for the Weaver Theme. This is a simple, easy-to-use, and robust forum that really gets the job done without a lot of unnecessary frills. WP Weaver supports this plugin with its own add-on plugin, Mingle Forum Guest Info, which allows posts without going through a registration process.

Compatible Caching Plugins

Weaver II's Mobile View technology is currently ahead of many current WordPress caching plugins - they simply cannot deal with the way Weaver II generates pages for mobile devices. Many existing cache plugins assume that a site will deliver an identical view of your site when it is visited. However, Weaver II will generate several views for each page depending on the device being used: a standard browser (e.g., Chrome), a smartphone (e.g., a Droid), a small tablet (e.g., Kindle Fire), or a large tablet (e.g., and iPad). Many caching plugins can handle that correctly. But Weaver II goes one more step - it allows a mobile visitor to change the view by clicking the mobile/full view icons. This is where the caching plugins break - they just don't know how to handle that.

Fortunately, after extensive research, we have found two major cache plugins that can work properly with Weaver II: Quick Cache ( Speed Without Compromise ) and W3 Total Cache. Even with these caching plugins, you must make some manual settings, although it is pretty easy.

The settings you must set for these compatible cache plugins involves specifying a list of mobile devices using what is known as their "User Agent" pattern. After you set these values for Quick Cache or W3TC, the caches will not cache your site when visited my mobile devices. Yes - this means your site won't be cached for mobile devices, but the correct content will be delivered, and presumably mobile traffic will be a relatively small portion of your total site visits.

It is also important to note that you must uninstall any existing cache plugin before installing QuickCache or W3TC. Here are the instructions for each:

Quick Cache

Once you have installed and activated Quick Cache (using the regular WordPress plugin installer - search for Quick Cache), you have two simple steps to make it work with Weaver II.

1. Add the list below to the "No-Cache User-Agent Patterns" option near the bottom of the Quick Cache admin panel.

2. Enable Quick Cache with the "Quick Cache (On/Off)" setting at the top.

W3 Total Cache

Once you have installed and activated W3TC (using the regular WordPress plugin installer - search for W3 Total Cache), you have two simple steps to make it work with Weaver II.

1. Open the Page Cache control tab from the W3TC control panel. Under the Advanced options box, there is an option lableled Rejected User Agents. Add the list below to that list box.

2. Set other caching option as needed. This is a complicated process, and beyond the scope of these instructions. But once you add the Weaver II agents, W3TC will deliver the proper pages from your site.

Weaver II's User-Agent Patterns for Quick Cache and W3 Total Cache

For both Quick Cache and W3TC, you will highlight and copy the following list. Then you will paste that list into the appropriate option box of the respective plugin.

Instructions for Quick Cache - paste the list into the "No-Cache User-Agent Patterns" option box in Quick Cache. Paste on a new line starting after the existing "w3c_validator" line. Then "Save All Changes".

Instructions for W3TC - paste the list into the Rejected User Agents box on the Page Cache : Advanced option section. Then "Save All Settings".

Android
hp-tablet
iPad
Opera Tablet
iPod
iPhone
BlackBerry
LG-TU915 Obigo
LGE VX
webOS
Nokia
2.0 MMP
240x320
400X240
Blazer
Cellphone
Danger
DoCoMo
Elaine
EudoraWeb
Googlebot-Mobile
hiptop
IEMobile
KYOCERA
LG/U990
MMEF20
MOT
NetFront
Newt
Nintendo Wii
Nitro
Nokia
Opera Mini
Palm
PlayStation Portable
portalmmm
Proxinet
ProxiNet
SHARP
SHG
Small
Ericsson
Symbian
TS21i-10
UP.Browser
UP.Link
Windows CE
WinWAP
YahooSeeker
Alcatel
Dmobo
Gradiente
GRUNDIG
HTC
Mitsu
Motorola
PANTECH
Samsung
SAMSUNG
Siemens
Vodafone
Smartphone

 

Miscellaneous Notes

Using Weaver in your language

First of all, WordPress and Twenty Eleven 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 Eleven is the current standard theme, its translations should be automatically included when you install WordPress for your language. Because Weaver wording is based on the default Twenty Eleven theme, it uses all the same text phrases found on the visitor side of your site that Twenty Eleven 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 Eleven with 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 Eleven theme directory to the Weaver directory. You may need to use your site's host control panel interface (e.g., cPanel), or use your ftp access. Here are the steps.
  1. Find Twenty Eleven's language directory. It will usually be at "/your-site-root-directory/wp-content/themes/twentyeleven/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 Eleven directory to Weaver's directory: (/your-site-root-directory/wp-content-themes/weaver-ii/languages or /your-site-root-directory/wp-content-themes/weaver-ii-pro/languages). Use your cPanel or ftp to do this.
  3. Your site should now display your native language when visitors see it.

Internet Explorer Compatibility

Microsoft's Internet Explorer has varying native compatibility with Weaver, sometimes depending on what other plugins you are using with your site. The new IE 9 finally seems to be standards compliant, and seems to work perfectly with Weaver. Versions previous to IE 9 have various incompatibilities that have been solved with a special script included with Weaver that works on almost all IE 7 and IE 8 sites.

There are two main incompatibilities with pre-IE 9 versions. First, IE does not support rounded corners or shadows. Weaver includes a fix called PIE that displays rounded corners and shadows on IE 8 and IE 7. IE 7 also requires some special rules to display all elements properly.

By default, Weaver automatically adds support for rounded corners and shadows for IE 7 and IE 8. If by some chance, a plugin or other feature that doesn't display properly (this seems very rare), there is an option near the bottom of the Admin Options page that lets you turn off this support. In that case, your site will work correctly, but have square corners and no shadows on IE 7 and IE 8.

IE 6 is an entirely different issue. WordPress has officially abandoned support for IE 6. Anyone who has access to your site using IE 6 should really upgrade to a later version of IE. If it is important for your site to handle IE6, there are plugins available that will notify visitors that they are using an incompatible browser, and provide upgrade instructions.

Technical Notes

The Weaver theme was originally 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 started to move away from the strict child-theme approach, and has become a true standalone theme with the release of Version 2.0. However, the strong influence of Twenty Ten will always remain, as will the compatibility with 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.) This example is a standard page with a Split Sidebar layout. The names of the sidebar areas will differ for different layouts.

#body
	#wrapper					- wraps whole site
		#inject_preheader			- preheader HTML insert
		#branding				- the header area
			#site-logo			- use CSS to add url of image
			#site-logo-link			- same, but with link
			#inject_header			- site header insert
			#header_image			- standard header image
			#access.menu_bar		- primary menu
		#infobar 				- info bar, if after menu bar
		#inject_premain
  	#main						- main area wraps content + sidebars
			#sidebar_wrap_left		- wraps left sidebar area, if defined
				#inject_presidebar_left
				#sidebar_left		- left widget area
			#container_wrap			- wraps container
				#infobar 		- info bar, if above content area
				#inject_precontainer
	    		#container			- wraps top,bottom widgets, content
					#sidewide-top-widget-area
					#top-widget-area
					#content	- main content
						#inject_precomments
						#comments	- user comments
						#inject_postcomments
					#bottom-widget-area
					#sitewide-bottom-widget-area
			#sidebar_wrap_right		- wraps right sidebar area
				#inject_presidebar_right
				#sidebar_primary
				#sidebar_right
		#inject_prefooter
		#colophon				- the footer area
			#sidebar_wrap_footer		- wraps footer widget areas
				#first
				#second
				#third
				#fourth
			#inject_footer			- footer code
			#site-ig-wrap			- wraps footer bottom line
				#site-info		- copyright
				#site-generator		- powered by
	#inject_postfooter				- last thing, outside #wrapper

 

More Help - Suggestions

WeaverTheme.com has an extensive help Forum. You can leave questions or comments there. No promises on how quickly you will get a response, however.

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

 

Release Notes

Weaver II Version 1.0

Weaver II represents a massive re-write of the previous Weaver version. While the old Weaver started as a true child theme of Twenty Ten, and maintained its close ties with Twenty Ten, Weaver II has totally abandoned that approach. Instead, Weaver II is based on the Twenty Eleven design, but has greatly modified and extended the Twenty Eleven base. It is really a totally different theme, and does not share many of Twenty Eleven's features.

However, starting with the Twenty Eleven base code has yielded some significant advantages over the older Twenty Ten base. The overall design architecture of Twenty Eleven is improved, even elegant. Weaver II has leveraged the elegant Twenty Eleven design to produce a much more robust and easy to modify theme.

Because Weaver II offers so many features and options, it requires a large number of code files. However, most of these files are associated with the administrative interface. While there are still a large number of theme files used for actual site pages, they are actually designed for efficiency. Instead of a few large code files that are used on most pages, Weaver II's files are smaller, and only used on pages that need them. For example, Weaver II now supports a large number of Post Formats. Support for each Post Format is separated into a separate file, resulting in fast, efficient content generation. What this all means is that while Weaver is a "big" theme, it can still support a large variety of options and page layouts while remaining fast. There is no significant speed penalty for using Weaver II on delivering actual content pages.

While Weaver II has an entirely new design, it maintains excellent compatibility with the previous version of Weaver. Almost all options remain, along with many new ones. However, because of some fundamental differences in the design (mostly related to sidebar layout), some manual conversion of old Weaver sites to the new version will be required. This will mostly be re-copying widgets to the new widget areas, which is a relatively simple process.

Summary of Weaver II Features

Weaver II Pro

While the premium Weaver Plus provided powerful advanced features for Weaver, the Weaver II Pro version has been redesigned to offer much better integration with the Weaver II Base version. All options have been integrated into the main theme admin tabs, and are thus easier to find and use. Here's a summary of the new Weaver II Pro features:

 

Upgrading from Weaver

Weaver II represents a massive re-write of the previous Weaver version. Thus, there are some significant differences and incompatibilities in some settings. If you are upgrading from an older version of Weaver, please read this section carefully. It is divided into these sections:

Differences between Weaver and Weaver II

As explained in other parts of this document, Weaver II represents a complete rewrite of the old Weaver theme code. While many of the settings are directly compatible, others have been changed or are no longer needed by Weaver II, and other features are not compatible and require some manual adjustments (which will usually require just a few minutes to fix).

Compatible Items

Most basic "checkmark" settings are compatible from old Weaver to Weaver II. For example, most major background colors and text colors will retain their settings. After you convert your settings, you may find little or no difference in the overall look of your site. All the old sub-themes have been retained, but sometimes with some minor adjustments.

The locations of many of the options in admin tabs have been reorganized in a more logical order.

All the features of the Weaver Plus Theme Extension plugin are supported by Weaver II Pro, which is available to Weaver Plus members for a small upgrade fee. Weaver II Pro includes many new premium features, but the old Weaver Plus shortcodes will work with no changes.

Slightly Different. Not longer used. Might require some manual adjustment.

Some settings are no longer used. For example, the option for a smaller content font is not longer used because the site is now based on a new font size organization and has options on the Fonts tab.

Other options no longer needed have to do with the new organization of the sidebars.

Significant Changes. Manual adjustment required.

The single biggest change is how sidebars are handled. First, there are now new sidebar arrangements. You can set the overall sidebar arrangement for blog pages, static pages, and "archive-like" pages. You can also set the sidebar arrangement on a per page basis.

The new sidebar architecture means you are likely to need to manually move some of your widgets into new sidebar areas. One significant change is that the Alt sidebars are no longer supported in favor of using replacement widget areas on a per-page basis. The primary sidebar is still used, but with slightly different functionality on some sidebar arrangements. The secondary sidebar is also gone, and has been replaced with two new sidebar areas (upper/lower). See the New Sidebars section below on more information on the sidebars.

Finally, the names and total number of page templates has been significantly changed. For example, the Alt-Sidebar templates are entirely gone. The one-column template is also gone, but the functionality is still there by selecting the No Sidebars, one column content per page option instead. Thus, you may have to manually change the page templates and select a per-page sidebar arrangement. No functionality has been lost (in fact, there are many more options), but using the per-page sidebar arrangement may be required instead.

Finally, Weaver, Weaver II and Weaver II Pro are all different themes from the perspective of WordPress. This means that WordPress simply refuses to figure out what Header Image and Background image you might have been using on your old theme to use on a different theme. So whenever you switch between versions of Weaver (or other themes, in fact), you will have to reset these values manually.

Notable New Features You Might Want to Use

Weaver II and Weaver II Pro have many new features and options. There are two significant new features that you might want to use if you've converted your settings from the previous version of Weaver. First, the Menus now support different backgrounds and text colors for the drop-down parts of the menu. Second, there is a new info bar (under the Menus admin tab) that will display breadcrumbs and page numbers (on blog pages) that will need to be enabled if you'd like to try it.

The Conversion Process

  1. If you want to simplify sidebar widget area conversion, please read the "New Sidebars" section below.
  2. Install Weaver II. Note that it will install as a new theme. Thus, all of your existing Weaver settings will be untouched. If the conversion to Weaver II is not satisfactory, you will have the option to return to the old version of Weaver.
  3. When you first activate Weaver II and enter the admin panel, you'll see a red notice at the top letting you know that Weaver II has discovered your previous Weaver settings. In order to convert your old settings, you will need to open the Save/Restore tab. Near the bottom, you'll find an option called "Convert Weaver 2.2 Settings to Weaver II 1.0 Settings". If you click the "Convert Old Weaver Settings", Weaver II will do that.
  4. You will now get a "Weaver to Weaver II Conversion report". It is very important that you read the information in the report. You might even want to copy/paste that information into another document - either a word processor document, or even a draft WordPress page. The report will notify you of several kinds of information:
    1. Options that are no longer supported or needed. While some of these may affect the look of your theme, since they aren't supported, there is nothing additional you can do. One notable example is how image borders are now handled. The caption has been moved outside of the border, and thus some options related to image captions have been eliminated.
    2. Manual Conversion Required - These can be important, but not always. For example, Weaver II uses a different font size model, and the option for smaller content font size is not directly supported. Instead, you may need to adjust the base font size on the Fonts tab. Another common reason you will see this message is for the SEO meta tag info. This information is handled differently in Weaver II to get better SEO performance, and you will have to manually fix the SEO meta tags on the SEO tab.
    3. CSS Rules detected - this message means that the converter detected use of custom CSS. Depending on just what the code does, you may or may not have to manually re-add the CSS. If the code is related to the old theme (e.g., Red or Mist), you can probably ignore them as the new sub-theme definitions have been modified to work with Weaver II. Most likely you should copy/paste the CSS detected, and then manually re-add it to the new "Custom CSS Rules" block on the Advanced Options <HEAD> Section tab.
    4. Manual attention required - This is a general warning about some other incompatibilities - mostly how the sidebars work. There's a more detailed explanation of sidebars below.
  5. If you've followed these instructions, you should have your site running using the Weaver II theme. Other than fixing the sidebars as described below, and perhaps re-setting the header image, your site should now be very close in appearance to the previous version. While it might not be exactly the same, just a little tweaking should get you back to where you were.

The New Sidebars

Weaver II has completely redesigned the major sidebar areas. Some of the previous sidebar areas have been eliminated, and some renamed. What this means is that when you switch to Weaver II, some of you widgets will no longer be properly associated with a sidebar areas.

Part of this is a logical dilemma WordPress faces when switching themes with different sidebar areas. It turns out that widgets are assigned to sidebars with different names. If the names change from theme to theme, WordPress has no idea of just which of the different sidebar areas to use. If the sidebars are the same, it will keep the widgets in the same sidebars. Otherwise, it will put the "lost" widgets into the "Inactive Widgets" box at the bottom of the Appearance→Widgets admin page. The contents of the widgets are preserved, however.

The main difference in widget areas is that the sidebars now support three widget areas, called Primary, Left, and Right. If you select one of the "Double Cols" layouts, the Primary widget will be displayed as a wide area above or below the side by side Left and Right areas. Thus, the Primary widget area has changed behavior for that arrangement. The Secondary widget area no longer exists, and any widgets assigned to it will be moved to the Inactive Widgets box. In addition, the Alternate Widget area is no longer supported since you can now specify widget area layout on a per page basis.

So here's the easiest way to move your widgets:

  1. Before you activate Weaver II, clear all existing widgets from the "Inactive Widgets" box on the Widgets admin page. This will make it much easier to find the widgets you already are using in Weaver's widget areas after you activate Weaver II.
  2. Activate Weaver II. This will result in "lost" widget being moved to the "Inactive Widgets" box. Remember that the contents of those widgets is not lost - so if you have a complicated text widget, it will still be there.
  3. After you've selected you new Layout scheme. you can then drag the "lost" widgets to the appropriate new Weaver II widget area.

Converting Page Templates

Because Weaver II has introduced a new set of Page Templates, you will have to manually update any pages that use old Weaver page templates to the new Weaver II templates. Some of them have the same name, others have changed. In any case, you must manually open each page that used a template in the page editor (while Weaver II is activated), and select the new name for each page. In some cases, you will have to check some Per Page options to get the equivalent functionality of the old Weaver page templates.

If you don't reset each page to a new page template, you site will not look the same. In particular, the Page with Posts pages will be blank. Here's a list of the old Weaver II style pages, and how to convert to the new Weaver II style page templates.


Weaver II and this document are © 2011, Bruce E. Wampler. Web Site - WeaverTheme.com