Weaver X Theme Support Plugin Documentation -- Version 1.0

Table of Contents

Plugin Summary

The Weaver X Theme Support Plugin provides a collection of shortcodes to allow you to easily add extra content and features to your regular content. These shortcodes will work with almost any WordPress theme.

While these shortcodes should prove useful with most any theme, one of the goals of these shortcodes is to provide an alternative to users of the Weaver X theme.

Weaver Xtreme Theme Extras Admin Page

This plugin has just a few options, all found on the Weaver X Theme Support admin page under the WordPress dashboard Appearance section.

Shortcode Summary

[tab_group] - content in tabs

Show content displayed on tabbed pages.

Shortcode usage:

[tab_group border_color=black page_min_height=200px]
    [tab title='tab one']This is the content found on first tab.[/tab]
    [tab title='tab two']And we have more content for the second tab.[/tab]
    [tab title='last tab']And this is the last tab. There could be more.[/tab]
[/tab_group]

Short code parameters

You can supply values for these parameters to control the look of the tabbed section.

[header_image]

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

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

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

[html]

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

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

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

[div]text[/div], [span]text[/span]

The Weaver X Theme Support [div] and [span] shortcodes allow you to easily add HTML <div> or <span> tags to your post and page content. The main purpose of these shortcodes is to get around need to switch to the HTML editor view when you need to wrap your content in a <div> or <span>.

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

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

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

iframe - [iframe]

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

Shortcode usage: [iframe src='https://example/com' height=600 percent=100 style="style"]

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

[show_if]content[/show_if], [hide_if]content [/hide_if]

The [show_if] and [hide_if] shortcodes allow you to selectively display or hide content depending if any of several conditions are met.

Shortcode usage: [hide_if device=device logged_in=true/false not_post_id=id-list post_id=id-list user_can=what]

You bracket the content you want to selectively display with [show/hide_if] and closing [/show/hide_if] tags. That content can contain other shortcodes as needed. If you specify more than one parameter to the short code, then all the conditions must be met (logical AND). Any parameters you don't include are considered true.

Parameters

'device' => 'default', // desktop, mobile, smalltablet, phone, all
'logged_in' => 'default', // true or false
'not_post_id' => 'default', // comma separated list of post IDs (includes pages, too)
'post_id' => 'default', // comma separated list
'user_can' => 'default' // https://codex.wordpress.org/Function_Reference/current_user_can

device=desktop | mobile | smalltablet | phone - The device parameter for [show/hide_if] is designed to allow you to hide or show any content on any of the device sizes recognized by Weaver Xtreme (or any theme, actually): 'phone', 'smalltablet', and 'desktop', or 'mobile' for non-desktop devices. If you want to show or hide content on a specific device, you give the device parameter a value of desktop, mobile, smalltablet, phone, or none (e.g., [show_if device=mobile]).

logged_in=true | false - This will hide or display content depending if the visitor is logged into the site or not.

post_id=34,875 / not_post_id=1,2,3 - This will display (or not display) the content depending if the current page or single post view is included in the comma separated list of WordPress page/post IDs. You can use both to refine a list of pages or posts to display or not display. Note that even though the parameter is called 'post_id', it applies equally to pages and posts. Depending on where you use the shortcode, it will apply to a post differently depending if it is on a blog or single page view of a post. Note that the default WordPress blog (as opposed to the Weaver Xtreme Page with Posts template) does not have a post_ID.

user_can=user-capability - This will show or hide depending if the current visitor has certain WordPress user capabilities. There are many capabilities which are defined in the WordPress Codex. This shortcode supports any of the listed capabilities for maximum flexibility. If you don't want to learn about all the capabilities listed in the Codex, you can use the following capability values to determine if the visitor has a specific role (as defined on the Dashboard Users admin pages). For example:

[show_if user_can=publish_pages]content for Editors and above[/show_if]

Note that the higher roles have all the capabilities of the lower roles - an Editor can do everything a Contributor can.

