## Weaver Pro Help (Version 1.0)

## Introduction

The Weaver II WordPress theme is already one of the most flexible and easy to use free themes available on WordPress.org. The Weaver II Pro premium version of the Weaver II Theme provides quite a few exciting enhancements, and for a very reasonable price.

Weaver II Pro contains all the features previously included in the Weaver Plus addon, plus new ones. The main difference is that Weaver II Pro is really a "new" theme that includes the Pro features, and the options for those feature are now completely integrated into the Weaver II Base admin interface.

Thanks so much for all the past support. I hope you find Weaver II Pro to be a useful addition to your web design tools.

Bruce Wampler, WP Weaver

## Contents

- More Options - advanced customization options for posts and other site options
- Font Control - adjust the font of any text element - standard or Google Web Fonts
- Total CSS - style almost every CSS rule used by Weaver
- Slider Menu - add sliding image menus to header, sidebars, or anywhere
- Extra Menus - add extra text menus anywhere, including sidebar widget
- Link Buttons - add image link buttons anywhere with shortcode
- Social Buttons - add social link buttons anywhere, including menu, pages, posts, and widget area
- Header Gadgets - easily place images, text, links anywhere on your header
- Widget Areas - add new widget areas anywhere - pages, posts, or advanced html areas
- Search Form - add good looking HTML5 search form anywhere
- Show Feed - include feeds from other sites formatted to match your site's own post styling
- Popup Link - place a link that will popup a new window
- Show/Hide Text - include content that the user can show or hide
- Comment Policy - add comment policy statement after posts - or other content, including shortcodes
- Shortcoder - make up your own shortcodes
- PHP - include PHP code where needed
- Plus Admin - Save/Restore settings; selectively disable Weaver II Pro features
- Appendix - Weaver CSS classes and style ids

### More Options

#### Weaver II Pro - More Options

Weaver II Pro enables many new options. Most of these options were visible, but grayed out, in the Weaver II Base version. The explanation of the new options are included inline with each option.

### Font Control

Weaver II Pro add a whole new font control section to the Font tab that allows you to select a font family and set other font characteristics for virtually every text element on your site's pages. You can pick from a selection of about 20 standard web fonts, or specify any of hundreds of free Google Web Fonts.

The interface has three basic parts. The first, the Weaver Font Style Generator, let you use selection lists to specify the font characteristics you want, and then generates a CSS style string that you can use to fill in the font boxes of any text element. The second part is used to save the <link> information required to use Google Web Fonts. And the last section is a list of the various text elements for which you can specify a font style.

And here's a designer's note about fonts. While it can be fun to look through a whole bunch of fonts, you should try to match the fonts with the content on your site. For example, a cute font might be great on a site devoted to cats, it could easily detract from a serious business site. And don't overdo it. You really don't want a dozen different fonts on your site. Weaver's default design uses just two. You can make a site look good with careful application of fonts to specific areas (like the sidebar, for example), but be careful you don't go too far.

#### Weaver Font Style Generator

Each of the text elements provided in the list of font styles allows you to add a CSS font specification string. You have the choice of entering a font specification directly, or you can use this area to generate an appropriate CSS font specification string.

The first element you're likely to need is the Font Family. You can select one of about 20 standard web fonts from the first selection box, or you can specify a Google Web Font family (more details in the next section). You can also select other font attributes, including font weight, font style, font variant, and font size. Each of these fields has a selection list of possible values. If you leave the field blank, then that font attribute will not appear in the generated font style, but will be inherited from the wrapping HTML area. The font size can also be expressed as an integer value in one of several units. You can find more details about the units on the Web.

Once you've selected all your font characteristics, click the Generate Font CSS Definition button, and the font specification CSS will be generated and displayed in a box below the options. You can then copy and paste that value into one of the text fields after any of the font ares lower down on the screen.

#### Google Web Fonts

Google Web Fonts is a collection of hundreds of free fonts available from Google. Rather than try to provide a built-in "easy" selection of some sub-set of available Google Fonts, Weaver II Pro instead allows you to browse all the fonts available using the Google site interface, and then simply copy/paste two important values required to use any Google font.

