All posts tagged “Install”

How to Download and Install Older Version iOS Apps

iOS 8 comes with many improvements and plenty of new features such as Continuity, Apple Pay and SMS Relay. Sadly, many of these features will not work on older Apple devices, like the iPhone 4, due to limitations. Worse still, many apps now will require at least iOS 7 to run smoothly. Trying to install an app will probably prompt a notification like this:

9gag Install

However, that doesn’t mean you cannot get a compatible version of the app installed. Here’s how to do it. First of all, you will need to login to the App Store through iTunes in Mac. Search for the app you would like to install. In this case, I am trying to install the 9Gag app.

Once the app is installed, the app will be added to your Purchased history but it won’t turn up on your iPhone if you don’t have it connected to your Macbook (which is fine because keep in mind that although the app has been "installed", it needs iOS 7 to run and thus can’t function on your iPhone 4).

Now, to get the latest compatible version of the app on your phone.

On your iPhone, launch the App Store and go to the Purchased page via the Updates tab. Try installing the app. Your device will notify you that the current version of the app requires iOS 7 or later. Then, it will offer you the option to install a previous version that is compatible with the iPhone you are holding.

Here’s what you will see:

iPhone install previous version dialog

At this point, tap Download to proceed.

app installed successfully

And you should now have the compatible version of the app installed and functioning.

app is working

You can try installing other apps this way too but note that this only works with apps that have been around since iOS 6. Only then would there be a version built for iOS 6 aka the "compatible version" you can fall back on.

How To Install Windows On Your Mac When All Else Fails

I have a 2011 iMac and I’ve installed Windows on it successfully before. The process was extremely straightforward. I popped in my Windows disk and let Bootcamp do its thing. Recently though I had to reinstall and I found that my built-in Superdrive is broken. Installing Windows went from being a breeze to being a nightmare in an instant.

This guide is for those of you who have tried every solution – and upon reading the numerous forums which conclude that Windows "can only be installed via Bootcamp" – have given up.

It took me a while to stumble on to the solution, which uses a combination of different tools, but it works like a charm and once you’ve done it once, it’s not that difficult. Skip ahead to the "What Does Work" section if you want to get down to work.

What Won’t Work

During the course of my Windows install venture I figured out at least 6 ways which didn’t work. They all have their eureka moments, but don’t work out in the end.

1. Cleaning The Superdrive

Apparently you can drape something like a lens cleaner over a thin business card, stick the thing into the slot and get to work on it. The business end of the drive is at the bottom so if you wiggle it just right, and you’re lucky, you could be successful in cleaning the thing. You can also try blowing some compressed air into it.

If you were successful in doing so you can basically skip this guide and install via Basecamp, well done!

2. Bootable USB Via Bootcamp

The only snag with this was that I didn’t have this option. Apparently this is only available for computers without an optical drive. There is a way in which you can enable this pretty easily though. This is something we will need to do further on as a part of our installation, but it still doesn’t work on its own.

When I saw the option, I promptly clicked on it and let Bootcamp create a startup USB for me. It worked at first, but then refused to even acknowledge it in the boot menu. I tried this with and without Bootcamp drivers and I even tried checking the "Install Windows" options which would automatically start the process for me.

I was a bit downcast but I thought: hey, let’s create a bootable USB in Windows! I found a Windows laptop and created an USB using Rufus. Of course, it didn’t work, it wasn’t seen by the boot manager. I went back and used the Windows 7 USB/DVD Download Tool which was made by Microsoft. Still nothing. Changed another pen drive. Nope. Sigh.

3. Firmware Update

Good news, my iMac model has a firmware update, and what’s more, this update has to do with "booting" stuff (is luck finally on my side?). I downloaded and installed the firmware update and after a terrifying BIOS beep, everything was back to the good old not working ways.

Oh well, at least my firmware is updated.

4. rEFInd Boot Manager

After reading a whole lot of forums I saw that using rEFInd, an alternative boot loader may help.

Once installed and loaded on startup it "saw" the USB, however, while it was able to access the drive, I always receive a "No bootable disk found" message. This was weird since the message obviously came from the boot device, why is it looking for (maybe) a CD? Try as I may, rEFInd was not the answer, although just like Bootcamp, it is a part of the final solution.

5. Using An External Drive

Nope. This was the second thing I tried but it didn’t even see the CD. Once I had rEFInd installed I tried again; the CD showed up in the boot manager, but it refused to boot from it. All I got was a horizontal cursor and nothing more. One thing I didn’t try was an Apple-made external drive but while it’s possible that (for some unknown reason) this would work, I have read that it doesn’t.

6. Virtual Machines

I remember from using Parallels that it can use a Bootcamp partition, allowing me to use the bootable partition as a virtual machine. I had a feeling this wouldn’t work, but it was worth a shot. Parallels (and other virtualization apps) can’t install Windows as boot partitions. They can use them once created, but only if created separately.

Again, virtual machines will be a part of our solution, but not THE solution.

What Does Work

Technically, it is a specific series of operations that works. My source for it is Yes, This Big – a huge thank you to them for figuring out the final solution.

Here is the simplified rundown of the solution:

  1. Force Bootcamp to create a bootable disk
  2. Create a custom virtual machine with VMware (the trial version is sufficient)
  3. Modify the virtual machine and install Windows onto the Bootcamp partition
  4. Delete all the files and copy them, from the USB key
  5. Boot into the Bootcamp partition using rEFInd and Install Windows normally
  6. Curse Apple a little bit for making this so difficult

Let’s take a look at the specifics of all these steps, by the end of which you will have a nice little Windows install!

1. Force Bootcamp to create a bootable disk

If you don’t have this option enabled, you’ll need to edit some files.

You’ll need your computer’s (1) Boot ROM version and (2) Model Identifier which can be found in System Report. (Open up Spotlight, with Cmd + Space, and type "System Information".)

Here’s a sample of what you will see:

Head on over to the Applications/Utilities folder, right-click "Boot Camp" and choose "Show Package Contents".

Go into the "Contents" folder and make a copy of "info.plist" somewhere, just in case. Next, open the original "info.plist" file in a text editor, and search for "USBBootSupportedModels" – it should be somewhere at the bottom.

Look up your model identifier and add it as a string, something like this:

 <key>USBBootSupportedModels</key> <array> <string>Your Model Identifier</string> <string>MacBook7,1</string> <string>MacBookAir3,2</string> <string>MacBookPro8,3</string> <string>MacPro5,1</string> <string>Macmini4,1</string> </array> 

Next, find the section labeled "DARequiredROMVersions" and add your Boot ROM Version in a similar fashion:

 <key>DARequiredROMVersions</key> <array> <string>Your Boot ROM Version</string> <string>IM41.0055.B08</string> <string>IM42.0071.B03</string> <string>IM51.0090.B03</string> <string>IM52.0090.B03</string> <string>IM61.0093.B01</string> <string>MP11.005C.B04</string> <string>MB11.0061.B03</string> <string>MBP11.0055.B08</string> <string>MBP12.0061.B03</string> <string>MM11.0055.B08</string> </array> 

You can now save and close this file.

Open Bootcamp and wonder at the appearance of the "Create a Windows 7 or later version install disk". Click all the checkboxes and let Bootcamp do its thing. You’ll need to supply it with an ISO image which you can generate with Rufus or the Windows 7 USB/DVD Download Tool.

Once Bootcamp is done, it won’t be able to install Windows. When it reboots, press the alt button until the boot manager comes up and boot back into OS X.

2. Create a custom virtual machine with VMware

Note: I’m pretty sure this can be done with other virtualization software as well but I don’t know enough about this topic to go rogue. The trial version of VMware is more than enough for this task so you can get it done free either way.

Before we jump in, we’ll need to take a look at the disk identifier of our Bootcamp partition.

Using Spotlight to type "Disk Utility", click on the BOOTCAMP partition and press CMD + i. This will bring up a disk info window where you can find the Disk Identifier – make a note of it.

Open VMware fusion and press CMD + N to create a new virtual machine. You’ll need to click "More options…" and select "Create a custom virtual machine". Then click Continue.

Now, select the operating system you are installing, click Continue and select "Create a new virtual disk" from the next menu. Click Continue and select "Customize Settings" from the bottom of the next screen; this will let you specify the location for the virtual machine. I selected my desktop for easy access – you can safely delete it once this is all over anyway. Finish up and close VMware.

3. Modify the virtual machine and install Windows onto the Bootcamp partition

Now, we’ll use some trickery to make VMware use our Bootcamp partition as the target location for the install.

To edit the settings for the virtual machine you’ll need to open up a terminal. Once ready, type "cd " (add a space at the end) and drag the icon of your virtual machine into the terminal and press Enter.

Now you’ll need to issue a command which will link the VM to Bootcamp, take care to replace [X] and [Y] with the correct values.

/Applications/VMware create /dev/disk[X] [Y] win7_raw lsilogic

In the screenshot of my BOOTCAMP partition the disk identifier was disk0s4. The first number (0) would be X and the second (4) would be Y.

So in my case the command would be:

/Applications/VMware create /dev/disk0 4 win7_raw lsilogic

You won’t see any feedback from the terminal but if it worked, you should see a new file within the VM file.

Click on the icon for your virtual machine on the Desktop and click "Show Package Contents". This should result in a list of files – the new file you should be looking for is "win7_raw.vmdk". The next step is to edit the "Windows 7 x64.vmx" file.

Open it in your text editor and search for the line starting with "scsi0.virtualDev" and edit its value to "lsilogic". Then search for "scsi0:0.fileName" and edit its value to "win7_raw.vmdk".

Open VMware and start the virtual machine. It will ask for your password because it needs to access the Bootcamp partition. You’ll need to install Windows from the iso file you created earlier. You may need to press CMD + A to open the settings and go to the CD/DVD section. Click Autodetect and choose the iso image and click enable.

Let the installer do its thing. You’ll need to format the Bootcamp partition using the drive tools because it won’t install on a FAT32 partition. Other than that, all should be well.

4. Delete all the files and copy them from the USB key

When the installation is complete, stop VMware and delete all files from Bootcamp.

OS X will still not be able to boot from the Bootcamp partition so we’ll delete everything we’ve done, and copy the files from our USB device (I’m not quite sure what’s happening here, I suspect that we are essentially using VMware to make the drive bootable, but we need a proper bootsector from our USB drive).

In any case, you may run into some problems while deleting because OS X may refuse to write the files on your NTFS drive. I used the Tuxera trial version to get this done (worked like a charm).

Now, copy all files from your USB key onto the Bootcamp partition.

5. Boot into the Bootcamp partition using rEFInd & Install Windows normally

The last step is installing rEFInd. This is usually a simple matter of running a shell script, but with Yosemite, this has been complicated a bit.

Go to the download page and download the first option, the binary zip file and unzip it.

Open the terminal, type "cd ", drag the unzipped folder (it’s something like "refind-bin-0.8.3") into it and press enter. Type the following command:

sudo bash –esp 

If you’re on Mavericks or earlier this should suffice, but if you’re on Yosemite, you’ll need to do some extra work. Yosemite users should go to "/Volumes/esp/EFI/refind/" and open the "refind.conf" file in their text editor. Find the line that has "dont_scan_volumes" in it. By default this line should be commented out, indicated by a hash sign at the beginning.

Uncomment the line and add two dummy values to it, mine looks like this:

dont_scan_volumes foo,bar

Once this has been done, reboot your Mac – it should use the new boot manager automatically. If it doesn’t reboot, hold down alt and select the "EFI Boot" option in the default boot manager.

Once in, select the Bootcamp partition and install Windows as usual. Once done it is a good idea to install the Bootcamp drivers. You can grab them from Apple and install them through your brand-spanking new Windows.

6. Curse Apple a little bit for making this so difficult

Seriously, Apple? There is no need for such complexity here.

First of all, if Macs do offer the opportunity of installing Windows in the first place, and the option to do it via a bootable USB that’s already built in, why hide this from some users just because they have a disk drive? Also, I’m pretty sure that the default boot manager not seeing boot devices is an artificial limitation, it has nothing to do with the Mac not supporting things.

But in any case, hopefully this article has helped some of you who were struggling with installing Windows on your Macs. I can finally play my Windows games from Steam which was kind of the goal of this whole enterprise in the first place!

How to Install, Update & Remove Web Libraries Easily With Bower

To build a website, we commonly rely on a number of libraries, be it in the form of CSS or JavaScript. If I would build a small website that will display an image slideshow, for example, the website probably would need jQuery and a jQuery plugin, Flexslider. These libraries are the dependencies for the website to function.

While adding these libraries should be an easy task, when it comes to a large-scale website which requires more libraries, everything could be cumbersome and messed up from the beginning. You may have to trawl from one repository to another repository, downloading each of the libraries, extracting the packages, and finally putting them in your project directory.

When the new version becomes available you will have to be doing all of that again (sounds like a lot of work, right?).

If that sounds like what you have been doing for ages, this article may be worth a read. Here we will show you a handy tool called Bower that makes managing website libraries a breeze. Let’s check it out.

Getting Started

To use Bower, you have to install Node.js. Since Bower is based on Node.js, you should be able to run Bower on every platform: Windows, Mac, and Linux.

Once you have installed Node.js, open Terminal (or Command Prompt) and run this command line to install Bower.

 npm install -g bower 

Installing Libraries

Now we are ready to use Bower. Let’s start by searching a library that we want to put in our project directory. Assuming that you are currently inside the directory, you can type bower search {name of the library}. Here, for example, I searched for Normalize.css, a library to make an element’s style consistent in all browsers.

 bower search normalize 

The command will list a bunch of results; not only that it gives us the original Normalize, it also shows us Normalize versions that have been converted to LESS, Sass, Stylus, and the other platforms.

Once we have picked which one to install, we can type bower install {{name of the repository}}. In this example, I will install Normalize LESS as well as jQuery.

 bower install normalize-less jquery 

This command will download the latest version of normalize-less and jQuery, and save it in a new folder named bower_components; you should now find the folder created in your project directory.

Alternately, if you want to install the older version of the library, you can run the command followed with the version number, this way.

 bower install jquery#1.10.0 

Now that we have the libraries, Normalize and jQuery, in our project directory, we can use them by referencing the jQuery from the bower_components folder in the HTML document and import Normalize LESS in the other LESS stylesheet.


 <script src="bower_components/jquery/jquery.min.js"></script> 


 @import "bower_components/normalize-less/normalize.less"; 

If one of the libraries is no longer used in the website, you can uninstall it easily with bower uninstall command, like so.

 bower uninstall normalize-less 

Updating The Bower Components

Let’s say you have been working on your project for several months, and some libraries that you are using (like jQuery) have released a new version. In this circumstance, we can use Bower to update jQuery to the latest version. But first let’s check out whether the new version has been registered in bower with bower list command.

The latest version of jQuery, as you can see below, is 2.1.1.

To update jQuery, we can type bower update jquery. Once the update has completed, you can run bower list command again to verify the current installed version. Below, as you can see, we now have the latest version of jQuery.

Wrap Up

Bower is a really handy tool that I think you should leverage in your project. It’s like having an AppStore, but for your website stuff – we can install, update, and remove libraries conveniently.

In the next article we will dive into Bower and explore some more advanced features. So stay tuned.

How to install Photoshop brushes

Contrary to popular belief, to install Photoshop brushes is not difficult, at all. Yes it can be quite confusing, especially if you are using a Photoshop add-on for the first time. But with just a few clicks, you can install and use Photoshop brushes with relative ease!

Whether you are using a Mac or a Windows, the process of installing Photoshop brushes is more or less the same. The screenshots that are provided below are for Photoshop CS 4 used on a Mac. Here is how you should download Photoshop brushes:

  • Select the brush set that you want to install and check their compatibility with the version of Photoshop that you are using. While some brushes can be converted, it is best to purchase ones that are already compatible.
  • Unzip (if required) the set after download and move the brush file (.abr) to the preset Photoshop brushes folder on the hard drive.

After completing these two steps, open Photoshop and follow these steps!

1) Click on the Brush Tool on the Left Hand Side of the Bar

Click on the Brush Tool on the Left Hand Side of the Bar

2) Click on dropdown icon and open brushes menu.

Click on dropdown icon and open brushes menu

3) Click on the Arrow on the Top Right Side of Brushes Menu and Open the Options menu.

Click on the Arrow on the Top Right Side of Brushes Menu and Open the Options menu.

4) Click on Load Brushes from the Optionss menu.

Click on Load Brushes from the Optionss menu.

  • Go to Presets and select Brushes folder where you placed the new .abr file.
  • The new brushes will now appear on the available brushes list.

And you’re done! To install Photoshop brushes is as simple as that.

You can also select the Preset Manager instead of Load Brushes to increase convenience in using the brushes. After you are done installing and organizing the brush sets, simple click on Save Brushes and you’re good to go. Repeat these steps whenever you install new brush sets.

The post How to install Photoshop brushes appeared first on Design daily news.

Download the Designers essentials package now!

Design daily news

What Should You Do After You Install WordPress – A Guide You Need To Go Through

There are some people that will install WordPress just once while others will install WordPress sites every single week.

What Should You Do After You Install WordPress – A Guide You Need To Go Through

No matter what situation you are in, as soon as the blogging platform is installed, it is important that you do something things before you actually start blogging. That is what we will talk about below.

The Experienced WordPress Installer Problem

Before we start talking about the steps you should follow after the installation is done, we should mention this problem that is connected to the experienced installer. When you install the platform too many times, you do end up entering a state in which you think that you know all the steps that have to be done. Even if that is the case, you still need to check since getting used to the installation and customization processes can lead towards missing something that is important.

When we installed our WordPress, we thought we had everything covered. We then started writing articles and promoting them. Only after 2 months we realized that the permalink structure that we chose was one of the standard ones and that is not what we wanted. We did initially change and it was not so problematic but this lead to some 404 errors due to links that were now coming to pages that did not exist anymore.

Go through the steps that we mention below every single time you install WordPress. It will help you to be sure that your full installation was properly done.

Step 1 – Making Modifications To The Posts & Pages Sections

Making Modifications To The Posts & Pages Sections

Get Rid Of Default Posts

WordPress will automatically publish a Hello Post and a Sample page when it is installed. Go to Posts -> All Posts and hover over the post’s title. Then click Trash. Do the same in the Pages section for the Sample Page. Alternatively, change the sample page into a contact page. You most likely have one and the modifications can be done with ease.

Changing Default Category

The default category for WordPress is Uncategorized. Change it to something that is more suitable based on the site that you run. Go to Posts -> Categories and hover over the Uncategorized category. Click Quick Edit, change the name and then press Update Category.

Since you are here, in the event that you have your categories set up in your mind, add them. This is good since you can add a description for each category, which is one thing that people will forget since they usually add new categories as they write a new post or page.

Delete The Default Links

It is surprising to see that there are already so many links added to your blogroll by default but that is the case with all installations and you need to remove them. Do this before adding new links as it would be more complicated at a later point in time. Browse to Links -> All Links. Select all and then from the Bulk Actions menu choose Delete. Click Apply.

Step 2 – Making Modifications To The Appearance Section

Making Modifications To The Appearance Section

Installing Your New Theme

Make sure that you read the guide about WordPress Security before you choose your themes or your plugins. Only choose a theme after you are sure it is often updated and suitable based on WordPress version used.

After you selected the theme that you want and you downloaded it, head over to Appearance -> Themes -> Install Themes and upload your theme in .zip format. Alternatively, choose one from the directory there. When you are prompted to activate it, just do so and it will become operational.

Making Changes Through The Editor

There are some themes that will allow you to add all extra code you need through some forms but not all of them do so. There are cases in which you need to add code manually. You do this from the Editor section. This is where you add codes for Analytics, Webmaster Tools and so on.

In most situations you just need to modify the Header file or the Footer file. However, if you want to add ad codes like Adsense, you will need to go through other files present in the Editor section. Keep in mind that you need HTML knowledge when you perform this step.

Alternatively, there are different plugins that help you to instantly add code to your site when it is needed. This even includes codes for ads. We recommend that you consider this option in the event that you do not have a lot of HTML knowledge or experience in adding such codes.

The Plugins Section

