Updates from October, 2013 Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 4:32 pm on October 22, 2013 Permalink | Reply
    Tags: , ,   

    Categories: Screencast ( 87 ), WordPress ( 145 )   

    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:

    • Thomas 4:48 pm on November 8, 2016 Permalink | Reply

      thanks for your post. Today, my Server was installed new, changing from Ubuntu Server 14.04 using Plesk 12.5 to 16.04 using Plex Onyx. When I restored the backup, all my sites, configuration and so on was back up and running.
      My mailserver, my owncloud, and so on.

      However, the wordpress instance of my wife could not be restored. All the data in the webroot is there, but the DB could not be recovered. And I can not seem to make it work.
      Is there any way to make it work again? I used every version of the backup I could think of.

      The error I get is this: Row size too large

      Any help whatsoever is highly apreciated.

      All the best,


      • Jay Versluis 6:41 pm on November 8, 2016 Permalink | Reply

        Hi Thomas, that’s a tricky one. The error sounds like it’s not something generated by Plesk but rather the mysql command that they use to restore the database. If you still have the old server up and running, with the intact database, you can try to export all tables manually and then import them again on the new server. There may be a way to extract the database backup from the Plesk backup, but if restoring that is more successful than what the Plesk script does I don’t know. Have you tried asking in the Plesk forums? https://talk.plesk.com

        • maybeageek 2:58 am on November 10, 2016 Permalink | Reply

          Hi Jay,
          thanks for the response. Curiously I found the solution quicker than I thought. There seems to be a new default setting for various memory sizes in the newer MySQL versions.
          Two settings in /etc/mysql/my.cnf made it possible to import the website and DB using Plesk Backup&Restore function:
          Just added at the bottom of the file.
          All the best,

          • Jay Versluis 9:21 am on November 11, 2016 Permalink

            That’s great news – thank your for sharing, sooner or later I may run into the same problem 🙂

    • Abhijeet Nagre 4:01 am on December 20, 2016 Permalink | Reply

      Will this approach work if I am restoring backup on a different Server?

      • Jay Versluis 7:21 am on December 20, 2016 Permalink | Reply

        Hi Abhijeet, restoring a subscription to another server will only work with FTP backups. In the latest version of Plesk, I believe you also need to give your backup a password so that it can be restored on another server (without a password the restore won’t work – for security reasons).

  • Jay Versluis 11:02 am on October 20, 2013 Permalink | Reply
    Tags: ,   

    Categories: Dreamweaver ( 12 )   

    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:

    #myown {
        /* my styles go here */
        display: none;

    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:

    jQuery('#myown').fadeIn('slow', function () {
    	// could add something here upon completion	

    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:

    jQuery('#myown').delay(1000).fadeIn('slow', function () {
    	// could add something here upon completion	

  • Jay Versluis 7:34 am on October 20, 2013 Permalink | Reply

    Categories: Dreamweaver ( 12 )   

    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:

    // append our #p2HeaderAd to the current #header
    var $myOwn = jQuery('#myOwn');

    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:

    // prepend our #p2HeaderAd to the current #header
    var $myOwn = jQuery('#myOwn');

  • Jay Versluis 6:17 pm on October 19, 2013 Permalink | Reply  
    Categories: WordPress ( 145 )   

    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:

    if (get_header_image() == '') {
        // if no header image is present, do this
    } else {
        // if we have a header image, do something else

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

    if (get_header_image()) {
        // this is not going to work

    Find more details in the WordPress Codex:

  • Jay Versluis 2:17 pm on October 17, 2013 Permalink | Reply

    Categories: Bookmarks ( 18 ), WordPress ( 145 )   

  • Jay Versluis 9:17 pm on October 15, 2013 Permalink | Reply

    Categories: Themes ( 28 )   

    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.

    (More …)

    • Gavin 4:45 pm on October 25, 2013 Permalink | Reply

      In WordPress 3.7, I noticed the default images were still appearing even after adding the new action to unregister_default_headers.

      This is because the parent theme was setting the headers on an add_action with a priority of ’11’ and the child theme was removing the headers with an equal priority of ’11’.

      Setting the child theme to use a priority of 12 solved the issue by ensuring it was always called second:
      add_action (‘after_setup_theme’, ‘versluis2013_remove_default_headers’, 12);

    • Paul Wilkinson 8:23 am on November 6, 2013 Permalink | Reply

      Hi Jay,

      I’m in the process of trying this mod but the part where you remove the default images doesn’t work.

      The 3 existing banners are still there?

    • Paul Wilkinson 8:42 am on November 6, 2013 Permalink | Reply

      By the way, I tried Gavin’s edit there and still have the same result.

      • Jay Versluis 6:15 pm on November 6, 2013 Permalink | Reply

        Bizarre indeed! I only got a chance to look into this today, and here’s what I found:

        As soon as I updated TwentyThirteen to Version 1.1 the default header images came back to the list of my headers (under Appearance – Header). But when I’ve changed the code priority from 11 to 12 (as described by Gavin) they were gone again and everything worked fine. I’ve updated the article to reflect this.

        Did you create a child theme as discussed? And without adding your own header images, do the default ones not disappear when you add this to your child theme’s functions.php? Comment everything else out and see if that works:

        // let's remove the default header images - works with TwentyThirteen 1.1
        function versluis2013_remove_default_headers () {
        	// remove_theme_support ('custom-header');
        	unregister_default_headers (array('circle', 'diamond', 'star'));
        add_action ('after_setup_theme', 'versluis2013_remove_default_headers', 12);
    • paulopitz137 2:50 pm on December 2, 2013 Permalink | Reply

      What happens to me is that the text of the functions.php file appear at the top of the screen with all line breaks and spaces removed. The function itself does not run.

    • paulopitz137 3:05 pm on December 2, 2013 Permalink | Reply

      Found the problem. functions.php must have the following as the first line of the file:

    • mattg 6:18 pm on December 9, 2013 Permalink | Reply

      Hi Jay, thanks for your post – it all worked superbly, but for one thing: could you suggest any reasons you could think why, whilst I can see the new header options showing (header 1, header 2 etc etc in ‘Default Images’), they have no thumbnails alongside them and, if I select these new default headers (individually or random), I get a blank (white) header image.
      I thought it may be permissions, but they *seem* to be OK.

      • Jay Versluis 10:53 pm on December 9, 2013 Permalink | Reply

        Hi Matt, glad the code worked out. Images that aren’t showing up usually mean that the path to those isn’t right, perhaps it’s just one too many slashes. I’d try to look at the source code of the displayed page and examine the path to an image that isn’t showing properly. Post a link to the site if it’s life, I’m happy to take a look.

        • mattg 5:22 am on December 10, 2013 Permalink | Reply

          many thanks Jay, I was simply missing ‘/images’ before ‘/headers’; I’d assumed that %2$s was in some way recursive, so I just needed to explicitly specify the file location within the theme.

    • Mike 1:35 am on December 18, 2013 Permalink | Reply

      Thanks for the tutorial, this is exactly what I wanted to do and it worked perfectly. Thanks to Gavin and paulopitz137, they had the two errors I did, and their fixes worked great.

      The fuzzy glow and no underline were nice bonuses also! Interestingly, they do not show up on the preview screen. How would one make those effects show on the preview?

      I am new to WordPress and will definitely be checking back here.

      • Jay Versluis 5:42 pm on December 19, 2013 Permalink | Reply

        Hi Mike, glad it was useful. Yes I’m wondering why the preview is only an “almost” preview – I’m not sure why it doesn’t show the glow. It works fine once the theme is activated.

  • Jay Versluis 8:16 pm on October 15, 2013 Permalink | Reply

    Categories: Linux ( 101 )   

    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:

    zip -d your-archive.zip "__MACOSX*"

    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:

    unzip -l your-archive.zip

    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 😉

    • Jay Versluis 8:51 am on October 16, 2013 Permalink | Reply

      .DS_Store is another one of those annoying Mac files – it can be removed the same way.

    • M 2:42 pm on October 19, 2013 Permalink | Reply

      …or you can alternatively download and use free Keka archiver, which contains option to simply “Exclude Mac resource forks”.

      Keka allows you to compress to those formats: 7z, Zip, Tar, Gzip, Bzip2, DMG, ISO
      and it also unpacks all those: RAR, 7z, Lzma, Zip, Tar, Gzip, Bzip2, ISO, EXE, CAB, PAX, ACE (PPC)

      You can set Keka as a default OS X compressor/decompressor and one thing that I miss in OS X compression utility the most – you can set method of compression (store, fast, normal, best/slow), allows you to split archives to volumes and also set up archive passwords. And even more…

      Check it out for sure 🙂

    • aliceten 2:03 am on November 28, 2013 Permalink | Reply

      You can use Long Path Tool if you are finding issues related to your long path files.

    • Arun Kaushik 10:42 am on January 21, 2016 Permalink | Reply

      1. use Windows CMD prompt

      2. Use the below command

      rmdir /S

      3. Done 🙂

  • Jay Versluis 10:01 am on October 15, 2013 Permalink | Reply

    Categories: Dreamweaver ( 12 )   

    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:

     @font-face {

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

     .your-class {

    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:

    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/

    • Jay Versluis 2:57 pm on December 15, 2013 Permalink | Reply

      You can also link to existing online fonts, then simply @import them in your CSS. Here’s an example:

      @import url(http://fonts.googleapis.com/css?family=Lato);
      .your-class {
      	font-family: Lato, Helvetica, sans-serif;
  • Jay Versluis 9:08 am on October 13, 2013 Permalink | Reply
    Tags: ,   

    Categories: Bookmarks ( 18 ), Dreamweaver ( 12 )   

    Fantastic CSS Border Radius generator for all browsers by @jacob Bijani

  • Jay Versluis 8:31 am on October 13, 2013 Permalink | Reply

    Categories: Bookmarks ( 18 ), WordPress ( 145 )   

    Super awesome code generator for WordPress Developers by Rami Yushuvaev

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc