2010 Weaver Theme Documentation -- Version 1.5

See Version 1.5 Release Notes for new features and changes.

Table of Contents

The 2010 Weaver (Weaver) WordPress theme is based on the new WordPress 3 standard Twenty Ten theme. 2010 Weaver allows you to change many of the colors and other aspects of the standard Twenty Ten theme. In addition, it allows you to easily add whatever special code you might need (such as advertising tracking code), all without having to get into the depths of WordPress theme code.

Weaver allows you to build a custom site look by tweaking many of the style rules for your WordPress blog. You can get a very 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. This Help document has lots more information to help you design your own site look by changing many of the the standard Twenty Ten theme styles. Don't know what a style is - don't worry, you just have to pick colors and click on check marks.

How to get started:

  1. Select one of the predefined sub-themes. There are over a dozen to choose from.
  2. Go to the Main Options panel. You'll see a list of options 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 the help page. There are lots of tips there, as well as fairly detailed explanations of exactly which CSS rules Weaver supports, and hints on how to go beyond the basics and really customize your site.

Twenty Ten Weaver?

Previously, there were two different versions of Weaver: Twenty Ten Weaver and 2010 Weaver. There was a subtle technical difference between the two versions, but as of Version 1.5, only the 2010 Weaver version is available.

Using With WordPress Multisite

2010 Weaver will work with no additional settings on WordPress Multisite installations. Because the Advanced Options tab allows people to add JavaScript, the Advanced Options and Save/Restore tabs may be disabled by changing a value in the Weaver settings php file. Administrators of Multisite installations can edit the /wp-content/themes/2010-weaver/ttw-settings.php file and change the 'TTW_MULTISITE_ALLOPTIONS' definition to false, which will then disable the Advanced Options and Save/Restore tabs. This setting might make a Multisite installation slightly more secure.

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. First is the preview window at the bottom of the theme settings tabs. 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.

After you save your settings, the preview window at the bottom of the 2010 Weaver admin page will be updated to show the effects of your settings.

Saving Your Own Theme

Once you have a design you like, you can click the "Save in My Saved Theme" button near the bottom of the Main Options tab to save your theme. You restore that saved theme by selecting it from the Sub-Theme list. Your saved theme will then overwrite all options, including the Advanced Options. This is the one way to preserve all your work, so when you get something you like, save it. You can then fiddle and fine tune more without losing your previous work.

You can also use the Save/Restore tab to save your theme definition to a file on your computer, or a file on your site. You can later restore the definitions, or even use them on another Weaver site. If you are experimenting, it is a good idea to save copies of your work so you can get back to where you were.

Sidebar and Content Widths

This table gives the maximum width of the usable areas of sidebars and other areas depending on which sidebar scheme you've selected - using the standard width of 940px. Usable area is the maximum width of an image you could put in the area and still maintain the appropriate margins in area. These numbers will change if you use a custom theme width.

  Content Content
(single col)		 Primary
Widget Area		 Secondary
Widget Area		 Footer
Widget Areas		 Top/Bottom
Widget Areas
Default sidebar
1 right		 670px 800px 210px 210px 220px 570px
Right sidebar
wider		 590px 800px 290px 290px 220px 510px
One Left 630px 800px 210px 210px 220px 590px

Two sidebars
left and right

 460px 800px 200px 200px 220px 390px

Two sidebars
right side

 490px 800px 210px 160px 220px 410px
Two sidebars
left side		 500px 800px 205px 160px 220px 410px
No sidebars 860px 800px n/a n/a 220px 790px

 

Weaver Predefined Sub-Themes

Weaver comes with over a dozen predefined themes. You can use them as-is, or as a starting point for your own designs. When you select a new sub-theme, all the options values from the 2010 Weaver Main Options are cleared and set to the new values of the sub-theme. Most of the Advanced Options are not changed - except the Special Overrides are set to the values required by the new sub-theme.

Weaver Main Options