We recommend that you install the plugins that you need from the beginning. This is always better than just adding as you go since you may forget something. Also, it is a great time to remove Akismet and Hello Dolly. While Hello Dolly is completely useless, you might want to use Akismet for comment spam protection but in most situations people use free plugins so there is a pretty good chance that you can safely delete these plugins before you start doing anything else.

We recommend that you also install some useful plugins right now since you are here. Choose a suitable SEO plugin and do not forget about the anti-spam plugin. In order to install a desired plugin, go to Plugins -> Add New. There is a pretty good chance that you will find what you are looking for through the search section. However, you might need to Upload a plugin in the event that it is a paid one. No matter what you install, remember to click Activate. You should also read about WordPress SEO tips.

Step 3 – Making Modifications To The General Section

Making Modifications To The General Section

The General Modifications

For starters, you need to change the title of the site and the tagline. Make sure that you choose something suitable, especially for the tagline. Choose the URL setting and see if you want to use www or not. A lot of people will recommend the use of www but we do not necessarily. This is particularly important when you have a long domain name as you may want to keep it shorter so you make it easier for people to remember it.

Other Important Settings Modifications

To put it as simple as possible, you just need to go through all the sections since that is what counts the most. Simply look at all of them, one by one and make modifications. One section that is really important is the Permalinks one. Here is where you choose URL post structure. Never go for the general setting since it is not at all great or memorable.

Choose one of the predefined ones or learn the different coding options that are available. You have a lot of customization options for the permalinks so choose what you find as being suitable for your blog.

The Discussions Subsection

This is also really important. WordPress will allow comments by default. It is generally a good idea to moderate comments since sooner or later you will be assaulted by spam messages. This is particularly a good idea in the event that you did not install an anti-spam plugin above.

Extra Things To Remember When Installing WordPress

WordPress seems really simple but it is not as you may see it first. All the facts that were mentioned above will help you to make sure that your website looks and acts like you want it to. However, we could mention many other things. As always, some are more important than others.

Besides the actual WordPress installation, nowadays it is really important to secure the site. You already have a great link above that showcases various steps that can be taken. Remember to often create backups since this is something that a lot of people forget.

Also, before you even install WordPress, choose a suitable host. This is particularly important in the event that you want to use shared hosting or you have your very own server. Not all hosting packages are created equally. With some of them, you will end up with a site that runs too slow when you use WordPress as the platform behind it.

Another thing that you have to do before you install WordPress is choose a suitable theme. We recommend the fact that you stay focused on one that is responsive. That is due to the fact that the number of people that use mobile devices for browsing is on a constant rise. Consider this as being an extra tip. Too many use themes that are not responsive and even if this might not seem like a problem at the moment, it will most likely be in the future.


You will easily get the hang of installing WordPress as time passes. It is a lot easier to do so now when compared to the past since the platform is currently evolving. In a few years the tutorial here might not even be relevant but it still is something that you have to remember at the moment. Never believe that you did everything that you have to do after you installed a WordPress site without going through the steps above and checking your site carefully so that it is secured.

Visit us at



5 Reasons Why I Don’t Install WordPress Plugins

… well not ALL WordPress plugins, just the bad ones. Like every other tool out there, there are some plugins that work for you, e.g. for creating contact forms or for helping you build an e-Commerce website on top of WordPress – and there are those which don’t.

Some plugins aren’t necessary, other times, you should totally avoid installing them. In this particular post, I’d like to share with you my personal reasons why I won’t install a particular plugin. As this is an opinion piece, I’m sure you have your reasons as well. Share them with me in the comments section.

1. It Does A Simple Job

Many functionalities in WordPress can be achieved without a plugin. They are so simple that a plugin could sometimes be overkill. For example; I will prefer of adding the following snippet, to hide an admin bar, in the theme’s functions.php file, rather than using a plugin.

 add_filter('show_admin_bar', '__return_false'); 

Tip: Before installing a plugin, try to find that piece of code that can do the exact same job.

2. It’s Old & Not Updated

WordPress has a policy for plugins stored in the official repository; for plugins that are not maintained for more than 24 months, WordPress will display the following warning.

The plugin may contain some deprecated functions, and may also not be compatible with the current WordPress version. I usually won’t install or keep this plugin unless there is no better replacement, and the plugin stil runs well, and I’m sure it would not harm the site it is on.

For instance, I’m still using Maintenance Mode plugin, even though it has not been updated since 2010 as it still does the job really well. We can customize the output by creating a custom template from within the theme.

3. It’s Not Native

I found many plugins that have their own styling for the Admin User Interface (Admin UI) i.e. it does not follow the native WordPress Admin UI styles. The problem comes when WordPress decides to overhaul the entire UI design like in WordPress version 3.8. The plugin’s Admin UI will look out of place. It could also look awful.

On the other hand, it will also add more workload for the developer to update their plugins once WordPress makes significant changes.

Take a look at this example. It is a plugin to make WordPress more secure. It has its own styling, which does not really blend well with the WordPress Admin U. It looks cluttered at best.

Let’s compare it with the following plugin, named Better WP Security, which offers similar functionalities. It uses native WordPress styles and looks tidier.

