Daniel Pataki

Web Developer

So Code.
Much Development.
Wow.

While creating a cross-browser, css only dropdown menu I bumped into a very odd issue. The iPad can’t handle visibility transitions. What’s really interesting is that the iPhone has no issues with this.

The sub-menu is shown by transitioning the visibility, the position and the opacity. This gives this a little movement and a fade animation. The example below uses compass and is simplified to only contain the relevant information.

ul.sub-menu {
    visibility:hidden;
    bottom:29px;
    @include transparent;
    @include single-transition( all, 330ms );
}

li:hover > ul.sub-menu {
    visibility: visible;
    bottom:39px;
    @include opaque;

}

This works nicely on the desktop and my iPhone but the menu simply doesn’t show up on my iPad. Using some Javascript I alerted the position of the menu, the height and width and everything checked out, the menu was supposed to be there. It turned out that the issue was visibility. The only way I found to make this work was to make sure that the transition only applies to the opacity, not the visibility. This is not a big deal, the menu now works as intended, it’s just a bit vexing why this would work on the iPhone but not on the iPad. Any ideas?

Do you have a WordPress website which won’t allow you to install and activate themes and plugins from the repository without asking for FTP data? This can be pretty annoying, especially during development where you may want to switch themes and plugins pretty often.

The solution to this problem is grossly misunderstood because this is not a file permission issue, it is actually a file ownership issue. You could change your file permissions to 777 and it still wouldn’t work, you’ll need to use chown to change the ownership of your files.

WordPress makes sure that the owner of the files is the same as the apache user. This is usually your user account, not root. So first of all, why can these sometimes be out of sync?

In my case this happened because I used a root login to gain ssh access to my server and upload an unzip WordPress. This created all the files and folders necessary but since I was logged in as root, the files and folders are owned by root.

Using the following command you can list all users in the account:

awk -F: '$3 >= 1000 && $1 != "nobody" {print $1}' /etc/passwd

you’ll need to select your user. This usually has something to do with your main domain, you may need to experiment a bit.

Once you know the user you’ll need to navigate to the root directory of your installation and issue a command like this:

chown username:group * -R

username should be the username you want to take ownership of the files and group is the group you’d like to use. I’m not sure what you should put there, I used root. I think this is safe, but I’m still checking.

In any case, once this command has been issued you can use ls -l . to show all permissions and you should see the change. Then, visit the theme install page and all should be well.

I’ve added a new ACF addon plugin to the WordPress repository, this one will allow you to create a sidebar selector. The only additional option for this one is “allow null”, let me know if you need anything else!

You can grab the plugin from Github or from WordPress, let me know if you’d like to see any features.

All these fields are actually a part of some larger projects coming up from Bonsai Shed, we’re building some pretty modular themes which will be done soon, I can’t wait to show them off!

I’ve been meaning to create proper WordPress function suggestion for Coda for a while now, it just takes so long to go through that many functions. With a lot of help from my significant other – she did a lot of the gruntwork – we’ve managed to create a Coda mode which will give you proper function suggestion and syntax highlighting.

It highlights PHP and HTML as usual so you can switch between the two in the same file and it gives you function suggestions for all WordPress functions. It includes arguments for all functions as well so you don’t have to go back and forth between the Codex and your code if you can’t remember the order of arguments.

You can grab the file from Github and please do let me know if there is anything missing or anything is out of date! happy highlighting and sugestioninng (actual word I just made up).

When building themes we always add loads of customization options and in addition to using color values set by the user, we also want to manipulate then. A quick example:

Screen Shot 2014-02-10 at 18.53.45

Looking at this image there are three background colors used but there is little need to let users set them all separately. All that is needed is the base menu color (the lightest red). Once we have that we can darken it by 3% to get the hover color and darken it by 5% to get the current color.

The dynamicColor class I made can help you do this easily, grab it now on Github. The Github page has documentation, but here’s the gist of it:


// Initialize a color
$color = new Color( '#ec3a34' );

echo $color;
// rgba( 236, 58, 52, 1 );