The Main Options tab provides you with over 70 "checkbox" options for customizing your theme. The options have been grouped according to the part of the theme they affect. Each option includes an explanation. 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.

You can also add extra CSS styling to many of the elements included in the Main Options tab. Please see the CSS Help tab to get more details on using this feature.

Weaver Advanced Options

The Advanced Options page allows you to save pieces of HTML code required by third-party plugins and widgets. You can also use them to save Google Maps/Analytics/AdSense JavaScript snippets. You will need to understand a bit of HTML coding to used these fields effectively.

The values you put here are saved in the WordPress database, and will survive theme upgrades and other changes. When you select a new sub-theme, all the Advanced Options are left untouched (except the Special Theme Overrides, which are set by the new sub-theme). However, if you pick "My Saved Theme", then all Advanced options are replaced. The idea is that you can use the Advanced Options to set up things you want, and try different sub-theme looks without losing your work. But if you restore "My Saved Theme", then you should get back what you really saved.

PLEASE NOTE: NO 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 stuff here, please double check that what you entered uses valid HTML commands. Also note that backslashes will be stripped.

This input area is one of the most important options in Weaver for customizing your site. Code entered into this box is included right before the tag in your site. The most important use for this area is to enter custom CSS rules to control the look of your site. Note: The Snippets tab (above) contains many examples of CSS rules to customize your site. This field can also for entering JavaScript or links to JavaScript files or anything else that belongs in the <HEAD> . For example, Google Analytics code belongs here.


HTML Code Insertion Areas

The options in this section allow you to insert HTML code into various regions of you page. 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 <HEAD> Section above. Note: Providing margin style values, including negative values, can be used to control the spacing before and after these code blocks.

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 div, 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 ttw-center which you can use to div-wrap your insert code to center it:
<div class="ttw-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 Meteor Slides or WP-Cycle.

For example, assume you've installed the Meteor Slides 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 setting the header image size to zero in the Main Options tab. Then, add this code to the Site Header Insert Code box:

<div class="ttw-center">[meteor_slideshow]</div>

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

This code will be inserted into the site footer area, right before the 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-Header, Post-Header, Pre-Footer, Post-Footer, Pre-Sidebar

These areas can be used to insert HTML and shortcodes in the given areas of a site page.


