The Xtreme One WordPress Theme Framework – A First Look

Xtreme One is a responsive WordPress theme framework, which has been built upon the YAML CSS framework available by Xtreme-Theme.

A theme with a responsive layout will adapt the presentation of the web page to the screen of the device used by the visitor, be it a desktop, a laptop, a tablet or a smartphone. Hence, such a theme responds to the size and orientation of the screen.

In order to use the Xtreme One framework you need a child theme. You can either purchase one of the existing child themes, or start working with the Blank child theme that comes with the Xtreme One framework. For this review wilwebs.com used that child theme.

The Blank child theme supports natively two WordPress 3 menus. You compose the menus as usual at the Appearance >> Menus page. However, the menus are managed from within the Navigation/Search Settings at the Xtreme One page.

The Blank child theme installs with 19 custom widgets:

• Accessible Post Tabber
• Coin Slider
• Column Posts
• Equal Heights Pages
• Equal Heights Posts
• Feature List Posts
• Grid Pages
• Grid Posts
• Grid Text
• jqFancy Media Slider
• jqFancy Slider
• Last Tweets
• Low Barrier
• Media Carrousel
• Media Flex Slider
• Newsletter
• Post Carrousel
• Post Flex Slider
• Social Links

Xtreme One adds a WordPress Widgets drop-down menu to the Post and Page editor screens. With the help of this [WordPress Widgets] button, you can insert all available widgets into a post or a page.

Did you ever need to add the same widget to more than one widget area, like for a different sidebar? Well, Xtreme One theme adds a “Duplicate Widget” function to widgets, just below the Delete | Close links, so that you do not need to repeat the same actions again in order to clone a widget.

When you are finished customizing the settings of the widget, you just click “Duplicate Widget” and you will have the widget twice in the same widget area. Now you can drag the duplicated widget to any desired location. This cloning is not only possible with Xtreme One widgets, but also with WordPress’ default and third party widgets.

By default the Blank child theme of Xtreme One incorporates six widgetized areas:

• Image Header Area
• Sidebar One
• Sidebar Two
• Sidebar Three Top
• Sidebar Three Bottom Left
• Sidebar Three Bottom Right

The Footer is not activated by default. When activated, you will see one to five Footer areas added to the widgetized areas.

All Xtreme One child themes add three pages to WordPress’ Appearance module, which make together the Xtreme One Options Panel. This panel includes:

1. Xtreme One
2. Xtreme Layouts
3. Xtreme Backup

The Xtreme One Configuration Center

The Xtreme One page, titled the Xtreme Configuration Center, includes the following toggle or meta boxes:

1. General Settings
2. Default Settings
3. Header Settings
4. Footer Settings
5. Teaser Settings
6. Siteinfo Settings
7. Navigation/Search Settings
8. Archive Pagination Settings
9. Comment and Comment Form Settings
10. Print Stylesheet Settings
11. General WordPress Settings
12. Tune Your Site Performance

All boxes serve a [Generate Theme] button. Pressing this button saves the theme settings. At the bottom of the page you will find the same [Generate Theme] buttons and the [Load Default Options] – a reset button – and an [Uninstall Theme] button. The latter will delete the settings of the theme in the database – but not the theme files it self – and activate the default WordPress theme. Let’s have a closer look at the components of the Xtreme One page.

1.  General Settings

The default output of Xtreme One is XHTML 1.1, but you can also opt for HTML5. Xtreme One lets you choose between a fixed layout and a flexible layout. The layout can be aligned left, right or centered on the screen. The design can be set as a (boxed) blog layout or a full page layout.

The WIA-ARIA – short for Accessible Rich Internet Applications as part of the Web Accessibility Initiative – is an option for more seasoned web developers. Let’s skip that one here.

Checking the Include the YAMLs nav_vlist.css box lets you activate a style sheet for custom vertical sidebars for pages and categories. If you want to start simple; use the WordPress Custom Menu Widget.

2. Default Layout Settings

The Default Layout Settings that you configure here will basically be applied to all page templates created at the Xtreme Layouts page.

Xtreme One offers six layouts:

• 1 column
• 2 columns, with one right sidebar
• 2 columns, with one left sidebar
• 3 columns, with two right sidebars
• 3 columns, with two left sidebars
• 3 columns, one left and one right sidebar

Xtreme Layouts gives you the ability to create different layouts for all eleven page templates. We will get back to this when we discuss the possibilities of the Xtreme Layouts.

At the Default Layout Settings, you can also check which of the following page elements should be displayed:

• Header
• Teaser
• Footer
• Site info

Checking the Teaser and Footer box, will activate additional widget areas on WordPress’ Widgets page.

The Site Info includes the copyright notice, and links to Skip to Top, Log Out/In, WordPress, and/or your own links. All these items can be altered for any of the page templates.

3. Header Settings

By default, the header is one column wide covering the whole width of the page. However, you can enable a second header area which will appear as a second column in the header section. In addition, you can select from four different blog titles; text or image, both with or without a hyperlink.

4. Footer Settings

When you have activated the Footer at the Default Settings, you are able to define here how many columns you want to have and how width these columns will be. You can choose from 28 variations:

• one footer column – 1 option (100%)
• two footer columns – 11 options
• three footer columns – 10 options
• four footer columns – 5 options
• five footer columns – 1 option (5x 20%)

5. Teaser Settings

The Teaser is the area between the header and the content area. Just as with the Footer, you can opt for a Teaser area from one to five columns – with the same 28 possible variations.

When activated, Xtreme One adds one to five Teaser Widget Areas to the Widgets page.

6. Site Info Settings

The Site Info includes the copyright notice, and links to Skip to Top, Log Out/In, WordPress, and/or your links. All these items can be altered for other page templates.

