Developer's thoughts about WordPress, Silverstripe, Laravel & Symfony

If you’re a webdeveloper and set up a lot of WordPress-websites, you get a lot of inquiries to update WordPress as well. And sometimes, for instance if the client is running on a VPS or poorly managed server, WordPress won’t update the easy way. Continue reading if you’re tired of these types of messages over and over again:

Unable to locate WordPress Content directory

Or

Downloading update from https://downloads.wordpress.org/release/nl_NL/wordpress-4.4.zip…
Unpacking the update…
Could not create directory OR Could not copy file wp-mail.php
Installation Failed

Update WordPress hosted on a VPS

If the above sounds familiar and you don’t want to waste anymore time on updating WordPress, connect to your site through SSH, become root, and do the following below (assuming you’ve made backups, didn’t do anything fancy/hacky in the WordPress-core files, etc. etc.).
Copy and paste the following into a text-editor, adjust path on line number 1, copy, paste in terminal. Your update is executed in about 5 seconds.

Need more information on what we were doing? Here goes:

1) we go into the public_html folder
2) create a directory called “customupgrade” with subfolder “old” (we store the old files here)
3) download the new WordPress file (in this case the Dutch 4.4 pack) into the “customupgrade”-folder
4) untar the file
5) remove the wp-content directory from the downloaded archive (we are keeping our own themes and plugins).
6) move the index.php into a backup-location
7) create a custom message saying the site is under maintenance
8,9,10) move all old files into backup-location
11) move the new files in from the archive (the index.php is being overwritten at this point, ending the maintenance mode)
12) rename the backup-folder
13) cleanup the temporary upgrade folder

You probably already know Less, the CSS “pre-processor”. Basically Less does exactly what it’s called: you can create your css-files with less typing.

The true advantages of Less are that you can use variables and so-called “Mixins”, which are functions/sets of code you use multiple times in your css. Forget about browser-prefixes and typing a whole set for a simple border-radius, just make use of the mixins.

To get started in a few minutes:

If on Windows, download and install WinLess, a neat and handy GUI which will parse your less-files into CSS and minify them on the fly (automatically, everytime you save your file)

Add the folder you are keeping your Less-files in (your css directory).

Create a Less-file (e.g. all.less), with for example the following contents.

Ever needed to create a circle with CSS only? Before CSS3 that was quite impossible (apart from the content: ' \25CF'; with a large font-size). But with CSS3, you can even create responsive circles!

Let’s say your circles width is 25% of the containing div. If your circle is in a square div, you could easily give the circle a height of 25% as well, and all is fine (based on the assumption your container is a responsive square). But if your container has a flexible height, the following code will help you out:

See what happened?
Percentages defined within a padding in CSS, are calculated based on the width of the container. This means that if you use a padding-top to the circle that equals the width, it will give the element the same height as its width.

Enjoy!

P.S. Notice that you could also define the width of the circle as a padding-left with “10%” and give the circle a “display:inline-block” or a “display: block; width: auto; float:left;” to accomplish the same thing. I prefer setting the width, as it doesn’t require me to define the block as an inline-block, or a floating block, which will require you to clear the floats again, or find a backwards-compatibility solution for IE7 and lower.