For me, I would always check out the Screenshot page of the plugin. If the screenshots look unappealing or they are not available, the developer probably isn’t paying enough attention to this plugin of his/hers. And I probably won’t install it.

The rule of thumb for creating Admin UI is to stick close to the WordPress native styles. Sadly, WordPress does not provide a thorough documentation as a guideline. The following, however, are a few references that may help you get started:

4. It’s Branded

I found many WordPress plugins that put their “brand name” everywhere on its Setting page. It is distracting, particularly when it comes to user experience. Here’s an example, a plugin that put its brand on the Menu Name as well as on the Settings Page, 6 different times.

I’m not against putting your “brand name” in a plugin. But it should be done in a more friendly way. It also should not sacrifice the aesthetics of the User Interface design of the plugin. VaultPress is a good example in this matter:

5. It’s Obtrusive

Combine #4 with ads and pro version offerings and the plugin becomes obtrusive. Creating a plugin takes a lot of time and financial support for continual developent, but displaying ads and offers around every corner is can make the developer look desperate. As always, there are better ways to do this, and they are less obtrusive.

Advanced Custom Fields is one good example for this. It is a free plugin that allows us to create WordPress custom meta box easily with GUI. It has some premium extensions that are offered in a neat way, under a sub-menu named "Add-on".


I have my favorite set of WordPress plugins that I cannot do without but if we end-users are more selective with the plugins that we adopt for use, picking only those that are done well, this may little by little help improve the overall quality of plugins. Here is to the development of more powerful WordPress plugins.

Find and Install WordPress Plugins through Github

WordPress plugins are “officially” distributed through the WordPress-owned plugin repository. You can search for any kind of plugin to add extra functionalities to your website or blog. But, there are also a number of great plugins that we can find outside that are not hosted in the official repo.

Some plugins can only be found in its developer website, while some can only be found in Github.

Github is like a gold mine for developers. There are a bunch cool projects including WordPress plugins that are hosted in it. But sadly Github does not return quite an accurate result when we search for WordPress plugins. Using keywords like “WordPress Plugins” does not help much either. But here is what you can do with a plugin.

Github Plugin Search

Github Plugin Search is a plugin created by Paul Clark. This plugin, as the name implies, allows you to search and install WordPress plugins from Github. To do the job, this plugin utilizes Github API Search, Plugin File Header and WordPress Installer API.

Once installed, you can search and add new Plugins from Plugins > Add New menu as usual. But as this plugin is still undergoing development, it replaces the Plugins search result entirely with a list of plugins found in Github.

In this example below, I searched for “bootstrap”. And it returns several results.

Word Of Caution

This plugin could be a good alternative source to find WordPress plugins. But there is one important thing to note when you are using it:

Github is not designed specifically to distribute WordPress plugins. Unlike repo, which moderates all the submitted plugins, Github allows anyone to upload and host their project in it without strict screening. This could be taken advantage of by people who upload plugins with malicious codes, which for intance could allow backdoor access to your blog without your permission.

So, while this Github is a great alternate source to find WordPress plugins, you have to be cautious with your choices. Make sure that you know what the plugin and the codes in it do before getting the plugin.

Final Thought

I’m looking forward to the enhancements of this plugin. In the future, the developer, plans to add the capability to let you opt between repo and Github.

Install PHP, Apache, and MySQL in Mac without MAMP – Part III

This is the last part of our series: Install PHP, Apache, and MySQL in Mac without MAMP. And if you have been following the series (see Part 1 and Part 2 here) and have created projects in ~/Sites, then access localhost:8888 in the Browser, you will find that they are displayed as shown in the following screenshot.

I’m a bit picky when it comes to user interface of Applications, and the way how Apache server presents the folders intrigues me to customize it, make it look nicer. And this is what we are going to do in this tutorial.

If you are ready, let’s just get started.

Getting Started

First let’s create a new PHP file named index.php right under the ~/Sites folder. Then, create a folder named assets to store files like the images and CSS that we will be using along with the PHP file, index.php.

Open the index.php in code editor, and add a basic HTML5 structure as well as a few additional HTML5 tags, like so.

 <!DOCTYPE html> <html> <head> <title>Sites</title> </head> <body> <div class="wrapper"> <header class="site-header"> <h1>Sites</h1> </header> <div class="site-body"> </div> </div> </body> </html> 

We will put our codes under the div with the .site-body class.

Write PHP Functions

First, we need to retrieve several required information from the server, which are the HTTP Host, Current Directory where we put index.php folder, and the list of items that are stored in the current directory.

Here are all the codes, make sure that you wrap these with <?php ?>.

 $  server = "http://" . $  _SERVER['HTTP_HOST']; $  cur_dir = getcwd(); $  folders = scandir($  cur_dir); 

You can view the values in those PHP variables with var_dump or print_f. For example:

 var_dump($  folders); 

This will output the list of folders and files in that we have retrieved with PHP scandir() function in a form of array. In my case, it looks like this:

 array(12) { [0]=> string(1) "." [1]=> string(2) ".." [2]=> string(9) ".DS_Store" [3]=> string(6) "assets" [4]=> string(4) "demo" [5]=> string(3) "dev" [6]=> string(10) "frameworks" [7]=> string(4) "hkdc" [8]=> string(4) "html" [9]=> string(9) "index.php" [10]=> string(11) "phpinfo.php" [11]=> string(12) "repositories" } 

