There are many good Plug-ins for backing up WordPress. None of them did exactly what I wanted. They either did too much, or not enough.

On top of that every time I’ve restored a server backup copy on my development (dev) machine the custom menus and header images inexplicably disappeared.

It’s no good having the best back-up routine in the world if the restore doesn’t quite work!

The disappearing custom header images seems to be a common problem according to Google search results. The common “answer” – upload the header image again through the Admin Appearance Header menu.

Hrumpff! Not exactly an explanation, not even a proper solution. Just another kludge that left you with multiple redundant copies of the header image scattered through the upload directories.

Well, this one time I wouldn’t take “upload it again” as an answer, and went digging deeper for an explanation.

Experimenting on my own site first (this one – www.kathyw.org) and examining the dev server page code compared to the live server gave the first clue. There were some lines of code missing that appeared to be generated out of the database.

The sql backup file was fine, except for discrete references to the live server URL. The usual remedy given – edit the sql file to change the ‘siteurl’ references from the live server URL to the new (in this case dev) server URL. Easy enough. The dev site runs and “looks” just like the live one.

Enter problem #2 – all the images in the “restored” site point to the original site. NOT what you want if you’re going to be moving domains.

So, edit the sql file again, and replace ALL references to the live URL with the dev URL. This can take a while. Update the dev database from the sql file and now with the database image catalogue entries updated the image links all point to the right server.

Enter problem #3 – now the header image has inexplicably disappeared and the menus have reset to default.

So Google some more, and eventually discovered this tasty tid-bit from 2010:

Moved to new subdomain – Lost text widgets and custom header images.

“Sometimes it’s not quite as simple as copying and pasting the new site domain over the old in the database. This is because the information contained in meta_values is often serialized. So it looks like:
a:22:{s:12:"productimage";s:69:"http://cooldomain.com/wp-content/uploads/products_img/DSC02043web.jpg";}

“This” (s:69) “basically refers to the number of characters within the quotation marks.”

Serialized data in the database. Hrumpfff!! Their solution – change the s:number to match the new URL length.

If you’re moving domains to a live one that is completely different, this is probably the only other option to manually resetting header images and menus and anything else thus affected.

However, if you are restoring to a development server where you have absolute control over the local URL it’s even simpler. When you do the search and replace on the SQL file to reset the siteurl and image URLs, make sure the new URL is the same length. Make your development virtual server name the same length for example by using (in my test case) dev.kathyw.org locally as a copy of www.kathyw.org live.

I wanted to post my solution to the site where I found it as it might help others in the same situation, but alas only their paid-up members can post there. I hope by posting it here it may be discoverable by anyone else wanting an explanation, and an easy solution.

Matching the site URL to the serialized data length using either method above may resolve a number of backup restoration headaches. During one of my first restore tests cForms II managed to corrupt it’s database entry. I manually reset it and restored it settings with a backup txt file from cForms own “Save Settings” on the live server. After the final sql restore with the matching URL/data length numbers cForms II was still working fine and dandy.

The same SQL file was used for all tests, with only the URL references changed with a search and replace.

Off course, having just added this new post, my backup of this morning is now out of date …

Time to bring the site back on-line!!!

Finally got a few niggly things sorted, and checked the new blog and site in my least favorite browsers – ie 7 and 8. Found a few more niggly things to fix for ie7, worked fine regardless in ie8. Only kinda works in ie6 but that is no surprise. I’m very much over kludging things for ie6 (any ie6 users out there, do yourself a HUGE favor and install Firefox).

The drop down menus seem to work fine, as does the lightbox – the “niggly” things that threw a spanner in the works of yesterday’s plans to bring the site back.

This is a huge change from the previous site in so many ways, from the visual of the design to the basic underlying philosophy and concept of KathyW.org.  It is past time to move away from the static picture-on-the-screen brochure style approach and grasp the new and engaging interactive options. Ok, so there aren’t any Facebook or Twitter (or fill-in-the-latest-fad) links yet, but they may well come. I’ve only commented out the code in the PHP, not removed it

Anyway, enough play for now – time to get back to work and setting up some eCommerce content for customers.

Monarch Butterfly on Buddleia Flower - March 9, 2011

The question was raised as to how easy (or not) it would be to have a two column layout, in this case in WordPress, that would be easy for end users to maintain and use.

Specifically, pictures with captions in a left column, and an unlimited amount of text in the right column.

So, let’s do a test case to see how this could best be done!

I’m going to ramble on a bit here so I have more text to work with without resorting to “Lorem ipsum dolor sit amet” …

Basically, it *should* be easy to achieve with a small amount of custom CSS that the developer can add to the site styles easily, and some simple instructions for the client / end user to add one minor change to any left column image.

We start with a page that has a single column layout. Here you have at least two options depending on whether you use the Genesis framework and themes or default WordPress themes (eg TwentyEleven). I will try to look at both options here.

With StudioPress Genesis

Select the single column layout from Genesis Layout Settings. In the Custom Body Class section put your class name, in this sample case I used “twoColumns”. Genesis will add the “twoColumns” class to the body tag.

To specifically apply the styles to only the text, add it’s enclosing class – in this case “entry-content” to the style rule. Go to your style sheet – Appearance, Editor, and add the styles for your 2 column layout (I usually add extras at the bottom of the style sheet):

.twoColumns .entry-content {
margin-left: 300px;
padding-left: 20px;
border-left: 1px solid #CCC;
}

To put your images and their caption in the “left column”, create the following style rule:

.twoColumns .entry-content .wp-caption {
margin-left: -300px;
}