Enqueue comment-reply.js – The Right Way

Since Google takes the loading time of a page as a ranking factor, it is always important for a theme designer to incorporate the required resources correctly. In Xtreme One WordPress Framework our JavaScripts are loaded only when they are really needed. Do you have a slider widget on the home page, then the JavaScript for the slider included only on the homepage.

Also including comment-reply.js can be optimized. In the Theme TwentyEleven we can find it in header.php (Line 58):

if ( is_singular() && get_option( 'thread_comments' ) )
	wp_enqueue_script( 'comment-reply' );

That means, if "Enable threaded (nested) comments" in the Discussion Settings is activated and if it's on a single page, then load the script comments-reply.js.
But we also don't need the script on pages where there is no comment form and not on the homepage if it's a page. Neither do we need the script if comments are closed or not allowed.
Or easier to say: We only need it, if "Enable threaded comments" is activated and a comment form is displayed.

Using the example of TwentyEleven I show now how to do it better. First, we delete from the header.php the lines

if ( is_singular() && get_option( 'thread_comments' ) )
	wp_enqueue_script( 'comment-reply' );

In the functions.php we implement the enqueue function of the script

function xtreme_enqueue_comments_reply() {
	if( get_option( 'thread_comments' ) )  {
		wp_enqueue_script( 'comment-reply' );
	}
}

Now we get to the important part. We add to the function twentyeleven_setup() this line:

add_action( 'comment_form_before', 'xtreme_enqueue_comments_reply' );

The Hook comment_form_before is only there when the comment form is loaded and we are adding the enqueue function for the script. A positive side effect, the script is now loaded at the end of the document and does not hinder the loading of the site.
At best, you create a Child Theme, so the changes are protected against overwriting when you update WordPress the next time. Maybe the WordPress Dev team will use this approach in a future version of their default Theme TwentyEleven.

Extend the TwentyEleven Navigation with your Social Icons

TwentyEleven Screenshot

In this little tutorial we show how to add in the navigation of the TwentyEleven Theme our RSS Feed, a link with icons to our Twitter page and to our Facebook profile. Without writing a single line of PHP code. You are able to accomplish this with the WordPress Menu.

First we go in the backend to Design-> Menu and activate the CSS Classes. Therefore we click on "Screen Options" on the very top right corner. And unter "Show advanced menu properties" you check the box for "CSS Classes" and close the Screen Options.

WordPress menu screen options

After that we use the "Custom Links" to create the menu entries. We add the addresses to our RSS Feed, Facebook and Twitter and add them to the menu. There we assign the 3 menu entries to the CSS Classes. RSS Feed has the class rss, Twitter the class twitter and Facebook facebook. Don't forget to save.

WordPress Menu

I prepared a sprite, which you can download with a right mouse click->Save Image As… . You have to save this sprite into the folder twentyeleven/images/.

Social Sprite

Then we open the file TwentyEleven style.css with a text editor and add at the end of the Menu block #access our additional CSS. We do not have much to add. We let our 3 list items float to the right, push the text out of view and position the graphic. Only for the hover, focus and active states, we must define a little tricky CSS rule in order to circumvent the background gradients of TwentyEleven.

#access .twitter, #access .rss, #access .facebook {
	float: right;
}
#access .twitter a, #access .rss a, #access .facebook a {
	background: transparent url(images/social-sprite.png) 0 0 no-repeat;
	padding: 0;
	text-indent: -9999px;
	width: 70px;
}
#access .rss a { background-position: 0 0; }
#access .facebook a { background-position: 0 -96px; }
#access .twitter a { background-position: 0 -48px; }
#access .rss a:hover, #access .rss a:focus, #access .rss a:active {
	background: transparent url(images/social-sprite.png) 0 -144px no-repeat;
}
#access .twitter a:hover, #access .twitter a:focus, #access .twitter a:active {
	background: transparent url(images/social-sprite.png) 0 -192px no-repeat;
}
#access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
	background: transparent url(images/social-sprite.png) 0 -240px no-repeat;
}

This is just an example to experiment. Add your Google+ profile and expand this example with cool CSS tricks!

The Making Of Xtreme-Theme.com