This block functions exactly the same as Site Header Insert Code when used with pages created with the Custom Header (see Adv Opts admin) page template. The template creates pages that use only this code to display a header (they don't use the standard site header image), plus the options below.


This block functions exactly the same as Site Header Insert Code when used with pages created with the Custom Header (see Adv Opts admin) page template. The template creates pages that use only this code to display a header (they don't use the standard site header image), plus the options listed below the box.


Every site should have at least "description" and "keywords" meta tags for basic SEO (Search Engine Optimization) support. Please edit these tags to provide more information about your site, which is inserted into the section of your site. You might want to check out other WordPress SEO plugins if you need more advanced SEO. Note that this information is not part of your theme settings, and will not be included when you save or restore your theme.


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 © to display ©. You can use other HTML as well.


This code is inserted right before the closing </body> tag. This is the best place for your Google analytics code other final code that is not usually displayed.


The entries in this field are usually generated by some of the example themes provided with 2010 Weaver. You may have to edit these rules to adjust the look, but it is generally better to use the regular <HEAD> overrides. (Note: this code is included before the standard <HEAD> section code above.)

Page Templates

Weaver provides you with several additional page templates for creating static pages:

  1. Alternative Sidebar Left - page with sidebar on left. There is a widget area called the Alternative Widget Area. The two Alternative Sidebar templates use the Alternative Widget Area exclusively - they don't use any other widget areas (except for the footer widgets).

  2. Alternative Sidebar Right- same, on right.

  3. Blank Content Area - Provides a totally blank content area inside the #wrapper div. (This means the page will match the overall look of your site.) It Al lets you provide totally custom HTML on a page. It doesn't show the page title you set when creating the page, nor does it display comments. You can optionally hide the header and footer areas using the check boxes on the Advanced Options tab. This template is good for entering raw HTML using the HTML editor tab. This page does not use any widget areas except when the footer is displayed, and will take the full width of the #wrapper area.

  4. Custom Header - Provides a standard page, but uses a new custom header block found on the Advanced Options page. Doesn't show standard header image, and you can optionally hide menus and site title/description.

  5. 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.

  6. One column, iframe full 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 apprearance 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. To embed and external site, simply add 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.

  7. One column, no sidebar - This template gives you a single column layout with no sidebar. By default, the single column only uses about 90% of the full width and leaves some padding on the side. This page template is based on the similar page template found in Twenty Ten.

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? With Weaver's new options, it is good for a lot. The old, default Twenty Ten behavior was to display the Featured Image as a replacement header image for pages and post where it was set. That still works (as long a the Featured Image is as wide as the standard header image). An option to stop that behavior is included in the header section.

In addition, you can now have the Featured Image be automatically displayed whenever you display a post - in any combination of excerpted posts and full length posts. Here's how:

  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 Weaver 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.

Custom Menus

One of the new 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. While the standard Twenty Ten only supports one custom menu, Weaver supports two. 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 Weaver 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 look 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 Weaver 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.

Miscellaneous Notes

Using Weaver in your language

First of all, WordPress and Twenty Ten have translations available for many languages. 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. But since Twenty Ten is the standard theme, its translations should be automatically included when you install WordPress for your language. Because 2010 Weaver is based on the default Twenty Ten theme, it uses all the same text phrases found on the visitor side of your site that Twenty Ten does. (The Weaver 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.) But the important part is that you can easily use the language translation files for Twenty Ten with 2010 Weaver so that people who visit your site will see your native language. Here's what you need to do. The goal is to copy some files from the Twenty Ten theme directory to the 2010 Weaver directory. You may need to use your site's host control panel interface (e.g., cPanel), or use your ftp access. Here's the steps.
  1. Find Twenty Ten's language directory. It will usually be at "/your-site-root-directory/wp-content/themes/twentyten/languages". That directory contains the language files. Once your site has been installed for your language, that directory should contain 2 or 3 files (perhaps more). Two of those files will match your language setting. For example, if you have installed the Spanish version of WordPress, you'll find <es_ES.po and es_ES.mo there. (There is some chance you'll have only .mo file(s).)
  2. Copy the language files (e.g., es_ES.po and es_ES.mo) from the Twenty Ten directory to 2010 Weaver's directory: (/your-site-root-directory/wp-content-themes/2010-weaver/languages). Use your cPanel or ftp to do this.
  3. Your site should now display your native language when visitors see it.

Technical Notes

The Weaver theme was designed as a child theme of the Twenty Ten theme, which is the standard for WordPress 3. Many of the features used by Weaver are completely influenced by Twenty Ten. As of Version 1.5, Weaver has started to move away from the strict child-theme approach, and will become a true standalone theme when Version 2.0 is released (that won't likely happen until well into 2011). However, it the strong influence of Twenty Ten will always remain, as will the dependence on Twenty Ten's visitor interface side language translations.

Weaver HTML <div> Hierarchy

The Weaver 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.)

#wrapper
	#header
		#masthead

  # main
	    #container
			#content
				#comments

		#primary
		#secondary
	#footer
		#colophon

 

More Help - Suggestions

The 2010 Weaver page at WPWeaver.info allows comments. You can leave questions or comments there. No promises on how quickly you will get a response, however. I have a lot of other projects going, and travel some, so I might not get a chance to respond immediately, but I will try. If this theme becomes popular, I might create a support forum for it. But for now - just comments.

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

 

Version 1.3 Release Notes

Weaver Version 1.3 has some significant enhancements and changes over previous versions. It is possible you will have to make a couple of minor changes to your theme to have it look exactly the way it did before.

More Header Options Improved Widget Area Options Other new and improved features

Changes to Weaver Functionality

1. Area Background Colors

The most significant change to Weaver involves how the background colors of the major areas are handled. These background colors are set in the Theme Background Colors section of the Main Options tab of the admin page. These are the areas, and the corresponding CSS <div> names:

Wrapper Page BG:  Background for top level #wrapper div - default BG if you don't change others. {#wrapper}
Main Area BG:  Background for main page #main div - wraps container, content and sidebars (uses wrapper bg if not set). {#main}
Container Area BG:  Background for #container div - wraps content and sidebars (uses wrapper bg if not set). {#container}
Content BG:  Background for post and page content area (uses main bg if not set). {#content}
XX Widget Area BG:  Background for the four widget areas. {#primary, etc.}
Footer BG:  Background for the footer area. {#footer}
Outside BG:  Background color that wraps entire page. Using Appearance->Background will override this value, or allow a background image instead.{body}

Previous versions of Weaver had gotten this wrong in two ways. First, it used White as the background colors for the <div>'s nested inside the #wrapper <div>. This was partly from a limitation in the color picker that didn't allow transparent as a value. It turns out that transparent is the "correct" value for these <div>'s. The chart that shows the <div> hierarchy can help understand how these <div>'s interact.

If you've set colors for most of your own BG areas, then it is likely you will see no difference in how your theme looks. However, 1.3 has added the "Container" setting. The previous versions incorrectly set the #container <div> using the "Content BG" setting. Each of these settings now apply to the correct <div>. If you have an issue with your content area not having the correct background color or incorrect rounded corners, try setting the new Container Area BG to the old value, and set the current Content BG to transparent and things should be fine.

2. Theme Save File Extension

The file extension used for Weaver saved theme files. Previously, the extension was .txt. That has been changed to .wvr. The actual format of the file has not changed. If you have old themes saved, simply rename them and change the extension from .txt to .wvr.

3. SEO Tags

A new advanced option called "SEO Tags" has been added. Search Engine Optimization is somewhat of a black art, and this provides minimal support. The difference is that previously, the meta tags now included here were in the <HEAD> Section, which meant your tags were saved in any themes you saved, which isn't exactly correct. Now, these SEO meta tags are not saved with theme settings, but are just site specific. If you had filled in the meta tags on your old versions, you should remove them from the <HEAD> Section, and copy them here.

4. The Last Thing

Just as the SEO tags don't belong with the theme, the code you include in this section are site specific. They will not longer be saved with a theme. If you have an old saved theme, however, the settings will be copied over automatically.

 

Version 1.4 Release Notes

Weaver 1.4 has a few changes and some new features. This is a summary of the changes:
  1. Two new sub-themes
    Transparent Dark and Transparent Light. These two themes use transparent backgrounds, and can make truly beautiful sites when used with an appropriate background image or solid color.

  2. Icons for Post Meta Info
    A set of icons suitable for using with the Meta Information above and below Blog Posts has been included. You can use the default set (a gray theme that works well with almost any color) with a Main Options check mark, or use custom CSS in the <HEAD> Section. There is also a check mark option to remove the fill-in text (e.g., 'Posted on', 'by', etc.) in the info lines, which allows a very nice icon-only look. There are a number of icons available for your custom use in the /wp-content/themes/2010-weaver/images/icons directory.

  3. Advanced Option to customize copyright
    You can now put a totally customized copyright notice in the footer to replace the automatically generated one. There is also a check mark to hide the "Powered by" credit if you really don't want to give credit to WordPress and WPWeaver.

  4. Advanced Option to Clear the Weaver database
    Sometimes it is just best to start over. This new option allows you to clear the existing Weaver settings back to the original default values.

  5. Internet Explorer fixes
    Code was added to support rounded corners in the upcoming IE 9. A long unreported problem with a bug in IE that made it display the color boxes  was fixed to work around the problem.

Version 1.5 Release Notes

Weaver Version 1.5 represents a major revision of Weaver and has many new features, many in response to requests from some of our more advanced users. Virtually every element of your WordPress site can now be easily customized from the Main Options tab. The new features add even more flexibility to how you can customize Weaver.

New feature summary: