We reported last week that Twitter Bootstrap version 2.0 was released.

This was a huge update that brought many changes and required extensive work on the WordPress Bootstrap CSS plugin.

We released an updated version of the plugin into beta a week ago and we’re quite happy that in its existing state, it’s good for prime time.

That said though, there are a few things you need to take into consideration before upgrading.

Upgrading from pre-2.0.0 WordPress Twitter Bootstrap plugin

You should know there are 2 versions of the Twitter Bootstrap libraries now available within the admin section of the WordPress plugin:

1. Twitter Legacy
2. Twitter

1. Twitter Legacy

This is the original version (1.4.x) of Twitter Bootstrap. We appreciate that people need time to migrate when there are big changes in a library such as this.

If you want the option to stay up to date with the plugin’s latest features, while giving you time to migrate your site to Twitter Bootstrap version 2.0, you’re covered!

If, when you upgrade to version 2.0 of the WordPress Twitter Bootstrap CSS plugin, you’re configured to us “Twitter” bootstrap, you will automatically be converted to “Twitter Legacy”.

Bugs notwithstanding, there should be absolutely no change in your website appearance and functionality – you can upgrade this plugin with confidence!

2. Twitter

“Twitter” represents the latest public, stable version of Twitter Bootstrap. At the time of writing that’s version 2.0.0.

Certain features and libraries are only available with “Twitter” that are not available with “Twitter Legacy”.

We have been diligent in making the admin interface reflect these differences so there should be minimal confusion.

Hot-Linking option is removed (permanently) from version 2.0.0 onwards

Hot-linking resources on your website comes with its own issues, and maintaining the plugin to support hot-linking was proving more work that the possible benefits.

Apologies to anyone who prefers hot-linking. The migration/upgrade from previous versions will be seamless and shouldn’t present any problems.

WordPress shortcodes support for Twitter Bootstrap elements

Since there were serious changes to the Twitter Bootstrap elements, the plugin shortcodes have changed a lot also.

Where possible we’ve tried to maintain backward compatibility with the “Twitter Legacy” configuration, but this wasn’t always possible.

And, as Twitter Bootstrap continues to evolve, we cannot guarantee long-term support for legacy users. So, please upgrade your site to use the latest version as soon as you can.

The following is a short list of the most important changes to the shortcodes system:

• [TBS_BUTTON] supports the classes: default | primary | info | success | danger. But, whichever you choose, this must be the first class defined in the “class” parameter.
• [TBS_LABEL] supports the classes: default | warning | info | success | important. But, whichever you choose, this must be the first class defined in the “class” parameter.
• [TBS_BLOCK] is no longer supported. Twitter Bootstrap 2.0+ does not have “blocks” and instead uses “alerts” with specific classes. If you use [TBS_BLOCK] with “Twitter Legacy” you should still get blocks, but they are actually alerts with a legacy class defined. You should change all your [TBS_BLOCK] instances to [TBS_ALERT] and use the alert-block class.
• [TBS_ALERT] shortcode has a “class” parameter which can remain undefined (for the default setting), or can use: alert-block with alert-success | alert-info | alert-error. To use alert-block with alert-success, for example, just separate them in the parameter with space, e.g.: class="alert-block alert-success"
• [TBS_TWIPSY] is no longer supported. Please use [TBS_TOOLTIP] going forward with the same parameters as twipsy. For now, in version 2.0.0 the old shortcode should still work, but we will not be guaranteeing this as versions progress.
• [TBS_TOOLTIP] is unlike TWIPSY with regards the “placement” parameter. The options are now: top | bottom | left | right
• [TBS_POPOVER] is unchanged and works as with Twitter Legacy 1.4.0

At the time of writing, the other shortcodes are currently untested with version 2.0 and are unlikely to work. If you really need them, stick with Twitter Legacy for now.

In the future, I’ll be posting more detailed how-to on the site to use the newest and latest Twitter Bootstrap shortcodes as they become available and updated.

Stay tuned!

Last week DIY Themes released Thesis Framework 1.8.3.

Fun. Not really.

I wrote a guide some time ago about creating Thesis Child Themes. One of the advantages I tout about child themes is the smooth upgrade path from one version of the parent theme to the next.

Unfortunately this latest release of Thesis 1.8.3 caused me a little bit of a headache because he changed the way he includes the theme’s CSS stylesheets.

In this quick post I’m going to show you what you can do to quickly offset any problems associated with Thesis Child Themes and stylesheets.

What changed in Thesis 1.8.3 with regards CSS stylesheets?

Honestly, I don’t know the exact answer to that because I haven’t delved into the code too deeply.

But, we know he changed things because he tells us he did, and also because I’ve reviewed a little bit of the code enough to see some significant changes for myself.

The best thing I can do is describe the problem as I see it, and how I went about fixing it.

Before we even download Thesis 1.8.3, let’s start with the child theme you have already created and are presumably running on your site.

If you’ll remember from the how to article on Thesis child themes, we created the critical styles.css in the root of the child theme folder.

This styles.css should have a single import line and will look something like this:

@import url("../thesis/style.css");

Pretty innocent huh? Well it is this line that fried my site.

You see it uses a relative path to find the parent Thesis theme – the “../” means “go up 1 directory level”.

However, with Thesis 1.8.3, with the way it is being included into the site, this relative path is failing and it’s not finding the parent thesis theme folder.

Not good.

The simple solution here is to create a full path to the CSS stylesheet file. The following line now replaces the line above:

@import url("//www.hostliketoast.com/wp/wp-content/themes/thesis/style.css");

As you can see, not too complicated. You just have to replace it with your URL and if you have WordPress files in a sub-folder, as I do with (‘wp/‘), then you need to include that also.

This wont break your Thesis 1.8.2 and prepares you nicely for Thesis 1.8.3.

Remember, when performing upgrades of your site, you should always create a backup of your website files in case you toast them.

Upgrading to Thesis Framework 1.8.3 for your WordPress child theme

Assuming you’ve created the backup of your theme files and WordPress database, download the new Thesis 1.8.3 and copy them into your parent thesis theme folder, overwriting all files when prompted.

Navigate to the thesis admin section of your WordPress site and run the database upgrade when you’re prompted.

All being well, your website should be seamlessly upgraded to run Thesis Framework 1.8.3.

If you hit a glitch, and your WordPress site isn’t showing the styles as you would expect, the only suggestion I have is to “rebuild” your CSS files.

Thesis 1.8.3 has a new “Design Mode” – I don’t care much for it because I use other means of optimizing my websites.

But it’s there and we have to work with it…

• Go to Thesis ‘Site Options’
• Expand the ‘Stylesheet Options’ section
• Uncheck the box ‘Use Design Mode’
• Save.
• Re-Check the box ‘Use Design Mode’
• Save

Now try reloading the site.

Other issues with Thesis Framework 1.8.3

I’m not the only person that has experienced problems with the latest Thesis upgrade, but I was able to work my way through it eventually. It was nothing too serious in the end.

If you do have more serious issues, you’re best to go back to 1.8.2 and sit tight. Or go to the Thesis Forums and ask for help from the great number of superb folks out there.

Or, you can write to me in the comments sections below, or contact us directly and I’ll see what I can do to assist you.

Remember to completely clear any website caches, and your browser cache if the site doesn’t look as you expected.

If you host your website using CPanel, we have provided a free, fully customizable script for backing up your full web hosting site.

We have received a couple of questions about security recently so we decided to simply highlight clearly that you can configure the CPanel backup script to transfer your backup files over SCP.

SCP is not SFTP, though it is often confused. The backup script uses native CPanel API calls and is therefore only as powerful or as limited as the base-CPanel implementation.

How to enable Secure SCP transfer of CPanel backup files

To see the demonstration on how to backup your web hosting using our CPanel script, please see our original article and video on automating CPanel backups.

If you want to see where to enable SCP, look at the 1:20 mark on the video. The item you need to edit is

ftp_method

where it reads

passiveftp

change this to

scp

Next, change the item:

ftp_port

from 21, to

22

Now it should be noted at this stage that 22 is the default port normally used for SCP. You must check with your server which port SCP services are configured to use – and of course that your server even supports SCP!

If in doubt, check with the service provider.

Now all that is left is to download the CPanel backup script

If you’re not already a member of the Host Like Toast Developer Channel, you can do so for free today using the form below.

If you’re a reseller hosting provider and you need a script to backup all your clients hosting, you can purchase our premium reseller backup script here.

If you have any questions or comments, please feel free to drop them in the area below!

We wrote yesterday that Twitter Bootstrap 2.0 was released to public.

