Weaver Xtreme Plus Help (Version 1.2)

Introduction

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

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

Bruce Wampler, WP Weaver

Contents

 

More Options

Weaver Xtreme Plus - More Options

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

Font Control

Weaver Xtreme Plus adds a whole new font control section to the Main Options:Custom tab that allows While the free version of Weaver Xtreme allows you to select from about a dozen different fonts generally supported by a majority of modern browsers, Weaver Xtreme Plus allows you to specify support for any of hundreds of free Google Web Fonts, Font Squirrel, or virtually any other font source - including commercial or self-hosted font definitions.

Introduction to Adding Fonts

The fonts used for any web site come from two sources: the fonts supported directly by browsers, and custom fonts that are loaded with the contents of the page.

Which fonts are available to a specific browser depend on several factors: the specific browser (Chrome, Safari, IE, Android, etc.), and the host operating system. While all browsers will support basic serif, sans-serif, and monospace fonts, any other fonts supported are really not guaranteed. There are quite a few fonts supported by most browsers, and the dozen fonts supported by Weaver Xtreme free will look good and display as intended on most browsers. The default font families include alternate font specifications (called a font stack) so that your site will look pretty much like you intended on the vast majority of browsers (except Android devices, which support only 3 fonts.)

If you want total control over the fonts displayed on your site (including modern Android devices), you have the option of specifying a custom font that is loaded right along with the rest of your page content. Weaver Xtreme Plus supports adding custom fonts from various sources, including Google Fonts, Font Squirrel, and other sources. These are added from the Main Options:Custom tab. After you've added a new loadable font, it will show up on the drop-down Font Family selection option found for most areas and text options in the Weaver Xtreme admin tabs.

When you add a loadable font, two kinds of HTML statements are required to be able to use the font. The first is a specification of the source of the font definition. This is most typically handled by adding a <link> statement in the <head> section of your page. This <link> usually loads a .css file which has statements to load the font definition files. This file can be self-hosted, or in the case of Google Fonts, is hosted on Google servers. In any event, the font definition files must then be loaded by the browser, and each font you load incurs some loading overhead - about the same as loading a moderately sized image (20K to 100K bytes). Keep this in mind and only define fonts you actually use.

Once a new font has been loaded, you then need to be able to specify what text should be displayed using the font. This is accomplished using CSS styles and specifying a font-family. For example: .font-roboto{font-family:'Roboto',sans-serif;} or adding a style="font-family:'roboto',sans-serif;" to a <div>. Fortunately, Weaver Xtreme Plus really simplifies this task. Font that you define will be added directly to the standard Weaver Xtreme Font Family options. Note that font size, bold, and italic properties are controlled by the Weaver Xtreme option interface for all defined fonts.

Adding a New Font

Given that adding most fonts requires specifying the <link> load statement, and specifying a font-family for the font, you can use the Weaver Xtreme Plus interface to add almost any loadable font to your site. Basically, you add the appropriate <link>, and specify a font-family. With Google Fonts, that is all that is necessary. For other free font sources like Font Squirrel, you will likely have to upload the font definition files to your own site and specify the correct address for the <link> statement.

Google Web Fonts

Google Web Fonts is a collection of hundreds of free fonts available from Google. Weaver Xtreme Plus does provide a single click install option for the most popular 35 or so Google Fonts (ususaly limited to standard weghts). But Weaver Xtreme Plus also allows you to browse all the fonts available using the Google site interface, and then simply copy/paste the <link> and font-family 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='//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 Font Source and 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, click "Save Settings", and the font will be added to Weaver Xtreme's settings, and you can use the font from the standard Font Family option.

Font Squirrel

This section describes how to add a font from Font Squirrel. In this case, a specific font called GoodDog is used.

  1. Find font. This example will be for Font Squirrel (http://fontsquirrel.com). We picked GoodDog.

  2. Download the font. Font Squirrel requires this.

  3. Open the Font Squirrel "WEBFONT GENERATOR" tab.

  4. Generate the fontkit - upload the unzipped font to the Add Fonts. Download the font kit .zip file.

  5. On your computer, unzip the fontkit. There are 6 files of interest: stylesheet.css and 5 actual font files: xxxx-webfont.woff2,.woff,.ttf,.svg,.eot (This number may vary depending on source of font.)

  6. You need to copy those 6 files to your website. (You can upload them all if you want - doesn't hurt anything, really.) Use your hosting control panel, ftp, or even a WP plugin. Doesn't matter. You can put these files almost anywhere, but remember that the /uploads directory survives updates, so we suggest creating a directory called fonts there: /wp-content/uploads/fonts/. Now, for each font you upload, create its own directory under /fonts. For example, for GoodDog, we created /wp-content/uploads/fonts/gooddog. We then uploaded the appropriate GoodDog files from my computer to that directory.

  7. In the font kit stylesheet.css file, you will see a value that gives the font-family name. In this example, that is: font-family: 'gooddogregular'; This is the value we need for the next step.

  8. Now, open the Weaver Xtra Main Options : Custom tab. With the Xtreme Plus plugin installed, there will be the Step 1 box. In the "Paste <link>" box, enter:
    <link href='/wp-content/uploads/fonts/gooddog/stylesheet.css' rel='stylesheet' type='text/css'>
    where, of course, you use your font name instead of gooddog. Note this is a path starting with a '/'. This means it is from your site's root directory. Thus, it is independent of your site name, and you don't need the http://example.com at the front.

    Note that if the fontkit you created on Font Squirrel included several font-families, you will only need to specify the <link> for the first font you add. You will need to add a font-family definition for each font-family included, so just leave this option blank to specify additional font-families included in the main <link> statement.

  9. In the Step 1, font-family box, enter:
    font-family: 'gooddogregular';
    In this example, you might add fallback fonts: cursive,serif just in case the browser can't deal with the uploaded font. You will need a separate font-family definition for every font included in the <link> statement.

  10. Click the "Save Settings" button.

And now, you'll have gooddogregular show at the bottom of all the Weaver Xtreme Font Family options, and you can apply your new font with an easy click!

Other Font Kits

While Weaver Xtreme Plus makes it easy to use Google Web Fonts or from other sources like Font Squirrel, 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 <link> box (yes - it is a <script> and not a <link>, but it still specifies the load source for the font). paste the Typekit font-family:typekit-font-name; (found in the "Selectors:Using fonts in CSS" link on the Adobe Typekit Editor panel) into the font-family: box.

Almost all font sources will provide you the proper code to load the font, usually a <link>, but sometimes a <script>, and a font-family name. Just paste the appropriate values in the the approriate fields. If you are self-hosting, upload your fonts to the /wp-content/uploads/fonts directory as explained above.

Deleting Fonts

After you've added a new font, an area called Remove Added Fonts will be displayed. You can check any fonts you wish to remove, and then "Save Options" to remove them. Remember that any font that shows in this list will cause the font definition to be loaded onto the page whether or not it is used. During site development, you can add as many fonts as you want, but when your site is ready for release, you should delete any fonts you aren't using.

Font Styles Included with Default Google Font Set

Many Google fonts provide many different styles (font weight, italic, bold, etc). When providing the default Google Fonts, the different styles available did not necessarily include every font style variant available. Generally, the "normal" styles were included - normal and italic; and the "normal" named weights: normal (400) and bold (700).

If you need more font styles (which must then be used with custom styling rather than the standard options provided by the WP content editor), you can simply add any Google Font using the above instructions.

This is a list of the font styles included with the default Google Fonts provided with the Xtreme Plus:

Oswald:400,700
PT+Sans:400,700,400italic,700italic
Raleway:400,700
Ubuntu:400,700,400italic,700italic
Montserrat:400,700
PT+Sans+Narrow:400,700
Arimo:400,700,400italic,700italic
Yanone+Kaffeesatz:400,700
Oxygen:400,700
Titillium+Web:400,400italic,700,700italic
Noto+Sans:400,700,400italic,700italic
Dosis:400,500,700,800
Bitter:400,700,400italic
Merriweather:400,400italic,700,700italic
PT+Serif:400,700,400italic,700italic
Playfair+Display:400,700,400italic,700italic
Rokkitt:400,700
Noto+Serif:400,700,400italic,700italic
Indie+Flower
Dancing+Script
Droid+Sans+Mono
Ubuntu+Mono
Nova+Mono

Full Width Sites

Weaver Xtreme Plus offers a couple of new options that allow you to design "full width" sites - mostly by expanding or indenting the width of major areas - the header, menu bar, content, and the footer. You can specify a color to extend the area to the full width of the browser. This can be the same or a different background color. You an also specify a % width for these areas, and include a maximum px size. Using these settings, you can create all sorts of interesting full width designs.

There also is a predefined Weaver class that has built-in JavaScript support for extending the existing background color of any area to the full width of its containing <div> by adding the .wvrx-fullwidth class to the area.

To summarize:

Xtreme has a Full Width BG options available on all the main areas.

This options allows you to extend the background of the area to the left and right edge of the browser with the color you specify in the box.

This option does not however extend current background styles like borders, shadows, gradient of background image.

If you wish to extend the background of the area will all its attributes, just put the class wvrx-fullwidth  inside the Add Classes option box of that area.

 

Shortcodes

Settings and quick information about the various shortcodes supported by Weaver Xtreme Plus are found on the Appearance->Weaver Xtreme->Add-ons admin page.

 

Extra Menus

[extra_menu menu_name='Menu Name' menu_style='menu-options' menu_type='accordion' class='your-class']

You can easily add extra menus to almost any location on your site by using either the Weaver Xtreme Plus Extra Menu widget, or the [extra_manu] shortcode. Much of the description of the shortcode parameters apply equally to the widget.

The [extra_menu] shortcode 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_name= - Which custom menu to display as defined in the Appearance : Menus admin page.

  2. menu_style= - The 'menu_style' parameter is used to specify how the menu will look. There are five different styles that can be applied to any of the menu types supported by the Extra Menu shortcode and widget. The styling is based on one of the four standard menu bar styling options, or adding no styling. Any of the Styling Options can be applied to any type of menu, but the Horizontal menu only uses a subset of the options available for a Standard or Vertical Accordion menu styling. Some more details about each Menu Option area:
    1. extra - The Extra Menu menu styling option set is provided with Weaver Xtreme Plus, and is intended to provide all styling options for your extra menus. When 'extra' is specified, the options defined in the Extra Menu block will be applied to the extra menu.

    2. primary, secondary - You can also specify primary or secondary to have those styling option applied to an extra menu. This will allow you to match the main menu styling.

    3. header_mini - Specifying header_mini will use the minimal color, background, font, and hover colors specified for the Header Mini-Menu. This option is most useful for simple horizonta or verticall menus. Important note: this style is compatible only with the horizontal or simple vertical menu type. It will generate an error message instead of a menu if not used properly.

    4. none - If you specify none, then no extra styling options are applied to the extra menu. It will use the styling from the default style-weaverx.css stylesheet.

  3. menu_type= - This specifies the type of menu to display. There are 4 types of menus supported: a vertical accordion menu, the standard horizontal menu bar, and simple flat horizontal or vertical menus.

    1. accordion - Displays a Vertical Accordion menu in a width determined by the enclosing container - usually the sidebar area. In fact, the vertical accordion menu is the same menu displayed for the mobile device view, but without the open/close icon - it is always open to the top level menu items, and will open submenus using an accordion effect. It will use the same colors as you've defined for your main menu bars. It is easiest to use the Weaver Xtreme Plus Extra Menu widget to add a menu to a widget area. To add a menu to an HTML insertion box, or to a normal content area, simply add [extra_menu menu_name='mymenu' menu_style='primary' menu_type='accordion'] to the content area. Using a style of 'primary' means the menu will match the style of your primary menu.

    2. vertical - Displays a very simple vertical menu. This is a simple vertical list with separate menu items separated by horizontal lines, and submenu levels are indented. The styling is limited: the colors are styled using only the top-level text and hover text and background colors of the specified menu_style, and current page text styling (no bg).

    3. horizontal - Displays a very simple horizontal one-level menu. The links are styled using the standard link colors of the specified menu_style. This style is useful for placing a simple link menu right below your main menu, for example.

    4. standard - Displays a standard horizontal drop-down menu, just like the primary or secondary menu. When styled using primary, secondary, or extra, a standard extra menu bar will display as a horizontal menu on the desktop view, and have the standard mobile menu display for mobile devices.

  4. class= - If you specify a class, the class will be added to the container that wraps the menu. You can define the style using the Custom CSS option.

Weaver Xtreme Plus Extra Menu Widget - This widget will display an extra menu in the widget. The [extra_menu] parameters described above are included as drop-down selection boxes in the widget option box on the Widgets admin page.

Link Buttons

Link Buttons - [buttons] + Widget

[buttons start='first-to-show' end='last-to-show' list='4,1,2' wrap='div']

The [buttons] short code allows you to add image buttons with links. You can specify which image to begin with (1 to maxbutton value>) with the 'start' parameter, and the same with the 'end'. The defaults are start=1 and end=maxbutton value, 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.

The wrap parameter specifies the HTML tag used to wrap the list of buttons. This will be 'div' by default, but 'span' is useful for the menu bar HTML areas, and 'li' could be useful in some cases.

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.

The defined buttons will be displayed in a horizontal list that will wrap when the width of the enclosing HTML block is reached.

If you want to use the shortcode to include buttons Buttons on your menu bar, add the [buttons] shortcode to the Main Options→Menus→(menu)→Left/Right HTML option. Use the wrap='span' parameter for the HTML areas.

Weaver Xtreme Plus Link Buttons Widget - When used in the Weaver Xtreme Plus 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 - [social] Shortcode and Widget

p>[social font_size=nn number='showcount' tag='wrap-tag' color=#000000 class=classname names=list,of,names]

  1. font_size - Font-size of the icon (in px, don't include px). Will use text default font-size if not specified.
  2. number< - Number if icons to show. Displayed in order specified on options below.
  3. tag - If specified, each icon is wrapped with this HTML tag.
  4. color - If specified, icon will be displayed with this color (including :hover). Otherwise, uses theme link colors.
  5. class - a class name to wrap the entire group of social icons displayed
  6. names - comma separated, ordered list of names of social icon to display, even if Use not checked.

The [social] shortcode allows you to add Social site buttons with links to your account or page.

To display social buttons, check the "Use" checkbox for buttons you want to show. You must provide the full URL to your account link. For example: http://facebook.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.

You can also use the names parameter to specify a list of icons to display, even if Use is not checked. These will be displayed in the order listed. You still must provide the account link.

You can also change the "Social Site Description", which is the text displayed when the user hovers over the icon.

Social buttons are really Genericons Font Icons, and are thus a "text" character link, and will be displayed using the link color options specified for the location you use the social fonts - either via the shortcode or in a widget. This also means the size of the social icons are controlled by the normal text font-size. The Social Widget, however, is set to 36px by default, but can be overridden with custom CSS using the .weaverxplus_social class on the widget.

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.

Using in Menu Bar

The [social] shortcode can be used to display your social links in the menu bars using the Left or Right HTML areas. Simply insert the shortcode in the menu bar area. The social icons will appear using the menu bar default font and link settings. If the link color doesn't look good on your menu bar, add something like:
a {color:white;}
to the HTML:Text Color CSS+. Note it is necessary to add the 'a' before the {color:white} because the icons are really text links. If you want to also specify a hover color, use something like:
a {color:white;} %selector% a:hover{color:red;}

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.

 

Widget Areas

Widget Area - [widget_area]

[widget_area area='area-name' area_style='area-style-name' class='alt-class-name' style='inline-style-rules']

The [widget_area] shortcode allows you display a new widget area anywhere on a post or page. This shortcode will use one of the Per Page Widget Areas defined on the Main Options:Sidebars & Layout tab of the Weaver Xtreme Admin Page (at the bottom). 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 shortcode.

Shortcode usage: [widget_area area='area-name' area_style='area-style-name' class='alt-class-name' style='inline-style-rules']

  1. area='area-name' - The name of the new widget area as defined in the Per Page Widget Areas - e.g., 'widget_area'.
  2. area_style='area-style-name' - If specified, the widget area will use the styling from one of the standard Weaver Xtreme widget areas. These include: top, bottom, header, footer, primary, or secondary. If not specified, the widget in the extra widget area will use the styling from the single widget styling options.
  3. class='alt-class-name' - You can add additional styling by providing an alternative class name style class name as a parameter to the shortcode. The class will be added to the widget area's wrapping div.
  4. 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.

 

Search Form

Search Form - [search]

[search]

The [search] shortcode allows you to display a search box within a page, post, or text widget.

Shortcode usage: [search button=1 class=your_class max_width=nn size=nn]

  1. button - if set to 1 or true, will add "Search" button to right of input area
  2. class - a custom class name to wrap the search form
  3. max_width - the maximum width in percent of the search form (Default: 90)
  4. size - size of the form input area in characters (Default: 40)

Show Feed

Show Feed - [feed]

Show Feed - [feed]

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

The [feed] short code allows you to display an RSS or Atom feed from an external source.

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

  1. feed='url' - The url of the external feed.
  2. items=10 - By default, [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 summary content of the feed will be displayed. This is usually short in feeds. If the default summary is too long, and you want the feed's content to be forced to be short, use excerpt=1> which will force an excerpt.
  6. feed_content=0|1 - By default, the summary content of the feed will be displayed. If you want the feed's complete content to be displayed, including images, use feed_content=1> which will force the full content to be displayed.
  7. trusted=0|1 - By default, [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.
  8. 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=95%;')

Example

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

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

 

Popup Link

Popup Link - [popup_link]

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

The [popup_link] shortcode 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: [popup_link href='url' h='height-px' w='width_px']link-content-text/image[/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:

[popup_link href='http://pro.weavertheme.com/ivory-drive/' h=325 w=182]<img src="http://pro.weavertheme.com/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" />
[/popup_link]

Note that the http://pro.weavertheme.com/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 - [showhide]

[showhide]Content to show/hide[/showhide]

The [showhide start='hide' show='text-on-show' hide='text-on-hide'] shortcode 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 [showhide]
lyrics
[/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 [showhide]CONTENT[/showhide] on the same line in the page/post editor, the explanatory text and content will be displayed on the same line.

Shortcode usage: [showhide start='hide' show='html-on-show' hide='html-on-hide']text[/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.

Shortcoder

Shortcoder - [shortcoder]

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

The [shortcoder] 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.

[shortcoder] 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 shortcode "name" and definition text contained "My name is %v1%.", and you use the shortcode [shortcoder id="name" v1="Bruce"], the output included in your content would be "My name is Bruce." This allows you to use the same shortcode 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. [shortcoder id="link" v1="http://example.com/info.html"] Check it out.

Example 2:

Another great use for [shortcoder] 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 Xtreme Plus 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 definition. Now you can easily display the Twitter widget using the shortcode [shortcoder 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 - [php]

[php]php code[/php]

The [php] shortcode allows you use php within a page, post, or text widget.

Shortcode usage: [php]php code[/php]

The [php] and [/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: 

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

 

Comment Policy / Disclaimer

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. The HTML will be wrapped with <div class="weaver-comment-disclaimer"> so you can add style using Weaver Xtreme's Custom CSS Rules option. 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 [widget_area] shortcode to add one.

SmartMenus

Weaver Xtreme supports an entirely new menu system - SmartMenus. SmartMenus is a relatively mature JavaScript solution to displaying repsonsive menus. The main advantages of SmartMenus include:

A full reference to SmartMenus is found at: http://www.smartmenus.org/. Weaver Xtreme Plus includes options, that with with appropriate additional styling, can create amazing custom menus.

One of the main customization options available for Smar Menus in Weaver Xtreme Plus is the ability to specify the set of JavaScript options supported by SmartMenus. These options are explained on the SmartMenus Docs page. As an aid, you can copy/paste the following set of default options into one of the SmartMenu JavaScript Initialization boxes on the SmartMenus tab for the Xtreme Plus option page. These are default values used by Weaver Xtreme. Copy/Paste this code fragment exactly as presented here, including the opening and closing {}'s. You may use only the needed subset - e.g., just the mainMenuSubOffsetX, etc.

{
isPopup:            false,  // is this a popup menu or a permanent menu bar
mainMenuSubOffsetX: 0,      // pixels offset from default position
mainMenuSubOffsetY: 0,      // pixels offset from default position
subMenusSubOffsetX: 0,      // pixels offset from default position
subMenusSubOffsetY: 0,      // pixels offset from default position
subMenusMinWidth:   '1em',  // min-width for the sub menus (any CSS unit)
subMenusMaxWidth:   '25em', // max-width for the sub menus (any CSS unit)
subIndicators:      true,   // create sub menu indicators - creates a SPAN and inserts it in the A
subIndicatorsPos:   'prepend',  // position of the SPAN relative to the menu item content 
			    	//   ('prepend', 'append')
subIndicatorsText:  '',     // [optionally] add text in the SPAN (e.g. '+')
scrollStep:         50,     // pixels step when scrolling long sub menus that do not fit in the 
			    //   viewport height
scrollInterval:     30,     // interval between each scrolling step
scrollAccelerate:   true,   // accelerate scrolling or use a fixed step
showTimeout:        250,    // timeout before showing the sub menus
hideTimeout:        500,    // timeout before hiding the sub menus
showDuration:       0,      // duration for show animation - set to 0 for no animation - 
			    //    matters only if showFunction:null
showFunction:       null,   // custom function to use when showing a sub menu (the default is
			    //    the jQuery 'show')
hideDuration:       0,      // duration for hide animation - set to 0 for no animation - 
			    //   matters only if hideFunction:null
hideFunction:       function($ul, complete) { $ul.fadeOut(200, complete); }, // custom function
			    //    when hiding a sub menu
collapsibleShowDuration: 0, // duration for show animation for collapsible sub menus
collapsibleShowFunction: function($ul, complete) { $ul.slideDown(200, complete); }, // showing a 
			    //    collapsible sub menu
collapsibleHideDuration: 0, // duration for hide animation for collapsible sub menus
collapsibleHideFunction: function($ul, complete) { $ul.slideUp(200, complete); }, // hiding a 
			    //    collapsible sub menu
showOnClick:        false,  // show the first-level sub menus onclick instead of onmouseover
hideOnClick:        true,   // hide the sub menus on click/tap anywhere on the page
keepInViewport:     true,   // reposition the sub menus if needed to make sure they always appear
			    //     inside the viewport
keepHighlighted:    true,   // (adds the 'highlighted' class to the A's of all ancestor items of
			    //     the current sub menu)
markCurrentItem:    false,  // automatically add the 'current' class to the A element of the 
			    //     item linking the current URL
markCurrentTree:    true,   // add the 'current' class also to the A elements of all ancestor 
			    //     items of the current item
rightToLeftSubMenus: false, // right to left display of the sub menus (check the CSS for the
			    //     sub indicators' position)
bottomToTopSubMenus: false, // bottom to top display of the sub menus
overlapControlsInIE: true   // make sure sub menus appear on top of special OS controls in IE
}

Minimal Example - Submenu widths and offsets

Using the above options requires really advanced understanding of JavaScript, and how the SmartMenus script works. The documentation on the SmartMenus site will be useful for building advanced menus.

However, almost anyone can use just a few of the above options to create useful designs. The default values used by Weaver Xtreme are {subIndicatorsText:'',subMenusMinWidth:'1em',subMenusMaxWidth:'25em'}. The first value, subIndicatorsText:'', is required for Weaver Xtreme's options to work correctly. You should always include that value. The menus width values set the minimum and maximum width for submenus. You might prefer a larger value for the minimum width, for example.

There are 4 other values that can be easily used to tweak the layout your submenus. these are:

mainMenuSubOffsetX:0,mainMenuSubOffsetY:0,subMenusSubOffsetX:0,subMenusSubOffsetY:0

The default 0 values give the default Weaver Xtreme menu layout. By tweaking these, you can get your submenus to shift their relative position, and get interesting overlaps. Feel free to experiment.

So, if you want to play with these basics - submenu width and offsets, paste this snippet into the SmartMenu JavaScript Initialization box on the SmartMenus Xtreme Plus options tab, and adjust.

{
subIndicatorsText:'',subMenusMinWidth:'1em',subMenusMaxWidth:'25em',
mainMenuSubOffsetX:0,mainMenuSubOffsetY:0,subMenusSubOffsetX:0,subMenusSubOffsetY:0
}


Mega Menus

Weaver Xtreme supports Mega Menus - a menu with arbitrary content that opens up when you click on the parent menu. MegaMenus will work with either the Standard Weaver Xtreme menu, or with SmartMenus.

The content of the Mega Menu can be arbitrary HTML, including links and images. Because the MegaMenu content is wrapped by a standard Menu, you will likely have to add special styling to get the menu to look how you want. See the styling section later.

Creating the Mega Menu

A Mega Menu is slightly different than a regular menu item in that both the menu label used to open the MegaMenu and the definition of the MegaMenu content are defined in the same place. Even though the MegaMenu appears as a "sub-menu" of a Menu Label, it is really part of the menu item. So, here's how to create a Mega Menu.

  1. Mega Menus must be defined as a part of a Custom Menu (Appearance : Menus). We will assume you have most of your menu defined using the standard Custom Menus admin pages. So, to define a MegaMenu, you first create the Label/Menu by adding a Links entry to your menu.


  2. Add the link to your menu whereever you want it to appear in your Menu.
  3. Define the MegaMenu's content. You should fill in a # for the URL location. You can provide a Title Attribute if you wish. To make this menu item a MegaMenu, you add mega-menu to the CSS Classes box. Finally, define the content of the MegaMenu drop down using arbitrary HTML.

Styling the MegaMenu

Because the MegaMenu is part of your Menu, it will inherit all the styling of a normal Menu submenu. This usually means that you will have to add styling to get your mega menu to look like you want.

To help simplify styling your MegaMenu, Weaver Xtreme includes a class called .mega-normal that will "normalize" the MegaMenu somewhat when added to the CSS Classes menu definition box. After that, you will find it easiest to style the content of the MegaMenu by wrapping it directly in a <div>, and then styling that either by a style="rules" directly, or by defining a special class to add to the wrapping: <div class="your-class">content</div>.

The width of your MegaMenu also takes specification. By default, the width is 25em. The only way to adjust the width is with a custom CSS rule, usually added to the Custom CSS Rules box on the Weaver Xtreme Fonts & Custom tab.

To change the width of the MegaMenu, change the 25em to the width you need in the following rule:

.mega-normal ul.mega-menu li {
     width:			25em !important;   /* the !important is necessary */
}
To change the styling for a MegaMenu, you can create your own rules based on the default MegaMenu styles. You can prefix any of these with .menu-primary, .menu-secondary, or .menu-extra to restrict the rules to a specific MegaMenu. You could also create your own class based on the .mega-normal class and add that to the Custom Menu CSS Classes per menu item option. Just replace the .mega-normal with your own class name in the rules below. 
/* MEGA MENU Default Styling */
.wvrx-menu ul.mega-menu li {
	white-space:normal;
	width:auto;
}

.mega-normal ul.mega-menu li {
	width:			25em !important;
	padding:		1em;
	font-weight:	normal;
	font-style:		normal;
	font-size:		medium;
}

li.mega-normal ul.mega-menu li a {
	white-space:	nowrap;
	display:		inline;
	margin:			0;
	padding:		0;
	text-decoration: underline;
}

li.mega-normal ul.mega-menu li a:hover {
	background-color: transparent !important;
}

Parallax

A fairly recent design trend is called Parallax which involves (usually) full width page design with background images that scroll at a different rate than the surrounding text. Weaver Xtreme Plus now has the capability to easily generate beautiful Parallax Pages.

Typically, a Parallax page is made up of several banner-like images that split the page into sections. As the user scrolls down the page, each image will scroll while its associated content scrolls over it. There is an interesting movement or Parallax effect. Sometimes the scrolling parallax image will have headline-type text that overlays it. The associated content is typically on a solid background.

Weaver Xtreme Plus allows you to create each page section from a standard Post. You specify an associated Parallax image for each post. The standard post content serves as the associated content that scrolls under the image. If you want overlay "headlines" (or any content, really), you use the standard Manual Post Excerpt to create that content.

Ideally, each Parallax page group will have an associated unique category. You can the use a standard Weaver Xtreme Page with Posts to show the associated Parallax post set. You can use various "tricks" to set the order of the posts on the page - alphabetical works well because you typically won't display the post title.

You can also use the Weaver Show Posts to show a Parallax group. If you install Weaver Show Sliders, you can take your organization one step further, and use the Show Sliders custom post type to create your Parallax group easily using the Slider Group feature. But you don't need these - just normal standard post will work easily.

Creating a Parallax Page

You will create several related Posts to create the content of your Parallax page. Here's the process for creating one post.

  1. The Post - Create a new post - either a standard post or a Weaver Show Sliders post. Give each associated post some way to be grouped. Using a Category in a standard post is the easiest way. You can also use a Slider Group to group your plarallax post set for Weaver Show Sliders custom post types. You also should check the "Make this Post a Parallax post" option in the Per Post option box.

  2. The Post Content - Now create whatever content you want for this Parallax section. Whatever you add to the post content will be displayed directly under the associated Paralax image. You will likely want to use the Per Post options to hide the post title and post meta information, and simpy use the post body which you should display as a full post.

  3. The Image - Select a suitable parallax image to go with each associated post. This one is really the hardest part, but we assume you will have the creativity to select images for a fantastic parallax page. Typically, you will want your image to be full width, and of enough height to create an interesting scroll effect. Because Weaver Xtreme is repsonsive, no matter what size of image you pick, it will expand to cover the entire width. The height affects how "fast" the image seems to scroll. Images 600 to 1100 px width and about 600px high work quite will, but you will want to try different sizes until you are pleased with the result. It is quite subjective! You will want the image to be compressed so that the load size is on the order of 100K or so. Much bigger, and you site will be slow to load. Much smaller, and the image can be grainy.

    You specify the parallax image using the Per Post Background image definition on the Weaver Xtreme Plus Per Post options box on the Post edit page. You can specify two different images - one for desktops, and a second, optional image for mobile devices. The mobile image isn't required, but would ideally be somewhat smaller in size for faster delivery to mobile devices.

  4. The Image View Hieght - You must specify a view height for each of your Parallax images - again in the Per Post option box. This is how much of the image is actually displayed in the screen. Heights of 200 to 400 px tend to look good. Again, your choice. Your image must be taller than the view height! So, mixing 200 or 300 px view hieghts with 600px high or so images works fairly well. You can mix view heights and image sizes.

  5. The Image Content - Some Parallax sites leave the scrolling images with no covering content, while others put summary or "headline" content over the image. This is separate content than that defined by the post content. In order to keep each Parallax section all together, the Manual Excerpt Box is used to create this content. (If you don't see the Excerpt box, you probably have to open the "Screen Options" tab in the upper right corner, and check the "Excerpt" box.)

    You can use any HTML you wish in the Excerpt Box. By default, Weaver Xtreme defines suitable CSS styling for such content to display over most images:
    .parallax-content {
	padding-top:	1.0em;
	font-size:		130%;
    color:			rgba(255,255,255,0.8);
	text-shadow: 	3px 3px 8px rgba(150, 150, 150, 0.5);
}
.parallax-content h1 {
	font-size:		180%;
}

    This represents semi-transparent white characters with a shadow to help readability. You can style these yourself in the Per Post style box.


  6. The Image Width - By default, the parallax image will be displayed in the full width of its enclosing area - usually the post. You can retain any margins or padding of the post by checking the "Do not make BG image full width of enclosing area" option.

  7. Full Browser Width Layout - The Parallax posts will normally be constrained by the width of their containing HTML areas - the Post at the lowest level. The Parallax effect can look great even on non-full-width themes, but the norm might be considered to haved the Parallax images take up the full width of the browser.

    One way to get full width Parallax images is to use a full width theme - for example Full Width Dark or Full Width Light, or one you've made to be full width on your own.

    In addition, Weaver Xtreme supports new Per Page options that make this easy to do on a per page basis, even if the rest of the theme is not full width. This requires just two simple settings to achieve:

    1. On the Page that will display the Parallax posts (either a Page with Posts, or a standard Page using [show_posts]), add the class wvrx-fullwidth to the Add Class to area: container and Add Class to area: content options.
    2. Step 2 is more of a do not do: Do not check the "Do not make BG image full width of enclosing area" option on the Per Post option box (although you can check this on some of your Parallax posts to achieve some interesting variety.


Additional Notes

Parallax Shortcode

[parallax img='url' height=400 class='custom-class']Slide Overlay Content Text[/parallax]

In addition to the more systematic approach of using posts to create Parallax "slides", Weaver Xtreme Plus provides the simple [parallax] shortcode to define a Parallax slide virtually in any content, including regular pages.

You simply need to provide a link to whatever image you want to use for the Parallax BG image, and any content to appear over the BG image. You can also specify the height of the viewable area over the image.

Since you will likely be adding this with the usual Post/Page editor, you will be able to style the overlay content as you wish. It will add the Weaver Xtreme parallax-content class also, which mostly transforms the text color to a slightly transparent white color which works for most images.

The width of the BG image will conform to the wrapping <div>. If you use a full width theme like the Fullwidth Light or Dark subthemes, the BG image will be full screen width. You can also use the Per Page options as described in the previous section on Parallax Posts.