There are many good methods for backing up your WordPress data. I like WP-DBManager because it has a few other utilities, in particular, restore. And it’s free, making it quick and easy to install on any site.

Be aware that though, WP-DBManager, does not back up your files, such as images and attachments, or your themes.

There are other solutions out there that will do both data and files, such as the excellent premium plugin, BackupBuddy, which I also highly recommend.

This post explains how to install the WP-DBManager plugin and how to verify it will work on your host and then how to backup with it and how to restore from a backup.

Installation

1) Click on “Add New” in the Plugins menu
2) Enter “dbmanager” into the search box
3) Click “Search Plugins” button

Locating the WP-DBManager plugin

1) Click install Now on the WP-DBManager plugin listing

If a verification message appears, click on Ok.

Activating WP-DBManager

1) Click on Activate Plugin

Successful Install

Checking host compatibility

1) Inthe new Database menu, click on “Backup DB”

If it passes all the checks and says “Excellent. Good to go.” then your host’s settings are compatible ith WP-DBManager.

If you get red errors here, then you will need to contact your host or look at an alternative backup plugin.

Performing the Backup

1) Change “GZIP Database Backup File?” to “Yes”. This will save heaps of disk space.
2) Click “Backup”

Upon Successful Completion

All being well, you should see a message confirming successful backup

Restoring from a backup

To restore fyour site from a backup:

1) Click on “Manage Backup DB” in the “Databse” menu
2) Select the backup to be restored.
3) Click “Restore”

Note: Restoring from backup will take your state back to the state it was in at the date and time of the chosen backup. This means any changes or additions you’ve done between then and now will be lost.

About the Warning Message

At the top of each page, you’ll see a message like this one after you’ve installed WP-DBManager. This is just letting you know that the fofler where WP-DBManager keeps its backups is accessible by anyone, and so could be downloaded by anyone. This is not a serious security risk, as the majority of what’s in your backup is the content you make publicly available.

If you want to correct his, you will need to FTP into your site and move the file called htaccess.txt from /wp-content/plugins/wp-dbmanager to the folder indicated above. Then rename the file to .htaccess

If successful, the warning message will go away. Note the dot at the beginning of the file name.

Note: This tutorial was written using the extraordinary ScreenSteps software for writing tutorials that can be published to HTML, PDF, Word, Blogs, Wikis and Content Management Systems.

Related posts:

1. Review and tutorial: Callout Plugin for WordPress and Headway
2. Tutorial: Using Multiple Content Blocks plugin in Headway for WordPress

This does require delving into CSS (Web Developer Toolbar and FireBug plugins on FireFox are your best friends), so although very simple to explain, does require a fair understanding of CSS.

You’ll notice that I’ve style the title and meta info differently to other categories of posts. The CSS is quite simple:

Related posts:

1. Tutorial: Conditional Leafs in WordPress Headway (part 2)
2. Screencast tutorial: Styling Multiple Leafs with Custom CSS Classes in WordPress Headway
3. Tutorial: Easy Conditional CSS in WordPress Headway theme

It is the right of any retailer to choose what products it stocks.

This is not stepping on the toes of people’s rights. It is not denying their freedom of choice.

If Ford doesn’t make a car with the features you want, do you complain about them breaching your freedom? No, you go buy a Toyota or some other other make.

Herein is the fallacy of those who argue against Apple’s “walled garden” in its mobile OS X ecosystems of the iPhone, the iPad and the iPod touch.

It started with complaints about Apple choosing which apps it would sell on its App Store. It escalated when Apple chose to remove the majority of porn apps that were nothing more than app-spam.

The last straw, and when the proverbial hit the fan, for many misguided evangelists of “freedom” was when Apple blocked apps so you could only use development platforms it specified, thereby shutting out Flash for good.

These actions of Apple are being portrayed as a denial of our most basic right: the freedom of choice.

If you want to eat at a restaurant that will serve you shirtless, no one is stopping you. The “shirt  restaurants” aren’t blockading the “shirt-free restaurants”.

If you want to use a mobile device that runs Flash, no one is stopping you. Apple is not blocking sales of mobile devices running Flash, nor is it blockading stores that sell them.

Apple has enacted no such breach of your freedom. You still have the freedom to choose your mobile device. You can choose an Android, Symbian, Windows, RIM or other mobile device. Apple’s rejection of Flash does not deny you that freedom to choose a different device.