Note: You should understand that when you use a Google Web font, the browser viewing your site must upload the font's definition from the Google server, and your site's performance might be affected by how fast Google is able to deliver the font definition. Normally, this will not be a problem, and you should use Google Web fonts without undue concern. You might want to pay attention to the page load meter provided on the Google Font Quick Use page, and pick fonts with a Green level impact.

After you find a Google Font you want to use, you should see a link called "Quick-use" in the lower right of the font sample box. (This is in the Sentence view. If you use the Word or Paragraph view, you'll just see a little blue box with a right arrow). Click on the "Quick-use" link, and you'll get a page that lists all the size and style variants available for the font (most fonts just provide a "normal 400" choice.

Scroll down to box #3 : Add this code to your website. Use the "Standard" tab, which should have something like:
<link href='http://fonts.googleapis.com/css?family=Istok+Web&v2' rel='stylesheet' type='text/css'>

Copy that <link> string, and past it into the #3 <link> code link in the Specify Google Web Font Family box. This <link> information is needed to tell your web site how to find the font.

Now move down on the Google Web Fonts Quick-use page to #4 : Integrate the fonts into your CSS. This box contains the Google font-family name required in the CSS specification.

Once you have these filled in, along with any other font characteristics you may want to specify, click the "Generate Font CSS Definition" button. The proper CSS string will be generated.

Now, in order to use an specific Google Web Font on your site, you must click the "Add Current Google Font to List" button. This will include the <link> code, and the CSS font-family as a comment, and will be included in your site's <HEAD> section to allow it to access the Google font. Failure to take this step will mean than the Google Fonts won't appear on your site.

Note: Weaver's default base font size is 12px. The default size for content text is 133%, or about 16px. So if you set the Google preview size to 16px, you'll get a good approximation of how the font will look in your site's content.

#### Base Site Size

By default, text elements on your site either inherit their size from an outer wrapping area, or have their size specified as a relative em size. You can change the overall font sizes on your site by changing their values.

#### Font Styles

This section specifies nearly every text element used in the Weaver Theme. The first two options, Titles and Content Font, are general specification that match a general design for the theme as a whole. These are really duplicates of the same option in the Main Options section. But can use the Google Web Fonts in this section.

Almost all other text areas are included in the list here, too. Define a font definition in the Weaver Font Style Generator area, and fill in the generated value to the text box after each text element title.

Because of the way CSS works, sometimes specifying a font for one of the options here will override previous settings. The "Headings" is one good example. If you specify a font for "Headings", you may find that more headings, including page titles, will change in surprising ways. If that happens, then you will have to specify fonts for those specific text elements as well.

#### Custom Font Rules

While most text areas are covered by the list provided in the Font Control page, you might occasionally need to specify a font for a specific block of text - perhaps by wrapping a <div> around some text on a page or post. There are four available custom font fields available for this purpose. These fields work slight differently than the pre-defined fields in that you need to enter the class or id and the font CSS code in the field.

For example, say you want the content area of a specific page to have a custom font. Note that each page has a unique id (that is displayed in the upper right corner of the Weaver Par Page optoins box on the page editor). Every page will automatically have the content are wrapped by a <div> with the page's id in the form: <div id="post-xxx">. So, if a page's id was 2662, you could display that page content using this in one of the custom font boxes:

#post-2662 {font-family:"Comic Sans MS",Arial,sans-serif;}

If you need to specify more than 4 custom fonts, you can add rules to the <HEAD> Section as needed.

#### Other Font Kits

While Weaver II Pro makes it easy to use standard and Google Web Fonts, you should also be able to use Font Control to help you use fonts from other font services such as Typekit. For example, with Typekit, paste the required <script> code they provide to access your font kit into the Weaver Advanced Optons <HEAD> Section. Then, use a blank font family in the Font Style Generator, and paste the Typekit font-family:typekit-font-name; attribute into the {xxx} code in the Font CSS box for the text area in question.

## Shortcodes

Settings and quick information about the various shortcodes supported by Weaver II Pro are found on the Appearance->Shortcodes + Pro admin page.

### Total CSS

These settings will be most useful for advanced web designers. This tab allows you to add custom CSS rules to almost every CSS tag used by Weaver. There are over 250 CSS tags listed here. These rules are emitted, in the order shown here, at the end of the generated style file (or in-line style), but come before styles in the Custom CSS Rules Section. Rules for the main menu areas (#access, etc.) are not included here. Most links are handled in the Main Options. Many of these tags duplicate equivalent cases in Main Options

Weaver will auto-add the required {}'s. If you want to double up on rules, you can add rules after the first {} - e.g. {background:green;} #main {border:1px solid red;}. You can't add any tags before the first {}. Just leave an empty {} if needed.

### Slider Menu

#### Slider Menu Shortcode - [weaver_slider]

This tab configures the Weaver II Pro Slider shortcode. These are the basic steps:

1. First, you MUST use the WP 3 Appearance->Menus admin option (Menu box in the upper right corner) to define a custom menu for each Slider you've defined. For each slider, you can define from 2 to 8 Menu items. Don't define sub-menus. Failure to follow these guidelines will result in a broken-looking slider.
2. Set the options for each Slider. Create and specify images to be used. You can change the default sizes. The actual display width (or height for vertical menus) of each image on the menus is automatically adjusted.
3. Show your Slider! Add the `[weaver_slider id=1]` shortcode to your site for each Slider. For example, add `[weaver_slider]` to "Site Header Insert Code" from "Advanced Options→HTML Insertion" to display the first slider (id=1, the default) in your site header. Add `[weaver_slider id=2]` to a standard Text Widget to add a vertical slider to a sidebar. If you are placing a horizontal slider in the header, you likely will want to disable the standard header image. (Set "Header Image Height" to 0 in Main Options->Header Options)
4. Once you have defined any Slider Menus, you must check "Enable Slider Menu". None will display until you do.

You can define as many different Sliders as you need. Each slider has the following settings:

- Select Menu - Select a custom menu (from list) to for this slider. Sub-menus are not supported!
- Hide Menu Text - Hide standard Menu names over each image. Useful if your image contains the Menu name.
- Number of Images in Menu - Number of Images in Menu (must be between 2 and 8). Default is 7.
- Menu Width - Overall width of Slider Menu. (Typically matches image width for vertical menus, theme width for horizontal menus.)
- Width of each image - Enter the width in px of each image. For horizontal sliders, this will affect the exact look of the slider effect. The default 320 works will with 7 horizontal images. For vertical sliders, this will be the width of the slider. Use 210 width for slider in text widget with default sidebar. (130 is good matching height.) Each image must be the same width.
- Height of each image - Enter the height in px of each image. This will determine the height of your slider menu. Each image must be the same height.
- Vertical Menu - Check for vertical menu. When using vertical menus, you also specify the "Compressed height for each image". The compressed value, image height, and number of images interact to determine total height of vertical menu. Not used for horizontal menus.
- Images Only, No Sliding - If you don't need or want the slider effect, you can make a very good looking static image menu.
- CSS for Menu Text - You can specify the font characteristics of the menu text. A nice default is provided.
- Slider Menu CSS - You can also provide CSS for the whole slider menu, which allows you to add borders, for example.
- Slider Image Locations - Specify full URLs for each image in the slider. The images are best kept in your Media Library.

#### Example Menu Text Styling

Transparent bar on top, centered text, looks good on vertical menus. Change text-align:center to text-align:left for horizontal menus.

>     width:100%; font-family:arial,sans-serif; text-align:center; color: white;
>     background-color: rgba(0,0,0,.4); font-size: 12pt; font-weight:bold; padding:4px 0px;

### Extra Menus

`[weaver_extra_menu menu='menuname' style='stylename' width='width_override' css='extra_css']`

The `[weaver_extra_menu]` short code allows you to display a menu you've defined in the Appearance→Menus panel almost any place in your site: in a sidebar text widget, on a post or page, or in one of the HTML Insertion areas found on the Weaver Admin→Advanced Options tab. Simply insert the shortcode with at least a menu name wherever you want the menu to appear.

1. menu= - The 'menu' parameter allows you to specify which custom menu to display. The name of the menu can be a 'Menu Name' used in the tabbed menu definition area, or the slug name of one of the 'Theme Locations' box (a slug is all lower case with no spaces of the Navigation name).
2. style= - The 'style' parameter is used to specify how the menu will look. You can use one of several pre-defined styles, or add your own custom menu styling in the <HEAD> Section on the Advanced Options tab. The pre-defined styles include:
   1. `access`, `access2`, and `access3` - These are the style names of the standard bottom and top menu bars. For example, using `[weaver_extra_menu menu='mymenu' style='access2']` in the Pre-Footer Code area will display custom menu 'mymenu' right above the footer using the same styling as the top menu bar. Note that `access3` is a duplicate of `access` added of use with [weaver_extra_menu]. (`acccess3` will not include rounded corners.)
   2. `menu-vertical` - Displays a simple Vertical Rollover menu in a width that matches the width of the primary sidebar. It will use the same colors as you've defined for your main menu bars. Simply add `[weaver_extra_menu menu='mymenu' style='menu-vertical']` to a standard text widget placed on a sidebar widget area.
   3. `menu-horizontal` - Displays a very simple horizontal one-level menu. The links are styled using the standard link colors and styles of the section the menu is placed. This style is useful for placing a simple link menu right below your main menu, for example.
   4. `menu-vertical-default` - Displays a simple vertical menu using standard list and default link formatting.
3. width= - Allows you to specify the width of the outer box surrounding the menu. You could use it to make a narrower "access" styled menu, for example. You can use px or % to specify the width.
4. css= - You can specify any CSS styling for the outer <div> that wraps the menu. This will be placed in a `style="css..."` parameter.

Weaver II Pro Vertical Menu Widget - This widget will display a simple rollover vertical menu in the widget. This is essentially the same vertical menu you can get using the shortcode with the .menu-vertical style. The widget lets you select the menu from the widget control box. Note - Custom Sidebars: If you have customized your sidebar with extra padding or borders (e.g., the Kitchen Sink sub-theme), the default vertical styling may not have the correct width. You can fix this by adding `.menu-vertical {width:254px !important;}` to the <HEAD> Section in Advanced Options, and adjusting the '254px' to fit.

### Link Buttons

#### Link Buttons - [weaver_buttons] + Widget

`[weaver_buttons start='first-to-show' end='last-to-show' list='4,1,2']`

The `[weaver_buttons]` short code allows you add images buttons your define with links you define. You can specify which image to begin with (1 to n) with the 'start' parameter, and the same with the 'end'. The defaults are start=1 and end=n, but images with no image URL defined won't be displayed. You can specify different sets of images with different instances of the shortcode. You can style with .weaver-buttons.

If you specify a comma separated list with the 'list' parameter (e.g, `list='7,4,1,2'`), you can specify an arbitrary set and order of buttons. If you do specify a 'list' parameter, then 'begin' and 'end' will be ignored.

For each button you want to define, add a full URL to an image sized to the size you want your button to be. It is best to keep the button image in your Media Library. Then add a hover message, and the complete URL to where the button should link to (optional). Check the New Page box if you want the link to open a new tab or page when clicked.

If you want to use the shortcode to include buttons Buttons on your menu bar, add the following code to the MainOptions→Menus→Add HTML to Menu Bar settings:
`<div style="width:60px;padding-top:5px; padding-right:10px;">[weaver_buttons start=1 end=2]</div>`.
Note this example will display two buttons. Note that 24px height is optimal for the menu bar. The wrapping `div` is required to get the buttons centered properly, and you will have to adjust the `width:` value depending on how many buttons you want on your menu bar.

Weaver II Pro Link Buttons Widget - When used in the Weaver II Pro Link Buttons widget, all buttons you've defined will be displayed using their actual size in the order defined. There are no other options for the widget version.

### Social Buttons

#### Social Buttons - [weaver_social] Shortcode and Widget

`[weaver_social height='height' number='showcount']`

The `[weaver_social]` short code allows you add Social site buttons with links to your account or page.

To display social buttons, check the buttons you want to show. Provide the full URL to your account link. For example: `http://twitter.com/wpweaver`. You can specify the display order in the Display Order column using the WordPress ordering method used to order your static pages: 10,15,30, etc. Lower numbers display first - they don't have to be sequential. If you leave the display order blank, it will sort as if you had entered 100000 - last, in other words.

If you want to use the shortcode to include Social Buttons on your menu bar, add the following code to the Main Options→Menus→Add HTML settings:
`<div style="width:60px;padding-top:5px; padding-right:10px;">[weaver_social number=2]</div>`.
Note this example will display two buttons, 24px high (the default). The wrapping `div` is required to get the buttons centered properly, and you will have to adjust the `width:` value depending on how many buttons you want on your menu bar.

When used in the Weaver II Pro Social Buttons widget, all buttons you've selected will be displayed using 32px high images. There are no other options for the widget version.

A note about the URL: The exact form of the URL you add for each button will depend on the service in question. Almost all of these services allow you to set up an account, and then provide a URL address for other people to view your account's public page.

Note: you can click a service's icon on the list to open the site's main home page if you want to learn more about a particular service.

### Header Gadgets

#### Header Gadgets - Links, Images & Text over the Header

This feature allows you to add 'gadgets' (mini-widgets) anywhere over the site header. You can use images or text, and add links. You can place these anywhere over the header area of your site.

You can add an arbitrary number of gadgets (images or text strings) over your header. You can specify how far down from the top (y) and the left (x) each one is displayed (negative values OK). You can also add a link to the gadget. Images will work best if you use an image from your Media Library (just copy the full URL from the Media image view).

Options for each gadget include:

- X position, Y position - specify location on header.
- Show only on Page - Specify Page ID #, or leave blank to display on all pages.
- Image URL - The full URL of an image to display. Leave blank for no image.
- Text - Arbitrary text, including shortcodes. Leave blank for none.
- Extra CSS Styling - Add custom styling to the gadget.
- Link URL - If you want the item to be a link, specify a URL.
- Gadget items allowed - You can specify as many gadgets as you need.

Placing a gadget image that crosses the right edge of the header

Normally, an image displayed using a Header Gadget will display full sized. However, because of some characteristics of HTML margins, if you try to place an image close to the right side expecting the image to simply overflow the header margin to the right, you may be surprised. Insetad, the image will be scaled to fit. You can get around this issue by adding width="64px" (using the actual image width) to the Extra CSS Styling box. This also works if you find the placement of the widget causes the image to display at the wrong size.

### Widget Areas

#### Widget Area - [weaver_widget_area]

`[weaver_widget_area id='area-name' class='alt-class-name' style='inline-style-rules']`

The `[weaver_widget_area]` short code allows you display a new widget area anywhere on a post or page. This short code will use one of the new widget areas defined on the Main Options:Widget Areas (at the bottom) tab of the Weaver Admin Page. Simply add a new widget area name, just as you would for a per page widget area. Fill the widget area with widgets. Then use the name of the widget area in this short code..

Shortcode usage: `[weaver_widget_area id='name' class='alt-class' style='inline-style']`

1. id='area-name' - The id of the new widget area defined in Advanced Options.
2. class='alt-class-name' - By default, the extra widget area will be styled just like other page widget areas (top, bottom, per-page). You can add additional styling using .per-page-thename, or by providing your own style class name as a parameter to the shortcode.
3. style='inline-style-rules' - Allows you to add some inline style to wrap the widget area. 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. By default, the widget area will include an inline style to auto-center the widget area.

#### Example: Wide Widget Area above Double Sidebar

The Weaver Widget Area short code can be used in the Advanced Options Pre-Sidebar Code area to add a wide sidebar area above the standard sidebars. For example, using the "Two, unequal widths, leftside" sidebar columns settings, and defining an extra area called 'big' in the Page Templates tab, then adding just `[weaver_widget_area id='big' style='margin-left:0px;width:398px;']` to the Pre-Sidebar Code area, will create a wide sidebar above the default two columns. You can adjust the width and margin-left to get exact placement.

### Search Form

#### Search Form - [weaver_search]

`[weaver_search width=nn]`

The `[weaver_search]` short code allows you display a search box within a page, post, or text widget.

Shortcode usage: `[weaver_search width=nn]`

Normally, the Weaver II Pro Search Form will replace the default search form in the standard Search Widget with an attractive HTML5 compliant search form. The width of the search form will be automatically set to fit the sidebar, and the default search message will be "Search Your-site-title". You can change the width of the search form from the shortcode, and you can change the default text.

You can change the default search message, switch to a "Go" icon instead of the default "Magnifier" icon, or even specify your own search icon.

### Show Feed

#### Show Feed - [weaver_feed]

`[weaver_feed feed='url' items=10 show_sitename=0 show_content=1 excerpt=0 trusted=0 title_style='']`

The `[weaver_feed]` short code allows you display an RSS or Atom feed from an external source. The styling of the feed will match the style of the site's own posts.

Shortcode usage:
`[weaver_feed feed='url' items=10 show_sitename=0 show_content=1 excerpt=0 trusted=0 title_style='']`

1. feed='url' - The url of the external feed.
2. items=10 - By default, [weaver_feed] will display up to 10 items from the feed. Many feeds won't have even 10 items. You can limit the number of items displayed by providing a value between 1 and 20.
3. show_sitename=0|1 - If set to '1', the feed will include an RSS icon with a link to the site's RSS feed, as well as the site's feed name. The default is '0', don't show the site name.
4. show_content=0|1 - By default, the summary content of the feed will be included (1). If you include `show_content=0`, the site content will not be displayed.
5. excerpt=0|1 - By default, the full content of the feed will be displayed. This is usually short in feeds. If you want the feed's content to be forced to be short, use `excerpt=1>` which will force an excerpt.
6. trusted=0|1 - By default, [weaver_feed] won't trust external feeds - that means it will strip out any html from the feed content, and just show text. If you trust the feed, you can use `trusted=1`, and any HTML tags such as links will be retained.
7. title_style='inline-style-rules' - Allows you to change the styling of the post title. 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. This is most likely useful to reduce the title size (e.g., `style='font-size=100%;'`)

Example

To show the WP Weaver Theme feed in a regular page, use:

[weaver_feed feed='http://weavertheme.com/feed/' trusted=1 title_style='font-size:110%;']

### Popup Link

#### Popup Link - [weaver_popup_link]

`[weaver_popup_link href='url' h='height-px' w='width_px']link-content-text/image[/weaver_popup_link]`

The `[weaver_popup_link]` short code allows you display any web-address in a "popup" new browser window. The power of this is that you can display content such as help, media, or whatever, in a new browser window while the visitor continues to browser you site.

Shortcode usage: `[weaver_popup_link href='url' h='height-px' w='width_px']link-content-text/image[/weaver_popup_link]`

1. link-content-text/image - This shortcodes works much like a standard <a> tag. The content between the beginning and closing shortcode tags will be displayed to identify the popup link. Just like with a regular <a> tag, the link content can be an image or regular text. Note that this shortcode is fairly simple minded, and simply opens a minimally sized browser window. It does not use fancy JavaScript or Flash to accomplish the goal.
2. href= - The 'href' works just like the 'href' in a regular <a> tag - it is the full url of a page you want displayed in a new browser window. This can be an external web page, or an internal site page. One of the intended uses of the Weaver Pop Up Page Template is to serve as a target for this shortcode. When you create a 'Pop Up' page, and also check the 'Hide Entire Header', 'Hide Entire Footer', 'Hide Sidebars', and 'Hide Page on the Primary Menu' per page options, the page will be displayed only with the content you enter into the page content area with the page editor. This content could be an image, a media player, or whatever you want.
3. h= - The desired height of the popup window. Most browsers will honor this size request, but not all browsers do (Chrome has minimum window sizes at the moment, for example). This height should correspond to the exact height of your popup content. Most current browsers also will leave their top bar and other parts displayed along with your content.
4. w= - The desired width of the popup window. Like the 'h' value, some browsers have minimum display sizes.

Example:

This is the actual code used to create the popup link found on this example page: Popup Link

Here's an example of a musical Popup player for Ivory Drive:

[weaver_popup_link href='http://weaverplus.info/ivory-drive/' h=325 w=182]<img src="http://weaverplus.info/wp-content/uploads/2011/06/listen-id-360x100-300x83.jpg" alt="" title="listen-id-360x100" width="300" height="83" class="aligncenter size-medium wp-image-144" />
[/weaver_popup_link]

Note that the http://weaverplus.info/ivory-drive/ link is to the page that will pop up. In this case, that page was created using the Weaver Pop Up page template.

### Show/Hide Text

#### Weaver Show/Hide - [weaver_showhide]

`[weaver_showhide]Content to show/hide[/weaver_showhide]`

The `[weaver_showhide start='hide' show='text-on-show' hide='text-on-hide']` short code allows you to specify a section of content that the user can selectively show or hide. It will be hidden by default.

Typically, one would place the shortcode immediately after some explanatory text. For example:
`Click to view lyrics [weaver_showhide]
lyrics
[/weaver_showhide]`
When entered into the Page/Post editor as shown above, the explanatory text and show/hide button will be on a separate line, and the content in a new paragraph following. If you place the `[weaver_showhide]CONTENT[/weaver_showhide]` on the same line in the page/post editor, the explanatory text and content will be displayed on the same line.

Shortcode usage: `[weaver_showhide start='hide' show='html-on-show' hide='html-on-hide']text[/weaver_showhide]`

1. start='hide|show' - By default, the content will start hidden. Set this to 'show' to have the content start displayed.
2. show='img|text' ; hide='img|text' - By default, a graphic + and - will be displayed to toggle between hidden and displayed. You can provide an alternative pair of images or text strings. You can't mix images and text - both must be the same type. You can't use '[' or ']' in the text.
3. class='alt-class-name' - By default, the extra widget area will be styled just like other page widget areas (top, bottom, per-page). You can add additional styling using .per-page-thename, or by providing your own style class name as a parameter to the shortcode.

### Comment Policy

#### Weaver II Pro Comment Policy / Disclaimer

Weaver II Pro Comment Disclaimer allows you to display a disclaimer, other comment policy, or any thing else (including shortcodes) right under the Post Comment button.

You can use basic HTML to format your disclaimer text. While designed to add comment policy text, you can add anything you want, including shortcodes. Need a widget area after a comment block? Use the [weaver_widget_area] short code to add one.

### Shortcoder

#### Shortcoder - [weaver_sc]

`[weaver_sc id="myname" v1="optional-replacement" ... v9="replacement"]`

This [weaver_sc] shortcode allows you to define your own named shortcodes. These really serve as "macros" - an easy way to define constant text or other fixed content you would like to add to your pages, posts, or widget areas. The content you define can include other shortcodes and basic HTML, as well as Raw HTML or Scripts if you have the role permissions to do that.

[weaver_sc] supports nine (9) optional parameters, v1 to v9, that allow you to pass values to your shortcode definition text. The value of any parameter will replace the equivalent parameter specified as %v1% in your text. For example, if you had a shorcode "name" and definition text contained "My name is %v1%.", and you use the shortcode [weaver_sc id="name" v1="Bruce"], the output included in your content would be "My name is Bruce." This allows you to use the same short code in different pages or posts and supply variable content.

Example:

Shortcode ID: link
Shortcode definition: More information available <a href="%v1%">here</a>.

Usage (from a post, for example):

This is an simple example. [weaver_sc id="link" v1="http://example.com/info.html"] Check it out.

Example 2:

Another great use for [weaver_sc] is to easily include scripts provided by outside services. For example, if you have a Twitter account, you can login to your Twitter account and go to the http://twitter.com/about/resources page. There you will find tools to generate follow buttons, widgets, and more.

If you create a Widget, for example, Twitter will display a box with JavaScript code to paste into your site. The easiest way to do this with Weaver II Pro would be to create a shortcoder definition called "twitter". Then simply paste the code you got from Twitter into the definition of the "twitter" shortcoder defintion. Now you can easily display the Twitter widget using the shortcode [weaver_sc id="twitter"] almost anywhere on your site - posts, pages, text widgets, even HTML insertions. No fuss with Raw HTML for pages or posts, or keeping track of text widgets. Just a simple shortcode you can use over and over.

### PHP

#### PHP - [weaver_php]

`[weaver_php]php code[/weaver_php]`

The `[weaver_php]` short code allows you use php within a page, post, or text widget.

Shortcode usage: `[weaver_php]php code[/weaver_php]
`
The [weaver_php] and [/weaver_php] act like <?php and ?> in an actual .php file. The PHP code is executed using the PHP exec() function and any resulting output added to the HTML page. If your PHP has any errors, or your system has exec() disabled, there will be no output.

Important note: For Posts and Pages, if your php code spans multiple lines (i.e., you use the Enter key), then you must use the HTML editor view, and check the Raw HTML per page option in the page/post editor screen. Short PHP snippets on just one line will work from either the HTML or Visual editors. If you use the shortcode in an advanced HTML insertion area, then your end of lines will work as expected.

Example:

    [weaver_php]echo "<h3>Hello, World!</h3>\n"[/weaver_php]

### Plus Admin

#### Weaver II Pro Admin Options

This tab has some administrative options for Weaver II Pro.

#### Weaver II Pro Save/Restore Plus Settings

You can save and restore your Weaver II Pro settings to a file saved on your site's file system - this will normally be the /weaver-subthemes directory on your WordPress /uploads directory.

The Save operation will save every Weaver II Pro setting. The Restore operation will restore every Weaver II Pro setting. Unlike the different Weaver save formats which distinguish between theme and site specific settings, all Weaver II Pro settings are included. Weaver II Pro settings files use a .wvp extension.

#### Disable Weaver II Pro Features

These options allow you selectively disable the various Weaver II Pro features. If you don't set specific options on the appropriate admin tabs, or don't use a short code, none of the Weaver II Pro features will change how your site functions. However, if a feature is enabled, a small amount of code must be loaded for that feature, and this may have a very small effect on your site's load time, as well as the speed of the Weaver Admin page. (Note: site load time and site admin speed are not related - if your admin seems a bit slow, that does not mean your site will load slowly.) So to maximize the performance of both your site and your site's admin, disable any Weaver II Pro options your are not using.

Note: After you disable a feature, for obscure technical reasons, its admin panel will not be disabled until you've saved settings a second time after saving here. But the feature will be disabled.

### Appendix - Weaver CSS classes and ids

This appendix contains a more or less comprehensive list of Weaver CSS classes and ids

#### Classes and IDs that contain Text

- #site-title - Main Site Title - wrapped in <h1 id="site-title"><span><a ...>Site Title</a></span></h1>
- #site-description - Site Description - wrapped in <div id="site-description">Description</div>. After #site-title.
- #access - Primary menu bar. Inside #branding.
- #nav-above - wraps .nav-previous and .nav-next above posts. Similar to #nav-below.
- .nav-previous - div that wraps the older posts link.
- .nav-next - div that wraps the new posts link.
- #post-nnn - each post is wrapped in a div that includes its id (nnn) in the style id.
- .post - div wraps a post. Posts also have other classes depending on status, category, and others..
- h2.entry-title - div wraps post title link.
- h1.entry-title - div wraps static page title.
- .entry-meta - div wraps top post info line (posted on, by). The format of the .entry-meta line is fairly complex. Weaver has options for most of the parts of both the top and bottom info lines. Look at the html source of a page to get more information.
- .entry-content - div that wraps content of a post or page. Comes after title.
- a.more-link - link for "Continue reading.." message
- .entry-utility - div wrapping bottom post info line.
- #nav-below - bottom version of #nav-above
- #reply-title - wraps "Leaver a Reply" in comment form.
- #site-info - wraps Copyright, site name in footer
- #site-generator - wraps Powered by section in footer

#### Weaver Font Organization

Weaver's font organization is based on the WordPress Twenty Ten theme. By default, it allows just two font styles, as described below. It is possible to override almost any item's font by adding font informatoin to the appropriate CSS + button from the Main Options, or by adding appropriate CSS to the <HEAD> Section of the Advanced Options area.

- Titles font - mostly titles, this font is applied to:
  - h3#comments-title
  - h3#reply-title
  - #access ul (and #access2, #access3)
  - #cancel-comment-reply-link
  - .form-allowed-tags,
  - #site-info,
  - #site-title,
  - #wp-calendar
  - .comment-meta
  - .comment-body tr th
  - .comment-body thead th
  - .entry-content label
  - .entry-content tr th
  - .entry-content thead th
  - .entry-meta
  - .entry-title
  - .entry-utility
  - #respond label
  - .navigation
  - .page-title
  - .pingback p
  - .reply
  - .widget_search label
  - .widget-title
  - input[type=submit]
- Content Font - mostly content and widget text. Applied to:
  - body - almost every element on the site will inherit the font properties of body unless they have explicit overrides.
  - input
  - textarea
  - .page-title span
  - .pingback a.url

#### Areas

    #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

###

####