We’ve been hard at work preparing our WordPress Bootstrap CSS plugin so that you can take advantage of the latest Twitter Bootstrap as soon as possible.

Today we’ve released the first beta of the plugin for those that want it now.

95% of the implementation and testing has been done, but there are a couple of outstanding issues that still need to be addressed.

Outstanding issues for WordPress Twitter Bootstrap v2.0 beta

As with any new major release, there will be a couple of issues.

We have finalised the code necessary for you to include all the new v2.0 Twitter Bootstrap features. However, some functionality available in v1.4.0 of the Twitter Bootstrap library may not function correctly in v2.0.0.

It is for this reason we have released it as v2.0.0-beta1 and the following are some points you should note before upgrading:

• There are 2 versions of Twitter on the plugin now: “Twitter” and “Twitter Legacy”
• With “Twitter Legacy” selected, you run on Twitter Bootstrap version 1.4.0
• With “Twitter” selected, you run on Twitter Bootstrap version 2.0.0
• WordPress Bootstrap CSS plugin versions numbers, are now aligned with the latest stable release of Twitter Bootstrap, starting with version 2.0.0
• If you’re upgrading from pre-2.0 version of the plugin, and you were using “Twitter”, you will automatically be switched to “Twitter Legacy” so as to retain your existing configuration.
• Twitter Bootstrap shortcodes that were released with version 0.8+ of the plugin may not work with “Twitter” version 2.0.0 on the plugin
• It should be noted that because of a change of wording on Twitter Bootstrap, “twipsy” has been replaced by “tooltip” throughout
• Shortcode [TBS_TWIPSY] only works with “Twitter Legacy” and has been replaced with “[TBS_TOOLTIP]” when using “Twitter”
• Support for hotlinking CSS and Javascript files from Github (the Twitter Bootstrap repository) has been removed with this version.

Get the WordPress Twitter Bootstrap CSS plugin today!

The plugin is of course free, and you can grab it from the WordPress.org repository here.

Your best bet is to add it from within your WordPress website by searching for “WordPress Bootstrap CSS”. Of course, if you already have it installed your website will notify you of the latest update in the next 24hrs.

Please feel free to offer feedback on our contact page, or better yet comment below so everyone can follow along.

Hope you love it!

Regular readers will know that we at Host Like Toast are huge fans of Twitter Bootstrap.

And there’s great news, version 2.0.0 of this website/web-application library has just been released.

What’s new with Twitter Bootstrap 2.0?

Here follows the main points you should take into consideration with Twitter Bootstrap 2.0:

• New 12-column, responsive grid system (v1.x was 16-column)
• New table styles with a common base class for improved compatibility with other tools
• New form styles with smarter defaults, requiring less HTML
• Icons, provided by Glyphicons
• Smarter navigation components
• New buttons, button groups, and button drop downs
• Simpler alert messages
• New Javascript plug-ins such as carousel, collapse, and typeahead – pretty awesome!

There’s heaps of things to get excited about with Twitter Bootstrap 2.0!

And with version 2.0 there’s new, top-notch documentation to go along with it, making it super easy for web designers and beginners to get started quickly.

The twitter bootstrap documentation can be found here: http://twitter.github.com/bootstrap/index.html

Browse through the top-menu to learn about the main elements of the library and see the power you have available to you…

How to get Twitter Bootstrap on your website?

You can download the twitter bootstrap library from the page linked to above. With that, you simply link in the CSS and Javascript files to your website.

If you use WordPress, you will need to edit your theme files to include the various library files.

Or

You can grab the free Host Like Toast Twitter Bootstrap CSS plugin (2000 downloads at the time of writing!)

We have written a WordPress plugin specifically for overcoming poorly written themes so as to easily include the Twitter Bootstrap CSS library at the absolute beginning of any website.

You can download the plugin directly from the WordPress.org repository and much of the documentation you can find on this site.

We have even included a collection of WordPress shortcodes so you can start using some of the Twitter Bootstrap features immediately.

What version of Twitter Bootstrap does the WordPress plugin support?

Currently, WordPress Bootstrap CSS plugin supports only Twitter Bootstrap 1.4.0 but we hope to release an update in the next few days to support the full range of Javascript libraries now made available with version 2.0.

If you would like to be made aware of when we release the update, please feel free to sign up to the Developer Channel using the form below and we’ll release further information there.

In the previous article we looked at the Twitter Bootstrap Twipsy shortcode. It’s great for adding an additional piece of information, in a neat and subtle manner.

In this article we’re going to see how to use Twitter Bootstrap Popovers to create cool popover effects that look great and don’t detract from your site.

Using Twitter Bootstrap Popovers

The shortcode to place a Popover on your page or post is:

TBS_POPOVER

The following line of text, when placed in a WordPress page or post…

[TBS_POPOVER title="Popover Title" content="Cool, interesting popover content to expand your mind" style="text-decoration:underline"][/TBS_POPOVER]

will produce the following popover text:

hover over me – the text containing the popover

As you can see, it’s almost too easy now to create a great looking Twitter Bootstrap Popover effect!

You can even try combining shortcodes. See this example, where I create a Bootstrap Popover on a Bootstrap Button:

Parameters for the Twitter Bootstrap Popover Shortcode

The Popover shortcode is identical to the Twipsy Shortcode but for 1 addition: content.

As with the previous shortcodes, the following 3 parameters come as standard:

• class="class1 class2"
• id="mySpecialPopoverID"
• style="CSS:value"

Twipsy roll-overs require a bit more before they’ll work however. The remaining parameters are:

• title : this is the text within the actual roll-over hover effect. This is critical to the whole show. Without this, the Shortcode will not be processed fully.
• content : this is the text in the main body of the popover.
• placement : this dictates where the rollover will appear. You can choose between: left | above | below | right

Requirements to use Twitter Bootstrap Popover Shortcode

In a bid to optimize the WordPress Bootstrap CSS plugin, we try to ensure that your site only loads things that are necessary.

This seems to go against the common trend of WordPress plugin development where the more they load into the page, the better.

In light of this, since Popovers need Javascript to run you must first include the necessary Javascript library. To do this:

• Go to the ‘Bootstrap CSS‘ menu item from the Host Like Toast menu in WordPress.
• Find the check box labelled ‘popover.js‘ and check it.
• Save settings.

Now the fun with Twitter Bootstrap really begins!

So far we’ve covered:

• Twitter Bootstrap Buttons
• Twitter Bootstrap Labels
• Twitter Bootstrap Blockquotes
• Twitter Bootstrap Alert and Block Messages

Next we’re going to show you how to get subtle, unobtrusive roll-over tooltips.

These are useful for web-apps, but you can put them anywhere on your site if you want to add an extra bit of information to something on your site.

Here’s how to use Twitter Bootstrap Twipsy roll-overs using the WordPress Bootstrap CSS plugin.

Twitter Bootstrap Twipsy Shortcode for WordPress

The shortcode to use for the Twipsy function is:

TBS_TWIPSY

The following line of Twipsy shortcode text:

[TBS_TWIPSY placement="above" title="useful rollover information" style="text-decoration:underline"]hover your mouse over me[/TBS_TWIPSY]

with give you the following effect:

hover your mouse over me

Not bad when you want to draw the user’s attention to more information but without adding too much extra to the page.

Parameters for the Twitter Bootstrap Twipsy Shortcode

As with the previous shortcodes, the following 3 parameters come as standard:

• class="class1 class2"
• id="mySpecialTwipsyID"
• style="CSS:value"

Twipsy roll-overs require a bit more before they’ll work however. The remaining parameters are:

• title : this is the text that you find within the actual roll-over hover effect. This is critical to the whole show. Without this, the Shortcode will not be processed fully.
• placement : this dictates where the rollover will appear. You can choose between: left | above | below | right

Requirements to use Twitter Bootstrap Twipsy Shortcode

In a bid to optimize the WordPress Bootstrap CSS plugin, we try to ensure that your site only loads things that are necessary.

This seems to go against the common trend of WordPress plugin development where the more they load into the page, the better.

In light of this, since Twipsy needs Javascript to run you must first include the necessary Javascript library. To do this:

• Go to the ‘Bootstrap CSS‘ menu item from the Host Like Toast menu in WordPress.
• Find the check box labelled ‘twipsy.js‘ and check it.
• Save settings.

Now you’re ready to use Twitter Bootstrap Twipsy!

Perhaps one of my favourite elements in the Twitter Bootstrap library is that of Alert and Block Messages.

With little effort you can create coloured boxes to alert the user of important notices.

They’re neat and don’t detract from the site.

In this article, I’m going to run through the basics of using alert and block messages, and their differences.

