The [aspen_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: [aspen_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.

The Aspen [aspen_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. See the Help document for more details.

Shortcode usage: [aspen_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:
   [aspen_html span args='style="color:red"']content to make red[aspen_html /span]
2. args='parameters' - Allows you to specify arbitrary parameters for your HTML tag. See the example above.

The Aspen [div] and [span] shortcodes allow easily add HTML <div> and <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>.

These will work exactly like a standard HMTL <div> or <span> tag. They support '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] or
[span style="font-size:20px;']This content will be large.[/span] or

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.

The [aspen_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: [aspen_iframe src='http://example.com' height=600 percent=100 style="style"]

1. src='http://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" (shortcode adds double quotation marks).

The [aspen_show_if_mobile] and [aspen_hide_if_mobile]shortcodes allow you to selectively display content depending if the visitor is using a standard browser or a mobile device browser. You might want to disable a video on for mobile devices, or even disable the Aspen Slider Menu on mobile devices, for example.

Shortcode usage: [aspen_show_if_mobile type='mobile']content to show[/aspen_show_if_mobile]

You bracket the content you want to selectively display with [aspen_show/hide_if_mobile] and closing [/aspen_show/hide_if_mobile] tags. That content can contain other shortcodes as needed.

The type argument can specify 'mobile' which includes all mobile devices (not tablets), 'touch' which includes touch sensitive mobile devices (e.g., small screen phones),'smalltablet' for small screen tablets (e.g. Kindle Fire), 'tablet' which includes only tablets such as the iPad, or 'any' which will include any mobile device. The default is 'mobile'.

The [aspen_show_if_logged_in] and [aspen_hide_if_logged_in]shortcodes allow you to selectively display content depending if the visitor is logged in or not.

Shortcode usage: [aspen_show_if_logged_in]content to show[/aspen_show_if_logged_in]

You bracket the content you want to selectively display with [aspen_show_if_logged_in] or [aspen_hide_if_logged_in] and closing tags [/aspen_show_if_logged_in] or [/aspen_hide_if_logged_in]. That content can contain other shortcodes as needed.

The Aspen [aspen_show_posts] shortcode allows you to display posts on your pages or in a text widget in the sidebar. You can specify a large number of filtering options to select a specific set of posts to show.

Summary of all parameters, shown with default values. You don't need to supply every option when you add the [aspen_show_posts] to your own content. The options available for this short code allow you a lot of flexibility id displaying posts. A full description of all the parameters is included in the Help file - please read it to learn more about this shortcode. Just click the ? above.

[aspen_show_posts cats="" tags="" author="" author_id="" single_post="" post_type='' orderby="date" sort="DESC" number="5" paged=false show="full" hide_title="" hide_top_info="" hide_bottom_info="" show_featured_image="" hide_featured_image="" show_avatar="" show_bio="" excerpt_length="" style="" class="" header="" header_style="" header_class="" more_msg="" left=0 right=0 clear=0]

The [aspen_site_title] and [aspen_site_desc] shortcodes allow you display the current site title and site tagline. (Site Tagline was formerly called Site Description.) 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 the a cell of the Header Widget Area, you could use the following example:

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

Shortcode usage: [aspen_site_title style='inline-style'] [aspen_site_desc style='inline-style']

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.

The Aspen Shortcodes and Widgets plugin supports specialized shortcodes to display video. While there are other ways to embed video, the Aspen 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.

Vimeo

This will display Vimeo videos. At the minimum, you can provide the standard http://vimeo.com/nnnnn link, or just the video ID number (which is part of the Vimeo Link). The other options are explained in the Help document

YouTube

This will display YouTube videos. At the minimum, you can provide the standard http://youtu.be/xxxxxx share link (including the options YouTube lets you specify), the long format share link, or just the video ID number (which is part of the YouTube Link). The other options are explained in the Help document

Specifying a percent will cause the video to be displayed using that percentage of the width of the containing element (content, widget).The videos will auto-resize as you shrink the browser width. If you specify a width (w=640), then that width will be used, overriding any percent you may have specified, and the videos will not auto-shrink. This setting is useful when used with an [aspen_slider].

Options for Video Shortcodes

Aspen 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 subtheme), 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.

Horizontal Widget Area - [aspen_hoizontal_widget_area]

[aspen_hoizontal_widget_area id='some_id']

This shortcode allows you to place the Aspen Header Horizontal Widget Area where ever you want - it doesn't even have to be in the header! You don't need the "id" paramater, but if you specify an id, the widget area will be wrapped in a <div id="some_id">, and you can add additional CSS styling by using that id in a custom CSS rule. The size and background option found in the Header options will also be applied.

The shortcode is really intended to be used together with the Aspen Admin : Main Options : Header : Header Widget Area "Show Only via Shortcode" option. With that option checked, the Header Horizontal Widget Area will be displayed only when the shortcode is used. You can use it anywhere, but the HTML insertion areas are likely candidates.

Extra Menu Shortcode - [aspen_extra_menu] + Vertical Menu Widget

[aspen_extra_menu wrap='wrap_class' menu='menuname' style='stylename' width='width_override' css='extra_css']

The [aspen_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 Aspen Admin→Advanced Options tab. Simply insert the shortcode with at least a menu name wherever you want the menu to appear.

1. menu= - The 'menu' parameter allows you to specify which custom menu to display. The name of the menu can be a 'Menu Name' used in the tabbed menu definition area, or the slug name of one of the 'Theme Locations' box (a slug is all lower case with no spaces of the Navigation name). If you specify '0', then the default menu will be used.
2. wrap= - This is the name of a class to wrap your menu. The default is 'extra_menu'. This is useful for a couple of things. First, you can specify #access to add the bottom rounded corners (if set) of the Primary menu bar. Using #access2 will get the top rounded corners of the upper Secondary menu bar. You could also specify your own name, and create additional rules to change attributes of the main .menu_bar class. For example, specifying wrap='my_menu' and adding a custom CSS rule like .my_menu .menu_bar {background-color:transparent;} to the Custom CSS Rules section would replace whatever the default menu bar background color was with transparent.
3. style= - The 'style' parameter is used to specify how the menu will look. You can use one of several pre-defined styles, or add your own custom menu styling in the <HEAD> Section on the Advanced Options tab. The pre-defined styles include:
   1. menu_bar - This is the style class name of the standard bottom and top menu bars. For example, using [aspen_extra_menu menu='mymenu' style='menu_bar'] in the Pre-Footer Code area will display custom menu 'mymenu' right above the footer using the same styling as the top menu bar.
   2. menu-vertical - Displays a simple Vertical Rollover menu in a width that matches the width of the primary sidebar. It will use the same colors as you've defined for your main menu bars. Simply add [aspen_extra_menu menu='mymenu' style='menu-vertical'] to a standard text widget placed on a sidebar widget area.
   3. menu-horizontal - Displays a very simple horizontal one-level menu. The links are styled using the standard link colors and styles of the section the menu is placed. This style is useful for placing a simple link menu right below your main menu, for example.
   4. menu-vertical-default - Displays a simple vertical menu using standard list and default link formatting.
4. width= - Allows you to specify the width of the outer box surrounding the menu. You could use it to make a narrower .menu_bar styled menu, for example. You can use px or % to specify the width.
5. css= - You can specify any CSS styling for the outer <div> that wraps the menu. This will be placed in a style="css..." parameter.
6. border_color= - You can add a border to your extra menu by specifying a color.

Show content displayed on tabbed pages.

Shortcode usage:

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

Short code parameters

• 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