Weaver X Theme Support Plugin Documentation -- Version 1.0
Table of Contents
- Plugin Summary
- Weaver X Theme Extras Admin Page
- Shortcode Summary
- [bloginfo arg='name' style='your css']
- [box]text[/box]
- [tab_group] - content in tabs
- [header_image] Shortcode
- [html]
- [div]text[/div], [span]text[/span]
- [iframe]
- [show/hide_if]
- [site_title], [site_tagline]
- Video - [vimeo], [youtube]
- Widget Summary
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.- border_color: tab and pane border color - default #888
- tab_bg: normal bg color of tab (default #CCC)
- tab_selected_color: color of tab when selected (default #EEE)
- pane_min_height: min height of a pane to help make all even if needed
- pane_bg: bg color of pane
[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']
- 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. - 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']
- html-tag - The first parameter to the shortcode must be present, and must be a standard
HTML tag -
p
,br
, orspan
, 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]
- 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]
- 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"]
- src='https://example/com' - The standard URL for the external site.
- height=600 - Optional height to allocate for the site - in px. Default is 600.
- percent=100 - Optional width specification in per cent. Default is 100%.
- 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.
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]
- 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. - 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]
- align=align: Leave blank, or specify left, center, or right for alignment of box within surrounding text.
- border=true: True is default. Specify false or 0 for no borders.
- border_rule='1px solid black': Specify a compound border CSS value to replace the default '1px solid black'.
- border_radius=4: Default is none - specify a px value for the corner radius if you want rounded corners.
- color=#000: Default is inherit - specify a valid color for the color of the text in the box.
- background=#fff: Default is inherit - specify color for box background color.
- margin=1: Default is 0 - specify an 'em' value for margin around the box. Using a margin overrides align parameter.
- padding=1: Default 1 - specify an 'em' value for padding inside box.
- shadow=0: Default 0 - specify a value from 1 to 5 for a border around the box.
- style=inline-style: any additional custom styling for the box
- 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
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
- percent=100 - By default, normal horizontal videow will be sized to fill the full content space. You can use the percent value to make the video use a percentage of the content space (but mobile will always use full width). Specifying a percent for vertical videos is not recommended, as they will be displayed on all devices with a max width of 444px, which provides a good compromise look on full size displays.
- center=1 - Specify 'center=0' to disable centering of the video.
- aspect=hd - specify an aspect ratio from the following options. Note that using the wrong format
will not prevent a video from being displayed - it will be padded with white space around its actual aspect.
- aspect=hd or aspect=16:9 - Aspect ratio 16:9, the default if 'aspect' option not specified. This is currently the most common aspect ratio used for videos.
- aspect=sd or aspect=4:3 - Aspect ratio 4:3, the old pre-hd TV standard.
- aspect=widescreen or aspect=1.85:1 - Cinematic widescreen format.
- aspect=anamorphic or aspect=2.39:1 - Anamorphic widescreen format.
- aspect=70mm or aspect=2.76:1 - 70mm film.
- aspect=square or aspect=1:1 - shows video as a square (1:1).
- sd=0 (Obsolete: aspect is the preferred option) - By default, Weaver X Theme Support will generate sizes for HD/widescreen videos. To display old 4:3 standard definition videos, include 'sd=1' in the shortcode, or preferred 'aspect=sd' instead.
- vertical=0 - Add 'vertical=1' to the shortcode options to show videos vertically (portrait) with current aspect ratio rotated. Vertical videos are automatically sized to a maximum width of 444px which looks good on full size monitors, but is full width on phones.
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:
- color - You can optionally specify a Vimeo color theme using 6 hex digits for a color value.
- autoplay - Add 'autoplay=1' to have the video autoplay.
- loop - Add 'loop=1' to have the video loop.
- portrait, title, byline - You can specify a value '=0' for these to hide the display of the
corresponding element on the Vimeo player.
Portrait is the avatar/icon, title is the video title, and byline is source attribution.
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:
- rel - If you specify 'rel=0', YouTube won't show related videos after the video plays.
- https - If you specify 'https=1', YouTube will use the https protocol. (obsolete)
- privacy - If you specify 'privacy=1', YouTube won't use cookies to track your viewing.
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