After the international launch of Xtreme One WordPress Framework we received quite a few questions, how we have realized the pages and whether we have used language Plugins.

xtreme-theme.com is a WordPress Multi-site installation and the support forum is a vBulletin 4.0 Forum, which is located in a separate directory and under the subdomain support.xtreme-theme.com. Currently we have 6 blogs plus the Childtheme demo blogs:

All blogs are powered by Xtreme One (what else?) and 3 Childthemes. The Childthemes have their own textual domains to be able to use 2 languages. There are the strings included that do not occur in the framework. We don't use a language Plugin. We write in English and German.

The themes, showcases and testimonials are Custom Post type with some additional custom fields, such as the Buy-Link, the price etc. . For the output of the testimonials I built a widget where I can display English or German. Since we are using on different subdomains some of the Xtreme One Widgets, such as the slider for the Childthemes, I modified the widgets a bit, so that they can execute multi-site queries. Via a selectbox I can choose which blog I want to query.

Every Childtheme Demo Blog runs on a separate subdomain. We wrote a small Plugin that creates the theme switcher. The Plugin adds in Super Admin at Sites, an extra box, with the demo blogs are selected. The data for the price and the purchase link will then be queried by xtreme-theme.com and generates the Switcher. If I add a new demo blog, I just have to check the checkbox and it's ready.

Demoblog Plugin

We wanted the main page, the documentation and the knowledge base to be in a different look. We realized it with 3 Childthemes, and up to a few small changes to the templates, we just changed the CSS and other graphics are used. The entire header with the two navigations are the same on all domains, so it keeps the same look and feel for the navigation for better usability. We use only the WP Menu, which I don't wanna miss again. For the flags in the navigation, we used the CSS classes en and de and styled accordingly. Such a thing was previously not so easy.

Integration of the many different layouts and sidebars was with the layout manager of Xtreme One only a matter of minutes. Select desired containers, set width, select sidebars and hit save. So all core functions of Xtreme One. Only for the integration of Google Analytics and a few little things that happen at all Subdomanis, I've written a Plugin to not do these things more than once.

It was and is an exciting project and there is much more to come.

Launching WordPress Framework Xtreme One!

We are very happy and proud to announce the international launch of Xtreme One WordPress Framework today. After a very successful one month pre-launch in Germany we are excited to offer Xtreme One for only $79,95 worldwide now. Xtreme One was programmed by Heiko and I, Alex is responsible for the design.

Why another WordPress Framework?

My idea of a WordPress Framework starts where most of the others are given up - to give the user the complete control of his layout. That's why Xtreme One is worldwide the only WordPress Framework, which is able to create fixed, fluid and flexible layouts. Create in a matter of minutes your own desired website layout with just a few mouse clicks! Check out the video and get convinced by Xtreme One.

Focus on the most important thing – your vision!

Efficient functions enables you to work extremely fast, without writing code. Hence, you have more time to create your design.

It's the details that matter

  • 6 layout variations in content area.
  • Widths of sidebars flexible adjustable in px, em or %
  • Free positionable navigations with 4 different stylesheets for WP Menus, page or categories
  • Able to add teaser and footer with dynamical created widget areas in 28 layout variations and up to 5 columns.
  • Layoutmanager  - different layouts and sidebars
  • 12 additional widgets: 3 slider widgets, 5 widgets for column and row based output of your articles and pages, printable and accessible tabber, last tweets, newsletter and social links.
  • 3 comment form layouts, additional text fields, adjustable avatar size and alignment
  • Combining of stylesheets and stylesheet compression.
  • Multisite and Localization ready, in English and German.
  • Extensive documentation, support forum, knowledgebase, free updates
  • and a lot more

Launch rebate until December 13th

To celebrate the launch of Xtreme One Framework, we will give you a $10 rebate until December 13th. Just type in LAUNCH in the Discount Coupon field when you check out.

And that's only the beginning!

In the coming months, we will come up with many more innovative ideas for Xtreme One and we will try to make Xtreme One the best WordPress Framework out there. I know it's tough goal, but we will try to deliver!

Buy it now for a limited time for $69,95 and receive free updates with even more features in the future. We hope you will enjoy Xtreme One!

We are looking forward to hear your feedback!