Ironically, the person who demonstrated more than any other that Apple has not denied your freedom, is the one who so very publicly said, “Go screw yourself, Apple!”.

That statement and its subsequent action, is proof beyond doubt that Apple still gives us the most important freedom – to choose or not choose its devices.

No related posts.

Sometimes I guess we who’ve been around technology start to look for the hard way to do things. I know when I switched to Macs I fell for that often.

Headway’s the same. It’s almost too easy. Also, all frameworks require a new way of thinking.

To get started, and assuming you’ve installed and activated it and refreshed your web page, you’ll see a standard layout which looks like many other framework’s stock look.

There should be a Visual Editor button towards the top right (provided you are logged into your WordPress blog). Clicking on it will take you directly into the Visual Editor (VE).

You can also access the VE via the Headway menu in your WordPress admin area.

Within the VE the layout is displayed on the right, and on the left, a a series of dropdown palettes of options and configurations (that’s probably a tautology!).

At this point I can provide 3 things to get started with Headway. I assume you have named your blog via the WP admin. Firstly, ignore Templates and Navigation. Which then leaves you the three palettes to get started with (click to open them).

1) Site Configuration

You can set your background image for your site, your header, the width of your site, the type (fluid or fixed), the position of your navigation bar and more.

2) Design Editor

This lets you style various elements on your page. It doesn’t cover everything (but you can use the built-in Live CSS Editor to get at the rest), but covers the important stuff, like colors, backgrounds, borders, fonts, font attributes etc.

Simply select the element you want to style from the dropdown and modify its stylings. Colours have a useful colour picker.

3) Leafs

Add your own leafs! This is where it gets fun. Under the Leafs palette you can enable resizing and repositioning of leafs, but also add your own. There are some really useful time saving leafs too, like the Image Rotator and the Photo Gallery.

Also, remember to save often! The save button is in the lower right of the VE. You reload the VE as required as well.

These three steps will have you well immersed in Headway and you will start to see how cool and easy it is. That said, it is also powerful and flexible for the hardcore developers. There are some amazing Headway sites out there that don’t look anything like they’ve been done in Headway.

I was underwhelmed by Headway too initially, and ready to ask for a refund after the first day. And I think that was because I had to adjust my thinking, just like I had to when I switched to the Mac. InHeadway, we don’t have to do things the hard way anymore but we do have to think like Headway.

Also, do use the Headway forums because there are lots of helpful people there.

Related posts:

1. Tutorial: Conditional Leafs in WordPress Headway (part 2)
2. Tutorial: Coding a complex design using the WordPress Headway framework
3. Review and tutorial: Callout Plugin for WordPress and Headway

Using callouts in your posts can and will garner more reader interest. (We’ll use that quote for our callout).

To use the plugin, you simply wrap your callout in the plugin’s shortcodes. You can also style how your callouts will look from within the Settings menu.

So, did it work? Time to hit preview and find out…

Well, not the first time! Discovered it wouldn’t work until I’d saved the settings for the plugin, even though they already existed.

You can also have a title for your plugin (which I did have, but have turned off with display:none;), and the text within the shortcodes will not display in your post, so you will need to duplicate it.

Also, the callout will display on your page where it is in the content. This has an advantage that you can show your callout well before the quoted text.

I’ve also styled mine with a negative left margin so it breaks the frame of the content. Just a designer thing.

So, yes, yes, yes, the Insert Callout plugin for WordPress works just fine in Headway. It does use shortcodes, which aren’t an entirely user-friendly system, so you might find only your sharper users will use it.

But it does look hot! Give it a try.

Related posts:

1. Tutorial: Using Multiple Content Blocks plugin in Headway for WordPress
2. Tutorial: Conditional Leafs in WordPress Headway (part 2)
3. Tutorial: Coding a complex design using the WordPress Headway framework

From a design point of view, I think it impairs the visual hierarchy, but it does give a nice demo of something else you can do to make your Headway WordPress site that little bit different.

As you can see (the photos in the bottom corners), it does work. But was it difficult in Headway?

No dead easy, actually.

You can do it using leafs and the CSS will be identical but on this occasion I decided to give Easy Hooks a go. And it was even easier!

Basically it’s two steps.

1) Enter div tags for your class. I used the After Everything Easy Hook, which made sense, coz that’s where I wanted them to live. Here’s the code I entered:

2) Enter the CSS code in the Visual Editor’s custom CSS. Here’s my code:

Breaking it down, we:

