Monthly Archives: March 2014

How to target a specific row in a table via CSS

This week I needed to make use of another CSS Pseudo element which is – like many of its colleagues – a rather sharp tool in the CSS toolbox.

I was using the eMember plugin for a membership site and wanted tweak the signup form. By default it looks like this (I’ve already removed a rather ugly looking border from the table):

Screen Shot 2014-03-28 at 17.12.01

The site I’m working on will provide a free membership, but that’s a technicality that users can’t change – and let’s face it the entire line reading “Membership: Free” could do with vanishing.

Rather than hack core files, I was able to override it with a CSS tweak and make it disappear. The problem is that this particular row in the table doesn’t have a class or ID to reference it.

CSS Pseudo Element nth-child to the rescue: with it, we can target a specific occurrence of the table row element (in our case, the fourth one down). Here’s how:

This looks cryptic, I know – let me explain what’s happening here.

First we have an ID to target the specific area which is #wp_emember_regoForm. That’s the entire registration form though. In it, we drill deeper into table (which is the table shown above), and in it we have tr and td elements. td is a single cell, whereas tr is a whole row so we choose tr. Those are standard HTML elements.

But we don’t want to target every tr element in the table, we only want to target the 4th one down, hence we specify tr:nth-child(4). Had it been the second one, we would have said tr:nth-child(2).

Now all we do is set its display property to none, making it vanish without a trace. Here’s the final result – as if it never happened:

Screen Shot 2014-03-28 at 17.24.08

The nth-child selector can do other funky things, and you probably have seen it in action. Ever wondered how designers can make every other row in a table look slightly darker? Instead of a number, they use “odd” or “even”, targeting every other cell (starting with the first or second one):

nth-child even works with formulas, and of course you don’t have to target a table. Imagine making every other p tag disappear, or style every 3rd link in a different colour.

Have fun experimenting πŸ˜‰

How to replace an Amazon EC2 instance running CentOS and Plesk

In this video I will show you how you can replace a running EC2 instance with a larger one. You may want to do this if you find that you need bigger and better hardware to serve your website, or to move from a development system to a more powerful production system.

In this example my EC2 instance is an M1 Small which hosts a single WordPress website with about 500-700 hits per day. In the screencast I’m replacing it with an M3 Medium instance which really isn’t big enough to cope with the traffic.

I have since found that a C3 Large is a better fit. The total downtime to perform this depends on how big your current instance is. You can bring up a larger instance alongside a smaller one and then swap the Elastic IP over for minimum downtime.

Links referenced in this video:

If you have any questions, please leave a comment.

Catch this episode on my WP Guru Podcast:

How to log into MySQL as root user in Plesk

Plesk-LogoYou may have noticed that there is no MySQL root user on servers running Plesk. That’s because Plesk renames this user into “admin” by default – for security reasons.

The password for the admin MySQL account is the same as for the Plesk Panel admin account.

Even so, when you try to login to MySQL – remotely or locally – you may be puzzled to find that your admin password doesn’t seem to work. Let me assure you of your sanity and your keyboard skills: it’s because Plesk encrypts the password in the database.

It is the encrypted version that you must present to MySQL, not the clear version. For example, if your password was indeed “password”, then the following command will not grant you access to MySQL:

You can check your unencrypted password by issuing the following command (on Linux servers):

In our example, it will indeed show “password” – so why doesn’t it work? It’s because that command will unencrypted the password for us. MySQL however needs the encrypted version. Here’s how we can extract this from Plesk:

This will give you a weird looking output as shown above. Believe it or not, that’s your MySQL admin password!

If you’re already logged into your server as root and want to issue a MySQL shell command, you can login to MySQL like so:

If you’re attempting a remote connection to MySQL then simply paste that cryptic looking password you got in the earlier step.

How to remove the Jetpack admin menu from subscribers

JetPackThe Jetpack admin menu is visible to everybody, including subscribers. This may not be what you want. You may even want to hide it from other admins, perhaps once you’ve given a site over o a client and you don’t want him to switch off vital functionality by accident.

Here’s how you can hide the Jetpack admin menu in your WordPress back end.

Hide Jetpack from Non-Admins (including Subscribers)

If you would like your admin users to see Jetpack and hide it from everyone else, add this to your theme’s function.php file:

Here we test “is Jetpack actually running”, and if it is, “is this user an administrator”. If all signs point to yes then we’ll remove the menu page. You can replace “pinkstone” with another prefix of course.

Feel free to change the user capabilities to something else if you’d like to make Jetpack visible to authors or editors. You can read more about those options here:

You can also achieve this functionality by installing a super small plugin courtesy of Jeremy Herve, lead author of Jetpack:

Hide Jetpack from everybody

Here we remove the check for capabilities altogether, hiding Jetpack from all users:

I have included this functionality in my Zen Dash plugin with the latest version 1.4, where you can now hide Jetpack from admins and other users at the flick of a switch (and bring it back just as easily):

Have fun, and happy hacking πŸ˜‰

How to replace and add HTML text elements with CSS

CSS-LogoIn some circumstances you may can replace HTML text elements via CSS. This is useful if you don’t have access to the source files, or if you want to override text in a Child Theme’s stylesheet.