Capabilities to Specify Role
Role Capability
Subscriber read
Contributor edit_posts
Author publish_posts
Editor publish_pages
Administrator manage_options
Super Administrator (MultiSite) manage_network

 

[site_title style="style" matchtheme=false], [site_tagline style="style" matchtheme=false]

The [site_title] and [site_tagline] shortcodes allow you to display the current site title and site tagline. This can be useful in a text widget in the Header Widget Area, for example.

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

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

Shortcode usage: [site_title style='inline-style' matchtheme=false] [site_tagline style='inline-style' matchtheme=false]

  1. style='inline-style-rules' - Allows you to add inline style to wrap output of the shortcode. Don't include the 'style=' or wrapping quotation marks. Do include a ';' at the end of each rule. The output will look like style="your-rules;" - using double quotation marks.
  2. matchtheme=true - Allows you to add match the theme styling as defined in the site header if set to true. This will match the color/style/font of the header version of the site title and tagline with the exception of hide settings. The shortcode version will not be hidden on any device unless you also wrap the shortcode with a [show_if/hide_if] shortcode.

[bloginfo arg='name' style='your css']

This shortcode can be used to access the WordPress function 'get_bloginfo($arg)'. This will return a number of useful strings depending on the value. All the supported values are listed at https://codex.wordpress.org/Function_Reference/get_bloginfo. Some useful values include 'stylesheet_directory' and 'template_directory'. You can wrap the bloginfo output with css added to a <span style="your css">.

[box]text[/box]

Wrap content in a box.

Shortcode Usage: [box align=left background=#fff border=true border_rule='border-css' border_radius=4 color=#000 margin=1 padding=1 shadow=1 style='style-rules']text[/box]

  1. align=align: Leave blank, or specify left, center, or right for alignment of box within surrounding text.
  2. border=true: True is default. Specify false or 0 for no borders.
  3. border_rule='1px solid black': Specify a compound border CSS value to replace the default '1px solid black'.
  4. border_radius=4: Default is none - specify a px value for the corner radius if you want rounded corners.
  5. color=#000: Default is inherit - specify a valid color for the color of the text in the box.
  6. background=#fff: Default is inherit - specify color for box background color.
  7. margin=1: Default is 0 - specify an 'em' value for margin around the box. Using a margin overrides align parameter.
  8. padding=1: Default 1 - specify an 'em' value for padding inside box.
  9. shadow=0: Default 0 - specify a value from 1 to 5 for a border around the box.
  10. style=inline-style: any additional custom styling for the box
  11. width=100: A percentage width for the box within its surrounding container.

Video - [vimeo], [youtube]

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

Specifying Video Display Size for both shortcodes

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

The height of the video is automatically determined based on the width and the display ratio of the particular video.

You can also account for video resolution, and aspect ratio. The default is to display a horizontal 16:9 video. Use the sd=1 option to display 4:3 horizontal videos. Use 'vertical=1' to display hd videos in 9:16 or sd in 3:4 aspect ratios.

You can optionally use the w & h parameters to set your own width and height aspect ratio or size. The default h/w values are 16 and 9. If you provide w/h values, they will override the vertical and sd option values.

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

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

Parameters in Common, with default values shown

Vimeo

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

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

YouTube

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

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

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

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

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

Widget Summary

Weaver Login Widget

This simple widget shows a login in link, or a welcome, Site Admin, and Log out choice if the user is logged in.

Weaver Per Page Text

This widget will work like a text widget, but the title and content are defined by custom fields set on a Per Page basis. For any page, define the Custom Field wvrx_ts_pp_titleif you want a title, and define Custom Fieldwvrx_ts_pp_text as the content. Content can include arbitrary text, HTML, and shortcodes. The text will not automatically add paragraphs. The widget will display only if the custom fields are defined when that page is displayed. (This widget won't display on the default blog or other archive-like pages.)

Weaver Text 2 Col

This widget lets you add two columns of text. It is most useful in wide widget areas such as a content top or bottom widget area, or a wide footer widget area.

 


The Weaver X Theme Support Plugin and this document are © 2017, Bruce E. Wampler. Web Site - WeaverTheme.com