• have a background PNG image with transparency to give a ragged edge which gives nice contrast to the rest of the site which is very straight and square. Note, we position each background within their divs at the bottom and to the relevant side.
• position the div as fixed, which means where we put it is where it stays, no matter how we scroll the page or resize the window
• set a high z-index to ensure it stays above everything else. That said, if you are using  a JQuery like Lightbox or Thickbox, you will need to set it lower than their z-index
• set the divs to align with the left and right edges respectively, and also the bottom edge
• set a margin of 0 to ensure no other gaps around the divs
• set the width and height of each div to correspond with the image dimensions. The numbers aren’t too important provided 1) They are larger than the image, and 2) they aren’t two large else invisible areas of the div will cover clickable items on your page making them be seen but not clickable.
• set a bottom margin on the body large enough to ensure the user can read all of our page when they scroll to the bottom

So that’s all there is to it!

Now, you may notice and wonder about why it only appears on the blog pages of my site.

Some simple conditional CSS takes care of that:

Here we simply tell the pages we don’t want it to display on to not show it, and use our default bottom body border.

If you choose to do it with leafs ( I wanted to use the Image Rotator but discovered the JQuery renders transparent PNGs with a white background) then the CSS should be the same, simply give your leafs the relevant custom class name.

Any questions?

Your Challenge

Now, your challenge is to use this effect but where each individual image is clickable and opens a Lightbox or Thickbox view of the image. Kind of a nifty portfolio. You can do it with leafs or Easy Hooks, its your choice. If you get it working, post a links in the comments.

Footnote

Thru this experiment I’ve discovered something shocking that many others have known for three years: the iPhone’s Safari browser screws up fixed positioning. And you would assume the imminent iPad too. So, you are going to have to cut a hack for those if you want to use fixed positioning and expect people to access your site from them.

Related posts:

1. Tutorial: Coding a complex design using the WordPress Headway framework
2. Tutorial: Conditional Leafs in WordPress Headway (part 2)
3. Headway tips: Using Custom Classes in Leafs

I’d probably rate this tutorial as intermediate to advanced.

One of my all time favourite plugins for WordPress before I switched to the Headway framework, was Ontwerpstudio Trendwerk’s amazing Multiple Content Blocks (They also makes the equally awesome CMS plugin)

When developing WordPress websites that will have user managed content, the aim is always to keep it simple. WordPRess, dare I say, is not so good at doing that. Things like shortcodes and custom fields are not user-friendly. Some users will have no probs with them of course, but others will just go glassy eyed and into the foetal position.

You can’t ever be sure about who is entering content. The person that enters the content today, may not be the same tomorrow. And tomorrow’s person may never have ventured beyond bold and underline in MS Word.

So, ideally, you’ve got to develop backends that stand up to any user.

Several plugins for WordPress do some really cool things to make custom fields user friendly. Two you really should check out are Pods and Magic Fields. They each create custom content types, so not just “page” and “post”. For example, I’ve used Magic Fields to create a Vacancy content type on this UMFC site.

Multiple Content Blocks plugin

But a third plugin, Multiple Content Blocks (MCB), lets you add fields to your page templates.

Let’s say you wanted the user to enter a set of related links, which you would then display either at the foot of the post, or even in the sidebar. Okay, I admit, I’ve done it on a site I’m developing. here’s a screen shot:

Look at Documents, Links and Related Articles. They are all a list the user has typed into a custom field added and managed by Multiple Content Blocks, called Related_Docs_and_Links (can’t have spaces). See this pic:

See, all I had to do was teach the user to type a list with headings in that field. Much easier than explaining custom fields and teaching them HTML (because custom field editor doesn’t have a wysiwyg editor).

MCB meets Headway

Now that’s the front and back, but what’s going on in the middle? How is the page designed in Headway to display that?

Well, you have to get a bit clever.

MCB relies on finding the_block() code in your page template. Immediate problem – Headway doesn’t seem to use page templates. Maybe not, but that doesn’t mean you can’t. No, indeed, it’s quite happy if you do. So, to get MCB working, all you have to do is:

1. copy index.php to the name of your page template – eg otherpages.php
2. set it up as a template by adding “Template: your template name” to its header
3. insert the code for your MCB blocks but very important for us Headway folks, inside a non-displaying div
4. insert the code for your MCB blocks into your Headway design

Here’s the code for the example above.

This is actually my default page.php (which I created because it doesn’t exist in Headway). That’s why it doesn’t need the “Template Name” line, but in my next example I’ll show that.