There are several approaches to this conundrum, I’ll show you two of them. Both require that you have a class, ID or element that you can target. You then either amend more text to it, or replace the existing text completely via the CSS pseudo-elements before and after.

This isn’t always successful though as the original styling may not survive the surgery. Let’s take a look.

Option 1: The Visibility Hack

Here’s the easiest way to replace something. In this example I’ll target a class called myelement:

What’s happening here? First we grab hold of our element and set its visibility to hidden, making it vanish. Next we’ll add our own content before the original, thereby replacing it, and make it visible again.

Instead of “visibility” you can also try “display: none” and “display: block”.

If I had wanted to leave the original words and add something else at the end, I can do this:

Or if you’d like to insert something before the original I can use this:

The original styling will stay intact, however elements that follow the text (for example hyperlinks) may be destroyed when you replace text. Be as specific as possible when targeting text elements.

Option 2: The Out-Of-Vision Hack

A very creative approach is to avoid changing the visibility of existing text by moving it our of vision and then bringing it back. Sometimes changing attributes such as “visibility” or “display” can cause trouble when we try to restore them.

Here we’re doing just that:

This will completely remove my original text and replace it with “Welcome back!”, hopefully in the same styling as before (but then, it may not survive either).

CSS isn’t really made for this, but it’s powerful enough and works in many cases. Try it out!

How to switch between several PHP versions in MAMP 2.x

mamp logoSometimes you need to test your projects against multiple versions of PHP.

If you’re using MAMP that’s fairly easy to do: head over to the MAMP Start Screen, select Preferences and see two versions to choose from.

Here I’m using MAMP 2.2 (even though 3.x has been released already) and I have PHP 5.2.17 and PHP 5.5.3.

When I switch to the other version MAMP restarts and I can refresh my browser to see my project running on the other PHP version.

Screen Shot 2014-03-20 at 08.31.06

Screen Shot 2014-03-20 at 08.31.12

That’s all good if I actually needed either version – but sadly 5.2.x is too old for me, and 5.5.x doesn’t quite work and is a bit too cutting edge. I need it to reflect my production environment.

So what is a boy to do?

Continue reading How to switch between several PHP versions in MAMP 2.x

How to check the size of a file in PHP

PHP-IconPHP has a handy function called filesize() which can help us display how big a file is.

It does this in bytes by default, but with a bit of tinkering we can easily convert this into kilobytes or megabytes.

Let’s first see how this works in bytes:

Converting bytes into kilobytes works by dividing the value by 1024. PHP is very accurate and will give you 12 decimal digits – perhaps a little overkill. To avoid this we can make use of the round() function and specify how many digits of accuracy we’d like to display:

To display the value in megabytes we’ll simply divide by 1024 twice:

How to list a directory in PHP and only show ZIP files

web-find-iconI wanted to list a directory in PHP. At the same time, I wanted to make sure only files are listed – not subdirectories or dot directories.

More specifically, I only wanted to include files with the ending .zip.

Two tools come to the rescue here:

  • scandir() to list the directory and give us an array
  • and the super handy pathinfo() to check a file extension

Here’s how I did it

Call the function with the directory of your choice – give it a full path like /var/your/directory. Next scandir() creates an array of files and directories which we iterate over with a foreach loop. I’m also formatting the output as an unordered list, hence the presence of some HTML elements in the echo statements.

The first thing we’ll do in the loop is to have a look at each file’s extension. If it is in fact “zip” then we’d like to list it. Other elements won’t show up.

I hope it helps πŸ˜‰

How to test which HTML form button was pressed in PHP

execImagine you have a HTML form with several values and two buttons at the bottom. One could say “Do This” and the other “Do That”. How do you know which one was pressed by the user?

It’s fairly easy – but I keep forgetting this time and time again. We do this by accessing the name attribute of the HTML button in PHP.

Consider this HTML form:

The button classes are WordPress standard “blue” and “grey” button layouts, and the value is what’s written on the button. The secret sauce however is in the name fields here.

Back in PHP when the form is submitted we can access the $_POST variable which an array of values we’re getting back from the form. We can access them like this:

You can access the rest of your form’s elements in the same way (i.e. tick boxes, select options, text fields, etc).

How to create a recursive ZIP Archive from a directory in PHP

PHP-IconI’ve just realised how (relatively) easy it is to make PHP create a ZIP Archive from a directory and its sub directories.

Previously I had relied on the Linux Shell Command zip or tar to do this which is a convenient one liner. I had assumed that in PHP we had to go through each directory and add the files manually – until I’ve discovered the RecursiveIterator class variants.

In this example I’m defining a root path and a file name for my archive (change at will), then iterate through each file in each directory (and if thats’ a directory too, we’ll go one level deeper). The result of which is an array of files. We’ll get their full paths and add them to the ZIP archive.

The above will produce a ZIP file which will contain references to the absolute full paths of each file. That’s great if you’d like to unzip those files later in exactly the same location – but it’s not so cool if you’re just interested in the content and the idea of 11 sub folders strikes you as “less funny”.

Help is at hand, thanks to the way we can add files to the archive – namely by creating a new local filename. Here’s an example of how this works on Linux systems:

No more references to absolute full paths in your ZIP file.