Aspen Theme Documentation -- Version 1.0

See the Release Notes

The Aspen WordPress theme has been one of the most popular themes available at WordPress.org for some time. Aspen is the latest generation of the Aspen theme.

Table of Contents

The Aspen WordPress theme is a theme based on the popular Weaver II theme. Aspen allows you to change colors, fonts, sidebars, and other aspects of your site's look. In addition, it allows you to easily add whatever special code you might need (such as advertising tracking code), all from an easy to use "check mark" based theme admin page. It also has many per page and per post options, along with several page templates, that will allow you to totally customize the look of your site.

Aspen has been designed to appeal to those of you who want to customize many detials of your site, yet may not need the full set of features found in Weaver II.

Aspen allows you to build a custom site look by tweaking many of the style rules for your WordPress blog. You can get a customized look just by picking colors and layout options. While the Main and Advanced Options control panels may look overwhelming, they really aren't that hard to use once you play with them a bit. The different option tabs have been organized by the logical regions of your site. Thus, to change how the menu or info bar appears, go to the Main Options:Menus tab. If you want to change specifics of how posts are displayed, go to the Main Options:Post Specifics tab. Other tabs are similarly organized.

It is easy to design your own site look. You can start with one of 20 pre-defined subthemes, and change the settings to meet your needs. It is easy to get started: you just have to pick colors and click on check marks.

For more advanced developers, there a many options for fine tuning. These include custom CSS, options to add HTML to various areas of the screen, and several ways to display posts in places other than the standard blog page.

How to get started:

  1. Select one of the predefined subthemes. There are over twenty to choose from.
  2. Go to the Main Options panel. You'll see a list of tabs with options for the various parts of your theme attributes you can change. Play around with them, and see how the theme you selected changes. This may be enough to get a custom theme you like.
  3. If you have ad-sense code, or other code from a similar site, you can easily add it to your site in the Advanced Options panel.
  4. Finally, read this help document. There are lots of tips here, as well as fairly detailed explanations of exactly which CSS rules Aspen supports, and hints on how to go beyond the basics and really customize your site.

Using With WordPress Multisite

Aspen will work with no additional settings on WordPress Multisite installations. However, there are some extra settings that help control which options are available to Multisite users.

Note that all non-checkbox options for this theme are filtered based on the 'unfiltered_html' capability which is determined by the WordPress account role. This mostly means that non-Admins cannot add <scripts> or <style> directives anywhere. Regular Administrators are allowed to enter <style>, but not <script> directives. And, of course, Super-Administrators can enter anything.

Note that non-Administrator accounts are not able to see Aspen options on their Dashboard. However, the Per Page and Per Post options will be displayed by default to users with creation roles. You may want to restrict this on a per site basis. Either the Super-Administrator, or an individual sub-site Administrator can restrict access to the Per Page and Per Post option based on user role from the Admin Options tab.

You also may wish to restrict access to the HTML Insertion and <HEAD> Insertion tabs found on the Advanced Options tab. You can do this by uncommenting the define (remove the // in front) found at the top of the theme's /wp-content/themes/aspen/settings.php file. This will set the PHP constant ASPEN_MULTISITE_RESTRICT_OPTIONS to be true. However, if you change that file, that change will be overwritten when you update the theme. Instead, you can also copy the uncommented define line to the wp-config.php file for your WP installation (anywhere before the "That's all, stop editing! Happy blogging." line), and the setting will then survive WP and theme updates.

All About Your Site's Home Page

Your Home Page is the one that is displayed when a visitor enters the address of your WordPress Site. Commonly, your blog will serve as the home page, and WordPress will automatically add a Home item as the first item on your menu bar. (That is the default WordPress setting.) If you instead want a static page as your home, you can go to the dashboard Settings→Reading menu, and click the "A static page" option, and specify an existing static page to serve as Home. (It will be called Home on the menu even if it has a different name when you created it.) If you don't want a blog at all, you can leave the "Posts page" option as '--Select--', and no blog will be displayed. If you specify the name of an existing static page, then the default blog will be displayed using the title of that page. The content of that page (as well as the page's template, such as Page with Post) is ignored: that static page serves only to set the title for the blog page.

Aspen gives you options on just what appears as your home page. The Main Options→Menu Options section has an option called "No Home Menu Item". If you check that, the automatically generated Home menu item goes away. That means if you have your blog set as the home page, there won't be a Home menu item to get back to it, but entering just your site name will get you to the blog.

All that can be very confusing, to say the least. Here's how to get exactly what you want as your Home page.

  1. Create a static page that you want to serve as your Home page - If you want it called Home, then give the page Home as its title. Add content as needed. If you want this page to be your Blog Posts, then use the Page with Posts template when you create the page, and check the 'Hide Page Title' in the Per Page Options section. Don't add any additional content.
  2. Check the 'No Home Menu Item' option in the Main Options→Menus Options section.
  3. On the Settings→Reading menu, check the "A static page' option, and specify the page you defined in step 1 as the Front page. Set the Posts page top to '-- Select --' if the static front page you specified will be your blog page or you don't want any blog page at all. If the blog will be on a non-home page, then enter the name of a blank place holder for the blog, as usual.
  4. You can use a Page with Posts page as your blog page, either as the Home page, or as a secondary page. Step 1 explained how to make it your Home page. Use the method of Step 3, and set the Posts page option to --Select--. This step is important. If you specify the static "Page with Posts" page in the selection box, you will end up with get the default blog page, and not your "Page with Posts" and any options you may have set for that page. And the main reason to use a "Page with Posts" for your blog page is to add filters to control just which posts are displayed -- something you can't do if you use the default Home page.

Design Hints

This section has a few hints on designing your own theme.

Choosing Colors

Good themes use related colors. Many times (but not always), when you look at the Main Options page, you'll notice that all the colors of the should "look good". They don't have to, but having a nicely matching set of colors.

The color picker has an interesting feature. Once you pick a color from the left section, the right bar shows different brightness levels of that color. This is especially useful for making a color lighter or darker.

Some themes use the same colors for all links, some vary. But using the same link hover color for all the different kind of links lends consistency to your theme. The same is true for the other colors - try for a consistent look in your theme.

Testing

There a a couple of tricks that can help make testing you theme easier. However, you might find it easier to open a new tab in your browser. Open the theme admin page on one tab, and the main site on the other. After you make a change (and save them), you can toggle to the second tab and refresh the page.

Another important thing is to change just one thing at a time. This may seem to take longer, but you will really be able to see the effect of your change this way and be sure it does what you want.

Saving Option Settings

After you make any changes to the values of the Main or Advanced Options, you must save your changes. If you navigate away from the design tabs without first saving your values, everything will be lost. This is typical behavior for most WordPress settings screens.

Saving Your Own Theme

Once you have a design you like, you can save your work. You can then fiddle and fine tune more without losing your previous work. The easiest way to save your work is to go to the Save/Restore tab, and use the Save all current settings in host WordPress database option. This will save all your settings in the WordPress database. Any settings you make will be preserved until you save new ones. They will survive theme switches and upgrades. If you want to restore those saved themes, click the Restore Settings button.

You can also save your Aspen settings by downloading them to a file located on you own computer. You can save all current settings, including those marked with a diamond (♦), or just the settings relevant to the theme's design. You can use the Upload theme/backup button to retreive those settings from your computer.

If you are experimenting, it is a good idea to save copies of your work so you can get back to where you were.

Aspen Predefined Subthemes