$color->show_lighten( 10 );
// rgba( 240, 103, 99, 1 )

echo $myBlue->set_lighten( 10 )->get_opacity( 0.7 );
// rgba( 240, 103, 99, 0.7 )

If you’d like to see some more function in there let me know, or add a pull request!

Sometimes I like to focus on something and I just drag a window to the center of my screen. In some cases I may have loads of icons lying around which I do clean up, but sometimes I just want to get on with it. In this case it seriously annoys me to see these icons.

I’ve created an Alfred extension which allows you to type the “Toggle Desktop Icons” keyword to – big surprise – toggle desktop icons. You can grab the extension from Github right now. Here’s a quick explanation on how to do this yourself.

Go to the workflows section in Alfred and new one, filling in the details. On the workflow screen you’ll need to add a keyword. Make sure to select “No argument” next to the keyword name.

Once done, create a run script action and hook it up to the keyword. Open up the action and type the following script. I also set it not to escape anything.


if [ $(defaults read com.apple.finder CreateDesktop) == 1 ] 
then
	defaults write com.apple.finder CreateDesktop -bool false
else
	defaults write com.apple.finder CreateDesktop -bool true
fi

killall Finder

I am quite bad at bash so if anyone knows a better way, do let me know. In any case, once you save your new action you’re good to go, try it out!

Today’s ACF plugin is a bit special, it is a field for selecting other fields. Pretty trippy huh? The reason this field came to be is this: I am building front-end submission into a theme and I want it to be completely customizable.

ACF already has the means the create a submission form based on the fields specified for an object, but it either creates all the controls or none at all. So with the ACF Field Selector Field you can show users a list of fields they have created and let them choose some of them.

You can include and exclude field types, you can choose which groups to show, choose between returning the key or the field object, you can set the maximum amount of selectable fields and you can set the field type. I prefer the autocomplete field which is a great UI borrowed from the relationship field type.

Grab the plugin on Github or on WordPress right now!

Continuing on with some custom fields for ACF, I made one for Google Font selection, you can grab it from Github or WordPress. Apart from giving you a few options it also builds the font request in the theme header. When a font is selected, the available variations and character sets are loaded as checkboxes so granular control is available. This translates to faster loading times and more control over what is loaded.

Screen Shot 2014-02-03 at 12.46.43

The plugin allows you to set the following options for the field itself:

  • Default Font
  • Interface (simple or advanced)
  • Web Safe Fonts (show or hide)

As the documentation states you can disable the loading of the font request in the theme header by defining the ACF_GOOGLE_FONTS_DISABLE_HEADER constant.

If you are using this plugin please define the ACF_GOOGLE_FONTS_API_KEY constant as well to make sure you are not using my API key. If you are and so are many others it may get rate limited which will mean your fonts won’t load properly.

I will be publishing a few acf field plugins, the first one being a role selector. It allows you to enable the selection of one or more user roles using a handy field. You can set the input field type (select, checkbox, multiselect, radio) and the return value (role name or role object).

The project is available from the WordPress Plugin Repository or from Github. As with any other proper ACF field you can download and activate as a plugin, or you can include the files directory within your theme or plugin.

I’ve noticed through our customers on Themeforest that quite a number of people have very old versions of PHP running on their servers. I’m talking pre 5.3 here which is now almost 5 years old. Here’s a quick way to make sure the plugin can’t be activated in this case, along with a friendly message.


function my_activation_check() {

	$php = '5.3';

	if ( version_compare( PHP_VERSION, $php, '<' ) ) {
		deactivate_plugins( basename( __FILE__ ) );
		wp_die(
			'

' . sprintf( __( 'My Awesome Plugin can not be activated because it requires a PHP version greater than %1$s. Your PHP version can be updated by your hosting company.', 'textdomain' ), $php ) . '

' . __( 'go back', 'textdomain' ) . '' ); } return; } register_activation_hook( __FILE__, 'my_activation_check' );

If you require a specific WordPress version you could include that as well in a similar fashion.