Updates from March, 2014 Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 5:33 pm on March 28, 2014 Permalink | Reply
    Tags: ,   

    Categories: Dreamweaver ( 12 )   

    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:

    #wp_emember_regoForm table tr:nth-child(4) {

    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):

    table tr:nth-child(even) {
    	background-color: #ddd;

    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 😉

  • Jay Versluis 5:15 pm on March 28, 2014 Permalink | Reply

    Categories: Plesk ( 76 ), Screencast ( 87 )   

    How to replace an Amazon EC2 instance running CentOS and Plesk 

    Apple_Podcast_logoIn 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.


  • Jay Versluis 7:12 pm on March 26, 2014 Permalink | Reply  
    Categories: Linux ( 101 ), MySQL ( 19 ), Plesk ( 76 )   

    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:

    mysql -u admin -ppassword

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

    /usr/local/psa/bin/admin --show-password

    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:

    cat /etc/psa/.psa.shadow
    // will show you something like

    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:

    mysql -uadmin -p`cat /etc/psa/.psa.shadow`
    Welcome to the MySQL monitor.  Commands end with ; or \g.
    Your MySQL connection id is 4231837
    Server version: 5.5.36-cll-lve MySQL Community Server (GPL) by Atomicorp
    Copyright (c) 2000, 2014, Oracle and/or its affiliates. All rights reserved.
    Oracle is a registered trademark of Oracle Corporation and/or its
    affiliates. Other names may be trademarks of their respective
    Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

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

    • diego 12:54 am on November 2, 2014 Permalink | Reply

      If your memory is a bitch, like mine use this to access directly:

      root@server:[~]: cat /etc/psa/.psa.shadow

      root@server:[~]: cat /root/.my.cnf

      root@server:[~]: mysql

  • Jay Versluis 8:37 am on March 26, 2014 Permalink | Reply

    Categories: WordPress ( 145 )   

    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:

    function pinkstone_remove_jetpack() {
    	if( class_exists( 'Jetpack' ) && !current_user_can( 'manage_options' ) ) {
    		remove_menu_page( 'jetpack' );
    add_action( 'admin_init', 'pinkstone_remove_jetpack' );

    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:

    function pinkstone_remove_jetpack() {
    	if( class_exists( 'Jetpack' ) ) {
    		remove_menu_page( 'jetpack' );
    add_action( 'admin_init', 'pinkstone_remove_jetpack' );

    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 😉

    • Benjamin Viant 12:20 am on July 9, 2016 Permalink | Reply

      Thanks for this! 🙂

    • crazynatey 2:15 pm on December 16, 2017 Permalink | Reply

      Thank you!

    • robertwent 9:03 am on January 3, 2018 Permalink | Reply

      Any idea how to just remove the ‘link to wordpress.com’ section from a users profile page if they’re not an admin?

      • Jay Versluis 11:16 am on January 20, 2018 Permalink | Reply

        Hi Robert, I don’t see that option with the JetPack menu. Are you sure it’s a self-hosted site? If it’s a WordPress.com site, the above fix won’t work (because we can’t patch a functions.php file).

        • Rob 12:23 pm on January 20, 2018 Permalink | Reply

          Yeah, it’s self hosted.

          I hid it with CSS in the end.

          Jetpack adds a link in the user edit screen to link your account to a wordpress account. I think it’s probably just for users with permission to create posts.
          We’re using theme my login to add frontend login and profile pages and I couldn’t find any way to get rid of the jetpack parts.

  • Jay Versluis 11:33 pm on March 25, 2014 Permalink | Reply

    Categories: Dreamweaver ( 12 )   

    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:

    .myelement {
    	visibility: hidden;
    .myelement:before {
    	content: 'This is new content, replacing existing content';

    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:

    .myelement:after {
    	content: '. Bring it on!';

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

    .myelement:before {
    	content: 'Check this out: ';

    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:

    .myelement {
    	text-indent: -9999px;
    .myelement:after {
    	content:'Welcome Back!';
    	line-height: initial;

    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!

    • Dave Anderson 1:20 pm on September 2, 2014 Permalink | Reply

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

      .myelement:after {
      content: ‘Check this out: ‘;

      Should be:

      myelement:before {
      content: ‘Check this out: ‘;

    • Gastón Sánchez 3:56 pm on April 3, 2015 Permalink | Reply

      Second option worked for me! thanks!

    • vilmaomalley 7:49 pm on February 17, 2016 Permalink | Reply

      Great Thanks!!!!

    • Shyam 11:04 am on April 19, 2018 Permalink | Reply

      Great , Thanks alot

    • johnywhy 12:06 am on June 21, 2018 Permalink | Reply

      Nice! But was hoping you would show how to use CSS to insert HTML 🙂

      • Jay Versluis 12:30 pm on July 12, 2018 Permalink | Reply

        I’m afraid that isn’t possible – as far as I know.

      • sj.gagli 2:45 pm on July 20, 2018 Permalink | Reply

        I’ve search high and low over the years, no luck doing this in CSS, usually fall back on some simple script for it. One day, perhaps.

  • Jay Versluis 8:50 am on March 20, 2014 Permalink | Reply

    Categories: PHP ( 29 )   

    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?

    (More …)

    • pepperstreet 6:37 pm on November 21, 2015 Permalink | Reply

      Hello, anyone tried to update and use PHP > 5.5.3 in MAMP 2.2 ?
      Would like to keep MAMP 2.2 and add a newer PHP version on my older laptop/OSX.
      Thanks in advance.

      • Jay Versluis 10:41 pm on November 21, 2015 Permalink | Reply

        Hi pepperstreet, I’ve only tried older versions and they worked a treat, 5.5.3 came pre-installed with MAMP and also worked well. I can also tell you that when you install MAMP 3, it will install itself alongside MAMP 2 so if you want to try even newer versions of PHP, see if MAMP 3 works for you (and if not, simply keep using MAMP 2).

        Hope this helps!

    • Philipp 4:08 am on January 5, 2016 Permalink | Reply

      This doesn’t seem to work with PHP 7. Checkbox is grayed out.

      • Jay Versluis 10:00 pm on January 5, 2016 Permalink | Reply

        Is this on Mamp 2 or 3?

    • Philipp 2:14 pm on January 6, 2016 Permalink | Reply

      I updated to MAMP 3.5 and it’s working now. Was previously on MAMP 3.2.1.

  • Jay Versluis 10:59 am on March 18, 2014 Permalink | Reply
    Tags: filesize, round   

    Categories: PHP ( 29 )   

    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:

    $file = '/path/to/your/file';
    $filesize = filesize($file);
    echo "The size of your file is $filesize 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:

    $file = '/path/to/your/file';
    $filesize = filesize($file); // bytes
    $filesize = round($filesize / 1024, 2); // kilobytes with two digits
    echo "The size of your file is $filesize KB.";

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

    $file = '/path/to/your/file';
    $filesize = filesize($file); // bytes
    $filesize = round($filesize / 1024 / 1024, 1); // megabytes with 1 digit
    echo "The size of your file is $filesize MB.";

    • Lorenz 5:47 am on August 6, 2017 Permalink | Reply

      You are the boss – i found the same script but 10 times longer! Super easy and compact thanks a lot!

  • Jay Versluis 10:00 am on March 18, 2014 Permalink | Reply
    Tags: pathinfo, scandir   

    Categories: PHP ( 29 )   

    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

    function list_zipfiles($mydirectory) {
    	// directory we want to scan
    	$dircontents = scandir($mydirectory);
    	// list the contents
    	echo '
      '; foreach ($dircontents as $file) { $extension = pathinfo($file, PATHINFO_EXTENSION); if ($extension == 'zip') { echo "
    • $file
    • "; } } echo '
    '; }

    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 😉

  • Jay Versluis 7:30 pm on March 17, 2014 Permalink | Reply  
    Categories: PHP ( 29 )   

    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:

    if (isset($_POST['button1'])) {
      // Do This was pressed
    } else if (isset($_POST['button2'])) {
      // Do That was pressed

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

  • Jay Versluis 7:13 pm on March 17, 2014 Permalink | Reply
    Tags: zip   

    Categories: PHP ( 29 )   

    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.

    // define some basics
    $rootPath = './';
    $archiveName = 'zipfile.zip';
    // initialize the ZIP archive
    $zip = new ZipArchive;
    $zip->open($archiveName, ZipArchive::CREATE);
    // create recursive directory iterator
    $files = new RecursiveIteratorIterator (new RecursiveDirectoryIterator($rootPath), RecursiveIteratorIterator::LEAVES_ONLY);
    // let's iterate
    foreach ($files as $name => $file) {
    	$filePath = $file->getRealPath();
    // close the zip file
    if (!$zip->close()) {
    	echo '

    There was a problem writing the ZIP archive.

    '; } else { echo '

    Successfully created 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:

    // let's iterate and create a new local file name
    foreach ($files as $name => $file) {
    	$new_filename = substr($name,strrpos($name,'/') + 1);
    	$zip->addFile($file, $new_filename);

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

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