Then, we put these items in HTML list structure using PHP loop, foreach.

 echo '<ol>'; foreach ($  folders as $  folder) { if ($  folder === '.' or $  folder === '..' or $  folder === 'assets') continue; if (is_dir($  cur_dir . '/' . $  folder)) { echo '<li class="site-folder">'; // open list echo '<a class="folder-icon" href=' . $  server . '/' . $  folder . '> ' . $  folder . ' </a>'; // folder icon echo '<span class="folder-name"><a href=' . $  server . '/' . $  folder . '>' . $  folder . '</a></span>'; // folder name and link echo '</li>'; // close list } } echo '</ol>'; 

Here are a few things that you might want to take note from the above PHP scripts:

1. if ($ folder === '.' or $ folder === '..' or $ folder === 'assets') continue;. We use this line to exclude the parents directory, which are presented with dots in Apache server. It also excludes the assets that we use to store CSS and images for customizing localhost appearance.

For reference, you can head over to the PHP docs about the continue function.

2. The HTML list structure is encapsulated with if (is_dir($ cur_dir . '/' . $ folder)) conditional function, that way it will only output Folders.

Open localhost:8888 in the Browser, and we will get the following result.

Writing the CSS

Before we start writing CSS, let’s download Mac tiny folder icon and Mac OS X folder. Open the files in Photoshop, save the icons in PNG format, and put them inside the /assets/img directory.

Then, create a new stylesheet file in the /assets/css directory.

Also, include the link in the index.php file.

 <link rel="stylesheet" href="assets/css/style.css"> 

Basic Styles

First let’s put the basic styles for the HTML elements. These include setting the box sizing to border-box, so we can easily decide and measure the size of the element. We also set the font-family, and display the HTML list inline.

 *, *:before, *:after { box-sizing: border-box; } html { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; text-align: center; } body { margin: 0; padding: 0; } ol, ul { padding: 0; margin: 0; } ol li, ul li { display: inline-block; margin: 0 20px; } ol a, ul a { text-decoration: none; color: #000; } 

Please note that we omit the browser vendor prefix to make the codes shorter. But we have included it in the source code that you can download at the end of this tutorial.

Page Header

We will mimic the OS X color scheme to make the appearance fit well. So, for the page header, we will give it a gradient with a gray color scheme and put the tiny icon aside.

 .site-header { height: 30px; width: 100%; background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6); line-height: 2.5; margin-bottom: 50px; } .site-header h1 { color: #000; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); font-size: 0.8em; font-weight: 400; margin: 0; } .site-header h1:before { content: url('../img/folder-sm.png'); display: inline-block; width: 16px; height: 16px; margin-right: 7px; position: relative; top: 2px; } 

The Folders

Next, we display the OS X folder on the list items that we have generated with PHP, previously. The following CSS codes also include the styles when we hover the folder.

 .site-folder { position: relative; width: 145px; height: 132px; } .site-folder .folder-icon { display: block; height: 100%; width: 100%; background-image: url('../img/folder-128.png'); background-repeat: no-repeat; background-position: center top; border-radius: 5px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .site-folder .folder-icon:hover { background-color: rgba(0, 0, 0, 0.1); } .site-folder .folder-icon:hover + .folder-name { background-color: #2b5dcd; } .site-folder .folder-icon:hover + .folder-name a { color: #fff; } .folder-name { border-radius: 24px; font-weight: 400; font-size: 0.8em; text-transform: lowercase; display: inline-block; margin-top: 10px; padding: 5px 12px; } 

We are done. The screenshot below shows the final result when we view localhost:8888 in the browser.


We have completed the series that came in 3 installments. To sum up:

  1. In the first part, we have set and configured PHP and Apache.
  2. Then, we installed MySQL and manage it with Sequel Pro, in the second part.
  3. In this tutorial, which is the last part, we customized the folder presentation in localhost.

We hope that you find these tutorials useful. If you have any question regarding to the topic discussed, feel free to put your question in the comment box below.

Install PHP, Apache, And MySQL In Mac Without MAMP

Using MAMP is probably the easiest way to have PHP, Apache, and MySQL up and running in OS X. You simply put the application in the Application folder, launch the app, and hit the Start Server button and off you go.

But, OS X has actually been shipped with PHP, and Apache built in so why not use them to develop and run websites locally instead of using third party apps like MAMP or the likes? That way, we will occupy less space for apps, and we will also learn a few things in the process of getting them to work.

In this post, we will show you how to configure PHP, Apache, and MySQL in OS X without MAMP.

Step 1: Enable Sublime Text Command Line

First, since I’m using Sublime Text, I would like to enable the Sublime Text command line so I will be able to open files and folders through Terminal, and edit them within Sublime Text. Here’s how to do this.

1. Create a symlink of Sublime Text subl binary in the ~/bin folder with this command:

 ln -s "/Applications/Sublime" ~/bin/subl 

2. Then run subl --help command.

It will return the Usage and the list of Arguments that can be used with subl, as you can see from the screenshot below. In addition, this also ensures that subl is registered and working.

Step 2: Configure PHP

As mentioned, PHP has already been installed in OS X. You can check the PHP version that is installed in Terminal with the following command command:

 php -v 

Enable PHP

The PHP module, however, is disabled by default. We have to enable it in order to use and execute PHP scripts in Apache server:

1. Type the following command to open httpd.conf in Sublime Text.

 sudo subl /etc/apache2/httpd.conf 

2. Uncomment the following line by removing the hash sign #.

 LoadModule php5_module libexec/apache2/ 

See the following screenshot for more detail:

Enable PHP.ini

PHP configurations such as Increasing Memory Limit, File Upload Allowance, and Set the Maximum Upload File Size are done through php.ini file, which also is disabled by default. Let’s enable it.

Go to Terminal and run the following command line. This command copies the php.ini.default and rename it to php.ini.

 sudo cp /private/etc/php.ini.default /private/etc/php.ini 

Step 3: Configure Apache

OS X is also shipped with Apache. You can type the following command in Terminal to start Apache server.

 sudo apachectl start 

To stop Apache type:

 sudo apachectl stop 

Access localhost in the Browser to verify that the Apache server is working. If it does, it should show “It Works!”.

Change DocumentRoot

The default Apache DocumentRoot, where we should put our website documents, is located at /Library/WebServer/Documents. But all my existing web projects reside in /Users/username/Sites. Let’s change the DocumentRoot to that folder:

1. Run the following command lines consecutively to create user-level configuration file. Change the username with your OS X shortname account.

 cd /etc/apache2/users/ touch username.conf 

2. Open this file in Sublime Text

 sudo subl username.conf 

3. Then, add the following lines in.

 DocumentRoot "/Users/username/Sites" <Directory "/Users/username/Sites"> Options All AllowOverride All Order allow,deny Allow from all </Directory> 

Change Apache Port Number

Apache, by default, run on port 80. But, since I was using MAMP that uses port 8888, I’m making Apache point to this port number instead. That way, I will not need to change the site urls for all my exisiting websites.

1. Open httpd.conf and comment-out the following line by adding a hash sign, so it won’t listen to two ports at the same time.

 #Listen 80 

2. Then open username.conf and add:

 Listen 8888 ServerName localhost:8888 

3. After all the above configurations, save httpd.conf and username.conf, and type the command below to restart Apache:

 sudo apachectl restart 

4. Lastly, access localhost:8888 in the browser. It will show all the directories that are stored within ~/Sites folder, as shown below.

Run Apache at Startup

You might not want to launch Terminal and type sudo apachectl start repeatedly to start Apache server so let’s make it run automatically at startup. To do this, run the following command:

 sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist 

Wrap Up

In this tutorial, we have configured PHP and Apache. Technically, we can run a PHP website already. You can test it out by creating a PHP file named phpinfo.php in ~/Sites and put this code phpinfo() in. Launch the file in the browser: localhost/phpinfo.php. It will show information of the current PHP configuration.

In the next part of this series, we will show you how to install MySQL and make it all work together. So, stay tuned.

ServerPress – Quick and Easy Way to Install WordPress Locally

To develop WordPress locally in our computer, we need a local server with Apache and MySQL installed in our computer. The easiest way to get these is by installing a packaged application, such as WAMP for Windows, and MAMP for OSX.

However, installing WordPress within it is less straightforward. First, we need to put the WordPress files in its corresponding folder, which is usually named htdocs, create a database for it, input the required information to connect WordPress to the database, and set a user account before we can finally get the site to run.

Combine it with the setup of a virtualhost, and the number of WordPress sites that you have to handle, and the process will certainly be even more convoluted. If you found yourself in this situation, you might want to try an application called ServerPress.

Using ServerPress

ServerPress is a local server application that is built specifically for developing WordPress, as well as bbPress and BuddyPress. It comes with the feature that allows us to install WordPress quicker than originally possible. It is available for Windows and OSX; Grab the installer here, and follow the instruction as per your OS.

Once the Web and Database services (Apache, MySQL) are running, we are ready to install WordPress.

Installing WordPress

Before proceeding, please note that if you are using Pow, you may need to deactivate or uninstall it to avoid a conflict, because both Pow and ServerPress use a .dev domain name.

To create a new WordPress project, select Create a new development website.

Name your website domain, and select the WordPress version you would like to install. In the Site Root section, you can see where the site will be installed.

Click Next button. ServerPress will automatically set the required stuff (tables, servername, virtualhost, etc) automatically. Follow the next step to create an Admin user for your site.

Your new website is all set.

Moving and Changing Domain Name

With ServerPress, it is also possible to change or copy your current sites with another domain name, which only takes a few clicks.

Select Remove, copy, or move an existing website.

Select your site, and chose whether you want to Copy, Move, or Remove it. In this case, as you can see from the screenshot below, I would like to move my website; putting it under a new domain name.

Set your new site domain name. Then, in the Site Root section, you can also specify the folder location for the website. Click the Next button. It will take care of everything. And we are done.

Final Thought

If you do not want a messy and complicated way to setup WordPress and virtualhost, ServerPress could be a good alternative. With it, you can have it up and running in only a few clicks. Give it a try.