When you prefer, you can enable a second area for the Site Info. This area will show up as an additional widget area on the Widgets page.

7. Navigation/Search Settings

For the Primary and Secondary Navigation you can select from the Pages, Categories, or a menu you have created yourself at the Appearance >> Menus page.

The Position drop-down menu offers you fourteen options for the Primary as well as the Secondary Navigation – including not used. These options range from the top of the page to the footer below the Site Info.

In addition the Blank child theme comes with four predefined schemes for the navigation: descriptive, shiny buttons, sliding door, super fish. Each style has its own stylesheet.

If you want to add a Search box to your Primary or Secondary Navigation, you can set your preferences for the Search form here.

8. Archive Pagination Settings

This toggle box let you set your preferred Pagination Type; Older/Newer or Page Numbers. When you decide in favor of the Page Number List, you can also set the number of pages at the start and the end of the page range.

9. Comment and Comment Form Settings

This section lets you set your preferences for Comments as well as the Comment Form. You can for example separate the comments from the trackbacks by adding a separate tab for the pings.

For the Comment Form Layout you can choose from three options: linear, columnar and full. Each layout has its own position for the field name in regard to the field text area and a specific width for that area.

10. Print Stylesheet Settings

Xtreme One comes with a printer friendly stylesheet which strips for example the navigation menus and sidebars. Here you have the opportunity to add some additional checkboxes to further customize the printer optimized layouts.

11. General WordPress Settings

This meta box lets you remove some of WordPress’ defaults by checking the appropriate box. The first three for example, might be relevant when you use a third party SEO-plugin when that plugin adds its own meta.

Or when you use Windows Live Writer to compose your blog posts, you can have Xtreme One automatically remove the link to the Windows Live Writer interface.

12. Tune Your Site Performance

The last toggle section lets you compress HTML, CSS, and JavaScript files in order to increase the performance of your site. You can choose from:

• No Compression (Default)
• Implode and Minify only
• Deflate Compression
• Gzip Compression

When you do not experience any performance problems, you can simply accept the default values.

The Xtreme Layout Engine

Xtreme Layouts is the layout manager of Xtreme One. You have already encountered the settings for the Default Layout Settings displayed within the second meta box on the Xtreme One page.

In case of a blog, the default layout might be exactly what you are looking for. For a business website or an online portfolio, you probably prefer a more appealing home page. In that case, you click the [Add New Layout] button on the Xtreme Layouts page. The New Layout Settings page appears.

First thing to do on the New Layout Settings page is to give a name to the layout you are going to create. ‘Homepage’ for example.

Next you choose one of the six available layouts. For the Homepage, we pick the one column layout because we do not want to display a sidebar there. Than we accept the default Content Textalignment – Left.

We want a Header, a Teaser, the Site Info, but no Footer on the Homepage, so we check the first three and leave the Footer unchecked.

Last step is to check the page templates you want this new layout to apply to; just the Widgetized Homepage – check!

That is all. Now we have two page layouts. A one column layout for the homepage, and two columns with a right sidebar for all other page templates.

The Xtreme Backup Center

The third and last page of the Xtreme One panel is the Xtreme Backup page. Here you can export the current theme settings, including the widget settings as an XML-file for backup purposes or in order to transfer these settings to another Xtreme One installation.

When importing the XML-file at another installation or while restoring the theme’s settings, you have an option to include the widget settings.

Theme Styling with CSS and YAML

By simply pointing and clicking, you are able to create your own customized page layouts to build your custom website. The result of the Blank child theme is a bit minimalistic, but does not look bad at all.

If you want to dress the theme up a bit, you can take several routes. One way is to start from scratch by continuing working with the Blank child theme that includes all required files but no additional styling. You can add it yourself.

Another option is to take an existing child theme that matches your desired design as closely as possible. By taking the stylesheet of that theme as a springboard, you are already on your way and do not need to start from scratch. You just have to tweak the CSS until it meets your demands.

WordPress requires a style.css file in every theme folder, since WordPress needs to know where to look for necessary theme files. With Xtreme One the style.css file of the framework as well as its child themes is empty – except for the few details required by WordPress.

The stylesheet of a child theme can be found in the css/screen folder of the child theme regarding and needs to be named theme.css. The CSS files of the framework are located in the xtreme-one/css directory. Every time you hit the [Generate Theme] button, Xtreme One writes style sheets to the xtreme-one/output folder.

All in all, Xtreme One applies up to nine cascading style sheets. But relax; if you want to make changes to the CSS of your child theme, you only need to modify the theme.css concerned. You can even make a kind of a child theme of your child theme in case you want to make more than one color variation of your theme styling.

Although Xtreme One is based upon the YAML CSS framework, you do not need to touch any YAML files. Even more, you are strongly advised not to make any changes to the YAML files. The Xtreme One team follows new releases of the YAML network closely. Any changes by YAML will be incorporated into Xtreme One shortly after.

Conclusion on the WordPress Theme Framework

Xtreme One gives you a load of options to build a customized website, no matter whether you are building a blog, a business website or an online portfolio.

You might say that structuring a child theme is completely done by a point-and-click process. There is no need to dive into PHP templates. In order to style the theme, knowledge of CSS is definitely required.

To unleash the full power of Xtreme One, you will need to know at least some basic PHP, so that you are able to get the most from all available hooks.

With hooks you can extend the functionality of your Xtreme One child theme even further. Xtreme One comes with 59 of such hooks. It is beyond the scope of this review to list these hooks. For more information, please refer to the Xtreme One website.

The price of the Xtreme One WordPress Framework is $79.95 and $19.95 for a child theme. In both cases this is a one-time only fee. There are no recurring payments.

Checkout the Xtreme One website for live demos and videos or the Xtreme One Showcase to see examples of websites build with Xtreme One.