Weaver Plus Help (Version 1.0.1)
Please see Weaver Plus Version 1.0.1 Release Notes
Introduction
The Weaver Word Press theme is already one of the most flexible and easy to use free themes available on WordPress.org. What started out as a small project for me, Bruce Wampler, has turned into a major undertaking. I've spent countless hours on the theme, and continue to improve it and support it on the Forum.
While I have produced much free software over my career, this project has consumed more of my time than expected. I remain committed to keeping the core Weaver theme up to date, and full featured. On the other hand, there are some extras I've developed that will greatly enhance Weaver's capabilities form many - yet aren't totally essential for designing your own great theme.
The Weaver Plus premium plugin for the Weaver Theme provides quite a few exciting enhancements, and for a very reasonable price. I hope that enough Weaver users will find the features useful enough to warrant the small expense. My goal is to get a small return for all my development time, yet continue to provide a great free core theme.
Thanks so much for all the past support. I hope you find Weaver Plus to be a useful addition to your web design tools.
Bruce Wampler, WP Weaver
Contents
- Header Options - fine tune header settings; additional menu options
- 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 Plus features
- Appendix - Weaver CSS classes and style ids
Header Options
Header Options - additional settings for header and menus
This tab allows you to make additional settings to fine tune your header area and the main menus. The options are divided into two groups: Header Options which affect the site header area, and Menu Options which affect the Menu Bars.
Options include:
- Page Top Margin - Margin at very top of page.
- Page Bottom Margin - Margin at very bottom of page.
- Header Top Padding - Padding at top of header.
- Header Bottom Padding - Padding at bottom of header.
- Site Title - Font size - Font size for site title.
- Site Description - Font size - Font size for site description.
- Menu Bar Height - New height for Menu Bars.
- Menu Left Padding (primary) - You can adjust the position of the primary menu items by adding left padding.
- Menu Left Padding (secondary) - You can adjust the position of the secondary menu items by adding left padding.
- Separator Bars on Menus - Add vertical separator bars between items on menu bars.
- Separator Bars on Sub-Menus - Add horizontal separator bars between items on sub-menu dropdowns.
- Separator Bar Width - Width of separator bars, if used.
- Fixed Width Menu Items - Make each menu bar item fixed width. Should be wide enough for widest text item.
In addition, it is possible to place a logo anywhere in the Header area using the Header Gadgets feature.
More Options
Weaver Plus - More Options
This tab will allow you to add advanced customization options to your site. The options include several options for adjusting post pages, as well as the special post archive pages (archives, categories, etc.). You can also add background images to each site area - sidebars, page content, etc.
Options Include:
- Move Top Post Info to Bottom - Move the top post info line to bottom of post.
- Move Bottom Post Info to Top - Move the bottom post info line to top of post.
- Hide top post info - Hide entire top info line (posted on, by) of post.
- Hide bottom post info - Hide entire bottom info line (posted in, comments) of post.
- Hide Next/Prev messages - Hide the next/prev page messages on single post display page.
- Post Title - no link - Don't make post titles a link.
- Post Title - Font size - Font size for Post and Page titles.
- Pre-Title Post HTML - HTML to insert before Post's title. THis text can include shortcodes.
- Pre-Body Post HTML - HTML to insert right before Post's body.
- Post-Body Post HTML - HTML to insert after Post's body.
- Hide Menu/Link Tool Tips - Hide the tool tip pop up over all menus and links.
- Base Site Font Size - Change the base site wide font size. All other font sizes are a percentage of this base font size. (Default: 12px)
- Hide Categories Archives Title - Hide "Category Archives" title on category pages.
- Hide Tag Archives Title - Hide "Tag Archives" title on category pages.
- Hide Author Archives Title - Hide "Author Archives" title on author pages.
- Hide Date Archives Title - Hide "Date Archives" title on date archive pages.
- Hide Search Results Title - Hide "Search Results" title on search pages.
- Area Background Images - Add background images for any of the 9 major site areas.
Font Control
Weaver Plus font control 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 Plus 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 Plus 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.
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 <HEAD> 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 Plus Slider shortcode. These are the basic steps:
- 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.
- 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.
- 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)
- 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.
- 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).
- 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:
access
,access2
, andaccess3
- 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 thataccess3
is a duplicate ofaccess
added of use with [weaver_extra_menu]. (acccess3
will not include rounded corners.)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.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.menu-vertical-default
- Displays a simple vertical menu using standard list and default link formatting.
- 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.
- 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 Plus 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 place your links over your header image, add the short code to the "Text" option for the Weaver Admin→Plus→Header Customization→Add Images or Text over Header Image option. You won't need to add an image or link url there since that information is provided here.
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 following code to the
Advanced Options→Site Options→Add HTML to Primary 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 Plus Link Buttons Widget - When used in the Weaver 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 - [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
Advanced Options→Site Options→Add HTML to Primary Menu Bar 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 Plus 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.
- 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.
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 Advanced Options→Page Templates Options
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']
- id='area-name' - The id of the new widget area defined in Advanced Options.
- 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.
- 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 Template Options 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 Plus 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='']
- feed='url' - The url of the external feed.
- 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.
- 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.
- 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. - 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. - 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. - 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 WordPress Weaver feed in a regular page, use:
[weaver_feed feed='http://wpweaver.info/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]
- 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.
- 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.
- 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.
- 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]
- start='hide|show' - By default, the content will start hidden. Set this to 'show' to have the content start displayed.
- 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.
- 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 Plus Comment Policy / Disclaimer
Weaver Plus 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 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 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 Plus Admin Options
This tab has some administrative options for Weaver Plus.
Weaver Plus Save/Restore Plus Settings
You can save and restore your Weaver Plus 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 Plus setting. The Restore operation will restore every Weaver Plus setting. Unlike the different Weaver save formats which distinguish between theme and site specific settings, all Weaver Plus settings are included. Weaver Plus settings files use a .wvp extension.
Disable Weaver Plus Features
These options allow you selectively disable the various Weaver Plus features. If you don't set specific options on the appropriate admin tabs, or don't use a short code, none of the Weaver Plus 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 Plus 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.
- #access2 - Secondary menu bar. Normally inside #masthead, after #site-description, before #branding. See Snippets for more about the #access menu bars and their styling.
- #access - Primary menu bar. Inside #masthead, after #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 .menu (and #access2, #access3)
- #access div.menu ul
- #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 - outer-most wrapper. Default font information set here.
- #wrapper - div, just inside body, wraps entire site
- #header - First main div inside #wrapper. Wraps everything in header: site title, description, branding, menus
- #masthead - Inside #header, also wraps everything in header.
- #branding - div wraps header image
- #main - After #header, before #footer. Wraps content and sidebars.
- #container - First dif inside #main. Wraps top/bottom widget areas, #content. Doesn't wrap sidebars.
- #ttw-site-top-widget - wraps site-wide top widget area.
- #ttw-top-widget - wraps top widget area.
- #content - Wraps content, not including top/bottom widget areas.
- #comments - Wraps comment form.
- #ttw-bot-widget - Wraps bottom widget area.
- #ttw-site-bot-widget - Wraps site-wide bottom widget area.
- #primary - Primary widget area (sidebar). Comes after end of #container, inside #main.
- #secondary - Secondary widget area.
- #footer - After end of #main. Wraps footer area,
- #colophon - Inside #footer.
- #first, #second, #third, #fourth - Widget areas in footer.
Weaver Plus Version 1.0.1 Release Notes
Weaver Plus 1.0.1 has some minor changes and fixes.
- Fixed a problem with the [weaver_php] shortcode which prevented it from working correctly from pages and posts. In addition, [weaver_php] is now disabled by default. Use the Weaver Plus->Plus Admin page to enable.
- Version 1.0.1 requires Weaver 2.2 to work correctly. It will not work with Weaver 2.1 or earlier.
- Weaver Plus will no longer interfere with non-Weaver themes if it is still activated.