Monthly Archives: October 2013

How to backup and restore your WordPress site with Plesk

In this podcast I’ll show you how to backup and restore your website with Plesk 11.5.

Backup and Restore in Plesk can be very easy and straightforward – and it’s fantastic when it works. There are cases though when it does not, so here are few things to keep in mind.

  • Automatic backups may fill up your disk space if they’re not automatically deleted.
  • Email notifications may arrive with delay. If you have the time, use the “refresh”option in Plesk and keep an eye on it yourself.
  • FTP backups to other servers can be very temperamental. Anything over 1GB in size may time out on its way to the FTP server, in which case you’ll get an error message and a local backup only. I did not cover FTP backups in this podcast.

As you can imagine, we’ve only scratched the surface of this feature. Feel free to ask questions below, or check out the Plesk Documentation here:

  • http://www.parallels.com/download/plesk/11.5/documentation/

How to fade an element with CSS and jQuery

You can hide and show DOM elements in CSS as well as jQuery. But you can also combine the effects and create very elegant presentations with ease.

Let’s consider my own ID named #myown. Once styled to look ravishing, I’ll set it to disappear via this bit of CSS:

My element won’t show up when the page loads – but I can make it fade in like in the movies with this bit of jQuery:

Here I’ll grab a reference to #myown and then use .fadeIn to make my element visible.

We can chain other methods in the same call too. In this example I’ll do the same thing, but wait for one second until the fade in begins:

  • http://api.jquery.com/category/effects/fading/
  • http://api.jquery.com/fadeIn/
  • http://api.jquery.com/delay/

How to combine DOM elements in jQuery

Sometimes you want to add your own DOM element to an existing class or ID. For example, maybe you’d like to insert something like a header advert into an existing theme without having to hack core files. jQuery makes this possible.

You can either add your own element to the beginning or the end of an existing one by using .prepend() or .append() respectively.

In this example I’m adding my own #myown id inside an existing #header:

The first line gets a reference to my own content and stores it inside a variable with the same name. The second line takes this references and appends it as the last element inside the existing #header.

.prepend works the same, but would add my element as the first inside the existing one:

  • http://api.jquery.com/append/
  • http://api.jquery.com/prepend/

How to test if a custom header image is used in WordPress

You can use a handy function named get_header_image() for this. It will return the image uploaded by a user, or an empty string if a custom header image is not used.

You can base decisions on this query:

Note that get_header_image() is not a boolean function, so testing like this won’t work:

Find more details in the WordPress Codex:

  • http://codex.wordpress.org/Function_Reference/get_header_image

How to use your own random header images in TwentyThirteen

I really wanted to use the new WordPress TwentyThirteen theme over on my other site http://www.versluis.com. But I didn’t like the idea of using the default header images.

Since my previous theme had random header images, I thought it would be great to tap into the now built-in function and prepare a child theme that overrides those existing header images with my own. Here’s how I did it:

  • first we’ll create a child theme
  • then we’ll remove the existing header images
  • and add our own images

As a final touch I’ve tweaked the site title font and gave it a Photoshop-like outer glow, all in CSS. Let me talk you through it step by step.

Continue reading How to use your own random header images in TwentyThirteen

How to remove __MACOSX from zip archives

Creating a ZIP file on your Mac is really easy: select a few files in Finder, right-click on those and select “Compress…”. It’s the equivalent of selecting “Send to ZIP Folder” under Windows.

But Mac OSX does something rather bizarre when creating ZIP files: it adds several unnecessary, unwanted and un-called-for files starting with __MACOSX. This drives PC users nuts – and believe me, it drives Mac users nuts too.

Thankfully there is a relatively easy way to remove those files. This may not always be necessary, but if you require a “clean” ZIP file, here’s what you can do.

First, create your ZIP via the finder – like you always do. Next, open Terminal and cd into the directory where your ZIP file is located. If it’s a long path, just type “cd “, then drag the folder into Terminal (less typing is always good).

Now type the following:

And that should do it. This command (zip) will remove everything (-d) starting with __MACOSX from your ZIP file (your-archive.zip).

To verify, type the following:

This will simply list the contents of your-archive.zip.

Alternatively there is a utility called YemuZip: http://www.yellowmug.com/yemuzip/

Or just use a PC 😉

How to use a custom font in CSS

CSS-LogoDid you know that with CSS 3 you can load custom true type fonts and use them on your website?

It’s relatively simple to do too. First you define a new font face with a URL to your file, then you call it just like you would call a pre-defined font.

In this example I’m using the Old Typewriter font from http://www.dafont.com/old-typewriter.font. Once unzipped you’ll end up with a standard .ttf file that you can reference like so:

Now you can style your text via the font-family property:

Where to get custom fonts

There are several sites that offer true type fonts for download. They’ll work in Word and Pages too once installed on your local machine. Here are some of my favourite sites for finding nice fonts:

  • http://dafont.com
  • http://fontsquirrel.com
  • http://1001fonts.com
  • http://fontbaby.com

Note that some fonts have usage restrictions: Even though you may be able to download them, check the license and see if you’re allowed to use them, or find out if you must buy a license before you do.

Also note that once you upload the font to your server it can be accessed by everybody.

Compatible Font Types

You’ll be pleased to hear that CSS supports several font types to be used as described above:

  • TrueType (.ttf)
  • Web Open Font Format (.woff)
  • OpenType (.otf)
  • Embedded OpenType (.eot)
  • SVG Fonts (.svg, .svgz)

Source: http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/