Aspen comes with over twenty predefined subthemes (displayed on the Aspen Subhemes tab. You can use them as-is, or as a starting point for your own designs. When you select a new subtheme, all the options values from the Aspen Main Options are cleared and set to the new values of the subtheme. Most of the Advanced Options are not changed.

To select a predefined theme, pick one from the "Select a theme" list, and click the "Set to Selected Subtheme" button. The name and small thumbnail of the currently selected theme is displayed on the right. Now you can open the Main Options Tab to start customizing the theme in ways you like.

Aspen Main Options

The Main Options tab provides you with over 100 "check box" options for customizing your theme. This might seem overwhelming at first, but the options have been grouped according to the part of the site they affect. Each option includes an explanation as to what it does, often with extra information about using the option. It will be worth your time to scroll over all the options just to get an idea of all the things you can customize. Many of the options have been added after multiple requests from users on the Aspen Forum, and may not be anything you care about. Remember, these are options - it is unlikely that any one site design will use all the available options.

The options have been organized according to the different parts and functioning of your site's pages. The top of the Main Options page has tabs that let you quickly jump to each section.

Please note that you can provide values for the color boxes in a couple of ways. The easiest way is to click on a color, and a color selection palette will pop up. You can also provide values directly. This includes hex values as well as text values. The text values can include standard web colors such as red, blue, etc.; transparent; or even rgba() values. This gives you maximum flexibility for specifying colors.

Aspen defines default colors for many items. If the color value is blank, then the default value will be used. That will use the "inherit" property of HTML, and thus be the same color as the surrounding HTML <div>.

CSS Options

For more experienced users, it is easy to add extra CSS styling to any of the elements included in the Main Options tab that have a color setting. When you click on the + next to the CSS tag, a new input area will open. You can enter CSS style rules, enclosed in {}'s. These rules will be associated with the specific area that the color specifies. There are essentially two kinds of color setting options - a background (BG) color, and a text color. The CSS you add to the pop-open CSS box will apply to the associated area. In practice, it doesn't matter if the option is a BG or a text color - the rules will apply to the same item.

Please see the CSS Help document to get more details on using this feature.

General Appearance

The General Appearance section contains options that affect the overall look of your site, including both content and widget areas. These combine to give your site it overall look, including things such as width, borders, and more. The entire site is overlaid on the Wrapper, Main, and Container areas. Hint: You might want to experiment setting the options to primary colors (e.g., red, green, blue) just to get an idea of how they fit into the big picture.

Background images (Aspen Pro)

This option is functional in Aspen Pro, and allows you to specify specific background images for different areas on any page. You can also set the appropriate repeat options. The little "image" icon on the right lets you open the media library browser to upload or pick images. (Show an image, then click "Insert into Post" to insert the image's address into the desired image box.) These images are used on a site wide basis.

Layout

Aspen supports these sidebar layout arrangements:

Header Content
Pri Up Low
Footer Single Column - Right
Header
Pri Up Low
Content Footer Single Column - Left
Header
L
Content
Pri R
Footer Split - Left & Right
Header Content
Pri
L R
Footer Double Cols, R, top wide

Header
Pri
L R
Content Footer Double Cols, L, top wide
Header Content
L R
Pri
Footer Double Cols, R, bot wide
Header
L R
Pri
Content Footer Double Cols, L, bot wide
Header Content Footer No Sidebars

The sidebars support three widget areas (Primary, Upper/Right, and Lower/Left). There are other widget areas supported, and described in the next section.

Aspen allows control over site page layout, including margins, sidebar layout, and sidebar sizes. There are two major sidebar areas - one on the left of the site, and one on the right. The Layout tab allows you to control which layout is used for most of your pages. You can also set the layout for any individual static page from the Per Page Aspen option box displayed on the static Page Editor admin panel. Thus, you can essentially have any of the 8 different sidebar arrangements appear on any of your pages. You can even hide specific widgets areas within a specific sidebar on a per page basis.

One typical site design is to use one sidebar arrangement for regular pages - the blog, static pages, and single post pages, while using an alternate sidebar arrangement for the Archive-like pages - archives, categories, etc.

Aspen allows you to specify a sidebar arrangement for those two basic cases. You can also alternatively specify a different sidebar arrangement for your blog, static pages, other archive-like pages, and the single post page. These options will allow great flexibility in site look. You can also set the sidebar arrangement on a per page basis.

You can also specify the width of any of the individual sidebar widget areas. These are expressed as percentages. You can add more precision to the percentage if needed (e.g., 24.375%).

Technical Note: Aspen's layout design separates the left and right sidebar layout wrappers (e.g., Right Side, Two Column) from the actual sidebar widget areas (e.g., Primary, Left, Right).

Note for Double Column Sidebars: If you want a double column sidebar on the left or right side, but don't want the wide Primary area at the top or bottom, simply don't add any widgets to the Primary Widget area, and it will not be displayed - leaving you with two side by side widget areas (Left and Right).

Widget Areas

As just noted, Aspen separates the sidebar wrapper areas from the sidebar widget areas. The Widget Areas tab controls the background, margins, and borders of both individual widgets, and the different widget areas, including the sidebar widget areas, the top and bottom widget areas, and the footer widget areas.

Widget areas are now insensitive to the border and margin widths - and include an option to specify border attributes in the General Appearance tab. The footer region automatically adjusts widget area widths depending on how many footer widget areas you actually use (from 1 to 4).

"Disappearing sidebars" - If you find the sidebars are not displaying in the right place (they will usually end up below the content area), it means there is some incorrect HTML code in your page or post content. This is the most likely reason for this, although incorrect HTML in a widget (usually a text widget) can cause the same symptoms. This behavior is not due to any issues with Aspen, but is inherently a part of the way HTML code works. The cause will almost always be a missing </div> tag (or an extra <div>). HTML uses <div>...</div> blocks to determine different parts of a web page. If your content has a missing </div> tag, then the bad HTML will confuse your browser, resulting in the incorrect display of the sidebar.

Header Options

The Header Area is at the top of your site, and really gives the world the first impression of your site. Thus, there are many options for tweaking the site Header.

Aspen supports up to two menu bars. With no additional action, your menu will be built automatically using the pages you've defined (using the Page Attributes parent and order settings). Display of your posts (blog) in the menu is determined by how you've set the main Settings->Reading Front page displays options. To use a second menu, you'll need to use Appearance->Menus, and define the Secondary Navigation menu. If you define the Primary Navigation menu, it will be used instead of the automatic menu generation from the Page Attributes settings. Note that by using the Page with Posts template to create a blog page, combined with the Reading Front page displays setting, and the No Home Menu Item, you have complete control over menu content and blog display.

You also have several options for controlling basic display of the Site Title and Tagline (set in the dashboard Settings->General panel). If these settings don't give exactly what you want, the very best way to get exactly what you want is to use a photo or image editor to add exactly the site logo or title you want - you can simply hide the default display of the site title and tagline in that case.

Aspen supports the variable sized header images included beginning with WordPress 3.4. You can also check "Hide Header Image" to hide it. The header image will always be displayed using the site's full width. The default is 940px width by 188px high. You can also control how much space is displayed after the header and before the content.

This theme has automatic header image support for posts that include a Featured Image. You can disable that behavior in this section.

For ultimate control of the Header, it is possible to completely replace it on a site wide or per page basis using the Site Header Insert Code boxes on the Advanced Options tab or using the equivalent per page options.

Header Horizontal Widget Area (Aspen Pro)

Aspen Pro allows you to build a great looking header for your site using this added horizontal widget area. This area supports up to four different widgets displayed horizontally in the header area. This widget area is placed immediately before the standard site image (which you can hide if you need to.)

Consider this very simple example. It has a menu on the left, a message next, the site name, and finally a banner image.

Home
Page 1
Page 2		 Welcome
to our
site!
Aspen Theme

You can use any widget in the Header Widget Area. It is likely the standard Text Widget will be very useful here. For example, you can insert a welcome message, as well as a banner image using the Text Widget. Because Weaver II adds support for shortcodes in the Text Widget, you can put almost any shortcode feature in your header. But you could also use a Menu widget, a slide show widget, an RSS feed widget - whatever you might want in your header.

The layout of each widget in the area can be set using the Main Options:Header tab. You can set the overall background color for the widget area, the font size, and the min-height. You can set it so the Header Widget area appears only on the front page. You can hide it from the Mobile view. Note that you can use the CSS+ option on the Area BG color to add whatever CSS you might need.

Widget Layout

You can also control the layout of each of the four widgets. Note that only the number of widgets you actually add to the area will be displayed. So if you have 3 widgets, only the settings for the first three widgets are used. For each widget, you can specify BG color (or per widget CSS with the CSS+ option), the width used for that widget (in %), and a different width for the mobile view. The widths must add up to 100%. If you don't specify a width, the widgets will simply be left aligned and take up their "natural" width.

It is likely that your custom Header Widget Area based header won't look great when viewed on a mobile device. The width options allow you to play with the mobile look. For example, you can specify a 0 (zero) width, and that widget won't be shown. (Works on the standard view, too, you can mix and match which widget areas are displayed on regular and mobile screens.) Typically, you might use just 1 or 2 widgets for the mobile device, and specify an alternate spacing.

Important Guidelines

When you create a header using the Header Widget Area, you should be sure to follow these two important guidelines:

  1. Specify a width for the all widgets you use. The total with should add up to 100%.
  2. Each widget in the widget area uses the 'max-width:100%' attribute. This means that images that are larger than the widget's width will be auto-resized to fit the width available. If you have large image you want to take up only part of a header widget, you need to specify a width with the <img> tag.
  3. The Header Widget Area is 4 widgets wide.

Horizontal Widget Area - [aspen_hoizontal_widget_area]

[aspen_hoizontal_widget_area id='some_id']

This shortcode allows you to place the Aspen Pro 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.

Technical Details

The Header Horizontal Widget Area is laid out using nested <div>s. Because headers usually have large sized content, it was determined that supporting up to four widgets per row was optimal. Each widget is contained in a div (<div class="header-widget widget_widgetname header-widget-1">). The "header-widget-1" class name is unique per column (1,2,3,4). If you supply more than 4 widgets, the Header Widget Area will add a new row, but reuse the 1-4 "header-widget-#" class name.

The widgets generated start out with no borders, no margins, and no padding. This is really a bare-bones layout, and allows complete flexibility in how you style each widget in the horizontal area.

 

Menu Bar and Info Bar

Aspen allows you to control many aspects of the main menu bars, as well as the Info Bar (which is new to Aspen).

Menu Bar

Aspen allows you to control the menu bar colors, as well as the colors of the submenus and hover colors. You can specify bold or italic text. The font style will match the Titles font settable on the Font tab.

Info Bar

The Info Bar is displayed right below the header area. It provides two basic features - a "breadcrumb" menu that shows the path to the current page. On blog pages, there is an additional "Navigation Page" display that displays a numbered menu for quick access to a specific block of blog posts. (Note: if you are using Yoast WordPress SEO and enable its breadcrumb support, Aspen will automatically use Yoast's version instead of the built-in breadcrumbs.)

Options allow you to hide the info bar, as well as control if the info bar is displayed right after the menu bar (thus taking the full width of the page), or right above the content area (thus only going to the sidebar).

Links

Options for all links now appear on a single tab: Links. Many sites will use the same coloring and style for all links, but Aspen allows you to control the default links, Post Info Line links, and Widget links separately.

While you can set a separate color for Visited links, this option has fallen out of widespread use, and is usually left the same as the regular link color.

Post Entry Title Link

Note that in WordPress, the title of each post is actually a link that will open the full single page view of each post. It is customary to style the post title to use the same color as page titles, but use a different hover color (which usually matches the standard link hover color) to indicate the title is a link.

Content Areas

The Content Areas section covers options that affect both your static page content, and blog post pages. These options all work as explained. The Page Title Text option is slightly different in that it applies only to static pages, and not to blog post titles. Each blog post title is actually a link to the full view page of that post, and uses the Post Entry Title Link set the post title color.

Leaving Comments

It seems that disabling Comments and Talkbacks for posts and static pages is one of the more common tasks that people want to do, but have trouble finding the right options to do it. I don't think the WordPress interface makes it very clear what is going on, because this topic may be the #1 most asked question on the Aspen froum. So, here's the scoop on controlling comments.

  1. This is really not a theme issue – the control is entirely done using regular WordPress options.
  2. Comments are controlled in the Dashboard Settings->Discussion page. There are quite a few options available, but if you want to disable comments by default for posts and pages, select the appropriate options on that page. (Unchecking the first 3 boxes will do it.) Don't forget about trackbacks and pingbacks because they can generate "comments" as well.
  3. If you've turned off comments by default (and you will probably end up doing that because even with Akismet and a Captcha plugin, you're likely to end up with plenty of spam), then you can re-enable comments for specific pages and posts from the Page and Post editor screens.There is an option panel on the Page/Post editor pages called "Discussion" with check boxes for that option. If you don't see that panel, you need to display it by opening the Screen Options tab in the upper right corner of the Page/Post editor page, and then check the Discussion show option.
  4. Now, if you created any posts or pages before you disabled comments, you'll have to go to each individual page and post and disable comments explicitly. Setting from the Settings->Discussion screen doesn't retroactively change the option. You'll have to delete any old comments you've accumulated as well.
  5. After you've done all this, by default, you will not see any reference to comments in the Post bottom info line, or at the bottom of regular pages. There is a Aspen Main Options in the Post Page Specifics section to display a  "Comments are closed"  message if you want .

Post Page Specifics

Next to the Header, it seems that control of just how Posts (blog articles) are displayed is something many people want. This section discusses some of the things you can control.

Post BG

This will change the background color of just the post. This can be used to highlight each individual post. You can also use the CSS + option to change the font color ({color:#xxxxxx;}) or add a border with a bit of padding ({border: 1px solid black;padding:5px;}).

Post Entry Title Link

The title of each post is a link, and controlled on the Link tab. Note, however, that the Bar under Titles option in the Content Areas tab also affects post titles.

The Info Lines

Each post has two information lines (also called Meta Info). The line right after the title has the date of the post and the author. The last line of the post has the post's category, tags, and link for comments. You can control the appearance of these Meta lines in several ways. The two Info BG color settings let you put a background color behind the Meta lines if you wish, and you can add CSS to them for more effects. You can use the default Meta info wording with | separators, or use Icons for each part of the meta info. You can selectively hide different parts of the meta info (which forces use of icons, however). (Comments will always be displayed if they are enabled and associated with a post.) One of the design features of Aspen is that it is language dependent on the Twenty Eleven theme's user interface wording. Thus, it is not possible to change the wording such as Posted on date by author. If you don't like that wording, you can use icons instead.

Full Posts and Excerpts

Posts are displayed in three distinct places: the main blog page, when part of a specified list (archives, categories, author, etc.), or when displayed as a single page by itself. The full content of a post is always displayed on the single page view. The blog page also displays the full content of a post, unless you've manually added the <!--more--> tag, which then causes a "Continue reading..." message to be displayed on the blog page. In special list views (archives, etc.), posts are displayed as excerpts. These excerpts are normally 55 words long, with all images, formatting, and links removed. You can adjust the excerpt length. You can specify to display full posts on special post list pages, and display posts as excerpts on the main blog page (which can be combined with the Featured Image to generate nice looking post list). These can also be controlled on a per post basis from the Edit Post page. Note that checking a display as full post option does not override your manual placement of <!--more--> tags.

The Featured Image

You may have seen the Set Featured Image option on your post and static page edit panel. What is it good for? Unfortunately, there is no specific WordPress standard on how to use Featured Images. However, Aspen's design has attempted to maximize their usefulness.

If you add a featured image that is at least as wide as the standard header image, then that Featured Image will be used as a replacement image for that page or post single page view.

If the image is smaller, then it will be displayed inline with the post or page. Here's how to add a Featured Image and control how it is displayed:

  1. Click the Set Featured Image from the post/page edit panel. It is usually on the lower right. (To change the Featured Image, you first have to delete the current one, and then set a new one all over.)

  2. Pick an image. This will pop up the Add Media interface. After you upload a new image, or pick one from your media library, you'll be shown the info about the image. Important step: at the bottom, click the Use as featured image link. Close that box.

  3. Select one or both of the Aspen Main Options tab options in the Post Page Specific section: Show Featured Image for full posts and/or Show the Featured Image for excerpted posts.

For excerpted posts, a thumbnail will be displayed at the top left of the post. For full length posts, the full image will be displayed at the top of the post.

Other Options

You can set the background color for sticky posts. (Add {border:none;padding:0;} to the CSS of the Sticky Post BG option to make sticky posts look like other posts.)

You can control author information display, as well. You can also show the author's avatar (as defined by a gravatar.com account, for example) on each post. By default, if the author has included biographical information on author's account settings page, that information will be included when the post's single page view is displayed. You can hide that.

When a visitor clicks on a image thumbnail, an attachment page will open up with the full sized view of the image. If you want your visitors to be able to leave comments for that image, check the Allow comments for attachments box.

Photo Blogging

Aspen has a couple of features that make creating a Photo Blog easy. The three main features to help with creating a photo blog include:

  1. Multi-column blog layout. Aspen allows you to display your blog entries in up to 3 columns. Aspen includes support for the Masonry dynamic layout feature which will squeeze your posts as close together as possible in up to 5 columns.

    You can specify the column layouts either globally from the Main Options -> Post Specifics tab, or on a Per Page basis if you are using the Page with Posts template using the Per Page option box on the page editor.

  2. The Compact "Post Format" Posts option will make each post formatted using one of several "Post Formats" display in a compact form. For Photo Blogging, this option is especially useful for the Image Post Format. By default, the Image Post Format will show the first image from your post with a different post info line. But compact display option makes the "Image Post Format" display only the first image found in a post with no borders, no margins, no excerpt, and no extra text of any kind - just a plain image. That image links to the post's single page view. If there is no image, then the text content of the post will be displayed. This allows you to include short descriptive text between your images if you need. Other post formats have similar compact versions.

  3. Page with Posts - this Aspen page template allows you to show your posts as a blog anywhere you like, and include filtering and other per page options that you can fine tune to make a great looking Photo Blog.

Hints

Here are some hints for creating a Photo Blog:

Custom Post Info Lines (Aspen Pro)

One commonly request is the ability to tweak the top and bottom info lines associated with blog posts. Aspen Pro includes a template function that gives you total control over the top and bottom info lines of posts displayed on a blog page, and posts displayed on the single page.

The custom info lines are set on the Main Options:Post Specifics:Custom Info Lines tab, which will be added at the bottom of the tab when you add Aspen Pro. You can change the top and bottom info lines on blog pages (including Page with Posts and [aspen_show_posts], and on the single page. You need to specify all options if you want the standard info lines replaced.

The text you specify can contain any valid HTML you wish, plus a set of special template %values% that will get replaced by the correct values for the specific post. For example, setting the Top Post Info line to:

<strong>%title%:</strong> %date-icon%%date% %author-icon%%author%

will create a top info line that looks like this:

The %title% is replaced by the post's title. The %date-icon% produces the calendar icon, while %date% produces the published date and link to the post. Similarly, the %author-icon% and %author% produce the author and link to the author archive page. Given a mixture of HTML, possibly including styling, and the provided set of parameters, you can build almost any combination of relevant information on the post top and bottom information lines.

There is no restriction on which values can be used on which line, nor other HTML you might wish to include. You can include whatever text you want mixed in with the definition. Some of the values allow you to override the standard text included with the standard values (e.g., 'permalink'). If you define an info line template, it will override any other info line setting you have (except hiding and position swap).

Here is a list of the supported template values:

 

Footer Options

The Footer Options control basic Footer appearance.

Site Copyright
If you fill this in, the default copyright notice in the footer will be replaced with the text here. It will not automatically update from year to year. Use &copy; to display ©. You can use other HTML as well. Use &nbsp; to hide the copyright notice.

Fonts

Aspen groups font family usage into two basic areas: the Content Font, which includes most content and widget text, and the Titles Font, used for post, page, and widget titles, info labels, and menus.

In addition, the design is based on a single "Site Base Font Size". This value is expressed in px, and defaults to 12px. All other text elements are sized as a percentage of that base size. One of the main reasons of this is for consistent display on various screen sizes, including mobile devices. It is possible to simply change the base font size, and the rest of the site will automatically be adjusted to match.

Note that it still possible to set the size and font family using Custom CSS Rules with the Aspen.

Mobile

Having a great looking mobile view of your website has become an essential part of any modern website. Aspen has you covered! Aspen has some of the best support for mobile devices available from any WordPress theme. It offers twp different mobile support modes, each which delivers a great looking display on mobile devices. Aspen works seamlessly on most mobile devices, automatically adjusting the styling for various sized screens.

An Overview of Mobile Friendly Website Design

Responsive Design

This section will explain some of the technical details of how mobile devices are supported. You may have heard the term "Responsive Themes" to describe themes that support mobile devices. Responsive design allows the content of any website to automatically adjust to the size of the display screen. You can easily determine if a website is responsive from a desktop browser by using the mouse to make the display window narrower and narrower. If the site is responsive, the images will shrink automatically to fit in the window. As the window gets smaller and smaller, some content (such as sidebars) will rearrange itself, or disappear altogether.

All this magic is done entirely by using appropriate CSS styling, and special CSS rules called "@media" rules which allow the site to use different CSS rules depending on the width of the site. The other major component of responsive design is using relative sized for content such as font sizes or images. As a rule, using fixed pixel sizes (px) for elements will render the site non-responsive. While it can still be appropriate to use fixed px sizes for some items with small widths, in general all sizes are replaced by percentages (%). Then as the screen size shrinks, content will adjust automatically.

One of the big advantages of a totally responsive design is that it depends solely on the width of the display screen. It is not necessary to know if the site is being displayed on a specific device or device type. Aspen's design is Responsive, and will deliver a great looking site on any device.

Aspen Mobile Support - the Specifics

This section describes the options available on the Mobile Aspen Admin tab.

Aspen Mobile Modes

  1. Responsive, not stacked - This responsive display mode will display your site without the sidebars showing. In this mode, standard sidebars are not displayed, the mobile menu slide open is displayed on mobile devices instead of the standard pull down menu (which will be displayed on browsers with a wide enough window). Some content will be selectively hidden or displayed depending on the width of the device.
  2. Responsive, stacked - Just like Responsive, not stacked, but the standard sidebar areas will be shown stacked vertically below the content area on narrow devices.

Mobile Device Responsive Custom CSS

It is possible to selectively display content on a desktop view vs. a mobile view. You can use @media CSS rules if you want to create device specific rules. The following @media rules cover how Aspen treats devices - phone, small tablet, large tablet, and desktop. You can add whatever specific CSS rules you want inside the {}'s of the appropriate @media definition.

Add these to the Advanced Options : <HEAD> : Custom CSS rules box.

/* these @media rules can be added to your custom CSS to handle custom responsive styling
   for various devices */

/* value: 769 for desktops, 641 for tablets and bigger, 581 for small tablets and bigger  */
@media only screen and (min-width:769px) {
}
@media only screen and (max-width:768px) and (orientation:portrait) { /* portrait large tablets */
}
@media only screen and (max-width:640px) {  /* small tablets AND phones */
}
@media only screen and (min-width:581px) and (max-width: 640px) { /* small tablets */
}
@media only screen and (max-width: 580px) { /* phones */
}

It is also easy enough to tweak these, add min-width or max-width to refine just what devices will be affected, but at this point in time, this is pretty much covers how the devices are handled.

Aspen Advanced Options

The Advanced Options page allows you to define many more advanced options.

The values you put here are saved in the WordPress database, and will survive theme upgrades and other changes.

PLEASE NOTE: Limited validation is made on the field values, so be careful not to paste invalid code. Invalid code is usually harmless, but it can make your site display incorrectly. If your site looks broken after you add settings in these sections, please double check that what you entered uses valid HTML commands.

Site <HEAD> Section

The <HEAD> Section tab includes two major setting areas. These areas are used to provide advanced code to enhance the functionality and style of your site.

The <HEAD> Section

This input area is one of the most important options in Aspen for customizing your site. Code entered into this tab is included right before the </head> tag in your site. This code can include almost anything that can be added to the <head> section of a site. One of the most common uses will be to add code snippets provided by outside sites such as Google Analytics. You can also provide extra links to external style sheets or JavaScript libraries as might be needed.

Unlike with previous version of Aspen, the <HEAD> Section should not be used to enter custom CSS rules. Instead, use the next section - Custom CSS Rules

The Custom CSS Rules Section

This section may be one of the most useful and used advanced option sections. This is where you can enter custom CSS to fine tune the styling of your site. The sources for these CSS rules can vary. For example, the Aspen Snippets document describes many possible CSS code snippets that can be used and modified to control your site's styling.

You should enter just CSS rules in this box. Don't include a <style></style> block. This is changed from how CSS was entered into the <HEAD> Section in previous versions of Aspen. The style rules you add here will be included after any other CSS rules Aspen generates - so they will override those rules.

The Aspen documentation also includes a short introduction of CSS, and you will likely find it worth your time to learn a a bit about CSS.

The CSS+ boxes associated with every color and background color selection box in the Aspen Options can also be used to enter Custom CSS Rules. If you add CSS to a CSS+ box, you need not enter any id or class name - the proper ids or classes will be automatically provided to match the item associated with the color selection box.

Directory Macro Replacement for CSS images

Sometimes you might want to add a background image to a style (e.g., using a url() value). Those images need to be stored someplace available to visitors to your site. One typical place is to use the WordPress media gallery, and use the full URL to those images.

Because you might be building a child theme, or an Add-on Subtheme, Aspen Provides a handy macro replacement capability for Custom CSS Rules and CSS+ rules. For example, if you want to supply some background images for a child theme, and you would like to save those images in a directory called /images in the child theme directory, you can use the macro %stylesheet_directory% in a style url() value.

For example, say you've built a child Aspen theme, and have a file called content-bg.jpg stored in the child theme's /images directory. You can specify the location of that file in a site independent manner by using:

#content {background-image: url(%stylesheet_directory%images/content-bg.jpg);}

The %stylesheet_directory% will be replaced in the generated CSS code as

url(/wp-content/themes/your-child-theme/images/content-bg.jpg)

The file directory macros supported by Aspen will produce a root-relative path, and include the trailing /. Using a root-relative path eliminates issues with http and https protocols, and will be site independent. The following macro values are supported:

%template_directory% - the main theme directory. If the theme is a child theme, this will be the directory of the parent theme (../aspen/).

%stylesheet_directory% - the directory of the theme's stylesheet - thus if it is a child theme, then this will be the child theme's directory.

%addon_directory% - the directory where Aspen loads Add-on Subthemes. Add-on Subthemes are available for download from AspenTheme.com, and are loaded in the /uploads/aspen-subthemes/addon-subthemes/ directory. This value is useful for providing images with Add-on Subthemes.

Actions and Filters (Aspen Pro)

This block lets you add arbitrary PHP code to your site. This main purpose of this feature is to allow you to add WordPress Actions and Filters for plugins and many standard WordPress actions and filters. This is a very advanced option, and some understanding of PHP code and how WordPress actions and filters work is expected.

Technically, any PHP code you add here will be executed at the very beginning of the theme's header.php template file. This file does not get loaded and executed until the core WordPress engine has loaded the main theme files (e.g., functions.php), so it will be too late to add actions or filters for many WordPress options. But any actions or filters used to generate content of a page can be added at this point of execution. However, the code can not be used to override pluggable functions in the theme's functions.php file.

You can add arbitrary PHP code here, but normally this code will just be add_action and add_filter calls, plus supporting function definitions. You can probably add enqueue_style and enqueue_script functions as well, as those functions are typically used later in the header.php file.

The code you define is executed using the PHP eval() function. Any PHP errors will cause failure of the site to load properly. Specifically, you should NOT wrap the code with <?php at the beginning and ?> at the end. You can use them within the code as needed.

HTML Code Insertion Areas

The options in this section allow you to insert HTML code into various regions of your pages. These areas must use HTML markup code, and all can include WP shortcodes. Important: You almost certainly will need to provide CSS styling rules for these code blocks, either as in-tag style="..." rules, or by adding CSS rules the the Custom CSS Rules Section described above. If any of your styling includes float rules, you will almost certainly have to add a <div style="clear:both;"> to your inserted code. Note: Providing margin style values, including negative values, can be used to control the spacing before and after these code blocks.

The first area - Site Header Insert Code - is likely to be the most useful area as it can be used to define custom headers for your site. The Footer Area can also be used for custom copyright or administrative menus. The other areas are mostly useful for more advanced web site builders.

Each of the HTML insertion sections includes two additional options - Hide on the front page, and Hide on non-front pages. These settings can be used to control where the areas are used.

This must be HTML markup code (including WP shortcodes), and will be inserted into the #branding div header area right above where the standard site header image goes. You can use it for logos, better site name text - whatever. When used in combination with hiding the site title, header image, and the menu, you can design a completely custom header.

Note that this code will be after or before the default Primary menu depending on the move menu setting. You can completely replace the default menu (hide it), but you will have to hard-wire the links to pages in your replacement menu.

If you hide the title, image, and header, no other code is generated in the #branding <header> block (HTML 5!), so the code here can be a complete header replacement. You will almost certainly need to add some CSS style, too. (We've added a class called aspen-center which you can use to div-wrap your insert code to center it:
<div class="aspen-center">[shortcode]</div>)

You can also override the CSS #branding rule, create a new div, or use in-line styling. One of the most flexible capabilities of the section is the ability to embed WordPress shortcodes. This might be most useful for adding a rotating header image using a plugin such as Aspen Themeworks Show Sliders.

For example, assume you've installed the ATW Show Sliders plugin, and have uploaded your rotating header images for the plugin to use. To add this slide show header image, you should first disable the default header image by checking the "Hide Header Image" in the Main Options tab. Then, add this code to the Site Header Insert Code box:

<div class="aligncenter">[show_slider name='header-images']</div>

Note that the built-in aligncenter CSS class will ensure the slide show is displayed properly. Without appropriate CSS styling, you may get unexpected placement of the plugin output. The aligncenter class will usually do what you want.

Footer Code

This code will be inserted into the site footer area, right before the "Powered by" credits, but after any Footer widgets. This could include extra information, visit counters, etc. You can use HTML here, so include style tags if you want! And like the Site Header Insert Code section, you can also use shortcodes.

Pre-Wrapper, Pre-Header, Post-Footer

These areas can be used to insert HTML and shortcodes in the given areas of a site page. Each of these areas a wrapped in an "#inject_areaname" <div>. The name is included on the admin page. In order to get proper display, you may have to add an extra empty <div> in your code block to clear the floats: <div style="clear:both;"></div>. You could also include that in a CSS rule for the respective '#inject_xxx" rule.

Pre-Header, Pre-Main, Pre-Container, Pre-Comments, Post-Comments, Pre-Footer, Post-Footer, Pre-Left Sidebar, Pre-Right Sidebar (Aspen Pro)

These areas can be used to insert HTML and shortcodes in the given areas of a site page. These options are available only in the Aspen Pro addon. Each of these areas a wrapped in an "#inject_areaname" <div>. The name is included on the admin page. In order to get proper display, you may have to add an extra empty <div> in your code block to clear the floats: <div style="clear:both;"></div>. You could also include that in a CSS rule for the respective '#inject_xxx" rule.

Page Templates

The information on this tab applies to the different Aspen Page Template areas.

Some add-on widgets can have only a single instance defined to work properly, so if you have trouble having one work properly and you've used it in more than one widget area, check on that. Standard WordPress widgets don't have that restriction.

This tab also provides brief descriptions of the different Aspen page templates.

Archive-type Pages

WordPress supports several kinds of pages that are often called "Archive" pages. These include pages that will display different post archives such as by category, tag, author, or date. It also includes the search page. Normally, such pages will include a title that describes the archive page type.

SEO

Aspen has been carefully designed to follow the basic rules used by most Search Engines - it is already SEO friendly. The built-in SEO features are based on the development efforts of the WordPress design team, and are identical to those used by the standard Twenty Eleven theme. Some of these features include generation of proper site titles that are displayed in the browser's title line, as well as the ability to define global meta description and keyword definitions. And Aspen generates HTML5 tags, which are further used by search engines to index your site.

You may also know that SEO plugins are among the most popular plugins found on WordPress. Aspen will also work well with those plugins.

Site Options

This tab allows you to set additional site specific options, and it provides links and hints on setting other site options. The main option provided is the ability to specify an arbitrary image to use for your site's FavIcon - the unique little icon that is displayed in the browser site title bar.

Aspen Pro Options

Aspen Pro is a premium plugin for the Aspen Theme that adds advanced features to the theme.

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.

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.

Aspen Admin Options

These options control some options that may be important for some users. The options are explained on the page.

Save/Restore Themes and Backups

Aspen allows you to save a backup of all your settings in the WordPress database. Just click the Save Settings button. You can Restore them later with the Restore Settings. All you settings are saved, and the saved version will survive updates to the theme. It is a good idea to save your settings periodically as you design your own subtheme.

Aspen also allows you to save either a backup of theme related settings, or of all your settings to a file downloaded to your own computer. Click the appropriate Download button. You can later upload any Aspen Theme theme or backup file using the Upload Theme/Backup button.

What is the difference between Theme only and full backup?

You might ask what the difference between a Backup and a Theme Setting is. The difference is that when you save a theme's settings, settings that apply to a particular site aren't save. This allows people to share their theme designs. Most people won't care about sharing their theme design - they will be using it just for their own site. So unless you know you're going to be sharing a theme, stick to Backup All or Save Settings on the Save/Restore tab.

You should note that if you make changes to the settings, they are saved in the "current" settings. If you then pick another Aspen subtheme, for example, many of your settings will be lost and replaced with the new theme settings (per-site settings are not replaced when you change a subtheme, but ARE replaced when you use "Restore Settings from Database"). Thus, you really need to save your work if you want to be able to restore it.

The simplest way to save the settings is to save them to "Save Settings". The settings are saved in the WordPress data base. These settings will survive theme and WordPress upgrades, and as long as you're only using one theme, is perhaps the easiest way to save your work.

For each of these save methods, there is a corresponding way to restore your settings.

Aspen Page Templates

Aspen Provides you with several additional page templates for creating static pages. Users of the previous Aspen version should note that because of the new, flexible sidebar layout options, the need for several page templates is no longer needed or provided.

  1. Default - The default template uses the standard page formatting defined by your settings. The default sidebar layout will use the standard Static Page layout, but you can use the Per Page options to override the default layout.

  2. Blank - Provides a totally blank content area inside the #wrapper div. (This means the page will match the overall look of your site.) It lets you provide totally custom HTML on a page. It doesn't show the page title you set when creating the page. It does show page top and bottom templates and comments unless you explicitly hide theme on a per page basis. You can optionally hide the header and footer areas using the check boxes on the per page options. This template is good for entering raw HTML using the HTML editor tab. This page will use the default widget areas for a standard page, but this can be overridden in the per page options.

  3. Two Column Content - Allows you to create a content page with two columns of content using the standard <!--more--> page tag (entered using the page break icon from the Visual Editor). If you break the content into more than two areas, they will automatically be placed vertically (in other words, you can use more than one <!--more--> tag.

  4. iframe, full content width - This template is designed especially for using an iframe external site embed on a regular static page. If you have an old site in HTML that you don't want to convert to WordPress, or some other site you want to take on the appearance of your site, then this is the page template for you. It hides the standard page title so the external site can take the full page space. You can enable comments, if you wish. Use the Per Page options to select a sidebar layout - most likely "none".
    The easiest way to add an iframe is with the [aspen_iframe] shortcode. Or you can also embed an external site by simply adding an iframe HTML command to your page:
    <iframe src="http://example.com" style="width:100%;height:600px;border: 0px"></iframe>
    (You'll need to use the "HTML" page editor view to add this command, and you can include other content as well for titles or introduction material.) You can adjust the height to best display the external page, as well as the width if you want. The page will continue to fill the full width even if you change the overall site width. While this template is designed for using iframes, it really can be used however you like - kind of like the Blank Content Area template, but allowing comments.


  5. Page with Posts - When used with no options set, this page will display all your posts exactly the same way as the default blog post page. When used in the default mode, the main use for this feature would be to hide the Home menu item, and put your posts on a page with your own title. (You can hide the title from the page using the Per Page options.) But what is really great is that you can create a filter which controls just which posts will be displayed - specific categories, for example.

    Because these are in fact true static pages with automatic inclusion of filtered posts, you can enter whatever content you want in the content edit box, and that content will appear above the posts that are displayed.

    The "Page with Posts" template options won't be displayed in the per page box until after you've selected the "Page with Posts" template in the Page Attributes box, and saved the draft or published the page.

    Then you will get the options needed to filter the posts to display, as well as options to control how the posts are displayed (full, excerpts, title only). You can also display the posts in 1, 2, or 3 columns. In the previous version of Aspen, each of these options was implemented as a separate page template instead of a simple per page option.

    While the Page with Posts template allows you to easily display posts on a page, you can also add posts to any static page using the [aspen_show_posts] shortcode for even more fine-tuned control.


  6. Sitemap - This page template will display a simple sitemap, consisting of a list of all ages, monthly post archives, all categories, and the tag cloud. You can add content to the page that will appear above the sitemap, but there are no other options to control the organization or content of the sitemap (other than the meta info line options for posts in general).

Other options for creating custom pages

Any page can be made into a one full column page simply by setting the "No sidebars, one column content" sidebar layout in the per page option box.

Settings for "Page with Posts" Template

One of the most powerful features of the Page with Posts template is that it allows you to create filters on a per page basis that lets you display specific posts on a page. You can have as many different pages using the Page with Posts template as you need, all showing a different set of posts.

The standard items you can use in your filter include: Category, Tags, Single Page, Order by, Sort Order, Author, Custom Post Type, and number of posts to display. The Order by, Sort Order, and Posts per Page are explained on the Aspen Options for This Page form. The Category, Tags, and Single Page options are based on slugs. As a rule, if you include values in more than one box, they will be combined, and the posts displayed will meet all the criteria you specified.

For example, say you have defined the categories 'Cat A', 'Cat B', and 'News' (among others, perhaps). These categories will have the slugs 'cat-a', 'cat-b', and 'news'. You can see the slug names if you open the Posts->Categories admin page. The same is true for tags. So, to display a list of posts from a specific set of categories and/or tags, you simply enter a list of one or more slugs you want included, separated by commas.

The Categories list has an extra feature. If you add a '-' (minus sign) to the front of a category slug (e.g., -uncategorized), then all the posts from that category will be excluded. So if you placed -uncategorized in the Category box, then only posts that have a category other than Uncategorized will be displayed.

Note: Because of what might be described as a quirk in how WordPress handles category filtering, if you specify specific categories to show (as opposed to not show), then sticky posts won't be displayed at the front with special formatting. They are displayed in their normal sort order. You can also see this behavior if you look at a category archive page, for example. Unfortunately, there seems to be no work around for this strangeness. So if you have a page that you want to display specific categories that include sticky posts, then you have to exclude all other categories rather than include the categories you do want to show.

The "Page with Posts" per page options also let you set how the posts are displayed: Full post, Excerpt, Title Only, and number of columns. You can also selectively hide the meta info lines.

Post/Page Editor Styling

Aspen adds style settings for the tinyMCE editor used whenever you edit a page or post. The colors and font information for your text, headings, images, and tables will now closely match the values you've set for your theme.

For the most part, the layout presented in the Page/Post editor will very closely match the final page. However, the match is not always perfect. Changing the font or theme width can cause a mismatch. In addition, the width is determined by the default layout for a default static page, and if your blog post pages doesn't use the standard page layout, the editor width will not match.

There are a couple of other caveats. Aspen allows you to style your page content and post content a little differently. The Page/Post editor does not distinguish between the two types of content, so you will see Page styling for both pages and posts.

Technical Note: The occasional mismatch of the Editor view and the final display of your content is caused by differences in how the tinyMCE editor determines the style it uses to display content. It is also related to the fact that tinyMCE doesn't have full access to the theme settings (it is a different dashboard menu selection). Ultimately, the final look of your pages depends on the browser used to view the pages.

Entering Raw HTML and Scripts

A not commonly known feature of the WordPress page and post editor is the significant amount of automatic formatting and filtering it does. It will automatically add paragraph tags, it will "texturize" content by changing quote marks to "curly" quotes and others, it adds smiley graphics, and does some other automatic character conversions. This automatic formatting happens even if you use the HTML view. The HTML view will allow you to add some HTML markup, but the auto-paragraph filtering still happens.

Sometimes you just need to enter HTML markup, and even JavaScript code, and have the page look exactly how you want it to. You might have HTML from another site or page you've created somewhere else. Aspen has a per page and per post option called "Allow Raw HTML and scripts." If you check this option, your page content will not be filtered. Shortcodes are still processed. This option also disables the Visual editor. If you were to switch between the HTML and Visual editor views, your carefully crafted HTML code will be altered.

If you check the "Disable Visual Editor" option, the Visual editor will be disabled, and your simple HTML will be left alone, but the auto-paragraph and other filtering will still happen.

Post Formats

WordPress supports what are called "Post Formats" for you posts. Aspen supports all additional Post Formats over the Standard one. You may find the Post Formats useful, especially Aspen's "compact" format useful for photo blogs. Posts with a Format specified will display a "pre-title" showing the Format on the visitor view of the page. This helps these posts stand out. The descriptions for each Post Format describe how the post will be displayed from the blog pages. Archive pages display the post as an excerpt, but with the Format type's titles.

Aside

The Aside Format is intended to display a short note from the author. This Format does not display the post title or category info, and puts the date and author at the bottom.

Gallery Post Format

If you check this for a post, Aspen will display this as a Gallery. When displayed on the blog page, a Gallery Format Post will display as a special excerpt that shows one thumbnail from all the images included from the Media Library. If the user clicks on the image, they will be taken to the full post with all the images.

Link

The Link Format is intended to display links. It will be displayed like the Aside, but with Link as the title.

Quote

The Quote Format is intended for quotations. (For the language sticklers, this should be called Quotation, but Quote is the name used.). It works like any other post, but with a "Quote" pre-title.

Status

The Status Format is intended for a short status update from the author. It displays like an Aside, but also add the Author's avatar to the post.

Per Page and Per Post Options

One of the most powerful features Aspen Provides for customizing the content of your site is the set of Aspen Options for This Page and Aspen Options for This Post. When you create or edit a Page or Post from the admin page, you will see one of those two areas below the Editor box. They contain options that will be applied to that specific page or post. These settings often correspond to setting you find on the Standard Aspen Main Options or Advanced Options pages. Any settings made on the per page boxes will override the standard settings.

Aspen Options for This Post

The per post settings allow you to control excerpts, featured image, and author avatar. In addition, if you mark the post as a favorite, the post will be displayed with a yellow star to its left on all but the single post full page.

Per Post Style

If you need to style a post on a per post basis, you can take advantage of the fact that evey post has an ID, and that a class called .post-123 (use the acutal post ID number) wraps each post. You can use that fact to add custom CSS rules to the Custom CSS Rule box.

For example, to put a yellow background with a border and some padding around post 123, plus make the title italic, add the following CSS to the Custom CSS Rules box:

.post-123 {background-color:yellow; border:1px solid blue; padding:5px;} /* style entire post
         with these styles */
.post-123 .entry-title a {color:red; font-style:italic;} /* make the title red and italic */

Here's a list of most of the elements of a post:

Aspen Options for This Page

The per page options box has several groups of options. The first option simply has a link to the Aspen Page Templates documentation.

The Per Page Options section controls display of the page's content title (Hide Page Title), as well as several aspects of the standard Header and Footer areas.

The Menu "Placeholder" option is useful if you want a top-level menu item that doesn't require a 'dummy page'. This can be used if you have a set of sub-pages on the menu that have content, but you don't want to create a dummy page for the top level item. When the item is clicked, nothing will happen.

The "Hide Page on the Primary Menu" option will hide the specific page from the automatically generated Primary menu. If you define a custom Primary menu, then this option isn't really needed. This will not hide the page from the Page widget - you will have to use the exclude feature of that widget to hide the page there. One good use of this option is to remove obsolete pages from your primary menu, yet retain the page's URL so that if other sites have linked to it, there will still be a page there.

The Settings for "Page with Posts Template" is explained above.

Custom Fields Mechanism

All of the per page and per posts options are saved using the standard WordPress Custom Fields mechanism. (If you ever wondered what that was for - well, it is very useful for saving per page values for templates like Aspen to use!) After you set a value in the Aspen Options box and update the page, you'll notice that the Custom Fields box will no longer be empty. (If you've unchecked the Custom Fields box in the Screen Options, then you won't see it displayed.) These values are used by Aspen to implement the options.

While this is a very powerful capability, and allows you incredible per page customization, you should be aware of one factor - these settings will work only with the Aspen theme. These settings are associated with each individual page. They are not part of your theme definition, and won't be saved when you use Aspen's Save/Restore tab. But they are saved with the page, so if you upgrade Aspen, or even switch to an alternate theme, those settings will remain intact. However, even though you can switch themes without losing that information, other themes won't know what to do with it, so your pages will most likely just display with the other theme's default template. You might even have to re-set each page's template after you go back to Aspen. This all isn't bad - but you should know what is going on.

Extra Per Page Options

For even more advanced control on a per page basis, Aspen Pro will recognize other options that you must manually define in the Edit Page Custom Fields box. These options match equivalent global settings found on the Advanced Options tab, but apply on a per page basis.

Define page-head-code, and the value contents will be added to the <HEAD> section. This will be inserted into the <HEAD> Section after the settings in the global <HEAD> Section on the Advanced Options tab. You can include specific CSS rules here, but you must wrap them in a <style>...</style> block.

The other options match one to one with the equivalent Advanced Options HTML Insertion areas. These include: preheader, header, premain, precontent, presidebar_left, presidebar_right, precomments, prefooter, footer, postfooter. 

Aspen Helper Classes

Aspen Provides quite a few helper classes that can be used to help style your content. Here's a short summary.

Custom Menus

One of the features included with WordPress 3 is support for custom menus. By using the Appearance->Menus panel, you can create a menu completely under your control. Aspen allows you to define two custom menus to be used with the main menu bars. If you have defined two custom menus, they will be placed above and below the site header image.

Custom Menus can let you really customize site navigation. One typical use of multiple menus is one for pages, the other organized by category or tags. But you have complete control. However, which menus show can be a bit confusing. There are three specific cases of specifying menus that are most likely to be useful:

  1. No Custom Menus Defined
    This might be the most common case. If you don't use the Menus panel, and don't define any custom menus, then the theme will automatically generate a menu based on your pages (including Home) using the page order defined in the page editor when you create pages. This is the legacy method, and works fine for many situations.

  2. Defining One or Two Custom Menus
    You can also define one or two custom menus. The two menus supported by Aspen are called the Primary and Secondary Menus. If you define a Primary Menu, then it will be the main menu bar normally under the Header Image. If you don't define a Secondary menu, then only one will be displayed. If you define the Secondary Menu, then it will normally be displayed above the Header Image. You can switch the order of the two menus either using the Main Options tab, or by switching the order in the Menus panel.

    Normally, both menu bars will use the same menu bar color scheme. When you've selected the rounded area option, the top menu bar will have the top edge rounded, and the bottom menu bar the lower edge rounded. This looks great with a square Header Image.

    You can use CSS snippets to change the color of the Secondary menu bar - it uses #access2 for its CSS tags.

  3. Define Only Secondary Custom Menu
    If you define only the Secondary Menu and leave the Primary Navigation theme location blank, then Aspen will display two menu bars - the Secondary Menu bar on top as you defined, and the default menu with pages (as discussed in #1 above) on the bottom menu bar.

Built-in Support for Other Plugins

Aspen includes built-in support for a few plugins available from WordPress.org. These plugins have been tested, and work well with Aspen.

  1. Meteor Slides - This plugin uses shortcodes to display a slide show. Aspen includes some extra CSS styling to make Meteor Slide shows display better. You won't need to do anything extra to use this plugin. (Meteor Slides)

  2. WP PageNavi - This popular plugin adds a page numbered navigation menu for your blog posts. It normally requires modification to code, plus some extra CSS styling. Now you can simply install and activate WP PageNavi, and your site will feature page number navigation. (Note - while Aspen continues to provide automatic support for WP PageNavi, its functionality is largely duplicated by the new built-in Aspen Info Bar feature.) The default styling creates menus that work with existing Aspen subthemes, but you can still use WP PageNavi options to fine tune its appearance, and add custom styling for the .wp-pagenavi rules (see wp-pagenavi documentation about its rules) to the Advanced Options <HEAD> section if needed.

    PageNavi menus can be displayed a the top, bottom, or combination on your post pages. You can add the following rules to the <HEAD> Section of advanced options to control where the PageNavi menus are displayed:

    • Not at top on first page, include at top on subsequent pages: default behavior
    • Always show at top: #nav-above {display:block !important;}
    • Never at top: #nav-above {display:none !important;}
    • Always on bottom: default behavior
    • Never on bottom: #nav-below {display:none !important;}

    You can also control the position of the PageNavi menu by adding these rules to the <HEAD> Section:

    • Left: default
    • Center: .wp-pagenavi {text-align:center;}
    • Right: .wp-pagenavi {float:right;}

    (WP-PageNavi)

  3. Woocommerce

    Aspen Provides excellent support for Woocommerce. By default, Woocommerce generated pages will behave just like a standard default static page. This includes using sidebars in the default page layout. Sometimes, this is not what you might want. There a few simple CSS rules you can add to the Aspen Advanced Options -> Custom CSS Rules box to hide the sidebars, and instead display the Woocommerce pages as a single column, full width page. You can refine the basic rules to cover different types of Woo pages.

    Display all Woocommerce pages as single column page:

    .woocommerce-page #sidebar_wrap_left,
    .woocommerce-page #sidebar_wrap_right {
   display:none ;
}
.woocommerce-page #container_wrap {
    width:100%;
}
    Display Woocommerce Shop page as single column:

    Start with above code, but replace .woocommerce-page with .post-type-archive-product

    Display Cart as single column:

    Replace .woocommerce-page with .woocommerce-cart

    Display Checkout related pages as single comlun:

    Replace .woocommerce-page with .woocommerce-checkout

Miscellaneous Notes

Using Aspen in your language

Aspen is distributed with translation files for 20+ world languages which will automatically be used if your site has been set up properly for your language.

If you need to make your site display in a language other than English, the place to start is the Installing WordPress in Your Language page at WordPress.org. You have to install both the WordPress translations for your language, plus the theme translations. These will be automatically included with Aspen.

The Aspen admin panel, on the other hand, is still strictly English - it is has so much help and explanations, that it would be very difficult to translate.

If your language is not already included with Aspen, you can create your own using the aspen.pot file and a tool such as POEDIT.

You can use this procedure to edit an existing file as well if you want to create a different translation. You can even use this technique to create alternate wordings for any visitor side message, even for the English version.

If you create a new translation, please send it to us, and we will include it in future versions of Aspen.

Internet Explorer Compatibility - Including PIE support

Microsoft's Internet Explorer has varying native compatibility with Aspen, sometimes depending on what other plugins you are using with your site. The IE 9 and IE 10 finally seem to be standards compliant, and seem to work perfectly with Aspen. Versions previous to IE 9 have various incompatibilities that have been solved with a special script included with Aspen that works on almost all IE 7 and IE 8 sites.

Aspen will define special IE CSS id's for IE 7 to IE 9: #ie7, #ie8, and #ie9. Versions before IE 7 are not supported by WordPress, and thus not by Aspen. IE 10 no longer supports "Conditional Comments", and thus there is no #ie10. Supposedly this means that IE10 believes it is 100% compatible with other browsers.

There are two main incompatibilities with pre-IE 9 versions. First, IE does not support rounded corners or shadows. Aspen includes a fix called PIE that displays rounded corners and shadows on IE 8 and IE 7. IE 7 also requires some special rules to display all elements properly.

By default, Aspen automatically adds support for rounded corners and shadows for IE 7 and IE 8. If by some chance, a plugin or other feature that doesn't display properly (this seems very rare), there is an option near the bottom of the Admin Options page that lets you turn off this support. In that case, your site will work correctly, but have square corners and no shadows on IE 7 and IE 8.

IE 6 is an entirely different issue. WordPress has officially abandoned support for IE 6. Anyone who has access to your site using IE 6 should really upgrade to a later version of IE. If it is important for your site to handle IE6, there are plugins available that will notify visitors that they are using an incompatible browser, and provide upgrade instructions.

Using PIE

PIE (Progressive Internet Explorer - CSS3 for IE) is a script that allows IE7 and IE8 to support features such as 'box-shadow' for shadows, and 'border-radius' for rounded borders. (See other tutorials for using shadows and rounded corners for other browsers - it usually involves adding specific elements to you CSS definitions.)

Using PIE requires a special directive for any CSS definitions that specify shadows or rounded corners. While Aspen automatically includes the definitions for some CSS id's and classes, you will likely need to add

#ie7 .your-class, #ie8 .your-class {
    behavior: url(/wp-content/themes/aspen/js/PIE/PIE.php) !important; position:relative;
}

to make PIE work for that class. For more information, see the CSS3 PIE website. (If you don't have WordPress installed in the root of your domain, you will have to adjust the above paths accordingly - e.g., /blog/wp-content/themes/....).

Technical Notes

Converting from Weaver II

The Aspen theme was derived from the Weaver II theme, and thus shares many of its characteristics. If you are using Weaver II and want to switch to Aspen, you can automatically convert many of your Weaver II settings to work with Aspen. Only the Weaver II settings that have equivalent settings in Aspen will be converted. Because Weaver II has some default values and Aspen does not, Weaver II themes that rely on the defaults may display with some surprises on Aspen. But there will be Aspen settings to fix the display issues.

To convert, you must have both Aspen installed, and Weaver II version 1.3.5 or later activated. When Weaver II detects that Aspen is installed, the Weaver II Save/Restore tab will include extra options for saving your settings by downloading - they allow you to convert your Weaver II to the equilvalent Aspen settings file.

After you've saved the Weaver II settings to the 'aspen-converted-settings.ath' file, you can then activate Aspen, and upload that file from the Aspen Save/Restore tab. Most of the settings will be there, but you may have to do some tweaking as there are differences in theme behavior.

If you used any Weaver II shortcodes, you can go to WordPress.org and search the plugins for "Aspen Shortcodes & Widgets". That plugin will allow your Weaver II (Free version) shortcodes to work with Aspen.

 

EU/UK Cookie Compliance

Note for EU/UK users. Aspen uses cookies on one occasion: to control the active admin tabs in the Aspen Admin interface. This cookie does not contain any information of a personal nature. The cookiewould likely qualify as SESSION cookies.

There are several WordPress plugins available so your site can comply with EU/UK cookie laws. Aspen has no official recommendation or claim that its use of cookies does or does not require EU/UK cookie consent forms.

Aspen HTML <div> Hierarchy

The Aspen theme generates content that is wrapped in HTML <div>'s with a set of conventional names. A typical site page will have the following hierarchy. Knowing this can help you make additional custom modifications. (Another useful thing to do is to use the "View Document Source" option of your web browser to see the actual HTML generated by WordPress for your site content.) This example is a standard page with a Split Sidebar layout. The names of the sidebar areas will differ for different layouts. Moving the menu by options will change where it is located.

body
	#wrapper					- wraps whole site
		#inject_preheader			- preheader HTML insert
        #nav-top-menu               - wraps top menu (#access2.menu_bar)
		#branding				- the header area
			#site-logo			    - use CSS to add url of image
			#site-logo-link			- same, but with link
			#inject_header			- site header insert
            .title-description      - wraps #site-title and #site-description
            .sidebar-header         - horizontal header widget area
			#header_image			- standard header image
		#nav-bottom-menu        - wraps bottom (primary) menu (#access.menu_bar)
		#infobar 				- info bar, if after menu bar
		#inject_premain
  	    #main				- main area wraps content + sidebars
			#sidebar_wrap_left	- wraps left sidebar area, if defined
				#inject_presidebar_left
				#left-widget-area		- left widget area
			#container_wrap			- wraps container
				#infobar 		- info bar, if above content area
				#inject_precontainer
	    		#container			- wraps top,bottom widgets, content
					#sidewide-top-widget-area
					#top-widget-area
					#content	- main content
						#inject_precomments
						#comments	- user comments
						#inject_postcomments
					#bottom-widget-area
					#sitewide-bottom-widget-area
			#sidebar_wrap_right		- wraps right sidebar area
				#inject_presidebar_right
				#primary-widget-area
				#right-widget-area
		#inject_prefooter
		#colophon				- the footer area
			#sidebar_wrap_footer		- wraps footer widget areas
				#first
				#second
				#third
				#fourth
			#inject_footer			- footer code
			#site-ig-wrap			- wraps footer bottom line
				#site-info		- copyright
				#site-generator		- powered by
	#inject_postfooter				- last thing, outside #wrapper

 

More Help - Suggestions

AspenTheme.com has an extensive help Forum. You can leave questions or comments there. No promises on how quickly you will get a response, however.

Thanks for checking out Aspen. Hope you create a beautiful WordPress theme with it!

 

Release Notes

Aspen Version 1.0

Aspen is a new theme based on the popular Weaver II theme. It represents a significantly steamlined version of the user interface. The theme options provided by Aspen represent those options that have been selected from extensive experience as those being the most important to the majority of users.

Aspen and this document are © 2012, Bruce E. Wampler. Web Site - WeaverTheme.com/aspen-theme