First Up, Twitter Bootstrap Alert Messages

Alert messages are typically used for one-liner messages on your pages or posts.

Perhaps you have made a significant update to a post you wrote some time ago and you want to alert the user to the updated information.

Here’s how you do it…

The following line of text:

[TBS_ALERT class="warning"]This is a warning notice[/TBS_ALERT]

would produce the following alert notice

As with Twitter Bootstrap Buttons and Labels there are quick ways to customize the colour styling of these alert messages.

They are as follows:

As you can see, there are many options to suit the type of alert message you want to convey.

Next, Twitter Bootstrap Block Messages

Similar to Alert messages, the shortcode for block messages takes all the same parameters but displays slightly differently.

They are designed to display more than a single line of text.

Here is the shortcode:

TBS_BLOCK

An example use of the shortcode is as follows:

[TBS_BLOCK class="info"]The differences between Topic A and Topic B:
<ol>
<li>Topic A is xyz.</li>
<li>Topic B is abc.</li>
</ol>
[/TBS_BLOCK]

This would produce the following message block:

Again, as with alert messges, you can change the style by changing the class. You have the options of:

Parameters Accepted by both TBS_ALERT and TBS_BLOCK

As with all the other shortcodes presented so far, these shortcodes also accept the following parameters

• class="class1 class2"
• id="mySpecialBlockID"
• style="CSS:value"

This means you have full control over how the block or alert message will appear if you want to deviate from the default.

Note, that [TBS_ALERT] is only available from version 0.8.4 onwards – it was a late addition to the plugin.

Next up on our Twitter Bootstrap shortcodes for WordPress are the Twitter “blockquotes”.

Your theme probably already has styling for the HTML blockquote element, and if so, this isn’t a problem.

Using the shortcode for the Twitter Blockquote will only add to the styling you have available.

This article will explain how the blockquote shortcode works…

Twitter Bootstrap Blockquotes with Source Citation

The following shortcode is used to call upon the Twitter Blockquote element:

TBS_BLOCKQUOTE

Here is an example of how you can get Blockquote working:

[TBS_BLOCKQUOTE source="A Famous Person"]I said something important[/TBS_BLOCKQUOTE]

will produce the following:

I said something important

A Famous Person

If your theme already has some styling applied to the blockquote html element, then it will look slightly different (or terrible?) but using this shortcode will also add the ability to cite a source using the source parameter.

Very handy.

Optional Parameters for the Twitter Bootstrap Blockquote Shortcode

As will nearly all our shortcodes for the Twitter Bootstrap elements you can add the following 3 parameters:

• class="class1 class2"
• id="mySpecialLabelID"
• style="CSS:value"

…thus allowing you to fully customize your Bootstrap elements.

Give it a go… download the WordPress Bootstrap CSS plugin today and start adding some style to your WordPress site.

Yesterday saw the release of version 0.8 of our WordPress Bootstrap CSS plugin for WordPress.

We added the ability to use special WordPress Shortcodes to tap into the power of Twitter Bootstrap design elements.

Today we’re going to look at the Shortcode for ‘Labels‘.

Twitter Bootstrap Label Shortcode in WordPress

The Shortcode provided for labels is the following:

TBS_LABEL

Here is a quick example. If you type into a Post/Page the following text:

[TBS_LABEL class="default"]This is a Twitter Bootstrap Label used for highlighting[/TBS_LABEL]

you will receive section of highlighted text like this:

This is a Twitter Bootstrap Label used for highlighting

As with the Twitter Bootstrap Buttons, you have several options for the colour styling for labels. They are as follows:

• success
• warning
• important
• notice

Simply replace the “default” text for the class parameter in the example with any of the 4 options above. (Note: if you want to use the default, you don’t actually need to specify any class parameter)

Optional Parameters for the Twitter Bootstrap Label Shortcode

You have the option to pass in a couple of parameters to help you tweak your Twitter Bootstrap Labels.

The following parameters are accepted:

• class="class1 class2"
• id="mySpecialLabelID"
• style="CSS:value"

They are basically identical to their HTML attribute equivalents allowing you full control in styling your Twitter Labels by adding them to CSS classes, giving them CSS IDs or even directly styling them.

If you have any questions about Twitter Bootstrap Labels, please don’t hesitate to comment below.

We hope you enjoy the functionality we’ve provided with the WordPress Bootstrap CSS plugin.