I’ve bolded the important line. the_block is the key function of MCB.

In the WordPress editor, when you select this template page, it then displays the extra field for related documents and links, but we hide it in the template so it doesn’t display in the wrong place for us on our output page.

To get it to display where we want, we insert similar code into a Text/HTML/PHP leaf, or into a executable PHP widget, which is what I’ve done in this example.

You might notice I’ve used the Widget Logic plugin so this widget doesn’t display on the front page. If there’s nothing in the “Related_Docs_and_Links” field,nothing will display, so it’s not really necessary, but I’m just anal at times.

So, you can see that page at UMFC – Care Providers

Another Example

Ok. If you go to the home page of that site, you will see the MCB plugin in action again. The page content is spit in two columns. I could do this with a plugin like Magazine Columns like I did on the home page of this, my own, site, but they all use shortcodes and I want things to be easy for the user.

Again, MCB to the rescue. This time I set up a MCB block called “IntroSpiel” and a page template called frontpage.php., which I then select for this specific page.

Here’s the code for it:

Again, I’ve highlighted the important lines.

Here’s what the user sees in the WordPress editor

and

And here’s what the Text/HTML/PHP leaf looks like:

And for those who are wondering, there is a bit of absolute positioning going on to get the IntroSpiel MCB and the content to line up nicely. The entire shaded area is the content but with a large left padding, and the IntroSpiel MCB is positioned over the space that creates.

So, there you go, easy when you know how!

Caveat

There is a catch to using MCB.  If your page moves the page/post pointer, you could get the wrong page’s MCB displaying. The easiest way to do that is by inserting a content block that calls another page or post. There are ways around this, but none are overly easy. Just try to avoid it! If you encounter this problem, let me know and I’ll see if I can help you around it. If you suspect it’s happening, insert <?PHP the_ID() ?> into the Easy Hook called Footer Close. If the number displayed doesn’t match the ID of your page, then there’s your problem.

Conclusion

Multiple Content Blocks is an awesome plugin that opens up even more possibilities for content display in WordPress and Headway. Hopefully through this tutorial, you’ll find ways to make more interesting designs on your sites.

Any questions?

Related posts:

1. Review and tutorial: Callout Plugin for WordPress and Headway
2. Screencast tutorial: Styling Multiple Leafs with Custom CSS Classes in WordPress Headway
3. Tutorial: Conditional Leafs in WordPress Headway (part 2)

The short and easy answer is “yes they are”.

The long answer is still yes, but much more interesting and exciting.

Headway for WordPress currently provides nine leaf types (as at version 1.6):

• Content
• Widget Ready Sidebar
• Image Rotator
• Featured Posts
• Twitter
• Text/HTML/PHP
• Photo Gallery
• About
• Recent Posts/RSS

Those leafs take the CSS code form of div#leaf-XX where XX equals the leaf number.

So, clearly Headway leafs are divs.

Now, eight of those divs are quite useful and somewhat powerful, but one stands out from the crowd.

One, the Text/HTML/PHP leaf type, is the superhero of Headway leafs.

You ever thought about the possibilities? Like me you’ve probably just plugged the odd PHP function call in their and a bit of HTML. But it struck me tonight that you could do so much more with them. You could put other divs in there, any HTML layout you want, calls to the WP loop, and therefore, you could setup a Text/HTML/PHP leaf that displayed just like a posts page.

Sure you could achieve the same with a Content leaf, so why would you? Why would you even consider it? Because! Because we like to think outside the box. Because it could open all sorts of design possibilities.

Get wild, start thinking about how you can make the Text/HTML/PHP leafs really dance for you.

And let us know what crazy ways you come up with.

Related posts:

1. Tutorial: Conditional Leafs in WordPress Headway (part 2)
2. Headway tips: Using Custom Classes in Leafs
3. Screencast tutorial: Styling Multiple Leafs with Custom CSS Classes in WordPress Headway

After several years of WordPress development, I finally found the theme framework to enable me to create sites in less time and with less effort: Headway

Background

WordPress is a fairly decent platform for developing websites, whether one page or 100 pages. But thru my five years using it, I’ve always been looking for the ideal way to develop sites for it.

In the beginning I took other people’s themes and hacked them for myself. I did dabble in writing a theme from the ground up, but that always involved too much re-inventing the wheel. The next obvious step was to theme frameworks.

I settled on the Starkers theme framework for a while, and then WP-Framework, before moving onto Thematic.

I liked them, but they each drove me nuts too because you have to learn the quirks of the developer’s way of doing things. I’d spend hours just trying to figure out how to get rid of a line of space, or add bullets the way I wanted them. All that involved much testing, erroring and sweating. And very little sleeping. Plus trawling and hacking hundreds of lines of their CSS.

I had assumed Thematic was the end of my journey and began learning how to use its hook system – which from any framework is a bit of a learning curve.

Enter Headway

But then one day I stumbled onto Headway. Watching the videos I got rather excited because it made creating standard sites look easy. This was an area of concern for me because I wanted to build those standard sites at an affordable price without ripping off myself.

When I asked for an example of how Headway saves me time, I give that of the horizontal widget bars which have become popular as footers. In Headway, I just tick the box to say it’s a horizontal sidebar, and Headway automatically lays out the widgets horizontally for me. All I have to do is a little CSS to space them evenly across the page.

So in Headway I saw the answer to my search. But I figured I would still use Thematic for the more complicated designs. (Since writing this piece, I have found Headway has been able to handle even the complicated designs and definitely had no need for an other framework. That said, if I had consider another, it would be Thesis.)

However, I quickly came to discover that Headway has a lot of power lurking beneath that goes untapped by many users.

The leafs system is the obvious one and that we all do know about. These make laying out complex layouts very easy? Want a 2-3-2 layout? No probs. Wanna change that to 2-3-3 – gimme a minute. Want sidebars, featured posts, image rotators, specific content in those leafs? Put the kettle on, I’ll be done before you can make a cuppa.

In some regards that’s not an exaggeration. You really can do those things very quickly, albeit, it may take 10 or 15 minutes, not 5.

But then there is those things we see but don’t try. Things like custom classes for leafs; custom elements in the Visual Editor; adding fonts; Easy Hooks; page templates (yes, you can use them in Headway) and so on to others I probably haven’t discovered yet.

And through all the wild stuff I’ve done with Headway, I’ve barely written more than a few lines of PHP. That’s just amazing. If I had’ve kept going with other frameworks I would have written tons by now.

That said, as I get more into Headway’s Easy Hooks I will probably write a bit more PHP. But when you look at some of the things I ‘ve done on this site and others, it’s hard to believe there’s no custom PHP.

Headway is not without its quirks and bugs. And I have spent a lot of time learning my way around these. And yes, I’ve still had problems like getting rid of extra lines of space.

And one the big difference has been I haven’t had to trawl through hundreds of lines of CSS. I edit my CSS and leave Headway’s alone. Tis separation of CSS makes editing and maintaining the CSS much easier.

Not perfect, but worth it

Some people get frustrated with the bugs still in Headway but they overlook what they’re getting. Headway is leading edge, there’s nothing else like it for WordPress. And, as I understand, has only one developer so it is never going to be quick for some things to get fixed or documentation to be produced. On top of that, WordPress 3.0 is just around the corner, so all theme framework developers would be spending a lot of time just making sure their framework will work on it.

I must admit, paying for something to do with WordPress wasn’t an easy step to take. But they do offer a 30 day money back (which, after my first day with Headway, I thought I would be claiming).

But Headway has been a revelation. I am able to do those standard sites very quickly but I’ve also been able to do my more complex designs (I reckon I could even do the multi-layered Idyl Book Cafe site in Headway) and still save time.

And that is a huge plus because then I only need to learn and know one framework.

Even if only used to knock up those standards sites quickly, Headway really should be in every WordPress designer-developer’s kit bag.

Related posts:

1. Tutorial: Coding a complex design using the WordPress Headway framework
2. Tutorial: Conditional Leafs in WordPress Headway (part 2)
3. Screencast tutorial: Styling Multiple Leafs with Custom CSS Classes in WordPress Headway

After the tutorials the other day on using custom classes, I decided to do a very quick screencast (under 3 mins) showing it in action. It’s not meant to be much a tutorial in itself (you’d fall asleep listening to my voice too long!), so view it in conjunction with the written tutorials. As a result, I don’t go into the styling itself, though you can pause at that point and view full screen to see how I coded it.

Styling with Custom Classes – part 1
Styling with Custom Classes – part 2

Related posts:

1. Headway tips: Using Custom Classes in Leafs
2. Tutorial: Conditional Leafs in WordPress Headway (part 2)
3. Tutorial: Using Multiple Content Blocks plugin in Headway for WordPress